/* ── satellite pages (FAQs · Landseed AI) ─────────────────────────────────────
   Flat app pages atop the catalogue system: styles.css is imported READ-ONLY
   (repo CLAUDE.md · satellite rules). Each surface has its own form — the bay
   is 3D, the demo is a film, FAQs is a gridded field sheet, /ai/ is an
   operations console. No 3D here, no device-view chrome: these pages must not
   replicate the catalogue. Fits one viewport at desktop; scrolls on small. */

/* the Landseed gridded ground — faint survey grid + vignette, pure CSS */
body.sat{
  overflow:hidden;height:100vh;
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(13,31,13,.55), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,190,90,.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(0,190,90,.045) 0 1px, transparent 1px 56px),
    var(--deep);
}
body.sat.ai-page{
  background:
    radial-gradient(1200px 700px at 50% 18%, rgba(35,22,58,.5), transparent 70%),
    repeating-linear-gradient(0deg, rgba(155,108,224,.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(155,108,224,.05) 0 1px, transparent 1px 56px),
    var(--deep);
}

.sat-wrap{position:fixed;inset:64px 26px 78px;display:flex;flex-direction:column;gap:14px}

/* page header band — title left, standfirst right */
.sat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex:none}
.sat-kicker{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fa,var(--accent));margin-bottom:7px}
.sat-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fa,var(--accent));box-shadow:0 0 8px var(--fa,var(--accent));flex:none}
.sat-head h1{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.015em;line-height:1;color:#f4f3ee}
.sat-stand{max-width:52ch;font-size:13.5px;line-height:1.55;color:var(--dim);text-align:right}
.sat-stand .sp-badge{margin:8px 0 0 6px}

/* ── the field-sheet grid (FAQs) ────────────────────────────────────────────── */
.sheet{flex:1;min-height:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:1fr 1fr auto 1fr;gap:12px}
.cell{border:1px solid rgba(240,240,234,.09);border-radius:14px;background:linear-gradient(180deg,rgba(6,11,9,.72),rgba(6,11,9,.6));padding:14px 16px;min-height:0;transition:border-color .2s,transform .2s}
.cell:hover{border-color:color-mix(in srgb,var(--qh,#F0F0EA) 45%,transparent);transform:translateY(-1px)}
.cell.qa{display:flex;flex-direction:column;justify-content:center}
.cell.qa b{display:flex;align-items:baseline;gap:9px;font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.3}
.cell.qa b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--qh,#fff);box-shadow:0 0 7px var(--qh,#fff);flex:none;align-self:center}
.cell.qa p{font-size:13px;line-height:1.6;color:rgba(240,240,234,.8)}
.cell.qa .sp-badge{margin-top:7px;font-size:9px;padding:3px 7px;align-self:flex-start}

/* the sketch cell — engineering-drawing ground: fine paper grid behind the SVG */
.cell.sketch{grid-column:1/5;grid-row:1/3;display:flex;flex-direction:column;padding:12px 14px 10px;
  background:
    repeating-linear-gradient(0deg, rgba(240,240,234,.035) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(240,240,234,.035) 0 1px, transparent 1px 22px),
    linear-gradient(180deg,rgba(6,11,9,.78),rgba(6,11,9,.66))}
.cell.sketch svg{flex:1;min-height:0;width:100%}
.cell.sketch figcaption{font-size:11px;line-height:1.55;color:var(--dim);letter-spacing:.04em;padding-top:8px;border-top:1px solid rgba(240,240,234,.08)}

/* fact minis — one number, one graphic, no two alike */
.cell.fact{display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:11px 13px}
.cell.fact b{font-size:17px;font-weight:800;letter-spacing:-.01em;color:#eef0ea;font-variant-numeric:tabular-nums;white-space:nowrap}
.cell.fact svg{display:block;width:100%;height:22px}
.cell.fact span{font-size:10.5px;line-height:1.4;color:var(--dim);letter-spacing:.02em}

.cell.next{display:flex;flex-direction:column;justify-content:center;gap:8px}
.cell.next a{text-decoration:none;text-align:center}

/* ── the operations console (/ai/) ─────────────────────────────────────────── */
.console{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid rgba(155,108,224,.28);border-radius:16px;background:linear-gradient(180deg,rgba(10,9,16,.88),rgba(7,8,12,.94));overflow:hidden}
.con-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(155,108,224,.22);flex:none}
.con-bar i{width:7px;height:7px;border-radius:50%;background:#9B6CE0;box-shadow:0 0 8px #9B6CE0;flex:none}
.con-bar b{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(240,240,234,.85)}
.con-bar .sp-badge{margin:0;font-size:9px;padding:3px 7px}
.con-bar em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.con-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:rgba(155,108,224,.14)}
.pane{background:rgba(7,10,9,.97);padding:13px 15px;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.pane-h{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(240,240,234,.6);margin-bottom:10px;flex:none}
.pane-h::after{content:"";flex:1;height:1px;background:rgba(240,240,234,.08)}

/* feed — timestamp · class dot · route */
.feed-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid rgba(240,240,234,.05);font-size:12.5px;color:var(--dim)}
.feed-row:last-child{border-bottom:0}
.feed-row b{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;font-size:11.5px}
.feed-row i{width:7px;height:7px;border-radius:50%;background:var(--qh,#9B6CE0);box-shadow:0 0 6px var(--qh,#9B6CE0);flex:none}
.feed-row span{flex:1;line-height:1.35}
.feed-row em{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);white-space:nowrap}

/* occupancy — labeled sector grid, flat purple scale */
.occ{flex:1;min-height:0;display:grid;grid-template-columns:14px 1fr;grid-template-rows:1fr 14px;gap:6px}
.occ-cells{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(5,1fr);gap:3px;min-height:0}
.occ-cells i{border-radius:3px;background:color-mix(in srgb,#9B6CE0 calc(var(--v)*1%),rgba(240,240,234,.05))}
.occ-y{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:space-around;align-items:center;font-size:9.5px;color:var(--dim)}
.occ-x{grid-column:2;grid-row:2;display:flex;justify-content:space-around;font-size:9.5px;color:var(--dim)}
.occ-leg{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--dim);margin-top:9px;flex:none}
.occ-leg .ramp{flex:1;height:5px;border-radius:3px;background:linear-gradient(90deg,rgba(240,240,234,.05),#9B6CE0)}

/* metric tiles — number, delta, crisp SVG spark */
.mets{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.met{border:1px solid rgba(240,240,234,.08);border-radius:10px;padding:9px 11px}
.met span{display:block;font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.met b{font-size:16.5px;font-weight:800;color:#eef0ea;font-variant-numeric:tabular-nums}
.met em{font-style:normal;font-size:9.5px;font-weight:700;color:#c9a4ff;margin-left:5px}
.met svg{display:block;width:100%;height:14px;margin-top:5px}
.met polyline{fill:none;stroke:#9B6CE0;stroke-width:1.5;vector-effect:non-scaling-stroke}

/* the automated report — a document, drawn flat */
.report{border:1px solid rgba(240,240,234,.1);border-radius:10px;padding:11px 13px;background:rgba(240,240,234,.02);margin-top:auto}
.report b{display:block;font-size:12px;font-weight:700;color:var(--text)}
.report span{display:block;font-size:10.5px;color:var(--dim);margin-top:2px}
.report .rl{height:4px;border-radius:2px;background:rgba(240,240,234,.09);margin-top:6px}
.report .rl.w2{width:72%}.report .rl.w3{width:48%}

/* chain stepper — four stations on one line */
.chain{display:flex;align-items:center;gap:0;margin-top:auto;padding-top:10px;flex:none}
.chain b{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,240,234,.75);white-space:nowrap}
.chain i{flex:1;height:1px;background:linear-gradient(90deg,#9B6CE0,rgba(155,108,224,.25));margin:0 8px;min-width:12px}

/* console footer — the record, one line */
.con-foot{display:flex;flex-wrap:wrap;gap:5px 18px;padding:9px 16px;border-top:1px solid rgba(155,108,224,.22);font-size:11px;color:var(--muted);flex:none}
.con-foot span{white-space:nowrap}
.con-foot b{color:var(--dim);font-weight:600}

/* entrances — opacity-led, settle once */
.rv{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── small screens: the sheet stacks and the page scrolls ──────────────────── */
@media(max-width:1080px),(max-height:720px){
  body.sat{overflow-y:auto;height:auto;min-height:100vh}
  .sat-wrap{position:static;padding:84px 18px 110px;height:auto}
  .sat-head{flex-direction:column;align-items:flex-start;gap:10px}
  .sat-stand{text-align:left}
  .sheet{display:flex;flex-direction:column}
  .cell.sketch{order:-1;min-height:340px}
  .con-grid{display:flex;flex-direction:column}
}

/* ── the rangers' phone — copied from demo.css v45 (#phone plus the .ph- and
   .tg- classes; provenance rule: keep byte-close to the demo's; only the frame
   is adapted from fixed-overlay to in-flow so it stands inside the console) ── */
#phone{position:relative;width:272px;height:100%;max-height:520px;margin:0 auto;border-radius:40px;background:#000;border:3px solid #2c2c30;box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 0 0 2px #000;overflow:hidden;display:flex;flex-direction:column}
.ph-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:88px;height:24px;border-radius:13px;background:#000;z-index:3;box-shadow:0 0 0 2px #0a0a0a}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:13px 24px 6px;background:#0e1621;color:#fff;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ph-icons{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#fff;letter-spacing:.02em}
.sig{display:inline-flex;align-items:flex-end;gap:1.5px;height:10px}
.sig b{width:2.5px;background:#fff;border-radius:1px}
.sig b:nth-child(1){height:4px}.sig b:nth-child(2){height:6px}.sig b:nth-child(3){height:8px}.sig b:nth-child(4){height:10px;opacity:.35}
.bat{position:relative;width:21px;height:10.5px;border:1px solid rgba(255,255,255,.5);border-radius:3px;display:inline-block}
.bat::after{content:"";position:absolute;right:-3.5px;top:2.5px;width:1.8px;height:4px;background:rgba(255,255,255,.5);border-radius:0 1px 1px 0}
.bat b{position:absolute;inset:1.5px;right:6px;background:#fff;border-radius:1.5px}
.tg-head{display:flex;align-items:center;gap:10px;padding:8px 14px 10px;background:#17212b;border-bottom:1px solid rgba(255,255,255,.05)}
.tg-ava{width:32px;height:32px;border-radius:50%;background:#0e1621;object-fit:contain;padding:4px}
.tg-who{flex:1;min-width:0}
.tg-who b{display:block;font-size:13.5px;color:#fff;letter-spacing:0}
.tg-who span{display:block;font-size:10.5px;color:#6c7883;margin-top:1px}
.tg-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:12px;background:#0e1621;scrollbar-width:thin;scrollbar-color:rgba(240,240,234,.18) transparent}
.tg-body>:first-child{margin-top:auto}
.tg-day{display:flex;justify-content:center;padding:2px 0 3px}
.tg-day span{font-size:10px;font-weight:600;color:#8b98a5;background:rgba(23,33,43,.85);padding:3px 10px;border-radius:999px}
.tg-msg{max-width:96%;align-self:flex-start;background:#182533;border-radius:15px 15px 15px 5px;padding:9px 13px 8px;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tg-msg b{display:block;font-size:12.5px;font-weight:700;color:#fff;letter-spacing:0}
.tg-msg span{display:block;font-size:12px;line-height:1.45;color:#dbe2e9;margin-top:3px;padding-right:36px}
.tg-msg em{position:absolute;right:10px;bottom:7px;font-style:normal;font-size:10px;color:#6c7883;font-variant-numeric:tabular-nums}
.tg-input{display:flex;align-items:center;justify-content:space-between;margin:0 10px 12px;padding:8px 14px;border-radius:20px;background:#17212b;color:#6c7883;font-size:12.5px}
.tg-mic{font-style:normal;filter:grayscale(1) brightness(1.4);opacity:.75}

/* console product chrome — the CTDAMS app bar */
.con-bar img{width:20px;height:20px;border-radius:5px;background:#0e1216;padding:2px}
.con-tabs{display:flex;gap:2px;margin-left:14px}
.con-tabs span{font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--muted);padding:4px 10px;border-radius:999px}
.con-tabs span.on{color:#fff;background:rgba(155,108,224,.22)}
.range{display:flex;gap:2px;margin-left:auto}
.range span{font-size:9.5px;font-weight:700;color:var(--muted);padding:2px 8px;border-radius:999px}
.range span.on{color:var(--deep);background:#9B6CE0}

/* report documents list */
.doc{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(240,240,234,.06)}
.doc:last-child{border-bottom:0}
.doc .pdf{flex:none;width:28px;height:34px;border:1px solid rgba(240,240,234,.2);border-radius:5px;position:relative;background:rgba(240,240,234,.03)}
.doc .pdf::after{content:"PDF";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font-size:6.5px;font-weight:800;letter-spacing:.06em;color:#c9a4ff}
.doc .pdf::before{content:"";position:absolute;top:-1px;right:-1px;border-style:solid;border-width:0 9px 9px 0;border-color:transparent var(--deep) transparent transparent}
.doc div{flex:1;min-width:0}
.doc b{display:block;font-size:11.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc span{display:block;font-size:10px;color:var(--muted);margin-top:1px}

/* ── the CTDAMS app shell (/ai/) — the page IS the product ─────────────────── */
.app-bar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:12px;padding:11px 22px;background:rgba(8,7,13,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(155,108,224,.18)}
.app-mark{height:26px;width:auto;object-fit:contain;flex:none}
.app-name{font-size:14px;font-weight:800;letter-spacing:.02em;color:#f4f3ee;white-space:nowrap}
.app-name span{font-weight:600;color:var(--dim)}
.app-tabs{display:flex;gap:4px;margin-left:18px}
.app-tabs button{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--dim);background:none;border:0;cursor:pointer;padding:8px 16px;border-radius:999px;transition:.18s}
.app-tabs button:hover{color:var(--text)}
.app-tabs button.on{color:#fff;background:rgba(155,108,224,.26);font-weight:700}
.app-bar .sp-badge{margin:0 0 0 auto;font-size:10px;padding:4px 10px}
.app-clock{font-style:normal;font-size:12.5px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.05em}
.app-sub{position:fixed;top:52px;left:0;right:0;z-index:29;padding:7px 22px;font-size:11.5px;line-height:1.5;color:var(--muted);background:rgba(8,7,13,.6);border-bottom:1px solid rgba(155,108,224,.08)}
.app-sub a{text-decoration:none}

.app-main{position:fixed;inset:98px 24px 80px}
.view{display:none;height:100%}
.view.on{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
#view-overview .pane:nth-child(1){grid-column:1/4}
#view-overview .pane:nth-child(2){grid-column:4/10}
#view-overview .pane:nth-child(3){grid-column:10/13}
#view-detections .pane{grid-column:1/13}
#view-survey .pane:nth-child(1){grid-column:1/6}
#view-survey .pane:nth-child(2){grid-column:6/10}
#view-survey .pane:nth-child(3){grid-column:10/13}
#view-reports .pane:nth-child(1){grid-column:1/6}
#view-reports .pane:nth-child(2){grid-column:6/13}

/* immersive panes — quiet purple-edged surfaces, no console frame */
.view .pane{background:linear-gradient(180deg,rgba(10,9,16,.8),rgba(7,8,12,.86));border:1px solid rgba(155,108,224,.16);border-radius:14px;padding:14px 16px}
.phone-pane{background:none !important;border:0 !important;display:flex;align-items:center;justify-content:center;padding:6px}

/* detections table — scrolls like the real thing */
.filters{display:flex;gap:3px;margin-left:16px}
.filters button{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--muted);background:none;border:0;cursor:pointer;padding:4px 11px;border-radius:999px;transition:.15s}
.filters button:hover{color:var(--text)}
.filters button.on{color:var(--deep);background:#9B6CE0}
.det-head,.det-row{display:grid;grid-template-columns:58px 1.5fr 1.1fr 58px 52px 1fr;gap:12px;align-items:center;padding:8px 6px}
.det-head{font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid rgba(240,240,234,.1);flex:none}
.det-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(155,108,224,.3) transparent}
.det-row{font-size:12.5px;color:var(--dim);border-bottom:1px solid rgba(240,240,234,.05);transition:background .12s}
.det-row:hover{background:rgba(155,108,224,.07)}
.det-row.hide{display:none}
.det-row b{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;font-size:12px}
.det-row .dc{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:600}
.det-row .dc i{width:7px;height:7px;border-radius:50%;background:var(--qh);box-shadow:0 0 6px var(--qh);flex:none}
.det-row em{font-style:normal;font-variant-numeric:tabular-nums;font-weight:700;color:#c9a4ff}
.det-row .rt{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

/* report preview — the document, larger */
.prev{flex:1;border:1px solid rgba(240,240,234,.1);border-radius:12px;padding:18px 20px;background:rgba(240,240,234,.02);display:flex;flex-direction:column;gap:6px}
.prev>b{font-size:16px;font-weight:800;color:#f0efe9}
.prev>span{font-size:11px;color:var(--dim)}
.prev-mets{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:12px 0 14px}
.prev-mets div{border:1px solid rgba(155,108,224,.22);border-radius:9px;padding:8px 10px}
.prev-mets span{display:block;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.prev-mets b{font-size:15px;font-weight:800;color:#eef0ea;font-variant-numeric:tabular-nums}
.prev .rl{margin-top:8px}



/* small screens: the workspace stacks and scrolls */
@media(max-width:1080px),(max-height:720px){
  .app-main{position:static;padding:118px 16px 120px;height:auto}
  .view.on{display:flex;flex-direction:column}
  .app-tabs{margin-left:6px}
  .app-tabs button{padding:7px 11px;font-size:12px}
  .app-sub{top:50px}
  
  .det-head,.det-row{grid-template-columns:50px 1.3fr 1fr 44px 44px .8fr;gap:8px}
  .det-list{max-height:60vh}
}

/* class-count bars (survey) — label · track · tabular count */
.bar-row{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid rgba(240,240,234,.05);font-size:12.5px}
.bar-row:last-child{border-bottom:0}
.bar-row b{color:var(--text);font-weight:600;min-width:128px;font-size:12.5px}
.bar-row .bar{flex:1;height:6px;border-radius:3px;background:rgba(240,240,234,.08);overflow:hidden}
.bar-row .bar i{display:block;height:100%;border-radius:3px;background:var(--qh,#9B6CE0)}
.bar-row em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--text);font-weight:700;min-width:44px;text-align:right}

/* report preview skeleton sections */
.prev-sec{margin-top:12px}
.prev-sec span{display:block;font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* ── the Virunga occupancy twin (map centerpiece) ─────────────────────────── */
.map-pane{position:relative}
.map-note{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;border-bottom:1px dotted rgba(240,240,234,.3);padding-bottom:1px}
.map-note:hover{color:#c9a4ff}
.map-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.vmap{width:100%;height:100%;max-height:100%}
.vmap-park{fill:rgba(155,108,224,.05);stroke:none}
.vmap-lake{fill:rgba(58,159,230,.28);stroke:rgba(120,190,255,.4);stroke-width:1.2}
.vmap-rim{fill:none;stroke:rgba(180,150,240,.55);stroke-width:1.6;stroke-linejoin:round}
.vmap-label{fill:rgba(240,240,234,.42);font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.12em;text-anchor:middle;pointer-events:none;text-transform:uppercase}
.vmap-st{cursor:pointer;outline:none}
.vmap-halo{opacity:.22;transform-box:fill-box;transform-origin:center;animation:vpulse 3.4s ease-in-out infinite}
.vmap-st:nth-child(3n) .vmap-halo{animation-delay:-1.1s}
.vmap-st:nth-child(3n+1) .vmap-halo{animation-delay:-2.2s}
.vmap-st:hover .vmap-halo,.vmap-st:focus .vmap-halo{opacity:.4}
@keyframes vpulse{0%,100%{transform:scale(.7);opacity:.12}50%{transform:scale(1.25);opacity:.34}}
@media(prefers-reduced-motion:reduce){.vmap-halo{animation:none}}

.map-leg{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--dim);margin-top:9px;flex:none}
.map-leg .ramp{flex:0 1 120px;height:6px;border-radius:3px;background:linear-gradient(90deg,rgb(26,20,46),rgb(74,52,138),rgb(176,130,240),rgb(214,190,255))}
.map-leg-r{margin-left:auto;color:var(--muted);letter-spacing:.04em}

/* station tooltip — floats over the map */
.vmap-tip{position:fixed;z-index:60;width:228px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s;background:linear-gradient(180deg,rgba(14,11,22,.97),rgba(9,8,14,.98));border:1px solid rgba(155,108,224,.4);border-radius:11px;padding:11px 13px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.vmap-tip.on{opacity:1;transform:none}
.vmap-tip b{display:block;font-size:12.5px;font-weight:700;color:#f0efe9;margin-bottom:7px;line-height:1.3}
.vmap-tip .tp-row{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;padding:2px 0}
.vmap-tip .tp-row em{font-style:normal;font-weight:500;color:var(--muted)}
.vmap-tip .tp-cite{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(240,240,234,.1);font-size:10px;line-height:1.45;color:var(--dim)}
.vmap-tip .tp-cite sup{color:#c9a4ff;font-weight:700;margin-left:1px}

/* sources popover — the subtle citation list */
.src-pop{position:fixed;z-index:61;width:320px;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .18s;background:linear-gradient(180deg,rgba(14,11,22,.98),rgba(9,8,14,.99));border:1px solid rgba(155,108,224,.35);border-radius:12px;padding:13px 15px;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.src-pop.on{opacity:1;pointer-events:auto;transform:none}
.src-pop b{display:block;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.src-pop .src-row{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid rgba(240,240,234,.06);font-size:11px;line-height:1.45;color:var(--dim)}
.src-pop .src-row:last-child{border-bottom:0}
.src-pop .src-row sup{color:#c9a4ff;font-weight:700;flex:none}
.src-pop .src-row em{font-style:normal;color:var(--muted)}

/* ── detections — image cards with bounding boxes ─────────────────────────── */
.det-pane{overflow:hidden}
.det-count{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em;text-transform:none}
.filters{display:flex;flex-wrap:wrap;gap:3px;margin-left:auto}
.det-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding:4px 2px 2px;scrollbar-width:thin;scrollbar-color:rgba(155,108,224,.3) transparent}
.det-card{position:relative;border:1px solid rgba(240,240,234,.1);border-radius:11px;overflow:hidden;background:rgba(7,10,9,.6);transition:border-color .15s,transform .15s}
.det-card:hover{border-color:rgba(155,108,224,.45);transform:translateY(-2px)}
.det-card.hide{display:none}
.det-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0a0d0c}
.det-frame img{width:100%;height:100%;object-fit:cover;display:block}
.det-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(0deg,rgba(240,240,234,.03) 0 2px,transparent 2px 4px),radial-gradient(120% 90% at 50% 40%,color-mix(in srgb,var(--qh) 14%,transparent),rgba(6,9,8,.9))}
.det-ph span{font-size:9px;font-weight:800;letter-spacing:.14em;color:color-mix(in srgb,var(--qh) 75%,#fff);opacity:.7}
.det-box{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.det-box rect{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.95;filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
.det-tag{position:absolute;left:6px;top:6px;font-size:9.5px;font-weight:700;color:#0a0812;background:var(--qh);padding:2px 7px;border-radius:5px;letter-spacing:.02em;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.det-meta{padding:8px 11px 10px}
.det-meta b{display:block;font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.det-meta span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.det-hov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,8,14,.5),rgba(9,8,14,.94));backdrop-filter:blur(3px);opacity:0;transition:opacity .2s;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:16px 18px;pointer-events:none}
.det-card:hover .det-hov{opacity:1}
.det-hov div{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(240,240,234,.09);padding-bottom:5px}
.det-hov em{font-style:normal;font-weight:500;color:var(--muted);text-transform:uppercase;font-size:9.5px;letter-spacing:.08em}

/* det grid: rows stay natural height at the top, no vertical stretch */
.det-grid{align-content:start}

/* reports — selectable library + richer preview */
.doc-list{display:flex;flex-direction:column;overflow-y:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:rgba(155,108,224,.3) transparent}
.doc-sel{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:9px;cursor:pointer;padding:9px 8px;font-family:var(--sans);transition:background .14s}
.doc-sel:hover{background:rgba(155,108,224,.08)}
.doc-sel.on{background:rgba(155,108,224,.16)}
.rep-preview{display:flex;flex-direction:column}
.prev-sec p{font-size:11.5px;line-height:1.5;color:var(--dim);margin:0}
.prev-cite{margin-top:auto;padding-top:12px;border-top:1px solid rgba(155,108,224,.2);font-size:11px;line-height:1.5;color:var(--muted)}
.prev-cite::before{content:"◆ ";color:#9B6CE0}

/* ── 3D terrain twin (Overview) — WebGL canvas + projected DOM markers ────── */
.map-pane .map-wrap{position:relative;overflow:hidden;border-radius:10px}
#map canvas{display:block;width:100%;height:100%;border-radius:10px}
.vt-layer{position:absolute;inset:0;pointer-events:none}
.vt-sp{position:absolute;transform:translate(-50%,-50%) scale(var(--s,1));width:16px;height:16px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transition:transform .12s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
.vt-sp:hover{transform:translate(-50%,-50%) scale(calc(var(--s,1)*1.3));z-index:3}
.vt-sp .icv{width:100%;height:100%;fill:var(--fa);stroke:rgba(0,0,0,.6);stroke-width:16px;paint-order:stroke}
.vt-st{position:absolute;transform:translate(-50%,-50%) scale(var(--s,1));width:var(--r,5px);height:var(--r,5px);border-radius:50%;padding:0;border:1.5px solid rgba(8,6,14,.9);background:var(--fa,#9B6CE0);cursor:pointer;pointer-events:auto;box-shadow:0 0 6px var(--fa,#9B6CE0);transition:transform .12s}
.vt-st:hover{transform:translate(-50%,-50%) scale(calc(var(--s,1)*1.7));z-index:3}

/* species tooltip — richer, with the field-guide illustration */
.vt-tip{width:240px}
.vt-tip .tp-illus{display:block;width:46px;height:46px;margin-bottom:6px}
.vt-tip .tp-illus .icv{width:100%;height:100%;fill:var(--fa)}
.vt-tip .tp-latin{display:block;font-style:italic;font-size:11px;color:var(--muted);margin:-4px 0 8px}
.vt-tip .tp-range{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(240,240,234,.1);font-size:10.5px;line-height:1.45;color:var(--dim)}

.map-leg-l{color:var(--dim);letter-spacing:.02em}
.map-leg-l::before{content:none}