/* ============================================================
   STELLARIA GIS — application-specific layer
   ============================================================
   Loaded AFTER the canonical Stellaria CSS files. Adds only what
   the canonical system does not already cover:

     1. The GIS shell grid (top bar / left rail / globe / right
        rail / bottom HUD).
     2. The slim icon-only side rails (gis-rail), since canonical
        .side is a wider content sidebar.
     3. The floating Active Layers window above the globe.
     4. The bottom-left "DATA LAYERS" dock handle.
     5. The catalog drawer that slides out from the dock handle.
     6. The bottom HUD telemetry strip.
     7. The floating search input over the globe.
     8. The active-tool status chip.
     9. AOI / measure overlay cards.
    10. Cesium widget overrides (hide built-in toolbar etc).

   Every value comes from canonical tokens. No raw hex, no raw
   px in spacing properties. No drop shadows. Hairline borders
   only. Focus rings inherit from base.css.
   ============================================================ */


/* === 1. APP SHELL ============================================
   3 rows: top nav (60px from canonical .nav), main area (flex),
   bottom HUD (32px tight strip). The middle area is itself a
   grid: left rail / globe / right rail.
   ============================================================ */

.gis-app {
  display: grid;
  grid-template-rows: 46px 1fr 28px;
  height: 100vh;
  overflow: hidden;
  background: var(--c-bg);
}

.gis-main {
  display: grid;
  grid-template-columns: 42px 1fr;
  min-height: 0;
  position: relative;
}


/* === 1.5 TOPBAR =============================================
   Purpose-built header for a webapp shell (NOT the canonical
   .nav, which is sticky and gutter-padded for marketing pages).
   Three columns: left placeholder, centered logo, right user
   block. Logo dominates visually; chrome text is subordinate.
   ============================================================ */

.gis-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 46px;
  padding: 0 var(--sp-2);
  background: var(--c-surface-2);
  border-bottom: var(--border-1) solid var(--c-border);
  z-index: var(--z-nav);
}
.gis-topbar__left { /* reserved for future eyebrow / breadcrumb */ }
.gis-topbar__center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gis-topbar__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  outline: none;
}
.gis-topbar__brand:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}
.gis-topbar__logo {
  display: block;
  height: 36px;
  width: auto;
}
.gis-topbar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}
.gis-topbar__user {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.gis-topbar__avatar {
  width: 24px;  /* allow-raw — circular avatar */
  height: 24px;
  border-radius: 50%;
  background: var(--c-elev-3);
  border: var(--border-1) solid var(--c-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 10px;  /* allow-raw — micro-caption inside avatar */
  color: var(--c-white);
}
.gis-topbar__username {
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — chrome uniform */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-dim);
}
.gis-topbar__signout {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-0_5);
  padding: 6px 10px;  /* allow-raw — small chrome button */
  background: transparent;
  border: var(--border-1) solid var(--c-border);
  color: var(--c-fg-dim);
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — chrome micro-label */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  transition:
    color var(--dur-fast) var(--ease-tactical),
    border-color var(--dur-fast) var(--ease-tactical);
}
.gis-topbar__signout:hover {
  color: var(--c-white);
  border-color: var(--c-white);
}
.gis-topbar__signout:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.gis-topbar__signout svg {
  width: 12px;  /* allow-raw */
  height: 12px;
}

@media (max-width: 720px) {
  .gis-topbar__username { display: none; }
  .gis-topbar__signout span { display: none; }
  .gis-topbar__signout { padding: 6px 8px; }  /* allow-raw */
}


/* === 2. ICON-ONLY SIDE RAIL (gis-rail) =======================
   The canonical .side is a wide content panel. We need a slim
   48-56px vertical icon rail for primary nav + tools. Built
   following the same tokens (--c-surface-2, hairline border).
   ============================================================ */

.gis-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0_5);
  padding: var(--sp-1);
  background: var(--c-surface-2);
  border-right: var(--border-1) solid var(--c-border);
  overflow: hidden;
}
.gis-rail--right {
  /* Truly floating: absolute over the globe, NOT in the grid flow.
     Vertically centered on the right edge. Each button has its own
     background fill so it reads against any basemap. */
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 0;
  gap: var(--sp-1);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
}
/* On the floating right rail, every icon gets a subtle backing so it
   reads against any basemap. Left rail keeps its grouped look. */
.gis-rail--right .gis-rail__btn {
  background: var(--c-elev-2);
  border-color: var(--c-border);
}
.gis-rail--right .gis-rail__btn:hover {
  background: var(--c-elev-3);
  border-color: var(--c-border-h);
}
.gis-rail--right .gis-rail__btn[aria-current="true"],
.gis-rail--right .gis-rail__btn[data-active="true"] {
  background: var(--c-accent-wash);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* Icon rail button: a tighter .btn--icon variant. Inherits the
   focus ring from base.css. Active state uses accent wash. */
.gis-rail__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: var(--border-1) solid transparent;
  color: var(--c-fg-dim);
  cursor: pointer;
  position: relative;
  transition:
    background var(--dur-fast) var(--ease-tactical),
    border-color var(--dur-fast) var(--ease-tactical),
    color var(--dur-fast) var(--ease-tactical);
}
.gis-rail__btn:hover {
  background: var(--c-elev-2);
  color: var(--c-white);
  border-color: var(--c-border);
}
.gis-rail__btn[aria-current="true"],
.gis-rail__btn[data-active="true"] {
  background: var(--c-accent-wash);
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.gis-rail__btn[disabled] {
  cursor: not-allowed;
  opacity: 0.4;
}
.gis-rail__btn[disabled]:hover {
  background: transparent;
  border-color: transparent;
  color: var(--c-fg-dim);
}
.gis-rail__btn svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  stroke-width: var(--icon-stroke);
}

/* Tooltip-style label on hover (CSS-only, no JS). Uses mono
   caps in the institutional eyebrow style. */
.gis-rail__btn::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + var(--sp-1));
  top: 50%;
  transform: translateY(-50%);
  padding: var(--sp-0_5) var(--sp-1);
  background: var(--c-elev-3);
  border: var(--border-1) solid var(--c-border);
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — eyebrow micro-label */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-white);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-tactical);
  z-index: var(--z-overlay);
}
.gis-rail--right .gis-rail__btn::after {
  left: auto;
  right: calc(100% + var(--sp-1));
}
.gis-rail__btn:hover::after,
.gis-rail__btn:focus-visible::after {
  opacity: 1;
}

/* "Coming soon" dot on disabled tool buttons */
.gis-rail__btn[data-soon]::before {
  content: "";
  position: absolute;
  top: 4px;  /* allow-raw — visually small dot */
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-warn);
}


/* === 3. GLOBE WRAPPER + CESIUM OVERRIDES =====================
   Cesium ships its own UI widgets; we hide the ones we replace
   with our own controls. The .gis-globe wrapper is the
   positioning context for all floating panels.
   ============================================================ */

.gis-globe {
  position: relative;
  overflow: hidden;
  background: var(--c-bg);
  min-width: 0;
}

#cesiumContainer {
  position: absolute;
  inset: 0;
  background: var(--c-bg);
}

.cesium-viewer-toolbar,
.cesium-viewer-animationContainer,
.cesium-viewer-timelineContainer,
.cesium-viewer-bottom,
.cesium-viewer-fullscreenContainer,
.cesium-viewer-vrContainer { display: none !important; }
.cesium-widget-credits { display: none !important; }


/* === 4. FLOATING SEARCH OVER GLOBE ===========================
   Sits top-left, above all globe content. Uses canonical .input
   styling but wrapped with an icon prefix using .input-group
   semantics.
   ============================================================ */

.gis-search {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-overlay);
  width: 360px;
  max-width: calc(50% - var(--sp-3));
}
.gis-search__wrap {
  position: relative;
}
.gis-search__input {
  /* Inherit all from canonical .input; tighten for the floating context. */
  min-height: 32px;
  padding-left: 32px;
  font-size: 11px;  /* allow-raw — chrome uniform */
}
.gis-search__icon {
  position: absolute;
  left: var(--sp-1);
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-fg-muted);
  pointer-events: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
}
.gis-search__suffix {
  position: absolute;
  right: var(--sp-1);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — chrome uniform */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-muted);
  pointer-events: none;
}


/* === 5. ACTIVE TOOL STATUS CHIP =============================== */

.gis-tool-status {
  margin-top: var(--sp-1);
  display: none;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-0_5) var(--sp-1);
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-accent);
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-white);
}
.gis-tool-status[data-active="true"] {
  display: flex;
}
.gis-tool-status__cancel {
  margin-left: auto;
  background: transparent;
  border: var(--border-1) solid var(--c-border);
  color: var(--c-fg-dim);
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  padding: 2px 6px; /* allow-raw — compact pill */
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-tactical),
              border-color var(--dur-fast) var(--ease-tactical);
}
.gis-tool-status__cancel:hover {
  color: var(--c-white);
  border-color: var(--c-white);
}


/* === 6. ACTIVE LAYERS FLOATING WINDOW ========================
   The QGIS-style operational layer manager. Floats top-right
   over the globe. Toggled from the left-rail Layers button.
   Built using the elevation-ladder tint pattern, no shadows.
   ============================================================ */

.gis-layers {
  position: absolute;
  top: var(--sp-2);
  right: 60px;  /* allow-raw — clears the floating right rail (32px button + 16px gap + 12px breathing) */
  z-index: var(--z-overlay);
  width: 320px;
  max-height: calc(100% - var(--sp-4));
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.gis-layers[data-open="true"] {
  display: flex;
}

.gis-layers__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-0_5) var(--sp-2);
  border-bottom: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  min-height: 36px;
}
.gis-layers__title {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — panel title micro-caption */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  font-weight: var(--fw-regular);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.gis-layers__count {
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw */
  color: var(--c-accent);
}
.gis-layers__actions {
  display: flex;
  align-items: center;
  gap: 4px; /* allow-raw — tight icon row */
}
.gis-layers__iconbtn {
  background: transparent;
  border: 0;
  color: var(--c-fg-dim);
  cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-fast) var(--ease-tactical);
}
.gis-layers__iconbtn:hover { color: var(--c-white); }
.gis-layers__iconbtn svg {
  width: 12px;  /* allow-raw — small panel icon */
  height: 12px;
  stroke-width: var(--icon-stroke);
}

.gis-layers__body {
  overflow-y: auto;
  padding: var(--sp-1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-0_5);
}


/* === 7. LAYER ROW (QGIS-style tree row) ======================
   Each row in the active layers panel. Uses the canonical
   .tree__row pattern but with raster swatch and drag handle.
   ============================================================ */

.gis-layer {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto;
  gap: var(--sp-1);
  align-items: center;
  padding: var(--sp-0_5) var(--sp-1);
  border: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  color: var(--c-fg-dim);
  cursor: pointer;
  min-height: 36px;
  transition:
    background var(--dur-fast) var(--ease-tactical),
    border-color var(--dur-fast) var(--ease-tactical),
    color var(--dur-fast) var(--ease-tactical),
    opacity var(--dur-fast) var(--ease-tactical);
}
.gis-layer:hover {
  background: var(--c-elev-2);
  border-color: var(--c-border-h);
  color: var(--c-white);
}
.gis-layer[aria-current="true"] {
  border-color: var(--c-accent);
  background: var(--c-accent-wash);
  color: var(--c-white);
}
.gis-layer.gis-layer--dragging { opacity: 0.4; }
.gis-layer.gis-layer--drop-target {
  border-color: var(--c-accent);
  border-style: dashed;
}

.gis-layer__drag {
  cursor: grab;
  color: var(--c-fg-muted);
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — chrome uniform */
  line-height: 1;
  user-select: none;
}
.gis-layer__drag:active { cursor: grabbing; }
.gis-layer__drag:hover { color: var(--c-white); }

.gis-layer__visible {
  width: 14px;
  height: 14px;
  accent-color: var(--c-accent);
}

.gis-layer__symbol {
  width: 12px;  /* allow-raw — symbol swatch */
  height: 12px;
  border: var(--border-1) solid var(--c-border);
  background: var(--c-fg-muted);
}
.gis-layer__symbol--raster { background: var(--c-accent); }
.gis-layer__symbol--vector { background: var(--c-success); }
.gis-layer__symbol--ai     { background: var(--c-conf-mid); }

/* Layer type indicator: raster shows a tiles icon, vector shows its color. */
.gis-layer__type {
  width: 16px;  /* allow-raw — type icon box */
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.gis-layer__type--vector {
  border: var(--border-1) solid var(--c-border);
}
.gis-layer__type--ai {
  border: var(--border-1) solid var(--c-border);
  background: var(--c-conf-mid);
}
.gis-layer__type--raster { color: var(--c-accent); }
.gis-layer__type--raster svg {
  width: 16px;  /* allow-raw — type icon */
  height: 16px;
}

.gis-layer__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gis-layer__name {
  font-size: 11px; /* allow-raw — chrome uniform */
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gis-layer__meta {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — caption micro-text */
  color: var(--c-fg-muted);
}
.gis-layer__remove {
  background: transparent;
  border: 0;
  color: var(--c-fg-muted);
  cursor: pointer;
  padding: var(--sp-0_5);
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — chrome uniform */
  line-height: 1;
  transition: color var(--dur-fast) var(--ease-tactical);
}
.gis-layer__remove:hover { color: var(--c-danger); }

.gis-layer__props {
  background: transparent;
  border: 0;
  color: var(--c-fg-muted);
  cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-fast) var(--ease-tactical);
}
.gis-layer__props:hover { color: var(--c-white); }
.gis-layer__props svg {
  width: 13px;  /* allow-raw — small panel icon */
  height: 13px;
  stroke-width: var(--icon-stroke);
}


/* === LAYER PROPERTIES POPUP + COLOR WHEEL (Phase 13) =========
   Floating QGIS-style styling editor opened from a layer row.
   Raster: band -> R/G/B/A mapping + opacity. Vector: fill/outline
   colors + line width + point size. Colors use the custom wheel.
   ============================================================ */
.gis-lprops {
  position: fixed;
  z-index: var(--z-overlay);
  width: 244px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  display: none;
  flex-direction: column;
}
.gis-lprops[data-open="true"] { display: flex; }
.gis-lprops__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-0_5) var(--sp-2);
  border-bottom: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  min-height: 36px;
  position: sticky;
  top: 0;
}
.gis-lprops__title {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — panel title micro-caption */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  font-weight: var(--fw-regular);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gis-lprops__close {
  background: transparent;
  border: 0;
  color: var(--c-fg-dim);
  cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
}
.gis-lprops__close:hover { color: var(--c-white); }
.gis-lprops__close svg {
  width: 12px;  /* allow-raw — small panel icon */
  height: 12px;
  stroke-width: var(--icon-stroke);
}
.gis-lprops__body {
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.gis-lprops__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.gis-lprops__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
}
.gis-lprops__label {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — chrome uniform */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-dim);
}
.gis-lprops__note {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — caption micro-text */
  color: var(--c-fg-dim);
  line-height: 1.5;
  margin: 0;
}
.gis-lprops__select {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — chrome uniform */
  color: var(--c-white);
  background: var(--c-elev-1);
  border: var(--border-1) solid var(--c-border);
  padding: 2px 4px;  /* allow-raw — compact select */
  max-width: 124px;
}
.gis-lprops__sliderctl {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.gis-lprops__sliderctl input[type="range"] { accent-color: var(--c-accent); width: 96px; }
.gis-lprops__val {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — chrome uniform */
  color: var(--c-accent);
  min-width: 34px;
  text-align: right;
}
.gis-swatch {
  width: 28px;
  height: 18px;
  border: var(--border-1) solid var(--c-border);
  cursor: pointer;
  padding: 0;
}
.gis-swatch:hover { border-color: var(--c-white); }

.gis-cwheel {
  position: fixed;
  z-index: calc(var(--z-overlay) + 10);
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  padding: var(--sp-2);
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  width: 184px;
}
.gis-cwheel[data-open="true"] { display: flex; }
.gis-cwheel__disc {
  width: 160px;  /* allow-raw — fixed color wheel size */
  height: 160px;
  cursor: crosshair;
  align-self: center;
}
.gis-cwheel__row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.gis-cwheel__vlabel {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — chrome uniform */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-dim);
}
.gis-cwheel__val { flex: 1; accent-color: var(--c-accent); }
.gis-cwheel__preview {
  width: 24px;
  height: 18px;
  border: var(--border-1) solid var(--c-border);
  flex: 0 0 auto;
}
.gis-cwheel__hex {
  flex: 1;
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — chrome uniform */
  color: var(--c-white);
  background: var(--c-elev-1);
  border: var(--border-1) solid var(--c-border);
  padding: 2px 6px;  /* allow-raw — compact input */
  text-transform: uppercase;
  min-width: 0;
}


/* === 8. EMPTY STATE in layers panel ========================== */

.gis-layers__empty {
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  border: var(--border-1) dashed var(--c-border);
  color: var(--c-fg-muted);
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — consistent placeholder size */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}


/* === 9. DOCK HANDLE (bottom-left horizontal tab) =============
   Always-visible handle at the bottom-left of the globe. Click
   opens the catalog drawer. Sized as a proper hit target with
   horizontal icon + label.
   ============================================================ */

.gis-dock {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-overlay);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  cursor: pointer;
  user-select: none;
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — chrome uniform */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-white);
  min-height: 32px;
  transition:
    background var(--dur-fast) var(--ease-tactical),
    color var(--dur-fast) var(--ease-tactical);
}
.gis-dock:hover {
  background: var(--c-elev-3);
}
.gis-dock[data-open="true"] {
  display: none;
}
.gis-dock svg {
  width: 14px;  /* allow-raw — small handle icon */
  height: 14px;
}


/* === 10. CATALOG DRAWER ======================================
   Bottom-left slide-out panel. 360px wide, generous internal
   padding so basemap options and toggles can breathe.
   ============================================================ */

.gis-catalog {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-overlay);
  width: 360px;
  max-width: calc(100% - var(--sp-4));
  max-height: calc(100% - var(--sp-4));
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.gis-catalog[data-open="true"] {
  display: flex;
}

.gis-catalog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-0_5) var(--sp-2);
  border-bottom: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  min-height: 36px;
}
.gis-catalog__title {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — panel title micro-caption */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  font-weight: var(--fw-regular);
}
.gis-catalog__close {
  background: transparent;
  border: 0;
  color: var(--c-fg-dim);
  cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
  transition: color var(--dur-fast) var(--ease-tactical);
}
.gis-catalog__close:hover { color: var(--c-white); }
.gis-catalog__close svg {
  width: 12px;  /* allow-raw */
  height: 12px;
}

.gis-catalog__body {
  overflow-y: auto;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Catalog section (collapsible group inside the drawer) */
.gis-section {
  display: flex;
  flex-direction: column;
}
.gis-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 var(--sp-1) 0;
  cursor: pointer;
  user-select: none;
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — chrome uniform */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-dim);
  border-bottom: var(--border-1) solid var(--c-border);
  transition: color var(--dur-fast) var(--ease-tactical);
}
.gis-section__head:hover { color: var(--c-white); }
.gis-section__chevron {
  font-size: 11px; /* allow-raw — chrome uniform */
  transition: transform var(--dur-fast) var(--ease-tactical);
}
.gis-section[data-expanded="false"] .gis-section__chevron {
  transform: rotate(-90deg);
}
.gis-section__body {
  padding-top: var(--sp-1);
  display: flex;
  flex-direction: column;
  gap: 6px;  /* allow-raw — tight stack */
}
.gis-section[data-expanded="false"] .gis-section__body {
  display: none;
}
.gis-section__soon {
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  border: var(--border-1) dashed var(--c-border);
  color: var(--c-fg-muted);
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — consistent placeholder size */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

/* Basemap option row — radio-like, but visually a tile */
.gis-basemap-option {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px 10px;  /* allow-raw — tight row */
  border: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  cursor: pointer;
  min-height: 30px;
  font-size: 11px; /* allow-raw — chrome uniform */
  color: var(--c-fg-dim);
  transition:
    background var(--dur-fast) var(--ease-tactical),
    border-color var(--dur-fast) var(--ease-tactical),
    color var(--dur-fast) var(--ease-tactical);
}
.gis-basemap-option:hover {
  border-color: var(--c-border-h);
  color: var(--c-white);
}
.gis-basemap-option input { accent-color: var(--c-accent); margin: 0; }
.gis-basemap-option:has(input:checked) {
  border-color: var(--c-accent);
  background: var(--c-accent-wash);
  color: var(--c-white);
}

/* Toggle row for terrain / atmosphere / scene mode */
.gis-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;  /* allow-raw */
  border: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  min-height: 30px;
}
.gis-toggle-row label {
  font-size: 11px; /* allow-raw — chrome uniform */
  color: var(--c-fg-dim);
  cursor: pointer;
}
.gis-toggle-row input {
  accent-color: var(--c-accent);
}


/* === 11. BOTTOM HUD STRIP ====================================
   Thin telemetry strip across the bottom. LAT / LON / ALT / MODE.
   ============================================================ */

.gis-hud {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-2);
  border-top: var(--border-1) solid var(--c-border);
  background: var(--c-surface-2);
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — chrome uniform */
  color: var(--c-fg-dim);
  overflow-x: auto;
  white-space: nowrap;
}
.gis-hud__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.gis-hud__label {
  font-size: 11px;  /* allow-raw — eyebrow caption */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.gis-hud__value {
  color: var(--c-white);
  font-weight: var(--fw-medium);
}
.gis-hud__sep {
  width: 1px;
  height: 12px;  /* allow-raw — hairline separator */
  background: var(--c-border);
}


/* === 12. CESIUM SWIPE-COMPARE HANDLE ==========================
   We use Cesium's SplitDirection imagery split. The DOM-side
   handle is a vertical line + grip puck the user drags.
   ============================================================ */

.gis-swipe {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;  /* allow-raw — visible line width */
  background: var(--c-accent);
  z-index: var(--z-overlay);
  cursor: ew-resize;
  display: none;
  user-select: none;
}
.gis-swipe[data-active="true"] { display: block; }
body.gis-swipe-dragging { user-select: none; cursor: ew-resize; }
body.gis-swipe-dragging * { cursor: ew-resize !important; }
.gis-swipe::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;  /* allow-raw — puck size */
  height: 36px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 2px solid var(--c-white);  /* allow-raw — visible ring */
}
.gis-swipe::after {
  content: "‹›";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c-white);
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — chrome uniform */
  letter-spacing: -0.1em;
  pointer-events: none;
  font-weight: var(--fw-semibold);
}


/* === 13. DROPZONE OVERLAY (file drag) ========================
   Big visual that appears when dragging a file over the window.
   ============================================================ */

.gis-dropzone {
  position: absolute;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  background: color-mix(in oklch, var(--c-bg) 85%, transparent);
  border: 2px dashed var(--c-accent);  /* allow-raw — visible dash */
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.gis-dropzone[data-active="true"] { display: flex; }
.gis-dropzone__inner {
  text-align: center;
  padding: var(--sp-4);
}
.gis-dropzone__title {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  color: var(--c-white);
  margin: 0 0 var(--sp-1) 0;
}
.gis-dropzone__sub {
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — chrome uniform */
  color: var(--c-fg-muted);
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  margin: 0;
}


/* === 14. TOAST POSITIONING (canonical .toast inside this region) === */

.gis-toast-region {
  position: absolute;
  top: var(--sp-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}


/* === 15. CROSSHAIR cursor for active draw tools ============== */

.gis-globe[data-tool="aoi-rect"],
.gis-globe[data-tool="aoi-rect"] canvas,
.gis-globe[data-tool="aoi-poly"],
.gis-globe[data-tool="aoi-poly"] canvas,
.gis-globe[data-tool="measure"],
.gis-globe[data-tool="measure"] canvas {
  cursor: crosshair !important;
}


/* === 16. SAVED AOIS PANEL ====================================
   Floats top-right (same slot as Active Layers — they are
   mutually exclusive). Each saved AOI is a small card with a
   thumbnail and metadata.
   ============================================================ */

.gis-aois {
  position: absolute;
  top: var(--sp-2);
  right: 60px;  /* allow-raw — clears the floating right rail */
  z-index: var(--z-overlay);
  width: 340px;
  max-height: calc(100% - var(--sp-4));
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.gis-aois[data-open="true"] {
  display: flex;
}

.gis-aois__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-0_5) var(--sp-2);
  border-bottom: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  min-height: 36px;
}
.gis-aois__title {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — panel title micro-caption */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  font-weight: var(--fw-regular);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.gis-aois__count {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw */
  color: var(--c-accent);
}
.gis-aois__actions {
  display: flex;
  align-items: center;
  gap: 4px;  /* allow-raw */
}
.gis-aois__iconbtn {
  background: transparent;
  border: 0;
  color: var(--c-fg-dim);
  cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
  transition: color var(--dur-fast) var(--ease-tactical);
}
.gis-aois__iconbtn:hover { color: var(--c-white); }
.gis-aois__iconbtn svg {
  width: 12px;  /* allow-raw */
  height: 12px;
  stroke-width: var(--icon-stroke);
}

.gis-aois__body {
  overflow-y: auto;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.gis-aois__empty {
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  border: var(--border-1) dashed var(--c-border);
  color: var(--c-fg-muted);
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw — consistent placeholder size */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.gis-aois__attrib {
  margin: var(--sp-2) 0 0 0;
  padding-top: var(--sp-1);
  border-top: var(--border-1) solid var(--c-border);
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-muted);
  text-align: center;
}

/* AOI card — grid: thumbnail | body | actions */
.gis-aoi {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--sp-2);
  padding: var(--sp-1);
  border: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-tactical),
    border-color var(--dur-fast) var(--ease-tactical);
}
.gis-aoi:hover {
  background: var(--c-elev-2);
  border-color: var(--c-border-h);
}

.gis-aoi__thumb {
  width: 64px;  /* allow-raw — fixed thumbnail size */
  height: 64px;
  background: var(--c-bg-3);
  border: var(--border-1) solid var(--c-border);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.gis-aoi__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;  /* allow-raw */
}
.gis-aoi__name {
  font-size: 11px; /* allow-raw — chrome uniform */
  color: var(--c-white);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gis-aoi__location {
  font-size: 11px;  /* allow-raw — secondary caption */
  color: var(--c-fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gis-aoi__meta {
  font-family: var(--f-mono);
  font-size: 11px;  /* allow-raw */
  color: var(--c-fg-muted);
  letter-spacing: 0.04em;
}

.gis-aoi__actions {
  display: flex;
  flex-direction: column;
  gap: 2px;  /* allow-raw */
  align-self: center;
}
.gis-aoi__actionbtn {
  background: transparent;
  border: 0;
  color: var(--c-fg-muted);
  cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-fast) var(--ease-tactical);
}
.gis-aoi__actionbtn:hover { color: var(--c-white); }
.gis-aoi__actionbtn--remove:hover { color: var(--c-danger); }
.gis-aoi__actionbtn svg {
  width: 14px;  /* allow-raw */
  height: 14px;
  stroke-width: var(--icon-stroke);
}


/* === 17. SAVE AOI MODAL ======================================
   Centered modal that appears after the user completes an AOI.
   Backdrop fades in over the entire app; the modal itself is a
   flat panel with hairline border.
   ============================================================ */

.gis-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  background: color-mix(in oklch, var(--c-bg) 78%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.gis-modal-backdrop[data-open="true"] {
  display: flex;
}

.gis-modal {
  width: 100%;
  max-width: 480px;
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
  max-height: 90vh;
  overflow: hidden;
}

.gis-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  min-height: 48px;
}
.gis-modal__title {
  font-family: var(--f-display);
  font-size: 11px; /* allow-raw — chrome uniform */
  font-weight: var(--fw-medium);
  color: var(--c-white);
  margin: 0;
}
.gis-modal__close {
  background: transparent;
  border: 0;
  color: var(--c-fg-dim);
  cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
  transition: color var(--dur-fast) var(--ease-tactical);
}
.gis-modal__close:hover { color: var(--c-white); }
.gis-modal__close svg { width: var(--icon-sm); height: var(--icon-sm); }

.gis-modal__body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow-y: auto;
}

.gis-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.gis-modal__label {
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — chrome uniform */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-dim);
}

.gis-modal__meta {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--sp-3);
  row-gap: var(--sp-1);
  padding: var(--sp-2);
  background: var(--c-elev-1);
  border: var(--border-1) solid var(--c-border);
}
.gis-modal__metarow {
  display: contents;
}
.gis-modal__meta dt {
  font-family: var(--f-mono);
  font-size: 11px; /* allow-raw — chrome uniform */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-muted);
  align-self: center;
}
.gis-modal__meta dd {
  font-size: 11px; /* allow-raw — chrome uniform */
  color: var(--c-white);
  margin: 0;
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gis-modal__foot {
  padding: var(--sp-2) var(--sp-3);
  border-top: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-1);
}


/* ============================================================
   === 18. FINAL UNIFORMITY OVERRIDE — Phase 11 ===============
   Every piece of chrome text in the application is forced to
   11px here, with !important, to defeat any specificity
   conflicts coming from the canonical Stellaria components.css.
   This is the source of truth for chrome text sizing.
   ============================================================ */

.gis-app .gis-dock,
.gis-app .gis-dock span,
.gis-app .gis-search__input,
.gis-app .gis-search__input::placeholder,
.gis-app .gis-search__suffix,
.gis-app .gis-topbar__username,
.gis-app .gis-topbar__signout,
.gis-app .gis-topbar__signout span,
.gis-app .gis-hud span,
.gis-app .gis-hud strong,
.gis-app .gis-layers__title,
.gis-app .gis-layers__empty,
.gis-app .gis-layer__name,
.gis-app .gis-layer__meta,
.gis-app .gis-aois__title,
.gis-app .gis-aois__empty,
.gis-app .gis-aois__attrib,
.gis-app .gis-aoi__name,
.gis-app .gis-aoi__location,
.gis-app .gis-aoi__meta,
.gis-app .gis-catalog__title,
.gis-app .gis-section__head,
.gis-app .gis-section__head span,
.gis-app .gis-section__soon,
.gis-app .gis-basemap-option,
.gis-app .gis-basemap-option span,
.gis-app .gis-toggle-row,
.gis-app .gis-toggle-row label,
.gis-app .gis-tool-status,
.gis-app .gis-tool-status__label,
.gis-app .gis-tool-status__cancel,
.gis-app .gis-modal__label,
.gis-app .gis-modal__meta dt,
.gis-app .gis-modal__meta dd,
.gis-app .gis-toast__msg {
  font-size: 11px !important;
}

/* Counter chip (the number next to "ACTIVE LAYERS" and "SAVED AOIS")
   stays a bit smaller as an intentional eyebrow accent. */
.gis-app .gis-layers__count,
.gis-app .gis-aois__count {
  font-size: 10px !important;
}

/* Avatar single-letter stays at 10px (it's inside a 24px circle) */
.gis-app .gis-topbar__avatar {
  font-size: 10px !important;
}

/* ============================================================
   === 19. DOCK HANDLE TIGHTENING (matches panel header size) ==
   The "DATA LAYERS" handle was visually larger than the panel
   header it opens. Tighten padding so they look identical.
   ============================================================ */
.gis-dock {
  padding: 4px 10px !important;  /* allow-raw — same visual mass as panel headers */
  min-height: 28px !important;
  gap: 6px !important;  /* allow-raw */
}
.gis-dock svg {
  width: 12px !important;  /* allow-raw — small handle icon */
  height: 12px !important;
}

/* ============================================================
   === 20. SEARCH BAR "SOON" SUFFIX =============================
   The "SOON" text at the right of the search bar was visually
   larger than the placeholder text. Force it to match.
   ============================================================ */
.gis-search__suffix {
  font-size: 11px !important;
  font-weight: var(--fw-regular) !important;
  letter-spacing: var(--ls-mono-cap);
}


/* ============================================================
   === 21. VESSEL & PORT PANEL — Phase 12 ======================
   Bottom-left panel, mutually exclusive with the Data Layers
   catalog. Opened by the helm icon on the left rail. Holds the
   AOI selector, filter controls, and detect button.
   ============================================================ */

.gis-vpanel {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-overlay);
  width: 380px;
  max-width: calc(100% - var(--sp-4));
  max-height: calc(100% - var(--sp-4));
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.gis-vpanel[data-open="true"] {
  display: flex;
}

.gis-vpanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-0_5) var(--sp-2);
  border-bottom: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  min-height: 36px;
}
.gis-vpanel__title {
  font-family: var(--f-mono);
  font-size: 11px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  font-weight: var(--fw-regular);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.gis-vpanel__close {
  background: transparent;
  border: 0;
  color: var(--c-fg-dim);
  cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
  transition: color var(--dur-fast) var(--ease-tactical);
}
.gis-vpanel__close:hover { color: var(--c-white); }
.gis-vpanel__close svg { width: 12px; height: 12px; }  /* allow-raw */

.gis-vpanel__body {
  overflow-y: auto;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.gis-vpanel__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.gis-vpanel__label {
  font-family: var(--f-mono);
  font-size: 11px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-dim);
}

.gis-vpanel__select {
  background: var(--c-elev-1);
  border: var(--border-1) solid var(--c-border);
  color: var(--c-white);
  padding: 6px 8px;  /* allow-raw */
  font-family: var(--f-mono);
  font-size: 11px;
  width: 100%;
}

/* Type filter checkbox grid — 2 columns of 18 rows */
.gis-vpanel__types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;  /* allow-raw */
  max-height: 240px;
  overflow-y: auto;
  border: var(--border-1) solid var(--c-border);
  padding: var(--sp-1);
  background: var(--c-elev-1);
}
.gis-vpanel__type {
  display: flex;
  align-items: center;
  gap: 6px;  /* allow-raw */
  padding: 4px 6px;  /* allow-raw */
  cursor: pointer;
  font-size: 11px;
  color: var(--c-fg-dim);
  border-radius: 2px;
  user-select: none;
}
.gis-vpanel__type:hover { color: var(--c-white); background: var(--c-elev-2); }
.gis-vpanel__type input { accent-color: var(--c-accent); margin: 0; }
.gis-vpanel__type-swatch {
  width: 10px;  /* allow-raw */
  height: 10px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
}

.gis-vpanel__stats {
  background: var(--c-elev-1);
  border: var(--border-1) solid var(--c-border);
  padding: var(--sp-1) var(--sp-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-fg-dim);
}
.gis-vpanel__stats strong {
  color: var(--c-accent);
  font-weight: var(--fw-medium);
}

.gis-vpanel__status {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-fg-muted);
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  text-align: center;
  padding: var(--sp-2);
  border: var(--border-1) dashed var(--c-border);
}
.gis-vpanel__status[data-kind="error"] {
  color: var(--c-danger);
  border-color: var(--c-danger);
}
.gis-vpanel__status[data-kind="loading"] {
  color: var(--c-accent);
}


/* ============================================================
   === 22. VESSEL DETAIL POPUP =================================
   Floating card that appears when a vessel is clicked. Positioned
   absolutely; closes on X click or when another vessel is selected.
   ============================================================ */

.gis-vdetail {
  position: absolute;
  top: var(--sp-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-overlay);
  width: 320px;  /* allow-raw */
  max-height: calc(100% - var(--sp-4));
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.gis-vdetail[data-open="true"] { display: flex; }
.gis-vdetail[data-anchored="true"] {
  /* Anchored mode: JS sets left/top inline; we reset the centering transform */
  top: auto;
  left: auto;
  transform: none;
  max-height: 60vh;  /* allow-raw - smaller when anchored */
  width: 320px;     /* allow-raw */
}

.gis-vdetail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1) var(--sp-2);
  border-bottom: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  min-height: 36px;
}
.gis-vdetail__title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  flex: 1;
}
.gis-vdetail__swatch {
  width: 10px;  /* allow-raw */
  height: 10px;
  flex-shrink: 0;
}
.gis-vdetail__title {
  font-family: var(--f-mono);
  font-size: 11px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gis-vdetail__close {
  background: transparent;
  border: 0;
  color: var(--c-fg-dim);
  cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
}
.gis-vdetail__close:hover { color: var(--c-white); }
.gis-vdetail__close svg { width: 12px; height: 12px; }  /* allow-raw */

.gis-vdetail__body {
  overflow-y: auto;
  padding: var(--sp-2);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--sp-2);
  row-gap: 6px;  /* allow-raw */
}
.gis-vdetail__body dt {
  font-family: var(--f-mono);
  font-size: 10px !important;  /* slightly smaller for labels */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-muted);
  margin: 0;
}
.gis-vdetail__body dd {
  font-size: 11px !important;
  color: var(--c-white);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ============================================================
   === 23. WIDGETS ZONE (right side, floating) =================
   Fixed-position widget stack on the right edge of the globe.
   When this zone is "active" (any widget shown), the floating
   right rail shifts further left to make room.
   ============================================================ */

.gis-widgets {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  bottom: var(--sp-2);
  width: 280px;
  z-index: var(--z-overlay);
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  pointer-events: none;  /* let clicks through unless on a widget */
}
.gis-widgets[data-active="true"] { display: flex; }
.gis-widgets > * { pointer-events: auto; }

/* When widgets are active, push the floating right rail further left
   so it doesn't overlap. 280 (widget zone) + 8 (gap) + 8 (rail offset) = 296. */
.gis-main[data-widgets-active="true"] .gis-rail--right {
  right: 296px;  /* allow-raw — widget zone width + gap */
}

/* When widgets are active, the right-aligned panels (Active Layers,
   Saved AOIs) also need to clear them. */
.gis-main[data-widgets-active="true"] .gis-layers,
.gis-main[data-widgets-active="true"] .gis-aois {
  right: 344px !important;  /* allow-raw — widget zone + rail + gap */
}

.gis-widget {
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.gis-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-0_5) var(--sp-2);
  background: var(--c-elev-1);
  border-bottom: var(--border-1) solid var(--c-border);
  min-height: 32px;
}
.gis-widget__title {
  font-family: var(--f-mono);
  font-size: 11px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  font-weight: var(--fw-regular);
}
.gis-widget__close {
  background: transparent;
  border: 0;
  color: var(--c-fg-muted);
  cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
}
.gis-widget__close:hover { color: var(--c-white); }
.gis-widget__close svg { width: 10px; height: 10px; }  /* allow-raw */

.gis-widget__body {
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.gis-widget__bignum {
  font-family: var(--f-mono);
  font-size: 32px;  /* allow-raw — the one place big text is allowed: the headline number */
  font-weight: var(--fw-medium);
  color: var(--c-white);
  letter-spacing: -0.02em;
  line-height: 1;
}
.gis-widget__sub {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-fg-muted);
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
}
.gis-widget__placeholder {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-fg-muted);
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
  border: var(--border-1) dashed var(--c-border);
  line-height: 1.5;
}

/* Type-pie widget: legend rows */
.gis-widget__legend {
  display: flex;
  flex-direction: column;
  gap: 4px;  /* allow-raw */
  max-height: 200px;
  overflow-y: auto;
}
.gis-widget__legend-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 6px;  /* allow-raw */
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;  /* slightly smaller for dense legend */
  color: var(--c-fg-dim);
}
.gis-widget__legend-swatch {
  width: 10px;  /* allow-raw */
  height: 10px;
  flex-shrink: 0;
}
.gis-widget__legend-count {
  color: var(--c-white);
}

/* Type-pie SVG circle */
.gis-widget__pie {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gis-widget__pie svg {
  width: 120px;  /* allow-raw — fixed pie size */
  height: 120px;
}


/* ============================================================
   === 24. WIDGETS PANEL TOGGLE (gear-like button) =============
   Goes in the topbar next to sign-out. One-click to show/hide
   the entire widgets zone.
   ============================================================ */

.gis-topbar__widgets-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-0_5);
  padding: 6px 10px;  /* allow-raw */
  background: transparent;
  border: var(--border-1) solid var(--c-border);
  color: var(--c-fg-dim);
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  transition:
    color var(--dur-fast) var(--ease-tactical),
    border-color var(--dur-fast) var(--ease-tactical);
}
.gis-topbar__widgets-toggle:hover {
  color: var(--c-white);
  border-color: var(--c-white);
}
.gis-topbar__widgets-toggle[aria-pressed="true"] {
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.gis-topbar__widgets-toggle svg {
  width: 12px; height: 12px;  /* allow-raw */
}

@media (max-width: 720px) {
  .gis-topbar__widgets-toggle span { display: none; }
}


/* ============================================================
   === 25. SEARCH RESULTS DROPDOWN — Phase 12.2 ================
   Appears below the global search input when name search returns
   multiple matches. User picks one, dropdown closes, camera flies.
   ============================================================ */

.gis-search__results {
  position: absolute;
  top: calc(100% + 4px);  /* allow-raw */
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
.gis-search__results[data-open="true"] { display: block; }

.gis-search__result {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: var(--sp-1);
  align-items: center;
  padding: 8px 12px;  /* allow-raw */
  cursor: pointer;
  border-bottom: var(--border-1) solid var(--c-border);
  transition: background var(--dur-fast) var(--ease-tactical);
}
.gis-search__result:last-child { border-bottom: 0; }
.gis-search__result:hover {
  background: var(--c-elev-3);
}
.gis-search__result-swatch {
  width: 8px;  /* allow-raw */
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gis-search__result-body {
  display: flex;
  flex-direction: column;
  gap: 2px;  /* allow-raw */
  min-width: 0;
}
.gis-search__result-name {
  font-size: 11px !important;
  color: var(--c-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gis-search__result-meta {
  font-family: var(--f-mono);
  font-size: 10px !important;
  color: var(--c-fg-muted);
  letter-spacing: 0.04em;
}
.gis-search__result-type {
  font-family: var(--f-mono);
  font-size: 10px !important;
  color: var(--c-fg-dim);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono-cap);
}
.gis-search__results-empty {
  padding: var(--sp-3);
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-muted);
}


/* ============================================================
   === 26. PORT MARKERS + PORT DETAIL POPUP — Phase 12.5 =======
   Ports use a different glyph than vessels (anchor-style) and a
   separate detail popup so vessel-vs-port stays clear.
   ============================================================ */

.gis-pdetail {
  position: absolute;
  top: var(--sp-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-overlay);
  width: 320px;  /* allow-raw */
  max-height: calc(100% - var(--sp-4));
  background: var(--c-elev-2);
  border: var(--border-1) solid var(--c-border);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.gis-pdetail[data-open="true"] { display: flex; }
.gis-pdetail[data-anchored="true"] {
  top: auto;
  left: auto;
  transform: none;
  max-height: 50vh;  /* allow-raw - smaller when anchored */
  width: 300px;     /* allow-raw */
}

.gis-pdetail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-bottom: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  min-height: 36px;
}
.gis-pdetail__title-row {
  display: flex;
  flex-direction: column;
  gap: 2px;  /* allow-raw */
  min-width: 0;
  flex: 1;
}
.gis-pdetail__title {
  font-family: var(--f-mono);
  font-size: 11px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gis-pdetail__subtitle {
  font-family: var(--f-mono);
  font-size: 9px !important;  /* allow-raw - sub label */
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gis-pdetail__close {
  background: transparent; border: 0;
  color: var(--c-fg-dim); cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
}
.gis-pdetail__close:hover { color: var(--c-white); }
.gis-pdetail__close svg { width: 12px; height: 12px; }  /* allow-raw */

.gis-pdetail__body {
  overflow-y: auto;
  padding: var(--sp-2);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--sp-2);
  row-gap: 6px;  /* allow-raw */
}
.gis-pdetail__body dt {
  font-family: var(--f-mono);
  font-size: 10px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-muted);
  margin: 0;
}
.gis-pdetail__body dd {
  font-size: 11px !important;
  color: var(--c-white);
  margin: 0;
}


/* ============================================================
   === 27. VESSEL DETAIL TABS — Phase 12.5 =====================
   The vessel detail popup gains tabs for Overview / Ownership /
   History / Casualties / Inspections / Dry Dock. Each tab fetches
   its own Datalastic endpoint lazily on first open.
   ============================================================ */

.gis-vdetail__tabs {
  display: flex;
  border-bottom: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  overflow-x: auto;
  flex-shrink: 0;
}
.gis-vdetail__tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;  /* allow-raw */
  color: var(--c-fg-muted);
  cursor: pointer;
  padding: 8px 10px;  /* allow-raw */
  font-family: var(--f-mono);
  font-size: 10px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-tactical),
              border-color var(--dur-fast) var(--ease-tactical);
}
.gis-vdetail__tab:hover { color: var(--c-white); }
.gis-vdetail__tab[aria-selected="true"] {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.gis-vdetail__tabpanel {
  display: none;
  overflow-y: auto;
  padding: var(--sp-2);
  flex: 1;
}
.gis-vdetail__tabpanel[data-active="true"] { display: block; }

.gis-vdetail__overview {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--sp-2);
  row-gap: 6px;  /* allow-raw */
}
.gis-vdetail__overview dt {
  font-family: var(--f-mono);
  font-size: 10px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-muted);
  margin: 0;
}
.gis-vdetail__overview dd {
  font-size: 11px !important;
  color: var(--c-white);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gis-vdetail__loading {
  font-family: var(--f-mono);
  font-size: 11px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-accent);
  text-align: center;
  padding: var(--sp-3);
}
.gis-vdetail__empty {
  font-family: var(--f-mono);
  font-size: 11px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-muted);
  text-align: center;
  padding: var(--sp-3);
  border: var(--border-1) dashed var(--c-border);
}
.gis-vdetail__listitem {
  border-bottom: var(--border-1) solid var(--c-border);
  padding: var(--sp-1) 0;
  font-size: 11px;
}
.gis-vdetail__listitem:last-child { border-bottom: 0; }
.gis-vdetail__listitem strong {
  display: block;
  color: var(--c-white);
  font-weight: var(--fw-medium);
  margin-bottom: 2px;  /* allow-raw */
}
.gis-vdetail__listitem span {
  display: block;
  color: var(--c-fg-dim);
  font-size: 10px;
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
}

.gis-vdetail__hist-controls {
  display: flex;
  gap: 4px;  /* allow-raw */
  margin-bottom: var(--sp-2);
}
.gis-vdetail__hist-btn {
  background: var(--c-elev-1);
  border: var(--border-1) solid var(--c-border);
  color: var(--c-fg-dim);
  cursor: pointer;
  padding: 4px 8px;  /* allow-raw */
  font-family: var(--f-mono);
  font-size: 10px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
}
.gis-vdetail__hist-btn[aria-pressed="true"] {
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.gis-vdetail__hist-btn:hover { color: var(--c-white); }


/* ============================================================
   === 28. ANOMALY + DARK VESSEL LIST INSIDE WIDGETS ===========
   Phase 12.5: real list bodies for the anomaly and dark vessel
   widgets, replacing the placeholder strings.
   ============================================================ */
.gis-widget__list {
  display: flex;
  flex-direction: column;
  gap: 4px;  /* allow-raw */
  max-height: 180px;
  overflow-y: auto;
}
.gis-widget__list-item {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-fg-dim);
  padding: 4px 6px;  /* allow-raw */
  background: var(--c-elev-1);
  cursor: pointer;
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 6px;  /* allow-raw */
  align-items: center;
}
.gis-widget__list-item:hover { background: var(--c-elev-3); color: var(--c-white); }
.gis-widget__list-item-dot {
  width: 8px;  /* allow-raw */
  height: 8px;
  border-radius: 50%;
}
.gis-widget__list-item-reason {
  font-size: 9px;  /* allow-raw */
  color: var(--c-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ============================================================
   === 29. PHASE 12.6 - WIDGETS REFINEMENT =====================
   - Widget zone becomes scrollable internally (so 4 widgets fit
     on small screens without clipping)
   - Translucent backgrounds for all widgets
   - Very subtle scrollbar
   - Compact-by-default body, expand-on-click for list widgets
   ============================================================ */

/* Widget zone: now scrollable */
.gis-widgets {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.gis-widgets::-webkit-scrollbar { width: 4px; }  /* allow-raw */
.gis-widgets::-webkit-scrollbar-track { background: transparent; }
.gis-widgets::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}
.gis-widgets::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Translucent widget backgrounds */
.gis-widget {
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-color: rgba(255, 255, 255, 0.08);
}
.gis-widget__head {
  background: rgba(8, 10, 14, 0.35);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.gis-widget__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;  /* allow-raw */
}
.gis-widget__expand {
  background: transparent;
  border: 0;
  color: var(--c-fg-muted);
  cursor: pointer;
  padding: var(--sp-0_5);
  display: inline-flex;
  transition:
    color var(--dur-fast) var(--ease-tactical),
    transform var(--dur-fast) var(--ease-tactical);
}
.gis-widget__expand:hover { color: var(--c-white); }
.gis-widget__expand svg { width: 10px; height: 10px; }  /* allow-raw */
.gis-widget[data-expanded="true"] .gis-widget__expand {
  transform: rotate(180deg);
}

/* Compact list bodies: only 3 items by default */
.gis-widget__list {
  max-height: 78px;  /* allow-raw - 3 items * 26px each */
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-tactical);
}
.gis-widget[data-expanded="true"] .gis-widget__list {
  max-height: 280px;  /* allow-raw - room for ~10 items + scroll */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.gis-widget[data-expanded="true"] .gis-widget__list::-webkit-scrollbar { width: 4px; }
.gis-widget[data-expanded="true"] .gis-widget__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

/* Type-breakdown legend: collapsed shows 3 rows */
.gis-widget__legend {
  max-height: 60px;  /* allow-raw - 3 short rows */
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-tactical);
}
.gis-widget[data-expanded="true"] .gis-widget__legend {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.gis-widget[data-expanded="true"] .gis-widget__legend::-webkit-scrollbar { width: 4px; }
.gis-widget[data-expanded="true"] .gis-widget__legend::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

/* List item background also translucent so widget see-through works */
.gis-widget__list-item {
  background: rgba(255, 255, 255, 0.03);
}
.gis-widget__list-item:hover {
  background: rgba(255, 255, 255, 0.08);
}


/* ============================================================
   === 30. PHASE 12.6 - AIS FEED MASTER TOGGLE ================
   Compact toggle in the Vessel & Port panel header. Pauses
   ALL AIS fetching (AOI detection + global vessels layer).
   ============================================================ */

.gis-vpanel__head-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.gis-vpanel__feed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;  /* allow-raw */
  cursor: pointer;
  padding: 3px 8px;  /* allow-raw */
  border: var(--border-1) solid var(--c-border);
  background: var(--c-elev-1);
  user-select: none;
  transition:
    border-color var(--dur-fast) var(--ease-tactical),
    background var(--dur-fast) var(--ease-tactical);
}
.gis-vpanel__feed-toggle:hover {
  border-color: var(--c-fg-dim);
}
.gis-vpanel__feed-toggle:has(input:checked) {
  border-color: var(--c-accent);
  background: rgba(8, 92, 238, 0.12);
}
.gis-vpanel__feed-toggle input {
  accent-color: var(--c-accent);
  width: 11px;  /* allow-raw */
  height: 11px;
  margin: 0;
}
.gis-vpanel__feed-label {
  font-family: var(--f-mono);
  font-size: 10px !important;
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--c-fg-dim);
}
.gis-vpanel__feed-toggle:has(input:checked) .gis-vpanel__feed-label {
  color: var(--c-accent);
}