:root {
  --bg: #0d1117;
  --sidebar: #12151c;
  --panel: #1a1f29;
  --panel-2: #212836;
  --line: #2a3240;
  --text: #e8edf4;
  --muted: #8b97a8;
  --faint: #5d6878;
  --accent: #ff7a45;      /* fault / signal orange */
  --accent-2: #f5b544;
  --teal: #34d3b0;
  --red: #ff5470;
  --amber: #ffb020;
  --blue: #4aa8ff;
  --shadow: 0 10px 40px rgba(0,0,0,.45);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#app { display: grid; grid-template-columns: var(--sbw, 360px) 1fr var(--asw, 0px); height: 100vh; position: relative; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: linear-gradient(180deg, var(--sidebar), #0f1219);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 22px 20px 0;
  overflow-y: auto;
  z-index: 500;
}
.sheet-grip { display: none; }    /* drag/tap handle — mobile only */
.sheet-toggle { display: none; }  /* labelled open/close control — mobile only */
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #e0452a);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 18px rgba(255,122,69,.35);
}
.brand-name { font-family: "Space Grotesk"; font-weight: 700; font-size: 22px; letter-spacing: -.5px; }
.brand-name span { color: var(--accent); }
.brand-sub { font-size: 11px; color: var(--faint); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 1px; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.field-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px;
}
.field-label.spaced { margin-top: 18px; }
.field-label span { color: var(--accent-2); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 13px; }

.proj-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 6px; }
.proj-grid input, .proj-actions select {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 9px 11px; font-size: 13px; outline: none; width: 100%;
}
.proj-grid input:focus { border-color: var(--accent); }
.proj-actions { display: flex; gap: 6px; margin-top: 6px; }
.proj-actions select { flex: 1; color: var(--muted); }
.proj-actions button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 9px; padding: 0 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.proj-actions button:hover { border-color: var(--teal); color: var(--teal); }

.site-input { display: flex; gap: 6px; }
.site-input input {
  flex: 1; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 9px; padding: 10px 12px; font-size: 14px; outline: none;
}
.site-input input:focus { border-color: var(--accent); }
.site-input button {
  background: var(--accent); color: #1a1008; border: none; border-radius: 9px;
  padding: 0 14px; font-weight: 700; cursor: pointer; font-size: 13px;
}
/* While the first-run hero owns the screen, its search IS the action — the
   sidebar's Go is the same action a second time, and two accent-orange buttons
   on first paint make the eye pick between identical choices. Demote the
   sidebar's until the hero is gone; it returns to primary after that. */
#app:has(.hero:not([hidden])) .site-input button {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); font-weight: 600;
}
#app:has(.hero:not([hidden])) .site-input button:hover { color: var(--text); border-color: var(--accent); }

.hint { font-size: 12px; color: var(--faint); margin-top: 8px; }

.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.presets button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 20px; padding: 6px 11px; font-size: 12px; cursor: pointer; transition: .15s;
}
.presets button:hover { border-color: var(--accent); color: var(--text); }

input[type=range] { width: 100%; accent-color: var(--accent); margin-top: 4px; }
.coords { font-size: 12px; color: var(--faint); margin-top: 12px; font-variant-numeric: tabular-nums; }

/* Results panel */
.results-panel { animation: fade .3s ease; }
.ap-banner {
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.45; border: 1px solid;
}
.ap-banner .ap-title { font-weight: 700; display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ap-banner .ap-detail { color: var(--muted); font-size: 12px; }
.ap-alert { background: rgba(255,84,112,.12); border-color: rgba(255,84,112,.5); }
.ap-alert .ap-title { color: var(--red); }
.ap-warn { background: rgba(255,176,32,.1); border-color: rgba(255,176,32,.45); }
.ap-warn .ap-title { color: var(--amber); }
.ap-ok { background: rgba(52,211,176,.1); border-color: rgba(52,211,176,.4); }
.ap-ok .ap-title { color: var(--teal); }
.ap-neutral { background: var(--panel-2); border-color: var(--line); }

.zone-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.zone-legend {
  /* Top-left, below Leaflet's zoom control — the only thing anchored there.
     Bottom is out: .table-wrap (the results dock) spans left:16px/right:16px
     at bottom:16px, z-index 600, and fully hides anything placed at the
     bottom regardless of collapsed state. Top-right is out too (basemap
     toggle, mode toggle, place-hint all live there). */
  position: absolute; left: 12px; top: 100px; z-index: 500;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; font-size: 11.5px; font-weight: 600; color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,.35); pointer-events: none; max-width: 220px;
}
.zone-legend-row { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.zone-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.zone-legend-raster {
  background: linear-gradient(135deg, #fff7e6 0%, #ffb347 55%, #d7263d 100%);
}
/* Groundwater-elevation contour labels. Plain DOM text (a divIcon), so
   html2canvas captures them into the report figure the same as any other
   element — no canvas text drawing needed. */
.gw-contour-label {
  font: 600 10px/14px ui-sans-serif, system-ui, sans-serif;
  color: #16307f;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff;
  pointer-events: none;
}
.zone-dam-list { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.zone-dam-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.zone-dam-row .zone-controls { margin-top: 0; }
.zone-btn {
  cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  border-radius: 6px; padding: 5px 9px; font-size: 11px; font-weight: 600;
  transition: border-color .12s, color .12s;
}
.zone-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.zone-btn:disabled { opacity: .6; cursor: default; }

.toggle-switch { position: relative; display: inline-block; width: 34px; height: 19px; flex: none; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; cursor: pointer; background: var(--line);
  border-radius: 999px; transition: background .15s;
}
.toggle-slider::before {
  content: ""; position: absolute; width: 15px; height: 15px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: transform .15s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(15px); }
.toggle-switch input:disabled + .toggle-slider { opacity: .5; cursor: default; }
.toggle-label { font-size: 12px; font-weight: 600; color: var(--text); }

.headline { font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
.headline b { color: var(--text); }
.headline .big { display: block; font-family: "Space Grotesk"; font-size: 20px; color: var(--accent); font-weight: 700; margin-top: 2px; }

.report-btn {
  width: 100%; background: linear-gradient(135deg, var(--accent), #e0452a);
  color: #fff; border: none; border-radius: 11px; padding: 13px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 6px 20px rgba(255,122,69,.35); transition: .15s;
}
.report-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,122,69,.45); }
.report-btn:disabled { opacity: .6; cursor: wait; }

.sidebar-foot { margin-top: auto; padding: 16px 2px; font-size: 10.5px; color: var(--faint); line-height: 1.5; border-top: 1px solid var(--line); }

/* ---------- Stage / Map ---------- */
.stage { position: relative; }
#map { position: absolute; inset: 0; background: #0a0d12; }

/* Two unrelated controls used to sit in one column at identical weight, an
   equal-sized pill either side of an 8px gap — they read as a single
   four-button group. They are not: the basemap is a set-and-forget preference,
   while the mode toggle changes what a click on the map DOES. So the basemap
   steps down a size and gives up the accent; only the consequential one keeps
   it. (Touch targets below 820px are restored in the mobile block.) */
.map-tabs {
  position: absolute; top: 16px; right: 16px; z-index: 600;
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
}
.basemap-toggle {
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: 3px; display: flex; gap: 2px; box-shadow: var(--shadow);
}
/* Its own tab, full width of the row above, carrying the accent — this is a
   published-data feature, not a fourth choice of basemap. */
.geology-tab {
  display: flex; padding: 3px; border-radius: 9px; box-shadow: var(--shadow);
  background: rgba(255,122,69,.1); border: 1px solid rgba(255,122,69,.4);
}
.geology-tab[hidden] { display: none; }
.geology-tab button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: none; color: var(--accent); cursor: pointer;
  padding: 8px 12px; font-size: 12.5px; font-weight: 700; border-radius: 6px; letter-spacing: .01em;
}
.geology-tab button:hover { background: rgba(255,122,69,.14); }
.geology-tab button.active { background: var(--accent); color: #1a1008; }
.geology-tab button svg { opacity: .9; }
.basemap-toggle button {
  background: transparent; border: none; color: var(--faint);
  padding: 5px 11px; font-size: 11px; font-weight: 600; border-radius: 6px; cursor: pointer;
  letter-spacing: .01em;
}
.basemap-toggle button:hover { color: var(--text); }
.basemap-toggle button.active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

/* Published geologic map view (geomaps.js). Sits where the Explore/Set-site
   toggle lives, which is hidden in this view — placing a project site off a
   scanned 1968 quadrangle is not a workflow, so the control that invites it
   goes away. */
body.geomaps-on .mode-toggle, body.geomaps-on .place-hint { display: none; }
.geomaps-ui {
  position: absolute; top: 108px; right: 16px; z-index: 700; width: 330px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 10px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 7px;
}
.geomaps-ui[hidden] { display: none; }
/* Collapse the map list. The panel is mostly attribution, and attribution is
   the one part you read once and then want out of the way — so this hides the
   list and keeps the scale/type controls, which are what you keep reaching for
   while actually looking at the ground. */
.gm-collapse {
  position: absolute; top: 6px; right: 8px; z-index: 1;
  background: transparent; border: none; color: var(--faint);
  font-size: 15px; line-height: 1; padding: 3px 6px; border-radius: 6px;
  cursor: pointer; transition: transform .15s ease;
}
.gm-collapse:hover { color: var(--text); background: var(--panel-2); }
/* Collapsed = down to the title bar, not just the map list. The panel is
   large and unavoidably sits over the map, so "get out of the way" has to
   actually mean it. */
.geomaps-ui.gm-collapsed { width: auto; min-width: 210px; gap: 0; }
.geomaps-ui.gm-collapsed .gm-collapse { transform: rotate(-90deg); }
.geomaps-ui.gm-collapsed .gm-attrib,
.geomaps-ui.gm-collapsed .gm-row,
.geomaps-ui.gm-collapsed .gm-src { display: none; }
/* Drag by the header — see geomaps.js. */
.gm-add { margin-left: auto; flex: none; }
.geomaps-ui .gm-head { cursor: grab; user-select: none; touch-action: none; }
.geomaps-ui.gm-dragging { cursor: grabbing; box-shadow: 0 16px 44px rgba(0,0,0,.6); }
.geomaps-ui.gm-dragging .gm-head { cursor: grabbing; }
/* Keep the first row's controls clear of the button. */
.geomaps-ui .gm-row:first-of-type { padding-right: 22px; }
.gm-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Backfill toggle. Off by default on purpose: a gap is real information — it
   says nobody has mapped this ground at this scale — and filling it by default
   would quietly trade that signal for a prettier picture. */
.gm-fill {
  background: transparent; border: 1px solid var(--line); color: var(--faint);
  padding: 4px 9px; font-size: 10.5px; font-weight: 600; border-radius: 6px; cursor: pointer;
}
.gm-fill:hover:not(:disabled) { color: var(--text); }
.gm-fill[aria-pressed="true"] { background: var(--panel-2); color: var(--text); border-color: var(--accent); }
.gm-fill:disabled { opacity: .4; cursor: default; }
.gm-fill-note { color: var(--faint); font-size: 10px; }
.gm-lbl { color: var(--faint); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; cursor: help; }
.gm-op-lbl { margin-left: auto; cursor: default; }
.gm-bins, .gm-types { display: flex; gap: 2px; flex-wrap: wrap; }
.gm-bins button, .gm-types button {
  background: transparent; border: none; color: var(--faint);
  padding: 4px 7px; font-size: 10.5px; font-weight: 600; border-radius: 6px; cursor: pointer;
}
.gm-bins button:hover, .gm-types button:hover { color: var(--text); }
.gm-bins button.active, .gm-types button.active {
  background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line);
}
.gm-opacity { width: 74px; accent-color: var(--accent); cursor: pointer; }
.gm-attrib { border-top: 1px solid var(--line); padding-top: 7px; font-size: 11px; }
.gm-attrib-empty { color: var(--faint); line-height: 1.45; }
.gm-warn {
  color: var(--accent); font-size: 10.5px; line-height: 1.4; font-weight: 600;
  margin-bottom: 6px;
}
.gm-attrib-head { color: var(--text); font-weight: 600; font-size: 10.5px; margin-bottom: 5px; }
.gm-list { list-style: none; margin: 0; padding: 0; max-height: 168px; overflow-y: auto; }
.gm-list li { margin-bottom: 6px; line-height: 1.35; }
.gm-list a { color: var(--accent); text-decoration: none; }
.gm-list a:hover { text-decoration: underline; }
.gm-meta { display: block; color: var(--faint); font-size: 10px; margin-top: 1px; }
/* Sheets whose stated bounds reach the point being looked at — the ones worth
   reading first. Marked, not filtered: the others are still real publications. */
.gm-hit { color: var(--accent); }
.gm-list li.gm-at { border-left: 2px solid var(--accent); padding-left: 6px; margin-left: -8px; }
.gm-more { color: var(--faint); font-size: 10px; margin-top: 2px; }
/* The caveat is load-bearing, not boilerplate: this view shows pictures of
   published sheets and must never read as a screening determination. */
.gm-caveat {
  color: var(--faint); font-size: 10px; line-height: 1.4;
  margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line);
}

/* 3D terrain view — sits above the Leaflet map, below the map controls. */
#map3d { position: absolute; inset: 0; z-index: 500; background: #0b0e14; }
#map3d[hidden] { display: none; }
/* Site placement is a 2D-map interaction; hide its controls while 3D is up —
   along with Leaflet's own chrome (z-index 1000, would poke through the 3D
   canvas; MapLibre brings its own nav + attribution). */
body.terrain3d-on .mode-toggle, body.terrain3d-on .place-hint { display: none; }
body.terrain3d-on .leaflet-control-container { display: none; }
.terrain3d-ui {
  /* Sits where the (3D-hidden) Explore/Set-site toggle lives in 2D. */
  position: absolute; top: 66px; right: 16px; z-index: 800;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: 3px; display: flex; gap: 2px; align-items: center; box-shadow: var(--shadow);
}
.terrain3d-ui[hidden] { display: none; }
.terrain3d-ui .t3d-lbl { color: var(--faint); font-size: 10.5px; font-weight: 600; padding: 0 6px 0 8px; cursor: help; letter-spacing: .02em; }
.terrain3d-ui button {
  background: transparent; border: none; color: var(--faint);
  padding: 5px 9px; font-size: 11px; font-weight: 600; border-radius: 6px; cursor: pointer;
}
.terrain3d-ui button:hover { color: var(--text); }
.terrain3d-ui button.active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.t3d-popup .maplibregl-popup-content {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; box-shadow: var(--shadow);
}
.t3d-popup .maplibregl-popup-tip { display: none; }

/* Explore / Set-site mode toggle */
.mode-toggle {
  position: absolute; top: 108px; right: 16px; z-index: 600;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 4px; display: flex; gap: 2px; box-shadow: var(--shadow);
}
.mode-toggle button {
  background: transparent; border: none; color: var(--muted);
  padding: 7px 12px; font-size: 12px; font-weight: 600; border-radius: 7px; cursor: pointer;
}
.mode-toggle button.active { background: var(--accent); color: #1a1008; }
.place-hint {
  position: absolute; top: 158px; right: 16px; z-index: 600;
  background: rgba(255,122,69,.14); border: 1px solid rgba(255,122,69,.55); color: var(--accent);
  border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 600;
  box-shadow: var(--shadow); animation: fade .2s ease;
}
#map.place-mode { cursor: crosshair !important; }
#map.place-mode .leaflet-interactive, #map.place-mode .leaflet-grab { cursor: crosshair !important; }

/* ---------- First-run hero (shown until the first site is placed) ---------- */
.hero {
  position: absolute; inset: 0; z-index: 620;
  display: grid; place-items: center; padding: 24px;
  pointer-events: none; /* only the card catches input — the map stays live around it */
}
.hero-card {
  pointer-events: auto; position: relative;
  width: min(600px, 100%);
  background: linear-gradient(180deg, rgba(26,31,41,.97), rgba(15,18,25,.97));
  border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 28px 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  animation: heroIn .35s ease;
}
@keyframes heroIn { from { opacity: 0; transform: translateY(12px); } }
.hero-close {
  position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px; border: none; border-radius: 8px;
  background: transparent; color: var(--faint); font-size: 20px; cursor: pointer;
}
.hero-close:hover { background: var(--panel-2); color: var(--text); }
.hero-kicker {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 8px;
}
.hero-title { font-family: "Space Grotesk"; font-weight: 700; font-size: 30px; letter-spacing: -.6px; margin-bottom: 8px; }
.hero-sub { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-bottom: 18px; max-width: 48ch; }
.hero-search { display: flex; gap: 8px; }
.hero-search input {
  flex: 1; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 13px 14px; font-size: 15px; font-family: inherit; outline: none;
}
.hero-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,69,.18); }
.hero-search input::placeholder { color: var(--faint); }
.hero-search button {
  border: none; border-radius: 10px; padding: 0 20px;
  background: var(--accent); color: #1a1008; font-weight: 700; font-size: 14px;
  font-family: inherit; cursor: pointer; white-space: nowrap; transition: .15s;
}
.hero-search button:hover { filter: brightness(1.08); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero-chip {
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); color: var(--muted);
  padding: 7px 13px; font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: .15s;
}
.hero-chip:hover { border-color: var(--accent); color: var(--text); }
.hero-alt { margin-top: 16px; font-size: 12px; color: var(--faint); }

/* ---------- Resizable sidebar (desktop) ---------- */
.sb-resize {
  position: absolute; top: 0; bottom: 0; left: var(--sbw, 360px);
  width: 10px; margin-left: -5px; z-index: 560;
  cursor: col-resize;
}
.sb-resize::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px;
  background: transparent; transition: background .15s;
}
.sb-resize:hover::before, .sb-resize.dragging::before { background: var(--accent); }
.sb-resize-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--muted);
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: .15s;
}
.sb-resize:hover .sb-resize-btn, .sb-resize-btn:hover { color: var(--accent); border-color: var(--accent); }
body.sidebar-wide .sb-resize-btn svg { transform: rotate(180deg); }
body.sb-dragging { cursor: col-resize; user-select: none; }
body.sb-dragging #map { pointer-events: none; } /* don't feed drag moves to Leaflet */

/* Wide data view: summary + design/spectra full-width, remaining data
   cards flow into columns so the width shows more, not stretched, data. */
body.sidebar-wide #results-panel { columns: 250px; column-gap: 12px; }
body.sidebar-wide #results-panel > .ssi-chip,
body.sidebar-wide #results-panel > #findings,
body.sidebar-wide #results-panel > .headline,
body.sidebar-wide #results-panel > #design-block,
body.sidebar-wide #results-panel > .report-btn,
body.sidebar-wide #results-panel > .ghost-btn { column-span: all; }
body.sidebar-wide .ctx-block { break-inside: avoid; }
body.sidebar-wide #results-panel > .ghost-btn { width: 100%; }
body.sidebar-wide .design-grid { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }

.loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 650; background: rgba(13,17,23,.3); }
.spinner { width: 42px; height: 42px; border: 3px solid rgba(255,122,69,.25); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Results dock (collapsible, drag-resizable) */
.table-wrap {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 600;
  background: rgba(18,21,28,.88); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  animation: fade .3s ease;
}
.drag-handle { position: absolute; top: -6px; left: 0; right: 0; height: 12px; cursor: ns-resize; z-index: 2; }
.drag-handle::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 3px; background: var(--line); margin: 4px auto 0; }
.table-wrap.collapsed .drag-handle { display: none; }
.table-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px; cursor: pointer; user-select: none; }
.dock-tabs { display: flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; flex: none; }
.dock-tabs button { background: transparent; border: none; color: var(--muted); font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 6px; cursor: pointer; }
.dock-tabs button.active { background: var(--accent); color: #1a1008; }
#dock-summary { flex: 1; min-width: 0; }
.dock-toolbar { display: flex; align-items: center; gap: 14px; padding: 7px 16px 2px; }
.chip-toggle { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.chip-toggle input { accent-color: var(--accent); }
.age-info { font-size: 11px; color: var(--faint); cursor: help; border-bottom: 1px dotted var(--faint); }
.tag-blind { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 10px; font-size: 9.5px; font-weight: 700; background: rgba(167,139,250,.14); color: #A78BFA; border: 1px solid rgba(167,139,250,.4); vertical-align: 1px; }
#quakes-table td .qk-mag { font-family: "Space Grotesk"; font-weight: 700; color: #A78BFA; }
.table-wrap:not(.collapsed) .table-head { border-bottom: 1px solid var(--line); }
.table-head h3 { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-head h3 span { color: var(--accent); font-weight: 700; }
.table-head h3 .tbl-nearest { color: var(--text); font-weight: 500; }
.table-head h3 .tbl-nearest b { color: var(--text); }
#table-collapse { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; flex: none; padding: 0 2px; }
.table-scroll { overflow-y: auto; max-height: 30vh; }
.table-wrap.collapsed .table-scroll { display: none; }
/* Dock result tables only — scoped under .table-scroll so app-shell styling
   (nowrap cells, sticky sortable headers) never leaks into the paper-document
   report tables (.rpt-table), which must be free to wrap to the page width. */
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 12.3px; }
.table-scroll thead th {
  position: sticky; top: 0; background: var(--panel); text-align: left;
  padding: 6px 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--faint); cursor: pointer; user-select: none; white-space: nowrap; border-bottom: 1px solid var(--line);
}
.table-scroll thead th:hover { color: var(--text); }
.table-scroll thead th.sorted-asc::after { content: " ▲"; color: var(--accent); }
.table-scroll thead th.sorted-desc::after { content: " ▼"; color: var(--accent); }
.table-scroll tbody tr { border-bottom: 1px solid rgba(42,50,64,.5); cursor: pointer; transition: background .12s; }
.table-scroll tbody tr:hover { background: var(--panel-2); }
.table-scroll tbody tr.active { background: rgba(255,122,69,.12); }
.table-scroll tbody td { padding: 5px 12px; white-space: nowrap; line-height: 1.35; }
.table-scroll tbody td.dist { font-weight: 700; font-variant-numeric: tabular-nums; }
.table-scroll tbody td.name { white-space: normal; min-width: 200px; }
.pill { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.pill.active-fault { background: rgba(255,84,112,.15); color: var(--red); }
.pill.older { background: var(--panel-2); color: var(--muted); }
.mmax { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-2); }
.dist-chip { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle; }

/* Drawer */
.drawer { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.5); display: flex; justify-content: flex-end; animation: fade .2s; }
.drawer-inner { width: 420px; max-width: 92vw; height: 100%; background: var(--sidebar); border-left: 1px solid var(--line); padding: 24px; overflow-y: auto; position: relative; }
.drawer-close { position: absolute; top: 16px; right: 18px; background: none; border: none; color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1; }
.drawer h2 { font-family: "Space Grotesk"; font-size: 21px; margin-bottom: 4px; padding-right: 30px; }
.drawer .sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.attr { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.attr .k { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.attr .v { font-size: 15px; font-weight: 600; }
.attr.full { grid-column: 1 / -1; }
.usgs-link { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); text-decoration: none; font-size: 13px; font-weight: 600; margin-top: 4px; }
.usgs-link:hover { text-decoration: underline; }
.citation { margin-top: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.citation .k { color: var(--faint); text-transform: uppercase; font-size: 10px; letter-spacing: .5px; margin-bottom: 6px; }

/* ---------- Report ---------- */
.report-overlay { position: fixed; inset: 0; z-index: 1000; background: #33383f; display: flex; flex-direction: column; }
.report-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--sidebar); border-bottom: 1px solid var(--line); }
.report-toolbar-title { font-size: 13px; color: var(--muted); font-weight: 600; }
.report-toolbar button { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.report-toolbar button.primary { background: var(--accent); color: #1a1008; border: none; }
/* Block + margin:auto centering (not flex justify-content:center): with flex,
   a sheet wider than the viewport gets clipped on BOTH sides and the left
   edge becomes unreachable even with overflow-x scrolling. */
.report-scroll { overflow: auto; padding: 30px; }

.report {
  width: 8.5in; min-height: 11in; background: #fff; color: #1a1a1a;
  margin: 0 auto;
  padding: 0.75in 0.8in; box-shadow: 0 8px 40px rgba(0,0,0,.5);
  font-family: "Inter", sans-serif; font-size: 10.5pt; line-height: 1.5;
  /* Opt the report out of browser auto/forced dark modes — it is a paper
     document and must render light regardless of theme (client-reported
     dark-on-dark contrast breakage under Chrome auto-dark). color-scheme
     alone proved insufficient in the wild: per-element dark-mode heuristics
     (Chrome's Auto Dark, and dark-mode browser extensions) decide per-node
     whether to invert, and a node with a TRANSPARENT own background —
     relying on inheriting this div's white — gives that heuristic room to
     misjudge the subtree even when color-scheme is set correctly. Every
     text-bearing child below therefore gets its own EXPLICIT opaque
     background instead of inheriting one, which removes that ambiguity
     regardless of which mechanism is doing the darkening. */
  color-scheme: only light;
  forced-color-adjust: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report * { color-scheme: only light; }
table.rpt-table tr:nth-child(odd) td { background: #fff; }
.rpt-fig { background: #fff; }
.rpt-narrative p { color: #1a1a1a; }
.rpt-section-title { color: #1a1a1a; }
.rpt-header, .rpt-meta, .rpt-section-title, .rpt-narrative, .rpt-ap, .rpt-fig-cap,
.rpt-refs, .rpt-disclaimer, .rpt-foot, .rpt-firm, .rpt-doc-title {
  background: #fff;
}
.rpt-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2.5px solid #1a1a1a; padding-bottom: 12px; margin-bottom: 18px; }
.rpt-firm { font-family: "Space Grotesk"; font-size: 17pt; font-weight: 700; }
.rpt-firm .by { font-family: "Inter"; font-size: 8pt; color: #888; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.rpt-doc-title { text-align: right; font-size: 9pt; color: #555; }
.rpt-doc-title b { display: block; font-size: 12pt; color: #1a1a1a; }
.rpt-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; font-size: 9.5pt; margin-bottom: 20px; background: #f6f7f9; border-radius: 8px; padding: 14px 16px; }
.rpt-meta .row { display: flex; justify-content: space-between; border-bottom: 1px solid #e6e8ec; padding: 3px 0; }
.rpt-meta .row .k { color: #888; }
.rpt-meta .row .v { font-weight: 600; text-align: right; }
.rpt-section-title { font-family: "Space Grotesk"; font-size: 12pt; font-weight: 700; margin: 22px 0 10px; padding-bottom: 5px; border-bottom: 1px solid #ddd; }
.rpt-ap { border-radius: 8px; padding: 13px 15px; margin-bottom: 8px; font-size: 10pt; border-left: 4px solid; color: #1a1a1a; }
.rpt-ap.alert { background: #fdecef; border-color: #d43a56; }
.rpt-ap.warn { background: #fff6e6; border-color: #d99500; }
.rpt-ap.ok { background: #e9f9f3; border-color: #1a9e7d; }
.rpt-ap.neutral { background: #f2f3f5; border-color: #999; }
/* Only the banner's leading bold is its headline — later inline <b> emphasis
   (e.g. "are <b>not</b> incorporated" in the NRI note) must stay inline. */
.rpt-ap b:first-child { display: block; margin-bottom: 3px; }
.rpt-narrative p { margin-bottom: 9px; text-align: justify; background: #fff; }
.rpt-fig { border: 1px solid #d8dbe0; border-radius: 8px; padding: 10px; margin: 6px 0 4px; }
.rpt-fig-cap { font-size: 8.5pt; color: #777; text-align: center; margin-top: 6px; overflow-wrap: break-word; word-break: break-all; }
table.rpt-table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 8.7pt; margin-top: 6px; background: #fff; }
/* Cells must always be able to wrap: the table may never grow past the sheet.
   break-word wraps at spaces and only splits a token that alone exceeds its
   column; monster tokens (service URLs in the Determination Log) additionally
   carry word-break:break-all inline so they fold instead of forcing the
   column wide. */
table.rpt-table th { background: #1a1f29; color: #fff; text-align: left; padding: 6px 8px; font-size: 7.8pt; text-transform: uppercase; letter-spacing: .4px; white-space: normal; overflow-wrap: break-word; }
table.rpt-table td { padding: 5px 8px; border-bottom: 1px solid #e6e8ec; color: #1a1a1a; background: #fff; white-space: normal; overflow-wrap: break-word; }
/* Determination Log: the Exact-query URLs' natural width would starve every
   other column under auto layout, so this table gets fixed column widths
   (set by its <colgroup>). */
table.rpt-table.rpt-log { table-layout: fixed; }
table.rpt-table tr:nth-child(even) td { background: #f8f9fa; }
.rpt-refs { font-size: 8.3pt; color: #555; line-height: 1.5; }
.rpt-refs li { margin-bottom: 4px; background: #fff; }
.rpt-disclaimer { margin-top: 20px; font-size: 7.8pt; color: #888; line-height: 1.5; border-top: 1px solid #ddd; padding-top: 10px; }
.rpt-foot { margin-top: 14px; display: flex; justify-content: space-between; font-size: 8pt; color: #aaa; }

/* ---------- SSI chip ---------- */
.ssi-chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; margin-bottom: 14px; }
.ssi-top { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ssi-info { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--faint); color: var(--faint); font-size: 11px; display: grid; place-items: center; }
.ssi-top:hover .ssi-info { border-color: var(--accent); color: var(--accent); }
.ssi-breakdown { margin-top: 11px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.ssi-breakdown p { margin-bottom: 8px; }
.ssi-row { display: flex; justify-content: space-between; font-weight: 600; color: var(--text); margin-top: 6px; }
.ssi-row .pts { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.ssi-row-detail { font-size: 11.5px; color: var(--faint); }
.ssi-grades { margin-top: 9px; font-size: 10.5px; color: var(--faint); }
.zone-warn { background: rgba(255,176,32,.1); border-color: rgba(255,176,32,.45); color: var(--amber); }
.ssi-grade { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; font-family: "Space Grotesk"; font-size: 24px; font-weight: 700; color: #14100a; flex: none; }
.g-A { background: var(--teal); } .g-B { background: #9adf5c; } .g-C { background: var(--accent-2); } .g-D { background: var(--accent); } .g-E { background: var(--red); color: #fff; }
.ssi-meta { min-width: 0; }
.ssi-meta .t { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .6px; }
.ssi-meta .v { font-weight: 700; font-size: 14px; }
.ssi-meta .v span { color: var(--muted); font-weight: 500; }
.ssi-bars { margin-left: auto; display: flex; flex-direction: column; gap: 3px; width: 86px; flex: none; }
.ssi-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ssi-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* ---------- Context blocks (design values, quakes) ---------- */
.ctx-block { background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 12px; margin-bottom: 12px; }
.ctx-title { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 9px; }
.ctx-tag { font-weight: 600; font-size: 9.5px; color: var(--teal); background: rgba(52,211,176,.1); border: 1px solid rgba(52,211,176,.3); padding: 2px 7px; border-radius: 10px; text-transform: none; letter-spacing: .2px; }
.ctx-title select { margin-left: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; font-size: 12px; padding: 3px 6px; }
.design-controls { display: flex; gap: 10px; margin-bottom: 9px; }
.design-controls label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); }
.design-controls select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; font-size: 12px; padding: 3px 6px; max-width: 110px; }
#site-class-pills { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.sc-pill { background: var(--panel); color: var(--faint); border: 1px solid var(--line); border-radius: 7px; font-size: 11px; font-family: inherit; padding: 2px 7px; cursor: pointer; line-height: 1.5; }
.sc-pill.on { background: rgba(255, 122, 69, 0.14); border-color: #ff7a45; color: var(--text); font-weight: 600; }
.sc-pill:hover { border-color: var(--faint); }
.sc-hint { font-size: 10.5px; color: var(--faint); margin: -4px 0 8px; }
.sc-gov { font-size: 8.5px; color: #ff7a45; font-weight: 600; margin-left: 1px; }
.rpt-gov { font-size: 10px; color: #666; font-weight: 400; }
.csv-mini { margin-left: auto; background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 7px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; cursor: pointer; }
.csv-mini:hover { color: var(--accent); border-color: var(--accent); }
#spectrum-svg svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.asce41-grid { display: flex; flex-direction: column; gap: 6px; }
.asce41-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 12px; }
.asce41-row .hl { font-weight: 700; color: var(--accent-2); }
.asce41-row .kv { color: var(--muted); } .asce41-row .kv b { color: var(--text); }
.asce41-head { font-size: 9.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 7px; padding: 0 10px; }
.design-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.dv { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 6px; text-align: center; }
.dv .k { font-size: 9.5px; color: var(--faint); letter-spacing: .3px; }
.dv .n { font-family: "Space Grotesk"; font-size: 15px; font-weight: 700; color: var(--accent-2); margin-top: 2px; }
.dv.sdc .n { color: var(--red); }
.quakes-list { display: flex; flex-direction: column; gap: 5px; }
.qk { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; color: var(--muted); }
.qk .m { font-family: "Space Grotesk"; font-weight: 700; color: var(--accent); width: 40px; flex: none; }
.qk .p { min-width: 0; overflow-wrap: anywhere; }
.qk .y { margin-left: auto; color: var(--faint); flex: none; }
.ctx-empty { font-size: 12px; color: var(--faint); }
.tsu-chip { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; border: 1px solid; }
.tsu-in { background: rgba(74,168,255,.12); border-color: rgba(74,168,255,.5); color: var(--blue); }
.tsu-out { background: var(--panel-2); border-color: var(--line); color: var(--muted); font-weight: 500; }

/* Landslide card — EZRI regulatory zone + MS58 susceptibility shown together
   as one "Landslide" section (they measure different things and can diverge
   at a given site — see zoneColorFor/ZONE_LABELS.ms58) instead of as two
   chips scattered across separate parts of the sidebar. */
.landslide-card:empty { display: none; }
.landslide-card {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
  padding: 10px 12px; margin-bottom: 12px;
  /* The results panel is a multi-column layout in wide mode (see
     body.sidebar-wide #results-panel). Without this a tall card is split at the
     column break and continues in the next column, which reads as two unrelated
     fragments — the groundwater card hit this once its notes grew. */
  break-inside: avoid;
}
.landslide-card-title {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
/* Caveats and exclusions: real content, but the least important thing in the
   card and by far the longest. Collapsed so the determination stays the
   headline; one click to read them. */
.card-notes { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.card-notes > summary {
  cursor: pointer; list-style: none; font-size: 11.5px; color: var(--faint);
  font-weight: 600; display: flex; align-items: center; gap: 5px;
}
.card-notes > summary::-webkit-details-marker { display: none; }
.card-notes > summary::before {
  content: "▸"; font-size: 9px; transition: transform .15s ease; display: inline-block;
}
.card-notes[open] > summary::before { transform: rotate(90deg); }
.card-notes > summary:hover { color: var(--muted); }
.card-note {
  font-size: 11.5px; line-height: 1.45; color: var(--faint);
  margin-top: 7px; padding-left: 14px; border-left: 2px solid var(--line);
}
/* Supporting detail under a row — counts, dates, provenance. Deliberately
   quieter than .landslide-detail so the measurement stays the headline. */
.gw-sub {
  font-size: 11px; line-height: 1.4; color: var(--faint);
  margin-top: 3px; padding-left: 2px;
}
.landslide-row + .landslide-row,
/* A .gw-sub belongs to the row above it, so the next row still needs the
   separator the adjacent-sibling rule would otherwise miss. */
.gw-sub + .landslide-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.landslide-row-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.landslide-label {
  flex: none; font-weight: 700; color: var(--text); font-family: "Space Grotesk";
  font-size: 11px; letter-spacing: .02em; background: var(--panel); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 6px;
}
.landslide-detail { color: var(--muted); font-weight: 500; }
.landslide-row.landslide-warn .landslide-detail { color: var(--amber); font-weight: 600; }
.landslide-row.landslide-warn .landslide-label { border-color: rgba(255,176,32,.45); color: var(--amber); }
/* ---------- Hazard findings board ----------
   Replaces the old stack of one-off banners, chips and cards (.ap-banner,
   .tsu-chip, .landslide-card) with a single board on one row grammar. The
   --rail column is the point: every map toggle in the panel, whatever kind of
   determination it belongs to, sits in the same fixed right-hand column so
   they read as one control group instead of scattered switches. */
.findings {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  margin-bottom: 14px; overflow: hidden;
  /* The results panel is multi-column in wide mode; never split the board. */
  break-inside: avoid;
}
.findings:empty { display: none; }
.fnd-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.fnd-head-l { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.fnd-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.fnd-tally { font-size: 11px; color: var(--faint); }
.fnd-tally b { color: var(--amber); }

/* Live-layer strip. The toggles are multi-select (a second layer can be shown
   alongside the first for comparison), so the count of what's live and a
   single way out of it belong at the top of the board. */
.fnd-active {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: rgba(255,122,69,.08); border-bottom: 1px solid var(--line);
  font-size: 11px; color: var(--muted);
}
.fnd-active-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 7px var(--accent); }
.fnd-active-txt { min-width: 0; overflow-wrap: anywhere; }
.fnd-active .zone-btn { margin-left: auto; flex: none; }

.fnd-group-title {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px 7px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); border-top: 1px solid var(--line); background: rgba(0,0,0,.14);
}
.fnd-group-n {
  font-size: 9.5px; font-weight: 700; color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px; padding: 1px 6px; letter-spacing: 0;
}
/* Clear determinations are still determinations — they stay one click away,
   with their names on the summary line, instead of occupying a third of the
   panel with grey boxes. */
.fnd-clear-group > summary { cursor: pointer; list-style: none; }
.fnd-clear-group > summary::-webkit-details-marker { display: none; }
.fnd-clear-group > summary::after { content: "\25B8"; margin-left: auto; font-size: 10px; transition: transform .15s ease; }
.fnd-clear-group[open] > summary::after { transform: rotate(90deg); }
.fnd-clear-group > summary:hover { color: var(--muted); }
.fnd-group-names {
  font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fnd-clear-group[open] .fnd-group-names { display: none; }

.fnd-row { padding: 11px 12px 11px 15px; position: relative; border-top: 1px solid var(--line); }
.fnd-group > .fnd-row:first-of-type, .fnd-head + .fnd-row, .fnd-active + .fnd-row { border-top: none; }
.fnd-row + .fnd-parts { border-top: none; }
/* Severity reads off the left edge before any text is parsed. */
.fnd-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sc); }
.fnd-row.is-headline { background: var(--panel); padding-top: 13px; padding-bottom: 13px; }
.fnd-name {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: "Space Grotesk"; font-size: 12.5px; font-weight: 700; color: var(--text);
}
.fnd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); flex: none; }
.fnd-badge {
  font-family: "Inter"; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sc); border: 1px solid var(--sc); border-radius: 4px; padding: 1px 5px; opacity: .85;
}
.fnd-tag { font-family: "Inter"; font-size: 10px; font-weight: 500; color: var(--faint); }
.fnd-text { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 4px; }
.fnd-text b { color: var(--text); }
.fnd-alert .fnd-text, .fnd-flag .fnd-text, .fnd-info .fnd-text { color: var(--sc); font-weight: 600; }
.fnd-alert .fnd-text b, .fnd-flag .fnd-text b, .fnd-info .fnd-text b { color: inherit; }
.fnd-muted .fnd-text { color: var(--faint); font-style: italic; }
.fnd-detail { font-size: 11px; line-height: 1.5; color: var(--faint); margin-top: 4px; }
.fnd-src { margin-top: 7px; }

/* The map control. One strip per mappable determination, always the last
   thing in its row, always the same shape — and laid out label · button ·
   switch (the .zone-controls markup order is switch · label · button, hence
   the explicit `order`) so every switch on the board sits flush against the
   same right edge. That vertical line of switches is what the old layout
   didn't have: each card used to place its toggle wherever its own internal
   markup happened to put it. */
.fnd-act { margin-top: 9px; }
.fnd-act .zone-controls {
  margin: 0; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
  background: rgba(255,122,69,.06); border: 1px solid rgba(255,122,69,.16);
  border-radius: 8px; padding: 5px 9px;
}
.fnd-act .zone-controls:has(input:checked) { background: rgba(255,122,69,.13); border-color: rgba(255,122,69,.42); }
.fnd-act .toggle-label { order: 1; min-width: 0; font-size: 11px; font-weight: 600; color: var(--muted); }
.fnd-act .zone-controls:has(input:checked) .toggle-label { color: var(--accent); }
.fnd-act .zone-btn { order: 2; font-size: 10.5px; padding: 4px 8px; white-space: nowrap; }
.fnd-act .toggle-switch { order: 3; }

/* Sub-rows: determinations that belong to one finding but are separate
   products with separate layers (EZRI zone vs. MS58 raster; one row per dam;
   the groundwater readings). Same two-column grid, so their toggles land on
   the same rail as everything else. */
.fnd-parts { margin-top: 10px; padding-top: 2px; border-top: 1px dashed var(--line); }
.fnd-part { padding-top: 8px; }
.fnd-part + .fnd-part { margin-top: 8px; border-top: 1px solid var(--line); }
.fnd-part-line { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.fnd-part-line b { color: var(--text); }
.fnd-part.is-warn .fnd-part-line { color: var(--amber); font-weight: 600; }
.fnd-chip {
  flex: none; font-family: "Space Grotesk"; font-size: 10px; font-weight: 700;
  color: var(--text); background: var(--panel); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 6px;
}
.fnd-part.is-warn .fnd-chip { color: var(--amber); border-color: rgba(255,176,32,.45); }

/* Compact checklist row — the "screened, does not apply" set. Same content,
   one or two lines: a determination that came back clear still has to be
   visible and receipt-backed, it just must not out-weigh the hazards the site
   is actually inside. */
.fnd-row.is-compact { padding: 7px 12px 7px 15px; }
.fnd-row.is-compact::before { width: 2px; opacity: .55; }
.fnd-cline { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 12px; line-height: 1.45; }
.fnd-cline .fnd-dot { align-self: center; width: 7px; height: 7px; }
.fnd-cname { font-family: "Space Grotesk"; font-weight: 700; color: var(--text); }
.fnd-ctext { color: var(--muted); }
.fnd-row.is-compact .fnd-badge { font-size: 8px; padding: 0 4px; }
.fnd-row.is-compact .fnd-detail { margin-top: 3px; }
.fnd-row.is-compact .rcpt-btn { margin-left: auto; }
/* Sub-products (EZRI zone + MS58, per-dam rows) flattened onto one faint line
   when the finding doesn't apply. */
.fnd-cparts { font-size: 11px; line-height: 1.45; color: var(--faint); margin-top: 3px; }
.fnd-cparts b { color: var(--muted); font-weight: 700; }

/* Stated outright when nothing applies, so an all-clear site reads as a
   result rather than as an empty section. */
.fnd-none {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 11px 12px 11px 15px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.45; color: var(--muted);
}
.fnd-none .fnd-dot { flex: none; margin-top: 5px; }

.fnd-pending {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 15px;
  border-top: 1px solid var(--line); font-size: 11.5px; color: var(--faint);
}
.fnd-pending-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; animation: fnd-pulse 1.2s ease-in-out infinite; }
@keyframes fnd-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.fnd-foot {
  padding: 9px 12px; border-top: 1px solid var(--line); background: rgba(0,0,0,.14);
  font-size: 10.5px; line-height: 1.5; color: var(--faint);
}

#section-svg svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.skeleton { height: 38px; border-radius: 8px; background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%); background-size: 200% 100%; animation: shimmer 1.1s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Portfolio ---------- */
.portfolio-btn { width: 100%; margin-top: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: .15s; }
.portfolio-btn:hover { border-color: var(--accent); color: var(--accent); }
.portfolio-overlay { position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: grid; place-items: center; animation: fade .2s; }
.portfolio-modal { width: 860px; max-width: 94vw; max-height: 90vh; overflow-y: auto; background: var(--sidebar); border: 1px solid var(--line); border-radius: 16px; padding: 26px; position: relative; box-shadow: var(--shadow); }
.portfolio-modal h2 { font-family: "Space Grotesk"; font-size: 21px; margin-bottom: 6px; }
.portfolio-sub { font-size: 13px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.portfolio-sub code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: 12px; }
#portfolio-input { width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 11px 13px; font: 12.5px/1.6 ui-monospace, Menlo, monospace; resize: vertical; }
#portfolio-input:focus { outline: none; border-color: var(--accent); }
.portfolio-actions { display: flex; gap: 10px; margin: 12px 0 6px; }
.portfolio-run { width: auto; padding: 11px 22px; }
.ghost-btn { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ghost-btn:hover { color: var(--text); border-color: var(--accent); }
table.pf-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
/* sticky header + nowrap cells were previously inherited from the (now dock-
   scoped) global table rules — kept explicitly to preserve the panel layout */
table.pf-table th { position: sticky; top: 0; background: var(--panel); text-align: left; padding: 8px 10px; font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; border-bottom: 1px solid var(--line); }
table.pf-table td { padding: 9px 10px; white-space: nowrap; border-bottom: 1px solid rgba(42,50,64,.5); }
table.pf-table tr.site-row { cursor: pointer; transition: background .12s; }
table.pf-table tr.site-row:hover { background: var(--panel-2); }
.pf-grade { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-family: "Space Grotesk"; font-weight: 700; font-size: 14px; color: #14100a; }
.pf-score { display: flex; align-items: center; gap: 8px; }
.pf-score .bar { width: 90px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; flex: none; }
.pf-score .bar i { display: block; height: 100%; border-radius: 3px; }
.pf-score b { font-variant-numeric: tabular-nums; }

/* Leaflet dark tweaks */
.leaflet-container { background: #0a0d12; }
.leaflet-popup-content-wrapper { background: var(--panel); color: var(--text); border-radius: 10px; }
.leaflet-popup-tip { background: var(--panel); }
.site-marker { filter: drop-shadow(0 0 6px rgba(255,122,69,.8)); }
.radius-fill { mix-blend-mode: multiply; }
/* Isolated zone polygon uses Leaflet's Canvas renderer (see enterZoneIsolation)
   instead of SVG — Canvas layers don't support per-feature classNames, so the
   same multiply blend is applied directly to the pane's <canvas> element. */
.leaflet-overlay-pane canvas { mix-blend-mode: multiply; }

@media print {
  .no-print { display: none !important; }
  /* html/body are pinned to height:100% + overflow:hidden for the single-
     page-app screen layout (map fills the viewport, no page scroll). Print
     pagination uses the flow root's height to decide how many physical
     pages to emit — a body still fixed at one viewport-height, even with
     overflow:visible, was collapsing the whole report onto a single page. */
  /* White paper edge-to-edge: the app shell's dark background must never
     print (it shows as a dark band in the trailing space of the last page,
     because print-color-adjust:exact below forces backgrounds on). */
  html, body { height: auto; background: #fff; }
  body { overflow: visible; }
  /* The exported PDF is the report only — never the app shell (sidebar + map)
     behind the overlay. Dropping the overlay's fixed positioning below pulls
     #app back into normal flow, so it must be explicitly removed from print. */
  #app { display: none !important; }
  /* display:flex on these two (used for on-screen centering) must be reset
     to block for print — flex containers/items generally cannot fragment
     across physical pages in Chrome's print engine, which was collapsing
     the whole multi-page report onto a single page instead of paginating. */
  .report-overlay { position: static; background: #fff; display: block; }
  .report-scroll { overflow: visible; padding: 0; display: block; }
  .report { box-shadow: none; width: auto; padding: 0; margin: 0 auto; }
  @page { size: letter; margin: 0.5in; }
  /* Keep shaded headers/banners legible in print */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Never split figures, banners, or the meta grid across pages */
  .rpt-fig, .rpt-ap, .rpt-meta { break-inside: avoid; page-break-inside: avoid; }
  table.rpt-table tr { break-inside: avoid; page-break-inside: avoid; }
  table.rpt-table thead { display: table-header-group; }
  /* Section titles stay attached to the content that follows */
  .rpt-section-title { break-after: avoid; page-break-after: avoid; }
  .rpt-header { break-after: avoid; page-break-after: avoid; }
  /* Footer stays with the disclaimer — never stranded alone on a last page */
  .rpt-foot { break-before: avoid; page-break-before: avoid; }
  .rpt-narrative p { orphans: 3; widows: 3; }
  /* Horizontal fit: nothing may exceed the printable width */
  .report { max-width: 100% !important; font-size: 10pt; }
  .rpt-fig svg { max-width: 100% !important; height: auto !important; }
  /* Auto layout (proportional columns) is safe here because the base rules
     force cells to wrap; the .rpt-log colgroup still fixes the URL table. */
  table.rpt-table { width: 100%; }
  table.rpt-table td, table.rpt-table th { overflow-wrap: break-word; white-space: normal; }
  .rpt-meta { grid-template-columns: 1fr 1fr; }
  .rpt-meta .row .v { overflow-wrap: anywhere; }
}

@media (max-width: 820px) {
  /* Kill horizontal overflow — the root cause of the clipped map controls. */
  html, body { overflow-x: hidden; }

  /* Map-first: the map fills the whole screen; everything else floats over it.
     100dvh (not 100vh) so iOS Safari's toolbars don't hide the bottom. */
  #app { display: block; height: 100dvh; }
  .stage { position: fixed; inset: 0; }
  #map { position: absolute; inset: 0; }

  /* Sidebar becomes a top sheet: a peek by default, taps open to the full form. */
  .sidebar {
    position: fixed; left: 0; right: 0; top: 0; max-height: 82dvh;
    padding: calc(env(safe-area-inset-top) + 6px) 14px 18px;
    border-right: none; border-bottom: 1px solid var(--line);
    border-radius: 0 0 20px 20px; box-shadow: var(--shadow);
    z-index: 700; transition: max-height .25s ease; overscroll-behavior: contain;
  }
  .sidebar.sheet-collapsed { max-height: calc(env(safe-area-inset-top) + 92px); overflow: hidden; }
  .sheet-grip {
    display: block; width: 40px; height: 5px; padding: 0; border: none;
    border-radius: 3px; background: var(--faint); margin: 0 auto 12px; position: relative; cursor: pointer;
  }
  .sheet-grip::after { content: ""; position: absolute; inset: -16px -80px; }  /* fat hit area */
  .brand { margin-bottom: 14px; cursor: pointer; padding-right: 118px; }  /* clear the toggle pill */

  /* Prominent open/close control so "go back to search" is obvious after a search. */
  .sheet-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    position: absolute; top: calc(env(safe-area-inset-top) + 16px); right: 14px; z-index: 3;
    background: var(--accent); color: #1a1008; border: none; border-radius: 999px;
    padding: 10px 15px; font-size: 13px; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 16px rgba(255,122,69,.42); min-height: 40px;
  }
  .sheet-toggle .chev { transition: transform .25s ease; }
  .sidebar:not(.sheet-collapsed) .sheet-toggle .chev { transform: rotate(180deg); }
  .sidebar-foot { display: none; }  /* reclaim vertical space on small screens */

  /* Floating map controls: below the peek bar, hugging the right edge (no clip). */
  .leaflet-top { top: calc(env(safe-area-inset-top) + 100px) !important; }
  .map-tabs { top: calc(env(safe-area-inset-top) + 100px); right: 10px; }
  .mode-toggle { top: calc(env(safe-area-inset-top) + 214px); right: 10px; left: auto; }
  .basemap-toggle button, .mode-toggle button, .geology-tab button { padding: 10px 13px; font-size: 12.5px; min-height: 42px; }
  .place-hint { top: auto; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 96px); text-align: center; }
  .terrain3d-ui { top: calc(env(safe-area-inset-top) + 160px); right: 10px; }
  /* Below the basemap toggle, not on top of it. At the desktop offset this
     panel covers the Topo/Satellite/Geology row on a phone, and since the
     only other way out of the view is Esc — which a phone does not have —
     opening Geology would strand the user in it. Height is capped so the
     attribution cannot grow to swallow the map it is describing. */
  .geomaps-ui {
    top: calc(env(safe-area-inset-top) + 160px); right: 10px; left: 10px;
    width: auto;
  }
  /* Cap the attribution, not the panel. Scrolling the whole panel would carry
     the collapse button off the top of its own scroll box — the one control
     that has to stay reachable is the one that gets you back to the map. */
  .geomaps-ui .gm-attrib { max-height: 34vh; overflow-y: auto; }
  .zone-legend { top: calc(env(safe-area-inset-top) + 190px); left: 10px; }

  /* Sidebar is a sheet on phones — no resize rail, no wide columns. */
  .sb-resize { display: none; }
  body.sidebar-wide #results-panel { columns: auto; }

  /* Hero clears the collapsed top sheet and the map controls on the right. */
  .hero { padding: calc(env(safe-area-inset-top) + 108px) 12px calc(env(safe-area-inset-bottom) + 20px); align-items: start; }
  /* Leaflet's zoom control (z 1000, inside the map) would paint over the
     card — park it while the hero is up; pinch-zoom still works. */
  .stage:has(.hero:not([hidden])) .leaflet-control-zoom { display: none; }
  .hero-card { padding: 20px 18px 18px; }
  .hero-title { font-size: 24px; }
  .hero-sub { font-size: 13px; }
  .hero-search button { padding: 0 16px; }

  /* Results dock = bottom sheet, above the home indicator, bigger targets. */
  .table-wrap { left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 8px); }
  .table-head { padding: 11px 14px; }
  .dock-tabs button { padding: 8px 14px; font-size: 12.5px; }
  #table-collapse { font-size: 20px; padding: 0 6px; }
  .table-scroll { max-height: 44vh; -webkit-overflow-scrolling: touch; }
  .dock-toolbar { padding: 9px 14px 3px; gap: 10px; flex-wrap: wrap; }

  /* A 7-col table can't fit a phone without horizontal scroll, so on mobile each
     fault becomes a stacked card: name on top, then Distance · Age · Mmax chips.
     Dir / Slip sense / Slip rate drop out — full attributes are one tap away in
     the fault drawer. No horizontal scroll at any width. */
  #results-table thead { display: none; }
  #results-table, #results-table tbody, #results-table tr, #results-table td { display: block; }
  #results-table tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    padding: 11px 14px; border-bottom: 1px solid rgba(42,50,64,.5);
  }
  #results-table td { padding: 0; white-space: nowrap; font-size: 13px; }
  #results-table td:nth-child(2),   /* Dir */
  #results-table td:nth-child(5),   /* Slip sense */
  #results-table td:nth-child(6) {  /* Slip rate */
    display: none;
  }
  #results-table td.name {          /* fault name → full-width card title */
    order: -1; flex-basis: 100%; white-space: normal; min-width: 0;
    font-weight: 600; font-size: 14.5px; line-height: 1.3;
  }
  #results-table td.dist { order: 1; font-size: 13px; }
  #results-table td:nth-child(4) { order: 2; }   /* age pill */
  #results-table td.mmax { order: 3; }
  #results-table td.mmax::before { content: "M\2098\2093\00a0"; color: var(--faint); font-weight: 500; }

  /* Touch-sized inputs and buttons. */
  .site-input input, .site-input button,
  .proj-grid input, .proj-actions select, .proj-actions button { min-height: 44px; font-size: 15px; }
  .report-btn, .portfolio-btn { min-height: 46px; }

  /* Detail drawer + report as full-width sheets. */
  .drawer { justify-content: stretch; }
  .drawer-inner { width: 100%; max-width: 100%; padding: 22px 16px calc(env(safe-area-inset-bottom) + 22px); }
  .report-scroll { padding: 12px; }
  .report { width: 100%; padding: 22px 16px; font-size: 11pt; }
}

/* ---------- multi-peril screening ---------- */
/* Unavailable-source chip: visually quieter than in/out determinations. */
.zone-muted { background: var(--panel-2); border-color: var(--line); color: var(--faint); font-weight: 500; font-style: italic; }

/* Hazard detail rows in the sidebar block. */
/* Two-line rows: label + source share the top line, the determination gets
   the full width below — long values ("outside approved inundation
   boundaries") stay readable at any sidebar width instead of wrapping into a
   narrow center column. */
.hz-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k src" "v v"; column-gap: 8px; row-gap: 1px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid rgba(42,50,64,.45); font-size: 12px; }
.hz-k { grid-area: k; }
.hz-v { grid-area: v; }
.hz-src { grid-area: src; }
.hz-row:last-of-type { border-bottom: 0; }
.hz-k { color: var(--faint); text-transform: uppercase; letter-spacing: .4px; font-size: 10px; font-weight: 700; }
.hz-v { color: var(--text); font-weight: 500; min-width: 0; }
.hz-src { color: var(--faint); font-size: 10px; white-space: nowrap; }

/* FEMA NRI context panel. */
.nri-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.nri-score { font-family: "Space Grotesk"; font-size: 22px; font-weight: 700; color: var(--text); }
.nri-rating { font-size: 12px; font-weight: 600; color: var(--amber); }
.nri-sub { font-size: 10px; color: var(--faint); margin-left: auto; }
.nri-kvs { display: flex; gap: 10px; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.nri-bar-row { display: grid; grid-template-columns: 110px 1fr 28px; gap: 8px; align-items: center; padding: 2px 0; font-size: 11px; color: var(--muted); }
.nri-bar-row .bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.nri-bar-row .bar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.nri-bar-row .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--faint); }

/* Portfolio multi-peril extras. */
.pf-partial { display: inline-block; margin-left: 6px; font-size: 9px; color: var(--amber); border: 1px solid rgba(255,176,32,.45); border-radius: 8px; padding: 1px 6px; vertical-align: middle; }
.portfolio-actions .chip-toggle { margin-left: 2px; }

/* Scenario exposure + interop (mp2). */
.pf-modes { display: flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; margin-bottom: 10px; width: fit-content; }
.pf-modes .pf-mode { background: transparent; border: none; color: var(--muted); font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 6px; cursor: pointer; }
.pf-modes .pf-mode.active { background: var(--accent); color: #1a1008; }
.mmi-chip { display: inline-block; font-size: 11.5px; font-weight: 800; color: #14100a; border-radius: 7px; padding: 3px 9px; letter-spacing: .02em; }
.mmi-chip.mmi-out { background: var(--panel-2); color: var(--faint); border: 1px solid var(--line); font-weight: 600; }
.pf-table tr.row-muted td { color: var(--faint); }
.exposure-head { font-size: 12.5px; color: var(--muted); margin: 4px 0 8px; }
.exposure-head b { color: var(--ink); }
#exposure-controls select { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 9px 10px; font-size: 12.5px; }
#exposure-quick { width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 12px; margin-bottom: 8px; }
.exposure-quick-row { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--muted); }
.exposure-quick-row .faint-note { font-size: 10.5px; color: var(--faint); }
.coords-row { display: flex; align-items: center; gap: 8px; }
.coords-row .coords { flex: 1; min-width: 0; }
.kml-btn { width: 100%; margin-top: 8px; }

/* ---- Provenance receipts: the evidence trail behind every determination ---- */
/* A small clickable "receipt" affordance renders next to each determination's
   source tag; clicking opens the modal below with the exact government query. */
.rcpt-btn {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
  border-radius: 5px; padding: 1px 5px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; line-height: 1.4;
  white-space: nowrap; transition: border-color .12s, color .12s;
}
.rcpt-btn:hover { border-color: var(--accent); color: var(--accent); }
.rcpt-btn svg { width: 9px; height: 9px; }

.rcpt-backdrop {
  position: fixed; inset: 0; z-index: 4000; background: rgba(6,9,14,.62);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(2px);
}
.rcpt-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  width: min(640px, 100%); max-height: 86vh; overflow: auto;
  box-shadow: 0 24px 70px rgba(0,0,0,.55); padding: 0;
}
.rcpt-head {
  position: sticky; top: 0; background: var(--panel); z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--line);
}
.rcpt-head .eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--accent); }
.rcpt-head h3 { margin: 3px 0 0; font-size: 15.5px; color: var(--text); font-weight: 700; line-height: 1.25; }
.rcpt-head .sub { margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.rcpt-close { flex: none; cursor: pointer; border: 0; background: var(--panel-2); color: var(--muted); width: 26px; height: 26px; border-radius: 7px; font-size: 15px; line-height: 1; }
.rcpt-close:hover { color: var(--text); }
.rcpt-body { padding: 14px 20px 20px; }
.rcpt-determination {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 13px; margin-bottom: 14px;
}
.rcpt-determination .k { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); }
.rcpt-determination .v { font-size: 14px; color: var(--text); font-weight: 600; margin-top: 2px; }
.rcpt-meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 12px; margin-bottom: 14px; }
.rcpt-meta-grid .mk { color: var(--faint); white-space: nowrap; }
.rcpt-meta-grid .mv { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.rcpt-section-label { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); margin: 4px 0 6px; }
.rcpt-attrs { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 14px; }
.rcpt-attrs .row { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 10px; padding: 7px 11px; font-size: 12px; border-bottom: 1px solid var(--line); }
.rcpt-attrs .row:last-child { border-bottom: 0; }
.rcpt-attrs .row:nth-child(odd) { background: rgba(33,40,54,.35); }
.rcpt-attrs .ak { color: var(--muted); font-family: "Space Grotesk", monospace; overflow-wrap: anywhere; }
.rcpt-attrs .av { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.rcpt-url {
  display: block; font-family: "Space Grotesk", monospace; font-size: 11px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; overflow-wrap: anywhere; text-decoration: none; margin-bottom: 8px;
}
.rcpt-url:hover { border-color: var(--accent); color: var(--accent); }
.rcpt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rcpt-actions a, .rcpt-actions button {
  flex: 1; min-width: 130px; text-align: center; cursor: pointer; text-decoration: none;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; font-family: inherit;
}
.rcpt-actions a.primary { background: var(--accent); border-color: var(--accent); color: #1a1206; }
.rcpt-actions a:hover, .rcpt-actions button:hover { border-color: var(--accent); }
.rcpt-note { font-size: 11px; color: var(--faint); margin-top: 10px; line-height: 1.5; }

/* Narrow screens: use more of the width, and stack each raw-field key above
   its value so long values (dam lists) aren't squeezed into a tall ribbon. */
@media (max-width: 480px) {
  .rcpt-backdrop { padding: 10px; }
  .rcpt-head h3 { font-size: 14px; }
  .rcpt-head { padding: 15px 16px 11px; }
  .rcpt-body { padding: 13px 16px 18px; }
  .rcpt-attrs .row { grid-template-columns: 1fr; gap: 2px; padding: 8px 11px; }
  .rcpt-attrs .ak { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }
}

/* ---- Shared screening view (/s) — clean read-only artifact ---- */
/* The app proper is a fixed-viewport map, so the base rules pin body to
   height:100% with overflow:hidden. The share pages are ordinary documents and
   must scroll — and this is a nasty one to catch, because a hidden body still
   scrolls PROGRAMMATICALLY (scrollIntoView, scrollTo) while a wheel or
   trackpad does nothing at all. Scripted checks pass; a reader gets a page
   that ends at the fold. */
html:has(> body.share-body) { height: auto; }
.share-body { height: auto; overflow: visible; overflow-x: hidden; }
.share-body { background: radial-gradient(120% 80% at 50% -10%, #1a2030 0%, #0e1118 55%, #0a0c11 100%); min-height: 100vh; }
.share-wrap { max-width: 560px; margin: 0 auto; padding: 22px 16px 40px; }
.share-loading { text-align: center; padding: 60px 12px; }
.share-loading-note { color: var(--muted); font-size: 12.5px; margin-top: 16px; }
.share-brand, .share-head .share-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.share-logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), #e0452a); box-shadow: 0 0 18px rgba(255,122,69,.35); flex: none; position: relative; }
.share-logo::after { content: ""; position: absolute; inset: 0; background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 20l5-8 4 5 3-4 8 11' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wordmark { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 18px; color: var(--text); letter-spacing: -.02em; }
.wordmark span { color: var(--accent); }

.share-card { background: rgba(20,25,34,.72); border: 1px solid var(--line); border-radius: 16px; padding: 20px 20px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.share-by { font-size: 12px; color: var(--muted); }
.share-by b { color: var(--text); font-weight: 600; }

.share-site { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.share-site-name { font-family: "Space Grotesk", sans-serif; font-size: 21px; font-weight: 700; color: var(--text); line-height: 1.2; }
.share-site-coords { font-size: 12px; color: var(--muted); margin-top: 4px; }

.share-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.share-tiles .share-tile:only-child { grid-column: 1 / -1; }
.share-tile { display: flex; align-items: center; gap: 11px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.share-tile-grade { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; color: #12151b; flex: none; }
.share-tile-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); }
.share-tile-score { font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.share-tile-score span { font-size: 12px; color: var(--faint); font-weight: 500; }
.share-tile-sub { font-size: 11px; color: var(--muted); }

.share-hero { background: linear-gradient(90deg, rgba(255,122,69,.10), rgba(255,122,69,0)); border-left: 3px solid var(--accent); border-radius: 6px; padding: 11px 13px; font-size: 13.5px; color: var(--text); margin-bottom: 16px; line-height: 1.45; }
.share-hero b { color: #fff; }

.share-section-label { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); margin: 4px 0 8px; }
.share-dv-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.share-dv { flex: 1; min-width: 68px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; text-align: center; }
.share-dv .k { display: block; font-size: 11px; color: var(--faint); }
.share-dv .v { display: block; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 15px; color: var(--text); margin-top: 2px; }

.share-perils { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-bottom: 18px; }
.share-peril { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: baseline; padding: 10px 12px; background: var(--panel); font-size: 12.5px; }
.share-peril.warn { background: rgba(255,84,112,.07); }
.share-peril.muted .pv { color: var(--faint); }
.share-peril .pk { color: var(--muted); font-weight: 600; display: flex; align-items: baseline; gap: 7px; }
.share-peril .pi { font-size: 13px; }
.share-peril .pv { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.share-src { color: var(--accent); text-decoration: none; font-size: 11px; white-space: nowrap; border-bottom: 1px dotted rgba(255,122,69,.5); }
.share-src:hover { border-bottom-style: solid; }

.share-cta-wrap { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.share-cta { display: block; text-align: center; text-decoration: none; background: var(--accent); color: #1a1206; font-weight: 700; font-size: 14.5px; padding: 13px; border-radius: 11px; box-shadow: 0 6px 20px rgba(255,122,69,.25); }
.share-cta:hover { filter: brightness(1.05); }
.share-cta.ghost { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); box-shadow: none; font-weight: 600; font-size: 13px; padding: 11px; }
.share-foot { font-size: 10.5px; color: var(--faint); line-height: 1.55; text-align: center; }
.share-built { display: block; margin-top: 8px; color: var(--muted); font-weight: 600; letter-spacing: .3px; }
.share-empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.share-empty .share-cta { display: inline-block; margin-top: 16px; }

@media (max-width: 440px) {
  .share-tiles { grid-template-columns: 1fr; }
  .share-peril { grid-template-columns: 1fr; gap: 3px; }
  .share-peril .pk { font-size: 11px; }
}

/* ---- Share dialog (customize name / firm / note) ---- */
.share-dlg .rcpt-body { padding-top: 4px; }
.share-dlg-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 12px 0 5px; }
.share-dlg-label span { color: var(--faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
.share-dlg-input { width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; }
.share-dlg-input:focus { border-color: var(--accent); }
.share-dlg-input::placeholder { color: var(--faint); }
.share-dlg-preview { margin: 14px 0 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.share-dlg-preview .pk { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.share-dlg-preview .pv { font-size: 13px; color: var(--muted); }
.share-dlg-preview .pv b { color: var(--text); }
.share-dlg-preview .note { color: var(--accent-2); font-style: italic; margin-top: 4px; font-size: 12.5px; }
.share-dlg .rcpt-actions { margin-top: 12px; }
.ghost-btn { flex: 1; min-width: 110px; text-align: center; text-decoration: none; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; }
.ghost-btn:hover { border-color: var(--accent); }
.share-dlg-hint { font-size: 11px; color: var(--faint); margin-top: 10px; line-height: 1.5; }

/* Share view: firm chip + note banner */
.share-by .firm { display: block; color: var(--faint); font-size: 11px; font-weight: 500; margin-top: 1px; }
/* A technical footnote under a value, not the sharer's own note above — muted
   and plain, so a derived figure is labelled without being dressed as a quote. */
.share-caveat { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: -6px 0 16px; }
.share-note { background: rgba(245,181,68,.09); border: 1px solid rgba(245,181,68,.3); border-radius: 10px; padding: 10px 13px; font-size: 13.5px; font-style: italic; color: var(--accent-2); margin-bottom: 16px; line-height: 1.4; }

/* ===========================================================================
   Verification Mode — "check a report"
   The reading order is claim → source → evidence → verdict, so the row grid
   runs label / comparison / receipt stamp / badge. Verdict colour is the only
   place the palette is allowed to shout: teal confirms, red contradicts, amber
   asks for judgement, and muted-dashed means no determination exists at all.
   =========================================================================== */
.verify-btn { flex-direction: column; gap: 3px; padding: 11px 10px; }
.verify-btn .btn-sub { font-size: 10.5px; font-weight: 500; color: var(--faint); letter-spacing: .1px; }
.verify-btn:hover .btn-sub { color: var(--accent); opacity: .8; }
/* Above Leaflet's control layer — otherwise the map's zoom buttons paint
   through the modal. */
.verify-overlay { z-index: 1100; }
.verify-modal { width: 1000px; }
.vf-kicker { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal); margin-bottom: 7px; }

/* --- claim entry --- */
.vf-site-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 4px; }
.vf-grow { flex: 1; }
.vf-use-site { padding: 9px 14px; white-space: nowrap; }
.vf-field { display: flex; flex-direction: column; gap: 5px; }
.vf-field > label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); font-weight: 600; }
.vf-field input[type="text"], .vf-field input[type="number"], .vf-field select,
.vf-basis select, .vf-dv input, .vf-dv select {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 9px 11px; font-size: 13px; font-family: inherit; width: 100%;
}
.vf-field input:focus, .vf-field select:focus, .vf-dv input:focus, .vf-dv select:focus,
.vf-basis select:focus { outline: none; border-color: var(--accent); }
.vf-site-row .site-input { margin: 0; }
.vf-site-state { font-size: 12px; color: var(--muted); margin: 9px 0 4px; min-height: 17px; }
.vf-site-ok { color: var(--teal); }
.vf-site-coords { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--faint); }
.vf-section-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint);
  font-weight: 700; margin: 16px 0 9px; padding-top: 13px; border-top: 1px solid var(--line); }
.vf-basis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vf-basis-note { font-size: 11.5px; color: var(--faint); margin-top: 8px; line-height: 1.5; }

/* The design card holds eight numeric fields, so it takes the extra width. A
   clipped "2.268" reading as "2.2" is exactly the quiet misreading this
   feature exists to catch — it must not happen in our own form. */
.vf-claims { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 14px; margin-top: 18px; align-items: start; }
.vf-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 15px; display: flex; flex-direction: column; gap: 11px; }
.vf-card h3 { font-family: "Space Grotesk"; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: .2px; }
.vf-dist-row { display: grid; grid-template-columns: 1fr 74px; gap: 7px; }
.vf-inline .chip-toggle { font-size: 12px; }
.vf-dv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vf-dv { display: grid; grid-template-columns: 46px 1fr 14px; align-items: center; gap: 6px; }
.vf-dv-41 { grid-template-columns: 54px 1fr 1fr; }
.vf-dv-k { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--muted); font-weight: 500; }
.vf-dv-41 .vf-dv-k { font-size: 10px; }
/* Spinner arrows steal ~16px from a field that has to show four significant
   figures; the values are typed, never stepped. */
.vf-dv input { -moz-appearance: textfield; appearance: textfield; }
.vf-dv input::-webkit-outer-spin-button, .vf-dv input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vf-dv input, .vf-dv select { padding: 7px 8px; font-size: 12.5px; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.vf-dv-u { font-size: 10.5px; color: var(--faint); }
.vf-dv-note { font-size: 11px; color: var(--faint); line-height: 1.5; }
.vf-run-row { display: flex; gap: 10px; align-items: center; margin: 18px 0 8px; flex-wrap: wrap; }
.vf-run { width: auto; padding: 12px 24px; }
.vf-run:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }

/* --- verdicts --- */
.vf-res-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.vf-res-head h2 { margin-bottom: 4px; }
.vf-res-site { font-size: 12.5px; color: var(--muted); }
.vf-summary { display: flex; align-items: center; gap: 13px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; flex: none; }
.vf-sum-n { font-family: "Space Grotesk"; font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.vf-sum-of { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.vf-sum-bits { font-size: 11.5px; color: var(--muted); line-height: 1.6; max-width: 230px; }
.vf-sum-bits b { color: var(--text); font-variant-numeric: tabular-nums; }
.vf-sum-ok { border-color: rgba(52,211,176,.45); } .vf-sum-ok .vf-sum-n { color: var(--teal); }
.vf-sum-warn { border-color: rgba(255,176,32,.45); } .vf-sum-warn .vf-sum-n { color: var(--amber); }
.vf-sum-alert { border-color: rgba(255,84,112,.5); } .vf-sum-alert .vf-sum-n { color: var(--red); }

.vf-rows { display: flex; flex-direction: column; }
.vf-row { display: grid; grid-template-columns: 148px minmax(0,1fr) auto 96px; gap: 14px; align-items: start;
  padding: 13px 0 13px 12px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent;
  opacity: .55; transform: translateY(5px); transition: opacity .45s, transform .45s, border-color .45s; }
.vf-row.vf-in { opacity: 1; transform: none; }
.vf-row-match.vf-in { border-left-color: rgba(52,211,176,.55); }
.vf-row-mismatch.vf-in { border-left-color: var(--red); background: rgba(255,84,112,.035); }
.vf-row-check.vf-in { border-left-color: rgba(255,176,32,.6); }
/* Incomplete: the value held, the determination didn't cover everything. Violet
   keeps it visually distinct from both the red of a contradiction and the amber
   of an ambiguity — it is a third kind of finding, not a softer one. */
.vf-row-incomplete.vf-in { border-left-color: rgba(167,139,250,.75); background: rgba(167,139,250,.04); }
.vf-row-nc.vf-in { border-left-color: var(--line); }
.vf-k { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; line-height: 1.45; padding-top: 2px; }
.vf-v { font-size: 13px; color: var(--text); min-width: 0; }
.vf-v.pending { color: var(--faint); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.vf-v.pending::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 1.6px solid var(--line); border-top-color: var(--teal); animation: vfspin .7s linear infinite; }
@keyframes vfspin { to { transform: rotate(360deg); } }
.vf-compare { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.vf-side { display: flex; align-items: baseline; gap: 6px; }
.vf-side-k { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--faint); }
.vf-side-v { font-size: 13px; font-weight: 600; }
.vf-derived { color: var(--text); }
.vf-arrow { color: var(--faint); font-size: 12px; }
.vf-delta, .vf-sev { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; padding: 2px 7px; border-radius: 5px; }
.vf-delta { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.vf-sev { background: rgba(255,84,112,.13); color: var(--red); border: 1px solid rgba(255,84,112,.35); font-weight: 600; }
.vf-note { font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 5px; }
.vf-stamp { display: flex; align-items: center; gap: 7px; padding-top: 1px; }
.vf-stamp-time { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; color: var(--faint); white-space: nowrap; }
.vf-stamp-time.live { color: var(--teal); }
.vf-badge-slot { display: flex; justify-content: flex-end; padding-top: 1px; }
.vf-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; display: inline-block; animation: vfpop .18s ease-out; }
@keyframes vfpop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.vf-match { color: var(--teal); background: rgba(52,211,176,.12); border: 1px solid rgba(52,211,176,.4); }
.vf-mismatch { color: var(--red); background: rgba(255,84,112,.12); border: 1px solid rgba(255,84,112,.45); }
.vf-check { color: var(--amber); background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.4); }
/* The memo is the action a reviewer takes after reading the findings, so it
   carries a little more weight than the other footer buttons without becoming
   a second primary button. */
.vf-res-actions .primary-ghost { border-color: rgba(52,211,176,.45); color: var(--teal); }
.vf-res-actions .primary-ghost:hover { background: rgba(52,211,176,.08); }
.vf-incomplete { color: #c4b5fd; background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.45); }
.vf-nc { color: var(--faint); background: transparent; border: 1px dashed var(--line); }
.vf-res-actions { display: flex; gap: 10px; margin: 18px 0 10px; flex-wrap: wrap; }
.vf-error { background: rgba(255,84,112,.07); border: 1px solid rgba(255,84,112,.3); border-radius: 10px;
  padding: 14px 16px; font-size: 13px; color: var(--text); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .vf-row { transition: none; opacity: 1; transform: none; }
  .vf-badge { animation: none; }
  .vf-v.pending::before { animation-duration: 2.4s; }
}

@media (max-width: 980px) {
  .vf-claims { grid-template-columns: repeat(2, 1fr); }
  .vf-basis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .verify-modal { padding: 20px 16px; max-height: 94vh; }
  .vf-claims, .vf-basis { grid-template-columns: 1fr; }
  .vf-site-row { flex-direction: column; align-items: stretch; }
  .vf-use-site { width: 100%; }
  .vf-res-head { flex-direction: column; }
  .vf-summary { width: 100%; }
  .vf-sum-bits { max-width: none; }
  /* Stacked cards: the badge is the answer, so it leads the row on a phone. */
  .vf-row { grid-template-columns: 1fr auto; gap: 6px 10px; padding: 14px 0 14px 11px; }
  .vf-k { grid-row: 1; font-size: 10.5px; }
  .vf-badge-slot { grid-row: 1; grid-column: 2; }
  .vf-v { grid-row: 2; grid-column: 1 / -1; }
  .vf-stamp { grid-row: 3; grid-column: 1 / -1; }
  .vf-field input[type="text"], .vf-field input[type="number"], .vf-field select,
  .vf-basis select { min-height: 44px; }
  .vf-run, .vf-res-actions .ghost-btn, .vf-run-row .ghost-btn { min-height: 46px; }
}

/* --- Reading a document -----------------------------------------------------
   The drop zone is the front door for the reviewer's real artifact. Provenance
   rows carry the other half of the evidence chain: where in the document each
   claim came from, and whether that sentence could actually be found there. */
/* The footnote class was only ever styled by id on the portfolio modal, so
   every other use of it — including all four in this overlay — rendered as
   body copy. These are caveats, not prose. */
.portfolio-foot { font-size: 11.5px; line-height: 1.6; color: var(--faint); margin-top: 14px; }
.portfolio-foot sub { font-size: 9px; }

.vf-modes { margin: 14px 0 4px; }
.vf-drop { border: 1.5px dashed var(--line); border-radius: 14px; padding: 34px 20px; text-align: center;
  cursor: pointer; transition: border-color .18s, background .18s, transform .18s; background: rgba(52,211,176,.02); }
.vf-drop:hover, .vf-drop:focus-visible { border-color: var(--teal); background: rgba(52,211,176,.05); outline: none; }
.vf-drop.over { border-color: var(--teal); background: rgba(52,211,176,.09); transform: scale(1.01); }
.vf-drop.busy { pointer-events: none; opacity: .55; }
/* The zone's own contents must not take drag events: dragleave fires on the
   parent the moment the pointer crosses a child, which switched the highlight
   off and on again under the cursor while the user was deciding where to let
   go. They are decorative — nothing here needs to be a drag target. */
.vf-drop-ic, .vf-drop-main, .vf-drop-sub { pointer-events: none; }
.vf-drop-ic { color: var(--faint); margin-bottom: 8px; }
.vf-drop:hover .vf-drop-ic, .vf-drop.over .vf-drop-ic { color: var(--teal); }
.vf-drop-main { font-family: "Space Grotesk"; font-size: 15px; font-weight: 600; color: var(--text); }
.vf-drop-sub { font-size: 12px; color: var(--faint); margin-top: 5px; }
.vf-paste { margin-top: 12px; }
.vf-paste summary { font-size: 12.5px; color: var(--muted); cursor: pointer; padding: 6px 0; }
.vf-paste summary:hover { color: var(--text); }
.vf-paste textarea { width: 100%; margin-top: 8px; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 10px; padding: 11px 13px; font: 12.5px/1.6 ui-monospace, Menlo, monospace; resize: vertical; }
.vf-paste textarea:focus { outline: none; border-color: var(--accent); }
.vf-paste .ghost-btn { margin-top: 8px; }
/* Backstop for anything long and unbroken that reaches this box (a URL, a
   filename, an upstream's error text): it must wrap rather than push its own
   container sideways off a phone screen. */
.vf-doc-status { overflow-wrap: anywhere; }
.vf-doc-status { margin-top: 14px; font-size: 13px; line-height: 1.55; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); display: flex; align-items: center; gap: 9px; }
.vf-doc-working { color: var(--muted); }
.vf-doc-ok { color: var(--teal); border-color: rgba(52,211,176,.35); background: rgba(52,211,176,.06); }
.vf-doc-warn { color: var(--amber); border-color: rgba(255,176,32,.35); background: rgba(255,176,32,.05); }
.vf-doc-error { color: var(--red); border-color: rgba(255,84,112,.35); background: rgba(255,84,112,.05); }
.vf-doc-spin { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block;
  border: 1.6px solid var(--line); border-top-color: var(--teal); animation: vfspin .7s linear infinite; }

/* A field the reader filled in — visibly not the reviewer's own typing. */
.vf-filled { border-color: rgba(52,211,176,.5) !important; background: rgba(52,211,176,.06) !important; }

.vf-prov { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.vf-prov-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vf-prov-row { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid rgba(42,50,64,.55); }
.vf-prov-row:last-child { border-bottom: 0; }
.vf-prov-k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.vf-prov-q { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; line-height: 1.6;
  color: var(--text); font-style: italic; }
.vf-prov-skip .vf-prov-q, .vf-prov-skip .vf-prov-k { color: var(--faint); }
.vf-prov-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.vf-page { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.vf-readby { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; color: var(--faint); }
.vf-anchor { font-size: 10px; white-space: nowrap; }
.vf-anchor.ok { color: var(--teal); }
.vf-anchor.bad { color: var(--amber); }
.vf-anchor.none { color: var(--faint); }

.vf-extracted-banner { font-size: 12.5px; line-height: 1.55; color: var(--muted); background: rgba(52,211,176,.06);
  border: 1px solid rgba(52,211,176,.28); border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; }
.vf-extracted-banner b { color: var(--text); }

/* Revision re-check: the delta between this document run and the previous
   check of the same site. Same panel language as the banner above it, but
   neutral — the strip reports movement, it does not celebrate or accuse. */
.vf-diff { font-size: 12.5px; line-height: 1.6; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.vf-diff-head { font-weight: 700; color: var(--text); margin-bottom: 7px; }
.vf-diff-src { font-weight: 400; color: var(--faint); font-size: 11.5px; }
.vf-diff-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 3px 0; color: var(--muted); }
.vf-diff-k { font-weight: 600; color: var(--text); min-width: 150px; }
.vf-diff-sub { font-weight: 400; color: var(--faint); }
.vf-diff-v { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.vf-diff-arrow { color: var(--faint); }
.vf-diff-vals { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--faint); }
.vf-diff-good { border-left: 2px solid rgba(52,211,176,.55); padding-left: 8px; }
.vf-diff-bad { border-left: 2px solid rgba(248,113,113,.55); padding-left: 8px; }
/* The source sentence, inside a verdict row: the other end of the evidence
   chain from the receipt. */
.vf-src-quote { margin-top: 7px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  line-height: 1.6; color: var(--faint); font-style: italic; border-left: 2px solid var(--line);
  padding-left: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }

/* The Review Sheet: the run graded against the county reviewer's checklist.
   Same panel language as the brief; rows reuse the verdict badge palette so a
   "Finding" here reads with the same weight as a mismatch above it. */
.vf-sheet { margin: 20px 0 4px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.vf-sheet h3 { font-family: "Space Grotesk"; font-size: 17px; font-weight: 600; }
.vf-sheet-counts { font-size: 12.5px; color: var(--muted); white-space: nowrap; padding-top: 22px; }
.vf-sheet-counts b { color: var(--text); }
.vf-sheet-counts .vf-sheet-n-alert { color: var(--red); }
.vf-corridor { margin: 8px 0 4px; }
.vf-corridor summary { cursor: pointer; font-size: 12.5px; color: var(--muted); user-select: none; }
.vf-corridor summary::marker { color: var(--muted); }
.vf-corridor-hint { font-size: 11px; color: var(--muted); opacity: .75; margin-left: 6px; }
.vf-corridor textarea { width: 100%; margin-top: 6px; background: rgba(255,255,255,.04); color: var(--text);
  border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 8px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; resize: vertical; }
.vf-corridor-note { font-size: 11px; color: var(--muted); margin-top: 4px; }
.vf-sheet-action { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.4px;
  padding: 8px 10px; border-radius: 6px; margin: 2px 0 10px; }
.vf-sheet-action-open { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); }
.vf-sheet-action-ok { color: var(--green, #3fb27f); background: color-mix(in srgb, var(--green, #3fb27f) 9%, transparent); border: 1px solid color-mix(in srgb, var(--green, #3fb27f) 30%, transparent); }
.vf-sheet-area { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--faint); margin: 16px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.vf-sheet-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.vf-sheet-row:last-child { border-bottom: 0; }
.vf-sheet-badge { padding-top: 2px; }
.vf-sheet-badge .vf-badge { animation: none; }
.vf-sheet-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.vf-sheet-auth { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; font-weight: 400;
  letter-spacing: .3px; color: var(--faint); margin-left: 6px; }
.vf-sheet-note { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.vf-sheet-row.vf-sheet-finding .vf-sheet-note { color: var(--text); }
@media (max-width: 640px) {
  .vf-sheet { padding: 15px 14px; }
  .vf-sheet-row { grid-template-columns: 1fr; gap: 4px; }
  .vf-sheet-counts { padding-top: 0; white-space: normal; }
}

.vf-brief { margin: 20px 0 4px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.vf-brief-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.vf-brief-head h3 { font-family: "Space Grotesk"; font-size: 17px; font-weight: 600; }
.vf-brief-loading { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); padding: 6px 0; }
.vf-brief-body p { font-size: 13.5px; line-height: 1.72; color: var(--text); margin-bottom: 12px; }
.vf-brief-body p:last-child { margin-bottom: 0; }
.vf-brief-foot { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--faint); line-height: 1.5; }
.vf-brief-copy { padding: 7px 13px; font-size: 12px; flex: none; }

@media (max-width: 820px) {
  .vf-drop { padding: 26px 14px; }
  .vf-prov-row { grid-template-columns: 1fr; gap: 5px; }
  .vf-prov-meta { justify-content: flex-start; }
  .vf-brief { padding: 15px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-drop, .vf-drop.over { transition: none; transform: none; }
  .vf-doc-spin { animation-duration: 2.4s; }
}

/* ---------- shared report check (/v) ----------
   Reuses the screening-share card shell; only the verdict rows are new. The
   colours match the in-app verdict badges exactly — a recipient who later
   opens the app should recognise what they were sent. */
.vs-summary { border-radius: 12px; padding: 14px 16px; margin: 4px 0 18px; border: 1px solid var(--line); background: var(--panel-2); }
.vs-sum-head { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.3; }
.vs-sum-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.vs-sum-alert { border-color: rgba(255,84,112,.5); background: rgba(255,84,112,.07); }
.vs-sum-incomplete { border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.07); }
.vs-sum-warn { border-color: rgba(255,176,32,.45); background: rgba(255,176,32,.06); }
.vs-sum-ok { border-color: rgba(52,211,176,.45); background: rgba(52,211,176,.06); }

.vs-rows { display: flex; flex-direction: column; gap: 2px; }
.vs-row { padding: 13px 0 13px 12px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.vs-row:last-child { border-bottom: none; }
.vs-match { border-left-color: rgba(52,211,176,.55); }
.vs-mismatch { border-left-color: var(--red); background: rgba(255,84,112,.035); }
.vs-incomplete { border-left-color: rgba(167,139,250,.75); background: rgba(167,139,250,.04); }
.vs-check { border-left-color: rgba(255,176,32,.6); }
.vs-nc { border-left-color: var(--line); }

.vs-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.vs-claim { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.vs-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.vs-b-match { color: var(--teal); background: rgba(52,211,176,.12); border: 1px solid rgba(52,211,176,.4); }
.vs-b-mismatch { color: var(--red); background: rgba(255,84,112,.12); border: 1px solid rgba(255,84,112,.45); }
.vs-b-incomplete { color: #c4b5fd; background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.45); }
.vs-b-check { color: var(--amber); background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.4); }
.vs-b-nc { color: var(--faint); background: var(--panel-2); border: 1px solid var(--line); }

.vs-compare { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vs-side { display: flex; align-items: baseline; gap: 6px; }
.vs-k { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--faint); }
.vs-v { font-size: 13.5px; font-weight: 600; color: var(--text); }
.vs-arrow { color: var(--faint); font-size: 12px; }
.vs-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 7px; }
.vs-quote { font-size: 12px; color: var(--faint); font-style: italic; line-height: 1.5; margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line); }
.vs-page { font-family: "IBM Plex Mono", ui-monospace, monospace; font-style: normal; font-size: 10px; }

@media (max-width: 520px) {
  .vs-row-head { flex-direction: column; align-items: flex-start; gap: 5px; }
  .vs-compare { flex-direction: column; align-items: flex-start; gap: 3px; }
  .vs-arrow { display: none; }
}

/* ---------- window-wide file drop ----------
   Shown while a file is dragged anywhere over the app. Its job is to make the
   whole window an obvious target, so a drop that misses the zone still lands
   somewhere of ours instead of navigating the browser to the file. */
.file-drop-veil { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  background: rgba(10,12,17,.82); backdrop-filter: blur(3px); pointer-events: none; }
.file-drop-veil-card { border: 2px dashed var(--teal); border-radius: 18px; padding: 40px 54px; text-align: center;
  background: rgba(52,211,176,.06); color: var(--teal); max-width: min(90vw, 460px); }
.file-drop-veil-main { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 20px; font-weight: 700;
  color: var(--text); margin-top: 10px; }
.file-drop-veil-sub { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* Copy that adapts to the pointer: on a touch device there is no drag-and-drop
   at all, so "drop it here" is an instruction nobody can follow. */
.only-coarse { display: none; }
@media (pointer: coarse) {
  .only-fine { display: none; }
  .only-coarse { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .file-drop-veil { backdrop-filter: none; } }

/* ---------- site typeahead ----------
   One dropdown, three mounts (hero, sidebar, verification overlay). It sits
   inside the field's own container so it travels with whichever surface the
   field is on, and its z-index clears the Leaflet panes (400-700) and the
   verification overlay (1100) both. */
.ta-drop {
  /* The same dropdown appears in a 360px sidebar and a 540px hero card, so it
     adapts to its OWN width rather than the viewport's — a media query would
     make the desktop sidebar wear the desktop layout and truncate every name
     to "Pioneer Squ…". */
  container-type: inline-size;
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1300;
  background: var(--sidebar); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55); overflow: hidden auto; max-height: 320px;
  animation: taIn .13s ease-out;
}
@keyframes taIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ta-drop { animation: none; } }

.ta-row {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; border-bottom: 1px solid rgba(42,50,64,.5);
}
.ta-row:last-child { border-bottom: 0; }
/* Hover and keyboard share one highlight: whichever the reader is using, the
   row that Enter would take is the row that looks taken. */
.ta-row.on { background: rgba(255,122,69,.10); }
.ta-row.on .ta-1 { color: var(--text); }

.ta-ic {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.ta-row.on .ta-ic { color: var(--accent); border-color: rgba(255,122,69,.4); }
.ta-ic-recent { color: var(--teal); }
.ta-ic-coord { color: var(--teal); }

.ta-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ta-1 { font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The typed substring, bolded in place — the reason six rows scan in a glance. */
.ta-1 b { color: var(--accent); font-weight: 700; }
.ta-2 { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The coordinate is the value this app screens on, so it is shown before the
   commit rather than after it. */
.ta-co { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--faint); white-space: nowrap; }

/* Narrow mount (the sidebar, and any phone): the coordinate drops under the
   name instead of competing with it for the same line. */
@container (max-width: 400px) {
  .ta-row { grid-template-columns: 26px 1fr; row-gap: 1px; }
  .ta-ic { width: 26px; height: 26px; }
  .ta-co { grid-column: 2; grid-row: 2; font-size: 10px; }
  .ta-2 { grid-row: 3; }
}
@media (max-width: 560px) {
  .ta-row { grid-template-columns: 26px 1fr; row-gap: 2px; }
  .ta-ic { width: 26px; height: 26px; }
  .ta-co { grid-column: 2; font-size: 10px; }
}

/* Envelope table, Tetra Tech deliverable format: per-class "extract" cells and
   the selected-envelope rows Dave Lanzarin's sheet shades gray/brown — toned
   to the report palette but keeping the same information design. */
table.rpt-table tr td.env-group { font-weight: 600; }
table.rpt-table tr td.env-x { background: #f4f4f1; }
table.rpt-table tr.env-sel td { background: #f2ebdd; }

/* ---------- Assistant rail ----------
   A third grid column on #app, width driven by --asw so the map reflows rather
   than sliding under a floating panel — the same contract the left sidebar
   keeps. z-index 1200: the Copilot remains usable while portfolio, report,
   exposure, and verification workspaces are open; otherwise it can describe
   those surfaces but cannot act on them. */
.assistant {
  grid-column: 3; position: relative; z-index: 1200;
  background: linear-gradient(180deg, var(--sidebar), #0f1219);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-width: 0; height: 100vh;
}
.as-resize { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 2; }
.as-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.as-brand { display: flex; align-items: center; gap: 8px; font-family: "Space Grotesk"; font-weight: 600; font-size: 14px; }
.as-brand svg { color: var(--accent); }
.as-icon-btn {
  background: none; border: 1px solid transparent; color: var(--muted);
  font-size: 19px; line-height: 1; cursor: pointer; border-radius: 7px; padding: 2px 8px;
}
.as-icon-btn:hover { color: var(--text); border-color: var(--line); }

.as-scope {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 8px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018);
}
.as-scope-tag {
  flex: 0 0 auto; border: 1px solid rgba(255,122,69,.35); border-radius: 999px;
  padding: 2px 7px; color: var(--accent); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.as-scope-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }

.as-log { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.as-empty { color: var(--faint); font-size: 12.5px; line-height: 1.6; }
.as-empty b { color: var(--muted); font-weight: 600; }

.as-msg { font-size: 13px; line-height: 1.62; }
.as-msg.user {
  align-self: flex-end; max-width: 88%;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px 12px 3px 12px; padding: 9px 12px; color: var(--text);
}
.as-msg.bot { color: var(--text); }
.as-msg.bot p { margin: 0 0 9px; }
.as-msg.bot p:last-child { margin-bottom: 0; }
.as-msg.bot ul { margin: 0 0 9px; padding-left: 17px; }
.as-msg.bot li { margin-bottom: 4px; }
.as-msg.bot strong { color: #fff; font-weight: 600; }
.as-msg.bot .rcpt-btn { margin-left: 4px; vertical-align: 1px; }
.as-msg.err { color: var(--red); font-size: 12.5px; }

/* Typed result cards: the server chooses one of a small set of schemas and the
   client constructs the DOM. They make the decisive result visible without
   turning model prose into arbitrary HTML. */
.as-card {
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.as-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 11px 2px; }
.as-card-title { min-width: 0; color: #fff; font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.as-card-source .rcpt-btn { margin: 0; }
.as-card-sub { padding: 2px 11px 9px; color: var(--faint); font-size: 10.5px; line-height: 1.4; }
.as-card-row {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 9px;
  padding: 9px 11px; border: 0; border-top: 1px solid var(--line); background: none;
  color: var(--text); text-align: left; font: inherit;
}
button.as-card-row { cursor: pointer; }
button.as-card-row:hover { background: rgba(255,122,69,.055); }
.as-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.as-card-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 650; }
.as-card-copy small { color: var(--faint); font-size: 10px; line-height: 1.35; }
.as-card-copy small.as-card-detail { color: var(--muted); }
.as-card-badge {
  flex: 0 0 auto; border-radius: 7px; padding: 3px 7px; background: var(--panel-2);
  color: var(--accent); font-size: 10px; font-weight: 750; white-space: nowrap;
}
.as-card-exposure .as-card-badge { color: #ffd166; }
.as-card-job_progress .as-card-badge { color: var(--teal); }
.as-card-note { padding: 8px 11px; border-top: 1px solid var(--line); color: var(--faint); font-size: 10px; line-height: 1.45; }

/* Tool steps. The panel says which government service it is waiting on while
   it waits — the same claim the receipts make, shown while it is still true. */
.as-steps { display: flex; flex-direction: column; gap: 3px; margin-bottom: 2px; }
.as-step {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--faint); letter-spacing: .2px;
}
.as-step .as-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: 0 0 auto;
}
.as-step.run .as-dot { background: var(--accent); animation: as-pulse 1s ease-in-out infinite; }
.as-step.done .as-dot { background: var(--teal); }
@keyframes as-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Confirmation. Anything that costs real work, produces a file, or leaves the
   browser stops here until it is clicked. */
.as-confirm {
  border: 1px solid var(--accent); background: rgba(255,122,69,.08);
  border-radius: 10px; padding: 10px 12px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.as-confirm-txt { font-size: 12.5px; color: var(--text); }
.as-confirm-btns { display: flex; gap: 6px; }
.as-confirm button {
  border-radius: 7px; padding: 5px 11px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
}
.as-confirm button.go { background: var(--accent); border-color: var(--accent); color: #fff; }
.as-confirm button:hover { border-color: var(--accent); }
.as-confirm.spent { border-color: var(--line); background: none; }

/* An action that already happened, with the way back out of it. */
.as-did {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px;
}
.as-did button {
  background: none; border: none; color: var(--accent); font-size: 11.5px;
  font-weight: 600; cursor: pointer; padding: 0; white-space: nowrap;
}
.as-did button:hover { text-decoration: underline; }

/* Suggestions. They change with what is on screen — that is what makes the
   panel discoverable without a tour. */
.as-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; flex: 0 0 auto; }
.as-suggest button {
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: 999px; padding: 5px 11px; font-size: 11.5px; cursor: pointer;
  text-align: left; transition: border-color .12s, color .12s;
}
.as-suggest button:hover { border-color: var(--accent); color: var(--text); }

.as-form {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.as-form textarea {
  flex: 1; resize: none; max-height: 140px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font-family: inherit; font-size: 13px; line-height: 1.5;
  padding: 9px 11px; outline: none;
}
.as-form textarea:focus { border-color: var(--accent); }
.as-send {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: var(--accent); border: none; color: #fff; display: grid; place-items: center;
}
.as-send:disabled { background: var(--panel-2); color: var(--faint); cursor: default; }
.as-foot { flex: 0 0 auto; padding: 0 16px 14px; font-size: 10px; color: var(--faint); line-height: 1.5; }

/* The sidebar entry — the assistant's real front door.
   Carries the accent because it is the one thing in this stack that does
   something new; Portfolio and Check-a-report are panel-dark, and a fourth
   panel-dark button would have disappeared into them. */
.assistant-btn {
  flex-direction: column; gap: 4px; padding: 11px 10px;
  background:
    linear-gradient(135deg, rgba(255,122,69,.17), rgba(255,122,69,.05)),
    var(--panel-2);
  border-color: rgba(255,122,69,.42);
  color: var(--accent);
  position: relative; overflow: hidden;
}
/* A slow sheen that crosses once on hover — the only animated thing in the
   sidebar, which is what makes it read as the newest surface without a badge
   that would need removing in three months. */
.assistant-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,170,130,.14) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.assistant-btn:hover {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 4px 18px rgba(255,122,69,.18);
}
.assistant-btn:hover::after { transform: translateX(120%); }
.assistant-btn .ab-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.assistant-btn .ab-mark {
  width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #e0452a); color: #fff;
  box-shadow: 0 2px 8px rgba(255,122,69,.4);
}
.assistant-btn .btn-sub { font-size: 10.5px; font-weight: 500; color: var(--faint); letter-spacing: .1px; }
.assistant-btn:hover .btn-sub { color: var(--accent); opacity: .75; }
/* Open: the dot is lit and the sheen stops offering — the panel is already
   there, and a control that keeps advertising a thing you can see is noise. */
.assistant-btn .ab-state {
  width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: .2s;
}
body.assistant-open .assistant-btn .ab-state { background: var(--teal); box-shadow: 0 0 8px var(--teal); }
body.assistant-open .assistant-btn::after { display: none; }

/* The collapsed handle: a pull-tab, not a piece of map trim. Accent-filled so
   it reads as an affordance against both basemaps, and it eases out from the
   edge under the cursor. */
.as-tab {
  position: fixed; right: 0; top: 50%; transform: translate(0, -50%);
  z-index: 1200; display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: linear-gradient(180deg, var(--accent), #e0452a);
  border: none; border-radius: 12px 0 0 12px; color: #fff; cursor: pointer;
  padding: 15px 9px 15px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase;
  box-shadow: -5px 0 22px rgba(255,122,69,.32), 0 2px 10px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, padding-left .18s ease;
}
/* The label reads down the rail; the icon stays upright above it. Rotating the
   whole button instead turns its flex axis on its side and the icon walks off
   the edge of the screen. */
.as-tab span { writing-mode: vertical-rl; }
.as-tab svg { color: #fff; opacity: .95; }
.as-tab:hover {
  transform: translate(-3px, -50%); padding-left: 13px;
  box-shadow: -8px 0 28px rgba(255,122,69,.45), 0 2px 10px rgba(0,0,0,.35);
}
.as-tab:active { transform: translate(-1px, -50%); }

/* Phone: a bottom sheet, not a rail. The map is already fighting the form
   sheet and the results dock for a 390px screen — a third column would leave
   nothing to look at. */
@media (max-width: 820px) {
  #app { grid-template-columns: var(--sbw, 360px) 1fr; }
  .assistant {
    position: fixed; inset: auto 0 0 0; height: 78vh; grid-column: auto;
    border-left: none; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
  }
  .as-resize { display: none; }
  .as-tab { top: auto; bottom: 88px; }
  /* The chevron points the way the panel leaves: sideways on a rail, down on
     a sheet. */
  #as-collapse { transform: rotate(90deg); }
}
/* Firm name — brands the report letterhead, the verification memo and the
   agency review sheet. Full width under the project name/number pair because
   a firm name is longer than either and should not be cramped beside them. */
.proj-firm {
  width: 100%; margin-top: 8px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.proj-firm::placeholder { color: var(--faint); }
.proj-firm:focus { outline: none; border-color: var(--accent); }

/* ---------- Geologic maps: discoverability ---------- */
/* Sidebar entry. Styled as a sibling of the assistant card, not a clone: the
   assistant keeps the accent gradient and the sheen (it is the flagship), so
   this one gets a quieter stone tint and lights up only when the view is open.
   Two accent-gradient cards side by side would just compete. */
.geology-btn {
  flex-direction: column; gap: 4px; padding: 11px 10px;
  background: linear-gradient(135deg, rgba(190,170,140,.13), rgba(190,170,140,.04)), var(--panel-2);
  border-color: rgba(190,170,140,.34);
  position: relative;
}
.geology-btn:hover { border-color: var(--accent); }
.geology-btn .gb-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.geology-btn .gb-mark {
  width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center;
  background: linear-gradient(135deg, #b9a077, #8d7550); color: #fff;
  box-shadow: 0 2px 8px rgba(150,125,85,.35);
}
.geology-btn .btn-sub { font-size: 10.5px; font-weight: 500; color: var(--faint); letter-spacing: .1px; }
.geology-btn:hover .btn-sub { color: var(--accent); opacity: .8; }
/* Open: the dot is lit, and the card reads as the active view so the sidebar
   and the map agree about what is on screen. */
.geology-btn .gb-state { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: .2s; }
.geology-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.geology-btn[aria-pressed="true"] .gb-state { background: var(--accent); box-shadow: 0 0 6px var(--accent); }

/* Map-corner cluster: basemaps on the left of the divider, view modes on the
   right. Same control, but it no longer claims Geology is a basemap. */
.bt-div { width: 1px; align-self: stretch; margin: 3px 3px; background: var(--line); }
.basemap-toggle button.bt-mode { display: inline-flex; align-items: center; gap: 5px; }


/* Panel header — name the thing before the controls for it. */
.gm-head { padding-right: 22px; margin-bottom: 1px; }
.gm-title { display: block; font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: .01em; }
.gm-src { display: block; font-size: 10px; color: var(--faint); margin-top: 1px; }