/* ============================================================================
   Project Guardian — Deeptrek house sheet (instrument panel)
   ----------------------------------------------------------------------------
   Ported from the shipped Helm stylesheet (deeptrek-ui skill, helm.css) with
   the Helm-only tails removed and the Guardian additions appended: WERP band
   tags, the region switcher, event cards, the timeline, the drawer, the
   Leaflet skin and a legacy token bridge so shared snippets written against
   --pg-* keep rendering.

   Tokens are settled: do not invent colours. Semantic green/amber/red are
   state only. WERP bands keep their warm ramp (the one bold system in the
   product); they are defined in /scripts/risk-bands.js and the hexes below
   mirror that file. Fonts: IBM Plex Sans (prose) / IBM Plex Mono (numerals,
   labels, eyebrows).
   ========================================================================== */
@import url('/vendor/fonts/plex.css');
@import url('/styles/guardian-parts.css');

:root {
  /* ink ground */
  --ground: #08161f;
  --panel: #0c1e2a;
  --panel-2: #102633;
  --raise: #0f2735;

  /* hairlines */
  --line: rgba(125, 165, 185, 0.16);
  --line-strong: rgba(125, 165, 185, 0.3);

  /* text */
  --ink-1: #e6eef2;
  --ink-2: #9fb4c0;
  --ink-3: #6a8593;

  /* instrument signals */
  --teal: #2bc4d4;
  --teal-dim: #1d8c99;
  --amber: #e2a23b;
  --green: #46c08a;
  --red: #e5645b;
  --brass: #c08a4e;

  --tealbg: rgba(43, 196, 212, 0.12);
  --amberbg: rgba(226, 162, 59, 0.13);
  --greenbg: rgba(70, 192, 138, 0.13);
  --redbg: rgba(229, 100, 91, 0.13);
  --brassbg: rgba(192, 138, 78, 0.14);

  /* WERP risk bands (mirror /scripts/risk-bands.js) */
  --band-critical: #E05964; --band-critical-rgb: 224, 89, 100; --band-critical-text: #F4AEB4;
  --band-high: #DF7A45;     --band-high-rgb: 223, 122, 69;    --band-high-text: #F2BE9B;
  --band-medium: #D9B44A;   --band-medium-rgb: 217, 180, 74;  --band-medium-text: #EDD79A;
  --band-low: #62A98C;      --band-low-rgb: 98, 169, 140;     --band-low-text: #ACD9C4;
  --band-unknown: #7C8CA3;  --band-unknown-rgb: 124, 140, 163; --band-unknown-text: #C3CEDC;

  /* Detections (SAR slicks, monitoring observations) are not risk judgements */
  --detect: #7DD3FC;

  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Legacy token bridge: shared snippets written against theme.css names */
  --pg-bg-deep: var(--ground); --pg-bg-panel: var(--panel); --pg-bg-soft: var(--panel-2);
  --pg-border: var(--line-strong); --pg-line: var(--line); --pg-line-strong: var(--line-strong);
  --pg-brand: var(--teal); --pg-brand-deep: var(--teal-dim); --pg-bronze: var(--brass);
  --pg-primary: var(--teal); --pg-primary-hover: #43d3e2; --pg-primary-border: var(--teal-dim);
  --pg-text-light: var(--ink-1); --pg-text-mid: var(--ink-2); --pg-text-faint: var(--ink-3); --pg-focus: var(--teal);
  --pg-font-display: var(--font-sans); --pg-font-body: var(--font-sans); --pg-font-mono: var(--font-mono);
  --pg-radius: 2px; --pg-radius-lg: 0;
  --pg-band-critical: var(--band-critical); --pg-band-high: var(--band-high); --pg-band-medium: var(--band-medium);
  --pg-band-low: var(--band-low); --pg-band-unknown: var(--band-unknown); --pg-detect: var(--detect);

  font-family: var(--font-sans);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--teal); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ground); color: var(--ink-2); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; }
a { color: var(--teal); }
h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--ink-1); margin: 0; }
h1 { font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.boot { padding: 5rem; text-align: center; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.78rem; }

/* ── Shell ────────────────────────────────────────────────────────────────── */
.app-shell { display: grid; grid-template-columns: 226px minmax(0, 1fr); grid-template-rows: 70px 1fr; height: 100vh; }
.app-shell.solo { grid-template-columns: minmax(0, 1fr); }
.app-shell.solo .content { grid-column: 1; }
/* The injected chrome wrapper takes no box of its own, so topbar + sidebar
   stay direct grid children of the shell. */
#shell-chrome { display: contents; }

.topbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 1.1rem;
  padding: 0 1.2rem; background: var(--ground); border-bottom: 1px solid var(--line-strong);
}
.topbar .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.topbar .logo { height: 44px; width: auto; }
.topbar .wordmark { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.34em; color: var(--ink-1); }
.topbar .topdiv { width: 1px; height: 22px; background: var(--line-strong); }
.topbar .page-title { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.topbar .region-switch { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.6rem; }
.topbar .region-switch label { margin: 0; white-space: nowrap; }
.topbar .region-switch select { width: auto; min-width: 200px; max-width: 320px; padding: 0.35rem 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; }
.topbar .acct { margin-left: auto; text-align: right; line-height: 1.3; }
.topbar .acct-name { display: block; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-1); }
.topbar .acct-role { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

.sidebar { grid-row: 2; background: var(--ground); border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; padding: 0.9rem 0.6rem; }
.sidebar nav { display: flex; flex-direction: column; gap: 0.1rem; }
.navitem {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem;
  border: none; background: none; cursor: pointer; position: relative; text-decoration: none;
  color: var(--ink-2); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; text-align: left;
  transition: color 0.15s, background 0.15s, transform 0.13s var(--ease-out);
}
.navitem svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.7; }
.navitem:hover { color: var(--ink-1); background: rgba(125, 165, 185, 0.05); }
.navitem.active { color: var(--teal); background: var(--tealbg); }
.navitem.active svg { opacity: 1; color: var(--teal); }
.navitem.active::before { content: ""; position: absolute; left: -0.6rem; top: 0.4rem; bottom: 0.4rem; width: 3px; background: var(--brass); }
.nav-badge { margin-left: auto; font-family: var(--font-mono); font-size: 0.6rem; padding: 0.05rem 0.4rem; border: 1px solid rgba(226, 162, 59, 0.5); color: var(--amber); border-radius: 2px; line-height: 1.4; }
.nav-badge:empty { display: none; }
.side-foot { margin-top: auto; padding: 0.6rem 0.7rem 0.2rem; }
.side-foot .muted2 { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; }

.content {
  grid-row: 2; overflow-y: auto; padding: 1.5rem 1.8rem 3rem; background: var(--ground);
  background-image: linear-gradient(rgba(125, 165, 185, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 165, 185, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
}
.lead-note { color: var(--ink-2); font-size: 0.86rem; line-height: 1.6; margin: 0 0 1.2rem; max-width: 74ch; }
.eyebrow { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.page-head .acts { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

@keyframes content-enter { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes content-fade { from { opacity: 0.55; } to { opacity: 1; } }
.content.enter { animation: content-fade 0.18s var(--ease-out); }
.content.enter > * { animation: content-enter 0.22s var(--ease-out) backwards; }
.content.enter > *:nth-child(2) { animation-delay: 45ms; }
.content.enter > *:nth-child(3) { animation-delay: 90ms; }
.content.enter > *:nth-child(4) { animation-delay: 130ms; }
.content.enter > *:nth-child(n + 5) { animation-delay: 165ms; }

/* ── Panels ───────────────────────────────────────────────────────────────── */
.card, .readout {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
.card::before, .card::after, .readout::before, .readout::after { content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; }
.card::before, .readout::before { top: -1px; left: -1px; border-top: 2px solid var(--brass); border-left: 2px solid var(--brass); }
.card::after, .readout::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--brass); border-right: 2px solid var(--brass); }
.card h2 { font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem; color: var(--ink-1); margin: 0 0 0.15rem; }
.card h3 { font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; color: var(--teal); text-transform: uppercase; letter-spacing: 0.13em; margin: 1.15rem 0 0.55rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.6rem; }
.card-head h2 { margin: 0; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 200px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid-2 > *, .grid-3 > * { min-width: 0; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ── Readout (instrument cluster) ─────────────────────────────────────────── */
.readout { padding: 0; }
.readout-eyebrow { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); }
.readout-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ro { padding: 1.15rem 1.1rem 1.25rem; border-right: 1px solid var(--line); min-width: 0; }
.ro:last-child { border-right: none; }
.ro-n { font-family: var(--font-mono); font-weight: 500; font-size: 1.85rem; color: var(--ink-1); line-height: 1; letter-spacing: -0.01em; }
.ro-l { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 0.7rem; }
.ro-s { font-size: 0.72rem; color: var(--ink-3); margin-top: 0.25rem; }
a.ro { text-decoration: none; display: block; transition: background 0.15s; }
a.ro:hover { background: rgba(125, 165, 185, 0.05); }
@media (max-width: 900px) { .readout-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ro { border-bottom: 1px solid var(--line); } }

/* ── Forms ────────────────────────────────────────────────────────────────── */
label { display: block; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 0.35rem; }
input, select, textarea {
  width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--line-strong); border-radius: 2px;
  font-size: 0.88rem; font-family: var(--font-sans); background: var(--raise); color: var(--ink-1);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal-dim); }
select option { background: var(--panel); }
.toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.toolbar input, .toolbar select { width: auto; }
.toolbar .grow { flex: 1 1 200px; min-width: 160px; }
.toolbar .grow input { width: 100%; }
.toolbar .spacer { flex: 1; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
button.act, a.act { display: inline-block; text-decoration: none; background: var(--teal); color: #06222a; border: none; border-radius: 2px; padding: 0.55rem 0.95rem; font-weight: 600; font-size: 0.8rem; font-family: var(--font-mono); letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s, transform 0.13s var(--ease-out); }
button.act:hover, a.act:hover { background: #43d3e2; }
button.ghost, a.ghost { display: inline-block; text-decoration: none; background: transparent; color: var(--teal); border: 1px solid var(--line-strong); border-radius: 2px; padding: 0.4rem 0.75rem; font-weight: 500; cursor: pointer; font-size: 0.74rem; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; transition: border-color 0.15s, background 0.15s, transform 0.13s var(--ease-out); }
button.ghost:hover, a.ghost:hover { border-color: var(--teal); background: var(--tealbg); }
button.ghost.danger { color: var(--red); }
button.ghost.danger:hover { border-color: var(--red); background: var(--redbg); }
button.link { background: none; border: none; color: var(--teal); font-weight: 500; cursor: pointer; font-size: 0.74rem; font-family: var(--font-mono); padding: 0; text-transform: uppercase; letter-spacing: 0.05em; transition: color 0.13s; }
button.link:hover { text-decoration: underline; }
.act:active, .ghost:active, .navitem:active, .segbtn:active, .chip:active { transform: scale(0.97); }
.act:focus-visible, .ghost:focus-visible, .navitem:focus-visible, .segbtn:focus-visible, .chip:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
button.link:focus-visible, a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 1px; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th, td { text-align: left; padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
th { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--ink-1); }
th[aria-sort="descending"]::after { content: " \25BE"; color: var(--teal); }
th[aria-sort="ascending"]::after { content: " \25B4"; color: var(--teal); }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: rgba(125, 165, 185, 0.045); }
tbody tr[data-open] { cursor: pointer; }
td .muted { display: block; margin-top: 0.15rem; }
td.num, th.num { text-align: right; }
.table-wrap { overflow-x: auto; }

.lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); display: inline-block; }
.lamp.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.lamp.warn { background: var(--amber); }
.pill { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.22rem 0.55rem; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink-2); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@keyframes pill-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.pill.run { color: var(--teal); border-color: rgba(43, 196, 212, 0.35); }
.pill.run .dot { animation: pill-pulse 1.6s ease-in-out infinite; }
.pill.err { color: var(--red); border-color: rgba(229, 100, 91, 0.4); }
.pill.ok { color: var(--green); border-color: rgba(70, 192, 138, 0.35); }



/* ── Segmented control + filter chips ─────────────────────────────────────── */
.segrow { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; margin: 0 0 1rem; max-width: 100%; }
.segbtn { position: relative; background: var(--panel); border: none; border-right: 1px solid var(--line); color: var(--ink-2); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.55rem 1.1rem; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, transform 0.13s var(--ease-out); }
.segbtn:last-child { border-right: none; }
.segbtn:hover { color: var(--ink-1); background: rgba(125, 165, 185, 0.05); }
.segbtn.active { background: var(--tealbg); color: var(--teal); }
@keyframes seg-grow { from { transform: scaleX(0.4); opacity: 0; } }
.segbtn.active::after { content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0; height: 2px; background: var(--teal); transform-origin: left center; animation: seg-grow 0.18s var(--ease-out); }
.segbtn .n { color: var(--ink-3); margin-left: 0.4rem; }
.segbtn.active .n { color: var(--teal-dim); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.6rem; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-2); cursor: pointer; border-radius: 2px; transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.13s var(--ease-out); }
.chip:hover { color: var(--ink-1); }
.chip.active { color: var(--teal); border-color: var(--teal-dim); background: var(--tealbg); }
.chip .n { color: var(--ink-3); }
.chip.active .n { color: var(--teal-dim); }
.chip .band-dot { width: 7px; height: 7px; }

/* ── Tabs (ARIA) ──────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-strong); margin: 0 0 1rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.6rem 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.tabs [role="tab"]:hover { color: var(--ink-1); }
.tabs [role="tab"][aria-selected="true"] { color: var(--teal); border-bottom-color: var(--teal); }
[role="tabpanel"][hidden] { display: none; }

/* ── Lists: ranked rows, event cards, timeline ────────────────────────────── */
.rowlist { list-style: none; margin: 0; padding: 0; }
.rowlist li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.rowlist li:last-child { border-bottom: none; }
.rowlist a.name { color: var(--ink-1); text-decoration: none; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowlist a.name:hover { color: var(--teal); }
.rowlist .why { font-size: 0.76rem; color: var(--ink-3); margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowlist .side { display: flex; align-items: center; gap: 0.5rem; }
.rank { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }

.event { position: relative; border: 1px solid var(--line); background: var(--panel); margin-bottom: 0.6rem; }
.event.is-new { border-left: 2px solid var(--amber); }
.event.is-focus { border-color: var(--teal-dim); box-shadow: inset 2px 0 0 var(--teal); }
.event-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0.8rem; padding: 0.8rem 1rem; cursor: pointer; align-items: center; background: none; border: none; width: 100%; text-align: left; color: inherit; font: inherit; }
.event-head:hover { background: rgba(125, 165, 185, 0.04); }
.event-glyph { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.event-glyph svg { width: 26px; height: 26px; }
.event-glyph.seismic { color: var(--brass); }
.event-glyph.storm { color: var(--teal); }
.event-glyph.slick { color: var(--amber); }
.event-glyph.sentry { color: var(--ink-1); }
/* The middle column must be a block with min-width 0, or the nowrap title
   and meta lines size the grid track to their full length and run under the
   side column. */
.event-head > * { min-width: 0; }
.event-main { display: block; min-width: 0; }
.event-title { display: block; font-weight: 600; color: var(--ink-1); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-meta { display: block; font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.event-side .n { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-1); white-space: nowrap; }
.event-body { border-top: 1px solid var(--line); padding: 0.6rem 1rem 1rem; }
.event-body[hidden] { display: none; }
.event-acts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.bandline { display: inline-flex; gap: 0.35rem; align-items: center; font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); }
.bandline i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }


/* ── Map (Leaflet skin) ───────────────────────────────────────────────────── */
.map { height: 320px; width: 100%; border: 1px solid var(--line); background: var(--raise); }
.map.mid { height: 440px; }
.map.tall { height: calc(100vh - 230px); min-height: 420px; }
.leaflet-container { background: var(--raise); font-family: var(--font-sans); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel-2); color: var(--ink-1); border-radius: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.leaflet-popup-content-wrapper { border: 1px solid var(--line-strong); }
.leaflet-popup-content { font-size: 0.82rem; line-height: 1.45; margin: 0.7rem 0.9rem; }
.leaflet-popup-content a { color: var(--teal); }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink-3); }
.leaflet-bar { border-radius: 0; box-shadow: none; border: 1px solid var(--line-strong); }
.leaflet-bar a { background: var(--panel); color: var(--ink-1); border-bottom-color: var(--line); }
.leaflet-bar a:hover { background: var(--panel-2); }
.leaflet-control-attribution { background: rgba(8, 22, 31, 0.75) !important; color: var(--ink-3) !important; font-size: 9px; }
.leaflet-control-attribution a { color: var(--ink-2) !important; }
.leaflet-control-layers { background: var(--panel); color: var(--ink-1); border: 1px solid var(--line-strong); border-radius: 0; font-family: var(--font-mono); font-size: 0.7rem; }
.leaflet-tooltip { background: var(--panel-2); color: var(--ink-1); border: 1px solid var(--line-strong); border-radius: 0; font-size: 0.74rem; box-shadow: none; }
.leaflet-tooltip-top::before { border-top-color: var(--line-strong); }
.map-caption { font-size: 0.74rem; color: var(--ink-3); margin-top: 0.45rem; }
/* Slick detection markers: the open one carries a teal halo, the rest fade */
.pg-event-slick.pg-slick-dim { opacity: 0.4; transition: opacity 0.15s; }
.pg-event-slick.pg-slick-selected { filter: drop-shadow(0 0 6px rgba(43, 196, 212, 0.6)); }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 0.5rem; }
.map-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pg-cluster { display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; color: #06222a; border: 2px solid rgba(8, 22, 31, 0.6); }
.pg-cluster.band-critical { background: var(--band-critical); } .pg-cluster.band-high { background: var(--band-high); }
.pg-cluster.band-medium { background: var(--band-medium); } .pg-cluster.band-low { background: var(--band-low); } .pg-cluster.band-unknown { background: var(--band-unknown); }

/* Map page (map.html on the app shell). The map and the slick queue share one
   height so the row reads as a single instrument; the detail panel slides over
   the map column; hiding the queue hands its width to the map. */
.content.map-content { display: flex; flex-direction: column; padding-bottom: 1.1rem; }
.map-page { display: flex; flex-direction: column; gap: 0.7rem; flex: 1; min-height: 0; }
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.map-toolbar input[type="search"] { width: 250px; max-width: 100%; padding: 0.4rem 0.6rem; font-size: 0.82rem; }
.map-toolbar .spacer { flex: 1; }
.map-toolbar .count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; }
.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0.8rem; align-items: stretch; flex: 1; min-height: 0; }
.map-grid.sidebar-hidden { grid-template-columns: minmax(0, 1fr); }
.map-grid.sidebar-hidden .slick-queue { display: none; }
.map-main { position: relative; min-width: 0; min-height: 0; }
.map-page .map.tall, .map-page .slick-queue { height: 100%; min-height: 400px; }
.map-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1050; width: 100%; max-width: 440px; overflow-y: auto; background: rgba(12, 30, 42, 0.97); border-left: 1px solid var(--line-strong); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35); }
.slick-queue { display: flex; flex-direction: column; min-height: 0; padding: 0.8rem 0.9rem; }
.slick-queue .q-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--line); margin-bottom: 0.5rem; }
.slick-queue .q-head h2 { font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal); margin: 0; }
.slick-queue .q-count { font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-3); white-space: nowrap; }
.slick-queue .q-filters { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.slick-queue .q-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -0.3rem; padding: 0 0.3rem; }
.map-note { font-size: 0.76rem; color: var(--ink-3); }
.map-note b { color: var(--ink-2); font-weight: 500; }

/* Layers control: Leaflet's switcher extended with the band filter, the event
   window and the methodology stamp, so the map carries one panel. */
.leaflet-control-layers.pg-layers { padding: 0; }
.pg-layers .leaflet-control-layers-list { min-width: 240px; padding: 0.55rem 0.7rem 0.6rem; }
/* Collapsed by default: a labelled "Layers" button that pops the panel out. */
.pg-layers .leaflet-control-layers-toggle { width: auto; height: auto; min-width: 0; padding: 0.42rem 0.7rem; background: var(--panel) none; color: var(--teal); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; }
.pg-layers .leaflet-control-layers-toggle::after { content: "Layers"; }
.pg-layers.leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; }
/* Band filter as one row of chips, not a stack */
.pg-band-row { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.pg-band-row label { white-space: nowrap; }
.pg-band-row .n { margin-left: 0.25rem; }
.pg-layers-title { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.4rem; }
.pg-layers-section { border-top: 1px solid var(--line); margin-top: 0.55rem; padding-top: 0.5rem; }
.leaflet-control-layers label, .pg-layers-section label { display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.12rem 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; text-transform: none; color: var(--ink-1); cursor: pointer; }
.leaflet-control-layers label span, .pg-layers-section label span { display: inline-flex; align-items: center; gap: 0.4rem; }
.leaflet-control-layers-selector { margin: 0; }
.pg-layers-section .n { color: var(--ink-3); margin-left: auto; font-size: 0.64rem; }
.pg-layers-section select { width: 100%; padding: 0.3rem 0.45rem; font-family: var(--font-mono); font-size: 0.7rem; }
.pg-layers-stamp { font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-3); letter-spacing: 0.06em; }
.pg-layers-stamp b { color: var(--ink-2); font-weight: 500; }
.pg-band-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--band-unknown); flex: 0 0 auto; }
.pg-band-dot.band-critical { background: var(--band-critical); } .pg-band-dot.band-high { background: var(--band-high); }
.pg-band-dot.band-medium { background: var(--band-medium); } .pg-band-dot.band-low { background: var(--band-low); }

/* Wreck markers drawn by app.js: band colour + band size + ink ring, set from
   JS through --dot-size / --dot-color (ported from theme.css). */
.pg-marker { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pg-marker-dot { width: var(--dot-size, 10px); height: var(--dot-size, 10px); border-radius: 50%; background: var(--dot-color, var(--band-unknown)); border: 2px solid rgba(230, 238, 242, 0.92); box-shadow: 0 0 0 1.5px rgba(8, 22, 31, 0.85), 0 1px 4px rgba(0, 0, 0, 0.6); }
.leaflet-marker-icon:hover .pg-marker-dot { filter: brightness(1.15); }
.pg-marker-halo { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--halo-color, var(--band-critical)); opacity: 0.55; animation: pg-halo-pulse 2.2s ease-out infinite; }
.pg-marker-reassess { position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed var(--band-medium); animation: pg-reassess-pulse 3s linear infinite; }
@keyframes pg-halo-pulse { 0% { transform: scale(0.8); opacity: 0.55; } 70% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes pg-reassess-pulse { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Drawer (slide-over) ──────────────────────────────────────────────────── */
.drawer-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(4, 12, 18, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.18s var(--ease-out); }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100%; z-index: 46; background: var(--panel); border-left: 1px solid var(--line-strong); overflow-y: auto; padding: 1.2rem 1.25rem 2rem; transform: translateX(100%); transition: transform 0.22s var(--ease-out); }
.drawer.open { transform: none; }
.drawer-close { position: absolute; top: 0.7rem; right: 0.7rem; }
.drawer h2 { font-size: 1rem; margin: 0 2.4rem 0.3rem 0; }

/* ── Modal, toasts ────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(4, 12, 18, 0.55); opacity: 0; transition: opacity 0.18s var(--ease-out); }
.modal-overlay.open { opacity: 1; }
.modal-overlay.closing { opacity: 0; }
.modal-card { position: relative; width: 380px; max-width: 100%; background: var(--panel); border: 1px solid var(--line-strong); padding: 1.2rem 1.25rem; transform: scale(0.95); opacity: 0; transition: transform 0.18s var(--ease-out), opacity 0.18s var(--ease-out); }
.modal-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 9px; height: 9px; border-top: 2px solid var(--brass); border-left: 2px solid var(--brass); }
.modal-card::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 9px; height: 9px; border-bottom: 2px solid var(--brass); border-right: 2px solid var(--brass); }
.modal-overlay.open .modal-card { transform: scale(1); opacity: 1; }
.modal-overlay.closing .modal-card { transform: scale(0.97); opacity: 0; transition-duration: 0.13s; }
.modal-card h2 { font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; color: var(--ink-1); margin: 0 0 0.7rem; }
.modal-acts { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
#toasts { position: fixed; bottom: 1.1rem; right: 1.1rem; z-index: 60; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; cursor: pointer; min-width: 200px; max-width: 360px; padding: 0.6rem 0.85rem; font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.45; color: var(--ink-1); background: var(--panel-2); border: 1px solid var(--line-strong); border-left: 2px solid var(--ink-3); border-radius: 2px; transform: translateY(8px); opacity: 0; transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.hide { transform: translateY(6px); opacity: 0; transition-duration: 0.14s; }
.toast.error { border-left-color: var(--red); } .toast.ok { border-left-color: var(--green); } .toast.info { border-left-color: var(--teal); }


/* ── Dynamic states ───────────────────────────────────────────────────────── */
@keyframes skel-shimmer { to { background-position: -200% 0; } }
.skel { border: 1px solid var(--line); background: linear-gradient(100deg, var(--panel) 40%, var(--panel-2) 50%, var(--panel) 60%); background-size: 200% 100%; animation: skel-shimmer 1.3s linear infinite; }
.sk-line { height: 10px; margin: 0.5rem 0; }
.sk-title { height: 15px; width: 38%; margin-bottom: 0.75rem; }
.sk-stat { height: 46px; }
.sk-block { height: 130px; }
@keyframes spin-rot { to { transform: rotate(360deg); } }
.spin { display: inline-block; width: 11px; height: 11px; border: 2px solid rgba(230, 238, 242, 0.25); border-top-color: currentColor; border-radius: 50%; animation: spin-rot 0.6s linear infinite; vertical-align: -1px; margin-right: 0.45rem; }
button:disabled { opacity: 0.55; cursor: default; }
input[type="file"] { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); border: none; padding: 0; box-shadow: none; background: none; }
input[type="file"]::file-selector-button { background: transparent; color: var(--teal); border: 1px solid var(--line-strong); border-radius: 2px; padding: 0.4rem 0.75rem; font-weight: 500; cursor: pointer; font-size: 0.72rem; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; margin-right: 0.7rem; }
.tipbox { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--ink-1); font-family: var(--font-mono); font-size: 0.68rem; padding: 0.3rem 0.5rem; border-radius: 2px; opacity: 0; transition: opacity 0.12s; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.tipbox.show { opacity: 1; }
.hbars { display: flex; flex-direction: column; gap: 6px; margin-top: 0.4rem; }
.hbar { display: flex; align-items: center; gap: 0.6rem; }
.hbar-l { flex: 0 0 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; color: var(--ink-2); }
.hbar-track { flex: 1; height: 13px; background: var(--raise); position: relative; overflow: hidden; }
.hbar-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--teal); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.hbar-v { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-1); min-width: 3.2em; text-align: right; }

/* ── Wreck report ─────────────────────────────────────────────────────────── */
.report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.8rem; }
.report-head h1 { font-size: 1.5rem; line-height: 1.2; }
.report-head .sub { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; margin-top: 0.4rem; font-size: 0.82rem; color: var(--ink-2); }
.report-head .sub .risk { font-family: var(--font-mono); font-size: 1rem; color: var(--ink-1); }
.report-head .acts { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
#wreck-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
#wreck-actions:empty { display: none; }
.readout.score .readout-row { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.readout.score .ro { padding: 0.9rem 0.8rem 1rem; border-bottom: 1px solid var(--line); }
.readout.score .ro-n { font-size: 1.45rem; }
.readout.score .ro-l { margin-top: 0.5rem; }
.report-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.report-grid > * { min-width: 0; }
.hero-wrap { position: relative; margin: 0 0 0.8rem; }
.hero-btn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; }
.hero { height: 320px; }
.hero-badge { position: absolute; top: 0.6rem; right: 0.6rem; }
.hero-cap { font-size: 0.78rem; color: var(--ink-3); margin-top: 0.4rem; min-height: 1em; }
.caption-form { display: flex; gap: 0.5rem; margin-top: 0.4rem; align-items: center; }
.caption-form input { flex: 1; }
.thumb-wrap { position: relative; }
.thumb-act { position: absolute; top: 4px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(8, 22, 31, 0.82); color: var(--ink-1); font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s; padding: 0; }
.thumb-wrap:hover .thumb-act, .thumb-act:focus-visible { opacity: 1; }
.set-main-btn { left: 4px; } .delete-img-btn { right: 4px; }
.delete-img-btn:hover { color: var(--red); border-color: var(--red); }
.thumb-rep { display: flex; align-items: center; gap: 0.3rem; margin: 0.25rem 0 0; font-size: 0.58rem; cursor: pointer; }
.thumb-rep input { width: auto; margin: 0; }
.rec-line { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0.4rem 0 0.6rem; }
.rec-line p { margin: 0; color: var(--ink-1); font-size: 0.88rem; line-height: 1.5; }
.radar-wrap { height: 260px; position: relative; }
.score-folds details.score-fold { border: 1px solid var(--line); background: var(--panel); margin-bottom: 0.6rem; }
.score-fold > summary { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; align-items: baseline; flex-wrap: wrap; }
.score-fold > summary .fold-title { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--ink-1); font-weight: 600; }
.score-fold > summary .muted { text-transform: none; letter-spacing: 0; font-family: var(--font-mono); font-size: 0.68rem; }
.score-fold .fold-body { padding: 0.4rem 1rem 1rem; border-top: 1px solid var(--line); }
.score-top { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 0.5rem 0 0.6rem; }
.score-big { font-size: 1.5rem; color: var(--ink-1); }
.score-big small { font-size: 0.8rem; color: var(--ink-3); }
td.score-big { font-size: 1.1rem; }
.prose-sm { font-size: 0.86rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 0.6rem; }
.risk-formula .formula { font-size: 0.86rem; color: var(--ink-1); margin-top: 0.4rem; }
.stamp { margin-top: 1.5rem; padding-top: 0.8rem; border-top: 1px solid var(--line); line-height: 1.6; }
.composer textarea { margin-bottom: 0.5rem; }
.composer form + form { margin-top: 0.6rem; }
.composer-acts { display: flex; align-items: center; gap: 0.7rem; margin: 0.3rem 0 0.6rem; flex-wrap: wrap; }
.spill-toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin: 0.6rem 0 0; cursor: pointer; }
.spill-toggle input { width: auto; margin: 0; }
.att-list { list-style: none; margin: 0; padding: 0; }
.att-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.att-list li:last-child { border-bottom: none; }
.explainer .step { border-left: 3px solid var(--line-strong); padding: 0.2rem 0 0.2rem 0.8rem; margin-bottom: 0.8rem; }
.explainer .step.observe { border-left-color: var(--detect); } .explainer .step.attribute { border-left-color: var(--teal); } .explainer .step.model { border-left-color: var(--brass); }
.explainer .caveat { border-left: 3px solid var(--brass); padding: 0.1rem 0 0.1rem 0.7rem; margin-bottom: 0.6rem; }
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(4, 12, 18, 0.92); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.18s var(--ease-out); }
.lightbox.open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lb-fig { margin: 0; max-width: min(92vw, 1200px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.lb-fig img { max-width: 92vw; max-height: 80vh; object-fit: contain; border: 1px solid var(--line-strong); background: var(--raise); }
.lb-fig figcaption { display: flex; gap: 1rem; color: var(--ink-2); font-size: 0.82rem; }
.lb-close { position: absolute; top: 1rem; right: 1rem; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; background: rgba(12, 30, 42, 0.85); color: var(--ink-1); border: 1px solid var(--line-strong); font-size: 2rem; cursor: pointer; }
.lb-prev { left: 0.8rem; } .lb-next { right: 0.8rem; }

/* ── Sign-in ──────────────────────────────────────────────────────────────── */
.signin-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--ground); background-image: linear-gradient(rgba(125,165,185,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(125,165,185,0.045) 1px, transparent 1px); background-size: 34px 34px; }
@keyframes signin-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.signin-card { position: relative; width: 340px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); padding: 1.6rem 1.5rem; animation: signin-in 0.4s var(--ease-out) both; }
.signin-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 9px; height: 9px; border-top: 2px solid var(--brass); border-left: 2px solid var(--brass); }
.signin-card::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 9px; height: 9px; border-bottom: 2px solid var(--brass); border-right: 2px solid var(--brass); }
.signin-card .wordmark { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.34em; color: var(--ink-1); font-size: 1.1rem; }

/* ── Phone layout ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px 1fr; }
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; grid-row: auto; flex-direction: row; padding: 0.25rem 0.3rem calc(0.25rem + env(safe-area-inset-bottom)); border-right: none; border-top: 1px solid var(--line-strong); background: var(--ground); }
  .sidebar nav { flex-direction: row; width: 100%; justify-content: space-around; gap: 0; }
  .navitem { flex: 1; flex-direction: column; align-items: center; gap: 0.18rem; padding: 0.4rem 0.2rem; }
  .navitem span { display: block; font-size: 0.5rem; letter-spacing: 0.04em; }
  .navitem.active::before { left: 0.5rem; right: 0.5rem; top: -0.3rem; bottom: auto; width: auto; height: 2px; }
  .nav-badge { position: absolute; top: 0.1rem; right: 0.4rem; margin: 0; }
  .side-foot { display: none; }
  .content { grid-row: 2; padding: 1rem 0.8rem calc(4.4rem + env(safe-area-inset-bottom)); }
  .app-shell.solo .page-title { display: block; }
  .app-shell.solo .content { padding-bottom: 1.4rem; }
  .topbar { padding: 0 0.8rem; gap: 0.6rem; }
  .topbar .logo { height: 32px; }
  .topbar .wordmark { font-size: 0.9rem; letter-spacing: 0.26em; }
  .topbar .page-title, .topbar .topdiv, .topbar .acct, .topbar .region-switch label, .topbar #shell-signout { display: none; }
  .topbar .region-switch { margin-left: auto; }
  .topbar .region-switch select { min-width: 0; max-width: 46vw; }
  .content table { display: block; overflow-x: auto; }
  #toasts { left: 0.8rem; right: 0.8rem; bottom: calc(3.9rem + env(safe-area-inset-bottom)); align-items: stretch; }
  .toast { max-width: none; }
  .ro { padding: 0.9rem 0.9rem 1rem; }
  .ro-n { font-size: 1.45rem; }
  .drawer { width: 100%; }
  .event-head { grid-template-columns: 28px minmax(0, 1fr); }
  .event-side { grid-column: 2; flex-direction: row; align-items: center; }
  .map.tall { height: 60vh; min-height: 320px; }
  .map-grid { grid-template-columns: minmax(0, 1fr); }
  .content.map-content { display: block; }
  .map-page .map.tall { height: 60vh; min-height: 320px; }
  .map-page .slick-queue { height: 40vh; min-height: 240px; }
  .map-panel { max-width: none; }
  .report-head h1 { font-size: 1.2rem; }
  .tabs { flex-wrap: wrap; }
  .tabs [role="tab"] { padding: 0.55rem 0.7rem; font-size: 0.66rem; }
  .report-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { height: 200px; }
  .kvrow { grid-template-columns: 7rem minmax(0, 1fr); }
  .tl-side { float: none; display: block; margin: 0.15rem 0 0; }
  .lb-nav { width: 34px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .content.enter, .content.enter > *, .signin-card { animation: none !important; }
  .act:active, .ghost:active, .navitem:active, .segbtn:active, .chip:active { transform: none !important; }
  .modal-card, .modal-overlay.open .modal-card, .toast, .toast.show, .drawer, .drawer.open { transform: none !important; }
  .spin { animation: spin-rot 1.1s linear infinite !important; }
}
@media print {
  .sidebar, .topbar, #toasts, .drawer, .drawer-backdrop, #pg-demo-badge, .acts, .lightbox { display: none !important; }
  .app-shell { display: block; height: auto; }
  .content { overflow: visible; background: #fff; color: #111; padding: 0; }
  body { background: #fff; }
}