/* map */
#map-container{flex:1;position:relative}
#viewDiv{width:100%;height:100%}

/* Top-left stack: study-area context, then the running legend beneath it — same idiom as
   #map-toolbar's own right-hand column (tools.css), a flex column with a gap so whichever
   card is actually visible just flows into place. The only other top-left-corner occupant,
   #site-card, was already independently positioned here; #basemap-chips/#map-focus-btn/
   #inview-btn are all placed into the ArcGIS UI manager's BOTTOM-left corner by map-init.js,
   so this stack doesn't collide with them. */
#map-topleft-stack{position:absolute;top:var(--s5);left:var(--s5);z-index:5;
  display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}

/* Floating study-area card (see updateSiteCard in topbar.js). Position now comes from the
   stack wrapper above, not its own absolute rule. */
#site-card{min-width:196px;padding:var(--s5) var(--s6);
  background:var(--glass-bg);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid var(--divider);border-radius:var(--r-xl);box-shadow:var(--e3);pointer-events:none}
.sc-k{font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--text-faint)}
.sc-v{font-size:var(--t-xl);font-weight:700;color:var(--text);margin-top:3px;line-height:1.2}
.sc-meta{display:flex;gap:var(--s6);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--divider)}
.sc-meta div{font-size:var(--t-2xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.sc-meta b{display:block;font-size:var(--t-md);font-weight:700;color:var(--text);text-transform:none;letter-spacing:0;margin-bottom:1px}

/* welcome overlay */
#welcome-overlay{display:none;position:fixed;inset:0;z-index:15100;background:rgba(6,12,20,.78);align-items:center;justify-content:center;padding:20px}
#welcome-overlay.visible{display:flex;animation:fadeBg .22s ease both}
.welcome-box{width:min(560px,94vw);max-height:90vh;overflow-y:auto;background:var(--navy-mid);border:1px solid var(--divider);border-top:3px solid var(--teal);border-radius:var(--r-xl);box-shadow:var(--e5);padding:24px 26px;text-align:center;animation:fInModal .28s .04s cubic-bezier(.2,.8,.2,1) both}
.welcome-logo{height:64px;width:auto;margin-bottom:6px}
.welcome-title{font-size:19px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:center;gap:8px}
.welcome-beta{font-size:var(--t-2xs);font-weight:600;color:var(--amber);background:var(--amber-dim);border:1px solid var(--amber-border);border-radius:var(--r-sm);padding:2px 6px;letter-spacing:.5px}
.welcome-sub{font-size:var(--t-base);color:var(--text-muted);margin-top:3px}
.welcome-p{font-size:var(--t-base);color:var(--text-muted);line-height:1.6;margin:14px 0 12px;text-align:left}
.welcome-list{text-align:left;font-size:var(--t-base);color:var(--text-muted);line-height:1.55;margin:0 0 12px;padding-left:20px}
.welcome-list li{margin-bottom:7px}
.welcome-list strong{color:var(--text)}
.welcome-note{text-align:left;font-size:var(--t-base);color:var(--teal);background:var(--teal-dim);border:1px solid var(--teal-border);border-radius:var(--radius);padding:9px 11px;margin-bottom:10px;line-height:1.5}
.welcome-disc{text-align:left;font-size:var(--t-xs);color:var(--text-faint);line-height:1.5;margin-bottom:16px}
.welcome-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.welcome-dismiss-lbl{font-size:var(--t-sm);color:var(--text-dim);display:flex;align-items:center;gap:6px;cursor:pointer}
.welcome-dismiss-lbl input{accent-color:var(--teal)}
.welcome-btn{padding:9px 22px;background:var(--brand-grad);color:#fff;border:none;border-radius:var(--radius);font-size:var(--t-md);font-weight:600;cursor:pointer}
.welcome-btn:hover{filter:brightness(1.08)}
.welcome-mode-choice{display:flex;gap:10px;margin-bottom:14px}
.welcome-mode-btn{flex:1;padding:13px 14px;border-radius:var(--r-lg);border:1px solid var(--divider);background:var(--navy-dark);cursor:pointer;text-align:left;color:var(--text);transition:border-color .15s}
.welcome-mode-btn:hover{border-color:var(--teal)}
.wmb-title{font-size:var(--t-md);font-weight:700;margin-bottom:4px}
.wmb-sub{font-size:var(--t-xs);color:var(--text-muted);line-height:1.45}

.welcome-credit{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 16px;font-size:var(--t-sm);color:var(--text-dim)}
.welcome-credit img{height:22px;width:auto;opacity:.92;display:block}
.welcome-credit a{display:inline-flex;align-items:center}
.legal-links-mini{display:flex;justify-content:center;gap:10px;margin-top:8px;font-size:var(--t-xs)}
.legal-links-mini a{color:var(--text-faint);text-decoration:underline;transition:color .15s ease}
.legal-links-mini a:hover{color:var(--teal)}
.welcome-btn.ghost{background:transparent;border:1px solid var(--teal);color:var(--teal)}
.welcome-btn.ghost:hover{background:rgba(29,158,117,.12)}
.welcome-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Legend widget dark theme override (shared by map legend + Layers-panel per-layer legends) */
.esri-legend {
  background: var(--navy-mid) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 8px !important;
  color: var(--text-muted) !important;
  max-width: 260px !important;
  max-height: 50vh !important;
  overflow-y: auto !important;
  font-family: var(--font) !important;
}
.esri-legend__service-label { color: var(--text) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.4 !important; white-space: normal !important; word-break: break-word !important; }
.esri-legend__layer-caption { color: var(--text-muted) !important; font-size: 10px !important; }
.esri-legend__layer-cell--info { color: var(--text-dim) !important; font-size: 10.5px !important; line-height: 1.35 !important; white-space: normal !important; word-break: break-word !important; }
/* ── Map-corner stacks ────────────────────────────────────────────────────────
   The bottom corners now carry the app's own furniture alongside Esri's widgets —
   bottom-left: legend card, basemap chips, scale bar; bottom-right: imagery credit
   and the Legend widget. ArcGIS lays a corner out as a wrapping ROW, which would sit
   them side by side and run them off the map, so stack them here instead. Because the
   corner is anchored by its bottom edge, a column grows upward and everything reflows
   on its own when a card appears, hides or changes height — which is the whole point:
   these used to be absolutely positioned with fixed offsets and overlapped each other.
   Scoped to the bottom corners; the top ones keep Esri's default. */
.esri-ui-bottom-left,.esri-ui-bottom-right{flex-direction:column;flex-wrap:nowrap;gap:var(--s3)}
.esri-ui-bottom-left{align-items:flex-start}
.esri-ui-bottom-right{align-items:flex-end}
.esri-ui-bottom-left > *,.esri-ui-bottom-right > *{margin:0!important}

/* Minimal scale bar. Esri's default renders a filled block that reads as a grey slab
   over imagery; 'line' style (set in map-init.js) is a hairline + one label, and this
   strips the widget chrome so only the rule and its number remain. The text shadow is
   what keeps it legible over both dark satellite and pale topo without a panel behind it. */
.esri-ui .esri-scale-bar{background:transparent!important;box-shadow:none!important;padding:0!important}
.esri-ui .esri-scale-bar__label{color:var(--text)!important;font-family:var(--font)!important;
  font-size:var(--t-2xs)!important;font-weight:600!important;letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)}
.esri-ui .esri-scale-bar__line{border-color:var(--text)!important;opacity:.9;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.esri-ui .esri-scale-bar__line--top,.esri-ui .esri-scale-bar__line--bottom{border-color:var(--text)!important}

/* Elevation profile is a wide, centred panel docked to the bottom of the map, so it
   lands on top of both corner stacks. Lift them clear rather than hiding them: the
   right-hand stack carries #map-imagery-credit, which is the required attribution for
   pinned Wayback/QImagery backgrounds and must not disappear just because a profile is
   open. --elev-lift is measured from the live panel by elevation.js and already includes
   the gap (the fallback only covers the moment before the first measurement lands). The
   corners rest at bottom:0 — their 15px inset comes from the parent container's padding,
   so this offset is measured from that inset, not from the map edge. */
body.elev-open .esri-ui-bottom-left,
body.elev-open .esri-ui-bottom-right{bottom:var(--elev-lift,252px)!important;
  transition:bottom .18s ease}

/* Map-corner legend ONLY — tidy spacing, dividers, wrapping (does not touch Layers-panel legends, which live outside .esri-ui) */
.esri-ui .esri-legend { background: var(--navy-mid) !important; width: 250px !important; max-width: 250px !important; max-height: 56vh !important; overflow-x: hidden !important; box-shadow: 0 8px 26px rgba(0,0,0,.45) !important; padding: 2px 0 !important; }
.esri-ui .esri-legend__service { background: transparent !important; padding: 9px 13px !important; border-bottom: 1px solid var(--divider) !important; }
.esri-ui .esri-legend__service:last-child { border-bottom: none !important; }
.esri-ui .esri-legend__service-label { margin-bottom: 7px !important; }
.esri-ui .esri-legend__layer-table { background: transparent !important; font-size: 10.5px !important; margin: 0 !important; }
.esri-ui .esri-legend__layer-row { border: none !important; background: transparent !important; }
.esri-ui .esri-legend__layer-cell { padding: 3px 6px !important; vertical-align: middle !important; }
.esri-widget { background: transparent !important; }
.esri-widget--button { background: var(--navy-mid) !important; color: var(--text-muted) !important; }

/* Native Esri map-click popup — dark theme override */
.esri-popup__main-container {
  background: var(--navy-mid) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
  font-family: var(--font) !important;
  overflow: hidden !important;
}
.esri-popup__header {
  background: var(--navy-dark) !important;
  border-bottom: 1px solid var(--divider) !important;
  padding: 12px 14px !important;
}
.esri-popup__header-title {
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.esri-popup__icon, .esri-popup__button {
  color: var(--text-faint) !important;
}
.esri-popup__button:hover, .esri-popup__icon:hover {
  color: var(--teal) !important;
  background: rgba(255,255,255,.06) !important;
}
.esri-popup__content { color: var(--text-muted) !important; padding: 10px 14px !important; }
.esri-popup__feature-menu-header,
.esri-popup__navigation { background: var(--navy-dark) !important; border-color: var(--divider) !important; }
.esri-popup__pointer-direction { background-color: var(--navy-mid) !important; }
.esri-popup__pointer::after { border-top-color: var(--navy-mid) !important; }
.esri-feature__field-data, .esri-feature__main-container { color: var(--text-muted) !important; }
.esri-feature__title { color: var(--text) !important; }
.esri-feature-fields, .esri-feature-fields__table {
  border-color: var(--divider) !important;
  font-size: 11.5px !important;
}
.esri-feature-fields__table tr,
.esri-feature-fields__table th,
.esri-feature-fields__table td {
  background: var(--navy-mid) !important;
  border-color: var(--divider) !important;
}
.esri-feature-fields__field-header {
  background: var(--navy-mid) !important;
  color: var(--text-faint) !important;
  font-size: 9.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  border-color: var(--divider) !important;
  font-weight: 600 !important;
}
.esri-feature-fields__field-data {
  background: var(--navy-mid) !important;
  color: var(--text-muted) !important;
  border-color: var(--divider) !important;
}
.esri-feature-fields tr:nth-child(even) td,
.esri-feature-fields tr:nth-child(even) th {
  background: var(--navy-dark) !important;
}
.esri-feature-fields tr:hover td,
.esri-feature-fields tr:hover th { background: rgba(29,158,117,.08) !important; }

/* ── Persistent basemap chips ─────────────────────────────────────────────────
   The concept keeps basemap switching visible along the bottom of the map rather than
   inside the Map tools menu. Same handlers as the menu row — this is a second surface for
   one control, not a second control, so syncBasemapChips() mirrors the active state.
   Placed into the ArcGIS bottom-left corner by map-init.js (see the note there), so this
   rule carries no positioning — only the pill's own look. */
/* flex-wrap and a max-width so the row degrades instead of running off the map.
   There is no limit on how many basemaps this can carry: at a normal desktop
   width the map is ~1000px and the pills use a fraction of it. On a narrow
   viewport the row now stacks rather than overflowing, and if it ever grows past
   two lines the answer is a "More" menu, not fewer basemaps. */
/* One pill at rest, the full set on demand — expanding SIDEWAYS rather than
   opening a menu upward, because this sits in the bottom-left corner over the map
   and a popup would cover the thing you are looking at. Collapsed it is ~110px;
   open it is the seven options in a single line. */
#basemap-chips{display:flex;align-items:center;gap:var(--s1);pointer-events:auto;
  padding:var(--s1);background:var(--glass-bg);backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--divider);
  border-radius:var(--r-2xl);box-shadow:var(--e3);max-width:min(88vw,660px)}

.bm-current{display:flex;align-items:center;gap:6px;flex-shrink:0;
  padding:4px var(--s4) 4px var(--s3);border:none;border-radius:var(--r-pill);
  background:none;color:var(--text);font-family:inherit;font-size:var(--t-xs);
  font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
.bm-current:hover{background:var(--surface-tint)}
.bm-current:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.bm-ic{font-size:12px;color:var(--teal);line-height:1}
.bm-caret{font-size:12px;color:var(--text-faint);transition:transform .18s ease}
#basemap-chips[data-open="true"] .bm-caret{transform:rotate(90deg)}

/* The horizontal reveal. max-width rather than width so the open state sizes to
   its content and no magic number has to track the option count — add a basemap
   and it still opens to exactly the right width. overflow:hidden is what makes
   it wipe sideways instead of wrapping to a second line mid-animation. */
.bm-options{display:flex;align-items:center;gap:var(--s1);overflow:hidden;
  max-width:0;opacity:0;transition:max-width .26s cubic-bezier(.22,.8,.28,1),opacity .18s ease}
#basemap-chips[data-open="true"] .bm-options{max-width:600px;opacity:1}
/* Unreachable by keyboard while collapsed — an invisible zero-width button is
   still a tab stop otherwise, which is how a closed control ends up trapping focus. */
#basemap-chips[data-open="false"] .bm-options{visibility:hidden}

.bm-chip{padding:4px var(--s5);border:none;border-radius:var(--r-pill);background:none;
  color:var(--text-dim);font-family:inherit;font-size:var(--t-xs);font-weight:600;
  cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s,color .15s}
.bm-chip:hover{background:var(--surface-tint);color:var(--text)}
.bm-chip.active{background:var(--brand-grad);color:#fff}

/* ── Focus ────────────────────────────────────────────────────────────────────
   Sits in the bottom-left map stack with the chips (map-init.js places it), because the
   moment you notice ~300 layers drawn statewide is the moment you're looking at the map —
   the old mask shortcut was buried in a side panel where nobody would find it. Styled as a
   distinct pill rather than a basemap chip: it changes what data is shown, not the backdrop. */
#map-focus-btn{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s5);
  background:var(--glass-bg);backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--divider);
  border-radius:var(--r-pill);box-shadow:var(--e3);cursor:pointer;pointer-events:auto;
  color:var(--text-dim);font-family:inherit;font-size:var(--t-xs);font-weight:600;
  transition:color .15s,border-color .15s,background .15s}
#map-focus-btn:hover{color:var(--text);border-color:var(--text-faint)}
#map-focus-btn.active{background:var(--teal);border-color:var(--teal);color:#fff}
#map-focus-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.mf-ic{font-size:var(--t-md);line-height:1}

/* ── Explore: what's in view ──────────────────────────────────────────────────
   Sits with the other bottom-left map furniture, which ArcGIS's UI manager stacks (see
   map-init.js) — so no absolute positioning here, only the chrome. */
#inview-btn{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-lg);
  background:var(--navy-mid);border:1px solid var(--divider);color:var(--text-muted);
  font-family:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer;box-shadow:var(--e2);
  transition:border-color .15s,color .15s}
#inview-btn:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
#inview-btn:disabled{cursor:progress;opacity:.75}
#inview-btn .iv-ic{font-size:var(--t-sm);line-height:1}
#inview-card{width:246px;padding:var(--s4) var(--s4) var(--s3);background:var(--navy-mid);
  border:1px solid var(--divider);border-radius:var(--r-lg);box-shadow:var(--e3)}
.iv-h{display:flex;align-items:center;font-size:var(--t-2xs);text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;color:var(--text-faint);margin-bottom:var(--s3)}
.iv-x{margin-left:auto;cursor:pointer;font-weight:400;letter-spacing:0}
.iv-x:hover{color:var(--text)}
/* Counts are the point of the card, so they get the column and the tabular figures; long
   layer names give way rather than pushing the number out of alignment. */
.iv-row{display:flex;align-items:baseline;gap:var(--s3);font-size:var(--t-xs);
  color:var(--text-muted);padding:2px 0}
.iv-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv-n{flex-shrink:0;color:var(--teal);font-variant-numeric:tabular-nums;font-weight:700}
.iv-note{font-size:var(--t-3xs);color:var(--text-faint);line-height:1.4;margin-top:var(--s2)}
/* Assess has its own "On the map" card driven by real assessment results — two cards making
   different claims about the same map would be worse than either alone. */
body[data-mode="assess"] #inview-btn,
body[data-mode="assess"] #inview-card{display:none !important}

/* ── Running legend ──────────────────────────────────────────────────────────
   Lives in #map-topleft-stack (see above), below the study-area card when one is showing —
   moved off the right side, which the Map tools launcher/menu owns alone now, and out of the
   corner the concept design puts it in. No positioning of its own; the stack wrapper's flex
   column + gap handles that, the same way #map-toolbar's own column does for Map tools.
   Still capped, though: a long layer list must never grow down into the scale bar and
   imagery credit at the bottom of the map. The rows scroll inside the cap; the symbols
   drawer scrolls inside its own. */
#map-legend-panel{width:238px;display:flex;flex-direction:column;
  max-height:calc(100vh - 260px);border-radius:var(--r-xl);background:var(--glass-bg);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid var(--divider);box-shadow:var(--e3);text-align:left;overflow:hidden}
#map-legend-chips{padding:var(--s4) var(--s4) var(--s3);overflow-y:auto;min-height:0}
#mlg-symbols{flex-shrink:0}
.mlg-h{font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  color:var(--text-faint);margin-bottom:var(--s3)}
.mlg-h-sub{color:var(--teal);letter-spacing:.09em}
/* Rows are buttons — they toggle their layer's visibility. Full-bleed hover so the whole row
   reads as the target, not just the text. */
.mlg-row{display:flex;align-items:center;gap:var(--s3);width:100%;padding:4px var(--s2);
  margin:0 calc(var(--s2) * -1);border:none;background:none;border-radius:var(--r-sm);
  font-family:inherit;font-size:var(--t-xs);color:var(--text-muted);line-height:1.3;
  text-align:left;cursor:pointer;transition:background .12s,color .12s,opacity .12s}
.mlg-row:hover{background:rgba(255,255,255,.06);color:var(--text)}
.mlg-row:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
/* Switched off from this card: still listed, visibly inert, and the way back. */
.mlg-row.off{opacity:.45}
.mlg-row.off .mlg-t{text-decoration:line-through}
.mlg-row.off .mlg-sw{box-shadow:inset 0 0 0 10px var(--navy-mid);border:1px solid currentColor}
.mlg-sw{width:10px;height:10px;border-radius:3px;flex-shrink:0}
/* The name yields, the number never does — a truncated count would be worse than a
   truncated title. */
.mlg-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlg-n{flex-shrink:0;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text)}
.mlg-n.area{font-weight:600;color:var(--teal)}
.mlg-more{display:block;width:100%;margin-top:var(--s2);padding:5px 0;background:none;
  border:none;border-top:1px solid var(--divider);color:var(--text-faint);font-family:inherit;
  font-size:var(--t-2xs);cursor:pointer;text-align:left;transition:color .15s}
.mlg-more:hover{color:var(--teal)}

/* ── Symbols drawer ───────────────────────────────────────────────────────────
   The Esri Legend, mounted inside the same card as the layer rows (see toggleLegend in
   map-extras.js) rather than floating in its own map corner. Slides open beneath them so the
   card is one continuous tool. */
#mlg-symbols{border-top:1px solid var(--divider)}
#mlg-sym-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:7px var(--s4);background:none;border:none;color:var(--text-faint);
  font-family:inherit;font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;cursor:pointer;transition:color .15s}
#mlg-sym-btn:hover{color:var(--teal)}
.mlg-sym-chev{transition:transform .18s ease}
#mlg-symbols.open .mlg-sym-chev{transform:rotate(180deg)}
#mlg-symbols.open #mlg-sym-btn{color:var(--teal)}
/* Height is animated rather than display-toggled so it reads as a slide. max-height is a
   ceiling, not the real height — the body scrolls past it. */
/* Esri stamps .esri-legend / .esri-widget ONTO the container it is given — so #mlg-sym-body
   is itself an .esri-legend, and this file's global .esri-legend block (max-height:50vh
   !important, borders, background) lands directly on the drawer. These rules therefore need
   !important of their own to win; specificity alone loses to an !important declaration. */
#mlg-sym-body{max-height:0!important;overflow:hidden!important;
  transition:max-height .22s cubic-bezier(.2,.8,.2,1);
  background:transparent!important;border:none!important;box-shadow:none!important;
  max-width:none!important;padding:0!important;font-family:inherit!important}
#mlg-symbols.open #mlg-sym-body{max-height:46vh!important;overflow-y:auto!important;
  padding:0 var(--s4) var(--s4)!important}
/* Strip the widget's own panel chrome — inside the card it must not look like a second card. */
#mlg-sym-body .esri-legend__service{padding:0!important}
#mlg-sym-body .esri-legend__service-label{font-size:var(--t-2xs)!important}
#mlg-sym-body .esri-legend__layer-table{font-size:var(--t-3xs)!important;margin-bottom:6px!important}
#mlg-sym-body .esri-legend__layer-cell{padding:1px 4px!important}

/* Row + its draw-order controls share a line. Controls appear on hover so the card stays
   calm at rest but the affordance is where the layer is, not in a separate mode. */
.mlg-line{display:flex;align-items:center;gap:2px}
.mlg-line .mlg-row{flex:1;min-width:0}
/* Reference/basemap layers: listed, because they ARE on the map and the Symbols list below
   shows them — but subordinate, because they are context you navigate by, not constraints.
   The subordination used to be --text-faint + italic, which at this card's 10px measured ~2:1
   against the glass — below the 3:1 floor for any text, let alone 10px, and unreadable once
   the map showed through the 10% the panel doesn't cover. Colour can't carry the distinction
   at this size, so it doesn't: the grey swatch and the Reference grouping already say these
   are context, and the label just has to be legible. */
.mlg-line.ref .mlg-t{color:var(--text-dim)}
.mlg-ord{display:flex;flex-direction:column;gap:0;flex-shrink:0;opacity:0;transition:opacity .12s}
.mlg-line:hover .mlg-ord,.mlg-ord:focus-within{opacity:1}
.mlg-ob{width:15px;height:11px;padding:0;border:none;background:none;color:var(--text-faint);
  font-size:7px;line-height:1;cursor:pointer;font-family:inherit;border-radius:2px}
.mlg-ob:hover{color:var(--teal);background:rgba(255,255,255,.08)}
.mlg-ob:focus-visible{outline:1px solid var(--teal)}

/* ── Popup: action bar and pagination ─────────────────────────────────────────
   The colour theming above was already in place, but two parts still read as stock AGOL, and a
   user reported exactly that: they assumed the box was a generic Esri shell and would not
   contain what they wanted. The actions were plain text in a row, and the record pager was
   unstyled. These are the two things you look at, so they are the two that had to change.
   (The rules above carry hardcoded 13/11.5/9.5px from before the type scale existed — the ones
   set here use tokens, per rule 6b. Worth sweeping the older ones when they are next touched.) */
.esri-popup__actions,
.esri-popup__action-toggle { background: var(--navy-dark) !important; border-top: 1px solid var(--divider) !important; }
.esri-popup__action {
  color: var(--teal) !important;
  font-family: var(--font) !important;
  font-size: var(--t-sm) !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 9px !important;
}
.esri-popup__action:hover, .esri-popup__action:focus {
  background: var(--teal-dim) !important;
  color: var(--teal) !important;
}
.esri-popup__action-image, .esri-popup__action-icon { color: var(--teal) !important; opacity: .9 !important; }
/* Record pager — "2 of 5" and its arrows. Muted, because which of five features you are on is
   orientation rather than an action, and it was competing with the actions above it. */
.esri-popup__navigation, .esri-popup__feature-menu-header {
  background: var(--navy-dark) !important;
  border-top: 1px solid var(--divider) !important;
}
.esri-popup__feature-menu-title,
.esri-popup__navigation-text { color: var(--text-faint) !important; font-size: var(--t-2xs) !important; }
.esri-popup__pagination-previous, .esri-popup__pagination-next {
  color: var(--text-muted) !important; border-radius: var(--r-sm) !important;
}
.esri-popup__pagination-previous:hover, .esri-popup__pagination-next:hover {
  background: var(--teal-dim) !important; color: var(--teal) !important;
}
.esri-popup__feature-menu-item { background: var(--navy-mid) !important; color: var(--text-muted) !important; }
.esri-popup__feature-menu-item:hover { background: var(--teal-dim) !important; color: var(--text) !important; }
.esri-popup__feature-menu-item--selected { background: var(--teal-dim) !important; color: var(--teal) !important; }
/* Header title on the app's type scale rather than a stray 13px. */
.esri-popup__header-title { font-size: var(--t-base) !important; }

/* Coverage note on the study-area card. Present only when the app can actually place
   the site — see coverageForGeometry(). Teal for full screening reads as confirmation
   rather than alarm; amber for Commonwealth-only is a limit, not an error, so it takes
   the same weight as the neutral state rather than the red used for real failures. */
#site-card .sc-cov{margin-top:8px;padding:5px 8px;border-radius:var(--r-sm);
  font-size:var(--t-sm);line-height:1.4;
  background:var(--teal-dim);color:var(--teal);border:1px solid var(--teal-border)}
#site-card .sc-cov.partial{background:var(--amber-dim);color:var(--amber);
  border-color:var(--amber-border)}

/* Coverage caption — the legend for the map tint. Deliberately quiet: it sits under the
   basemap pill and reads at a glance without competing with the controls above it. The
   swatch matches the coverage fill exactly, so the line and the map cannot drift apart. */
#coverage-note{display:flex;align-items:center;gap:var(--s3);max-width:340px;
  padding:4px var(--s4);border-radius:var(--r-sm);
  background:var(--navy);border:1px solid var(--divider);box-shadow:var(--e1);
  font-size:var(--t-sm);line-height:1.35;color:var(--text-muted)}
#coverage-note b{color:var(--teal);font-weight:600}
#coverage-note .cov-dim{color:var(--text-dim)}
#coverage-note .cov-sw{width:11px;height:11px;flex:0 0 auto;border-radius:2px;
  background:rgba(45,212,170,0.10);border:1px solid rgba(45,212,170,0.55)}
@media (max-width:620px){ #coverage-note{display:none} }
/* "NSW next" — dimmer than the covered state and dashed to match its outline on the map,
   so the caption reads as a forecast rather than a second claim of coverage. */
#coverage-note .cov-soon{color:var(--text-dim);border-bottom:1px dashed var(--teal-border);
  padding-bottom:1px}