/* ── 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)}

/* 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:24px;margin-top:6px;overflow:visible}
.met polyline{fill:none;stroke:#9B6CE0;stroke-width:1.5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px rgba(155,108,224,.5))}
.met .mk-area{fill:color-mix(in srgb,#9B6CE0 15%,transparent);stroke:none}
.met .mk-end{fill:#c9a4ff;stroke:#0a0812;stroke-width:.5}

/* 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 — shared chrome lives in css/phone.css (linked before
   this file). Here we only place the frame in-flow inside the console and set
   its width; the feed reads top-down (no bottom-anchor override). ─────────────*/
#phone{position:relative;height:100%;max-height:520px;margin:0 auto;border-radius:40px;--phone-w:272px}
.tg-photo span{padding-right:0}

/* 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,.82);font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.16em;text-anchor:middle;pointer-events:none;text-transform:uppercase;paint-order:stroke;stroke:rgba(6,9,14,.9);stroke-width:3px;stroke-linejoin:round}
.vmap-st{cursor:pointer;outline:none}

.map-leg{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--dim);margin-top:9px;flex:none}
.map-leg-r{margin-left:auto;color:var(--muted);letter-spacing:.04em}

/* ── survey · multi-layer scientific surface ──────────────────────────────── */
.msurf-ctrl{display:inline-flex;gap:2px;padding:3px;margin-bottom:10px;background:rgba(9,8,14,.55);border:1px solid rgba(155,108,224,.2);border-radius:11px;align-self:flex-start;flex:none}
.msurf-ctrl button{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.01em;color:var(--muted);background:none;border:0;border-radius:8px;padding:5px 11px;cursor:pointer;transition:background .16s,color .16s;white-space:nowrap}
.msurf-ctrl button i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 5px var(--c);opacity:.85;transition:opacity .16s}
.msurf-ctrl button:hover{color:var(--text)}
.msurf-ctrl button.on{background:linear-gradient(180deg,rgba(155,108,224,.26),rgba(155,108,224,.13));color:#fff}
.msurf-ctrl button.on i{opacity:1}
/* hexbin surface — classed choropleth cells, recoloured per layer */
.hexc{stroke:rgba(6,8,13,.32);stroke-width:.5;transition:fill .5s ease}
/* coordinate graticule */
.grat-l{stroke:rgba(240,240,234,.10);stroke-width:.6;stroke-dasharray:3 4}
.grat-t{fill:rgba(240,240,234,.5);font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.03em;paint-order:stroke;stroke:rgba(6,9,14,.85);stroke-width:2.4px;stroke-linejoin:round}
/* station points + IDs */
.vstat{fill:#f2f1ea;stroke:#0a0812;stroke-width:1.2;transition:fill .15s}
.vmap-st:hover .vstat,.vmap-st:focus .vstat{fill:#fff;stroke:#9B6CE0}
.vstat-t{fill:rgba(240,240,234,.82);font-family:var(--sans);font-size:7.5px;font-weight:700;letter-spacing:.01em;paint-order:stroke;stroke:rgba(6,9,14,.9);stroke-width:2.2px;stroke-linejoin:round}
.vmap-st:hover .vstat-t,.vmap-st:focus .vstat-t{fill:#fff}
/* scale bar + north arrow */
.sb-line{stroke:rgba(240,240,234,.7);stroke-width:1.3}
.sb-t{fill:rgba(240,240,234,.82);font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.04em;paint-order:stroke;stroke:rgba(6,9,14,.85);stroke-width:2.4px;stroke-linejoin:round}
.na-tri{fill:rgba(240,240,234,.82);stroke:rgba(6,9,14,.8);stroke-width:.5}
.na-t{fill:rgba(240,240,234,.9);font-family:var(--sans);font-size:11px;font-weight:800;paint-order:stroke;stroke:rgba(6,9,14,.85);stroke-width:2.6px;stroke-linejoin:round}
/* classed legend */
.mleg-name{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 55%,#fff)}
.mleg-name::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c)}
.mleg-steps{display:flex;flex:0 1 108px;height:8px;border-radius:2px;overflow:hidden;border:1px solid rgba(240,240,234,.12)}
.mleg-steps i{flex:1;border-right:1px solid rgba(6,8,13,.4)}
.mleg-steps i:last-child{border-right:0}
.mleg-sc{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.vmap-tip .tp-row.on{color:#fff}
.vmap-tip .tp-row.on em{color:color-mix(in srgb,#c9a4ff 82%,#fff);font-weight:700}

/* 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;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:0 10px;
  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) 16%,transparent),rgba(6,9,8,.92))}
.det-ph::before{content:"";position:absolute;inset:9px;border:1px solid color-mix(in srgb,var(--qh) 34%,transparent);border-radius:6px;opacity:.55}
.det-ph-cls{font-size:12px;font-weight:800;letter-spacing:.02em;color:color-mix(in srgb,var(--qh) 55%,#fff);line-height:1.15}
.det-ph-sub{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.8;font-variant-numeric:tabular-nums}
.det-conf{position:absolute;right:6px;top:6px;font-size:10px;font-weight:800;color:#e9ffe9;background:rgba(6,10,8,.72);border:1px solid rgba(0,255,100,.4);padding:2px 7px;border-radius:20px;letter-spacing:.02em;font-variant-numeric:tabular-nums;backdrop-filter:blur(2px)}
.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:14px;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}

/* ── pane subtitle (survey / reports headers) ─────────────────────────────── */
.pane-sub{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:none;color:var(--muted);opacity:.85;margin-left:2px}
.pane-sub::before{content:"· ";opacity:.6}

/* ── report preview · richer document ─────────────────────────────────────── */
.prev-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.prev-top b{font-size:16px;font-weight:800;color:#f0efe9;line-height:1.15}
.prev-ref{flex:none;font-size:9px;font-weight:800;letter-spacing:.08em;color:#c9a4ff;border:1px solid rgba(155,108,224,.35);border-radius:20px;padding:2px 9px;font-variant-numeric:tabular-nums;white-space:nowrap}
.prev-sub{font-size:11px;color:var(--dim);margin-top:2px}
.prev-tbl{width:100%;border-collapse:collapse;margin-top:14px;font-size:11px;font-variant-numeric:tabular-nums}
.prev-tbl th{text-align:right;font-size:8.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:0 0 6px;border-bottom:1px solid rgba(155,108,224,.22)}
.prev-tbl th:first-child{text-align:left}
.prev-tbl td{text-align:right;padding:6px 0;color:var(--dim);border-bottom:1px solid rgba(240,240,234,.05)}
.prev-tbl td:first-child{text-align:left;color:var(--text);font-weight:600}
.prev-tbl tr:last-child td{border-bottom:0}
.prev-foot{margin-top:12px;font-size:9.5px;letter-spacing:.02em;color:var(--muted);opacity:.7}

/* ── survey · single-season occupancy model ───────────────────────────────── */
.occ-tbl{display:flex;flex-direction:column;flex:none;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(155,108,224,.3) transparent}
.accum{flex:none;margin-top:8px}
.accum-svg{width:100%;height:76px;display:block}
.accum-fill{fill:color-mix(in srgb,#9B6CE0 16%,transparent)}
.accum-line{fill:none;stroke:#9B6CE0;stroke-width:1.4;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px rgba(155,108,224,.6))}
.accum-asym{stroke:rgba(240,240,234,.32);stroke-width:.6;stroke-dasharray:2.4 2.4;vector-effect:non-scaling-stroke}
.accum-obs{fill:#fff;stroke:#9B6CE0;stroke-width:1.1}
.accum-ax{display:flex;justify-content:space-between;font-size:8.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-top:4px}
.accum-asym-t{color:color-mix(in srgb,#9B6CE0 55%,#fff)}
.occ-row{display:grid;grid-template-columns:minmax(64px,1fr) 2.7em minmax(72px,1.7fr) 2.4em 2.4em 2.6em;align-items:center;gap:9px;padding:5px 0;border-bottom:1px solid rgba(240,240,234,.05);font-size:12px}
.occ-row:last-child{border-bottom:0}
.occ-row b{color:var(--text);font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.occ-row b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--qh);box-shadow:0 0 5px var(--qh);margin-right:6px;vertical-align:middle}
.occ-n{text-align:right;font-variant-numeric:tabular-nums;color:var(--text);font-weight:700}
.occ-dim{color:var(--muted);font-weight:600}
.occ-est{color:color-mix(in srgb,var(--qh) 62%,#fff)}
.occ-rai{color:var(--dim);font-weight:600}
.occ-hd{border-bottom:1px solid rgba(155,108,224,.22);padding-bottom:7px;margin-bottom:2px}
.occ-hd b,.occ-hd .occ-n,.occ-ci-h{font-size:8.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.occ-hd b::before{display:none}
.occ-ci-h{text-align:center}
.occ-ci{position:relative;height:13px;border-radius:7px;background:rgba(240,240,234,.05)}
.occ-ci-bar{position:absolute;top:50%;transform:translateY(-50%);height:4px;border-radius:2px;background:color-mix(in srgb,var(--qh) 50%,transparent)}
.occ-ci-nv{position:absolute;top:50%;transform:translate(-50%,-50%);width:2px;height:9px;border-radius:1px;background:rgba(240,240,234,.4)}
.occ-ci-pt{position:absolute;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:var(--qh);box-shadow:0 0 6px var(--qh);border:1px solid rgba(6,10,8,.7)}

/* diversity + effort chips (foot of the map pane) */
.occ-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;flex:none}
.occ-chip{font-size:10px;font-weight:800;color:var(--text);background:rgba(155,108,224,.1);border:1px solid rgba(155,108,224,.24);border-radius:20px;padding:3px 9px;font-variant-numeric:tabular-nums;white-space:nowrap}
.occ-chip em{font-style:normal;font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:8px;color:var(--muted);margin-right:5px}

/* ── survey · diel activity kernels ───────────────────────────────────────── */
.diel{display:flex;flex-direction:column;gap:2px}
.diel-row{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:9px;padding:4px 0}
.diel-lab b{display:block;font-size:11.5px;font-weight:700;color:var(--text)}
.diel-lab span{display:block;font-size:8.5px;color:var(--muted);letter-spacing:.02em;margin-top:1px}
.diel-svg{width:100%;height:30px;overflow:visible}
.diel-grid{stroke:rgba(240,240,234,.08);stroke-width:.5}
.diel-area{fill:color-mix(in srgb,var(--qh) 22%,transparent)}
.diel-line{fill:none;stroke:var(--qh);stroke-width:1.3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px color-mix(in srgb,var(--qh) 70%,transparent))}
.diel-peak{fill:#fff;stroke:var(--qh);stroke-width:1}
.diel-peak-t{font-size:10px;font-weight:800;color:color-mix(in srgb,var(--qh) 62%,#fff);font-variant-numeric:tabular-nums;text-align:right}
.diel-axis{display:flex;justify-content:space-between;padding:2px 34px 0 96px;margin-left:9px;font-size:8px;font-weight:700;color:var(--muted);letter-spacing:.06em}

/* ── 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}

/* ── layers control strip (above the map, right-aligned — no overlap) ──────── */
.map-ctrl{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:6px;padding:0 2px 8px;flex:none}
.layers{display:flex;flex-direction:row;align-items:center;gap:6px;font-family:var(--sans);flex-wrap:wrap;justify-content:flex-end}
.layers .lyr{display:flex;align-items:center;gap:8px;background:rgba(10,9,16,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(240,240,234,.12);border-radius:999px;padding:6px 13px 6px 10px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:.15s;white-space:nowrap}
.layers .lyr:hover{color:var(--text);border-color:rgba(155,108,224,.4)}
.layers .lyr .ly-k{width:14px;height:14px;border-radius:5px;border:1.5px solid rgba(240,240,234,.35);flex:none;position:relative;transition:.15s}
.layers .lyr.on{color:#f0efe9;border-color:rgba(155,108,224,.5)}
.layers .lyr.on .ly-k{background:#9B6CE0;border-color:#9B6CE0}
.layers .lyr.on .ly-k::after{content:"";position:absolute;left:3.5px;top:1px;width:4px;height:7px;border:solid #0a0812;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.lyr-sub{display:flex;flex-direction:row;gap:4px;align-items:center;padding:0 0 0 4px;transition:opacity .2s,max-width .25s;overflow:hidden;max-width:520px}
.lyr-sub.off{opacity:0;max-width:0;padding:0;pointer-events:none}
.lyr-sub{border-left:1px solid rgba(240,240,234,.12);margin-left:2px}
.lyr-sub .sub{display:flex;align-items:center;gap:7px;background:rgba(10,9,16,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(240,240,234,.08);border-radius:999px;padding:4px 11px 4px 9px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s;white-space:nowrap}
.lyr-sub .sub:hover{color:var(--text)}
.lyr-sub .sub i{width:8px;height:8px;border-radius:50%;background:var(--c,#fff);flex:none;opacity:.25;transition:.15s;box-shadow:0 0 0 transparent}
.lyr-sub .sub.on{color:var(--text)}
.lyr-sub .sub.on i{opacity:1;box-shadow:0 0 7px var(--c)}

/* device hover hotspot — a small ring over each placed 3D asset */
.vt-dev{position:absolute;transform:translate(-50%,-50%) scale(var(--s,1));width:26px;height:26px;border-radius:50%;padding:0;background:none;border:1.5px solid transparent;cursor:pointer;pointer-events:auto;transition:border-color .15s,background .15s}
.vt-dev::after{content:none}
.vt-dev:hover{border-color:var(--fa);background:color-mix(in srgb,var(--fa) 16%,transparent);z-index:4}

@media(max-width:560px){ .layers{top:8px;right:8px} .layers .lyr{font-size:11px;padding:5px 10px 5px 8px} .lyr-sub .sub{font-size:10px} }

/* ── phone (≤560): the CTDAMS workspace as a true mobile dashboard — NOT a
   trimmed-down page. A sticky brand strip + full-width segmented tab control
   keeps all four views one tap away; every view stacks with its full detail;
   the occupancy twin is the centrepiece; and the alert stream is rebuilt as a
   native feed panel (the desktop shows a ranger's phone, but ON a phone that
   reads as a confusing phone-in-a-phone, so here it becomes a dashboard feed).
   Desktop and the ≤1080 tablet layout are untouched. ─────────────────────────*/
@media(max-width:560px){
  /* app bar → row 1 brand + badge + clock, row 2 a segmented tab control */
  .app-bar{position:sticky;top:0;flex-wrap:wrap;align-items:center;gap:9px;padding:9px 13px}
  .app-mark{height:23px}
  .app-name{font-size:14px}
  .app-name span{display:none}
  .app-bar .sp-badge{margin-left:auto;order:3;flex:none}
  .app-clock{display:inline;order:4;font-size:12px}
  .app-tabs{order:5;flex-basis:100%;width:100%;margin:2px 0 0;gap:4px;background:rgba(155,108,224,.09);border:1px solid rgba(155,108,224,.16);border-radius:12px;padding:4px}
  .app-tabs::-webkit-scrollbar{display:none}
  .app-tabs button{flex:1;min-width:0;text-align:center;padding:9px 2px;font-size:12px;font-weight:700;border-radius:8px}
  .app-tabs button.on{background:rgba(155,108,224,.34)}

  /* the intro line + content flow beneath the sticky bar */
  .app-sub{position:static;top:auto;margin:0;padding:11px 15px 12px;font-size:12px;line-height:1.5}
  .app-main{position:static;inset:auto;padding:13px 13px 112px;height:auto}
  .view.on{display:flex;flex-direction:column;gap:13px}
  .view .pane{border-radius:15px;padding:14px 15px;overflow:visible}
  .pane-h{font-size:12.5px}

  /* OVERVIEW order: the map, then the live alert feed, then the metrics rail */
  #view-overview .map-pane{order:0}
  #view-overview .phone-pane{order:1}
  #view-overview .col-rail{order:2;overflow:visible;max-height:none}

  /* the occupancy twin — a real centrepiece on the phone. The 3D terrain is a
     wide perspective plate, so it gets a shorter frame (less empty sky); the 2D
     survey choropleth scales to fill, so it can run taller. */
  .map-pane .map-wrap{flex:none}
  #map{height:40vh;min-height:290px}
  #map2{height:56vh;min-height:340px}
  .map-ctrl{justify-content:flex-start}
  .layers{flex-wrap:wrap;justify-content:flex-start}
  .lyr-sub{flex-wrap:wrap;max-width:none}

  /* live alerts: shed the phone chrome → a native dashboard feed panel */
  .phone-pane{background:linear-gradient(180deg,rgba(10,9,16,.8),rgba(7,8,12,.86)) !important;border:1px solid rgba(155,108,224,.16) !important;border-radius:15px;padding:0;display:block;align-items:stretch;justify-content:flex-start}
  .phone-pane #phone{width:100%;--phone-w:100%;max-height:none;height:auto;border:0;border-radius:15px;background:none;box-shadow:none}
  .phone-pane .ph-island,.phone-pane .ph-status,.phone-pane .tg-input{display:none}
  .phone-pane .tg-head{background:transparent;border-bottom:1px solid rgba(155,108,224,.16);padding:12px 15px}
  .phone-pane .tg-ava{background:rgba(155,108,224,.12)}
  .phone-pane .tg-who b{color:var(--text)}
  .phone-pane .tg-who span{color:var(--muted)}
  .phone-pane .tg-body{background:transparent;max-height:none;overflow:visible;padding:13px 14px;gap:10px}
  .phone-pane .tg-day span{background:rgba(155,108,224,.12);color:var(--dim)}
  .phone-pane .tg-msg{max-width:100%;background:rgba(155,108,224,.06);border:1px solid rgba(155,108,224,.14);border-radius:12px;box-shadow:none}
  .phone-pane .tg-msg b{color:#f0efe9}
  .phone-pane .tg-msg span{color:var(--dim)}
  .phone-pane .tg-msg em{color:var(--muted)}

  /* DETECTIONS — a two-up gallery; filters + header wrap */
  .det-pane{overflow:visible}
  .det-grid{grid-template-columns:1fr 1fr;gap:9px;flex:none;overflow:visible}
  #view-detections .pane-h{flex-wrap:wrap;gap:7px 10px}
  .filters{margin-left:0;flex-wrap:wrap;gap:5px}

  /* SURVEY + shared tables flow instead of inner-scrolling */
  .occ-tbl,.doc-list{flex:none;overflow:visible;max-height:none}
  .occ-row{grid-template-columns:minmax(66px,1.15fr) 2.4em minmax(56px,1.35fr) 2.2em 2.2em 2.4em;gap:6px;font-size:11.5px}

  /* REPORTS — the list, then a tall document preview */
  .rep-preview{min-height:66vh;flex:none}
}

/* ── overhauled right rail — a scrolling dashboard column ──────────────────── */
.col-rail{overflow-y:auto;gap:0;scrollbar-width:thin;scrollbar-color:rgba(155,108,224,.3) transparent}
.col-rail::-webkit-scrollbar{width:5px}.col-rail::-webkit-scrollbar-thumb{background:rgba(155,108,224,.3);border-radius:99px}
.rail-sec{padding:0 0 15px;margin-bottom:15px;border-bottom:1px solid rgba(240,240,234,.07)}
.rail-sec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:2px}
.rail-sec .pane-h{margin-bottom:11px}
.net-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#00FF64}
.net-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#00FF64;box-shadow:0 0 7px #00FF64;animation:netpulse 2s ease-in-out infinite}
@keyframes netpulse{0%,100%{opacity:1}50%{opacity:.35}}
.netstat{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.netstat div{border:1px solid rgba(240,240,234,.08);border-radius:10px;padding:9px 11px}
.netstat b{display:block;font-size:19px;font-weight:800;color:#eef0ea;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.netstat span{display:block;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.net-bars{display:flex;flex-direction:column;gap:5px}
.nb-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--dim)}
.nb-row>i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c);flex:none}
.nb-row b{color:var(--text);font-weight:600;min-width:62px}
.nb-row .nb-bar{flex:1;height:5px;border-radius:3px;background:rgba(240,240,234,.08);overflow:hidden}
.nb-row .nb-bar i{display:block;height:100%;border-radius:3px;background:var(--c);width:0;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.nb-row em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--text);font-weight:700;min-width:38px;text-align:right;font-size:11px}
.col-rail .report{margin-top:0}
.col-rail .doc{text-decoration:none}