/* Layout: full-viewport split gateway on a diagonal seam. Hover widens a side, click slides the other side out and fades in that side's console. */
@property --s{syntax:'<length>';inherits:true;initial-value:50vw}
@property --k{syntax:'<length>';inherits:true;initial-value:7vw}
:root{
  --bg:#edf1ee;--panel:#f9fbf9;--panel2:#eff3f0;--ink:#13201a;--muted:#55675e;--line:#cfd9d3;
  --teal:#0e6a5a;--teal-ink:#ffffff;--blue:#1b55d1;--blue-ink:#ffffff;
  --map:#dfe7e2;--street:#f7f9f7;--block:#d3ddd7;--park:#c3dbc6;--water:#b9d2dc;
  --c-low:#2c9460;--c-med:#c99410;--c-high:#d9651b;--c-crit:#c3322a;--route:#1b55d1;--route-ink:#ffffff;
  --cv-l-bg:#d3e9de;--cv-l-ink:#0d2a22;--cv-l-acc:#0e6a5a;--cv-l-acc-ink:#ffffff;
  --cv-r-bg:#101c3a;--cv-r-ink:#eef2ff;--cv-r-acc:#ffd166;--cv-r-acc-ink:#1a2035;
  --edge:#13201a;--shadow:#13201a;
  --font-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --font-body:'Schibsted Grotesk','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1512;--panel:#16201b;--panel2:#1c2923;--ink:#e5eee8;--muted:#93a69b;--line:#2a3a32;
    --teal:#4fc3a6;--teal-ink:#06241c;--blue:#79a4ff;--blue-ink:#0a1830;
    --map:#1a2520;--street:#2d3b34;--block:#202d27;--park:#1f3b2b;--water:#1d3b49;
    --c-low:#4cbf86;--c-med:#e3b13a;--c-high:#f08a43;--c-crit:#ee6258;--route:#79a4ff;--route-ink:#0a1830;
    --cv-l-bg:#11261e;--cv-l-ink:#e3f3ec;--cv-l-acc:#4fc3a6;--cv-l-acc-ink:#06241c;
    --cv-r-bg:#0a1228;--cv-r-ink:#eef2ff;--cv-r-acc:#ffcf70;--cv-r-acc-ink:#1a2035;
    --edge:#07100c;--shadow:rgba(79,195,166,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1512;--panel:#16201b;--panel2:#1c2923;--ink:#e5eee8;--muted:#93a69b;--line:#2a3a32;
  --teal:#4fc3a6;--teal-ink:#06241c;--blue:#79a4ff;--blue-ink:#0a1830;
  --map:#1a2520;--street:#2d3b34;--block:#202d27;--park:#1f3b2b;--water:#1d3b49;
  --c-low:#4cbf86;--c-med:#e3b13a;--c-high:#f08a43;--c-crit:#ee6258;--route:#79a4ff;--route-ink:#0a1830;
  --cv-l-bg:#11261e;--cv-l-ink:#e3f3ec;--cv-l-acc:#4fc3a6;--cv-l-acc-ink:#06241c;
  --cv-r-bg:#0a1228;--cv-r-ink:#eef2ff;--cv-r-acc:#ffcf70;--cv-r-acc-ink:#1a2035;
  --edge:#07100c;--shadow:rgba(79,195,166,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font-body);overflow:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;letter-spacing:-.015em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--a,var(--teal));outline-offset:2px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* ---------- gateway ---------- */
.gate{position:fixed;inset:0;overflow:hidden;--s:50vw;--k:7vw;
  transition:--s .85s cubic-bezier(.72,0,.18,1),--k .85s cubic-bezier(.72,0,.18,1)}
@media (hover:hover) and (min-width:761px){
  .gate:not([data-open]):not([data-returning]):has(.p-l:hover,.p-l:focus-within){--s:60vw}
  .gate:not([data-open]):not([data-returning]):has(.p-r:hover,.p-r:focus-within){--s:40vw}
}
.gate[data-open="l"]{--s:100vw;--k:0px}
.gate[data-open="r"]{--s:0vw;--k:0px}
.panel{position:absolute;top:0;bottom:0;overflow:hidden;transition:background-color .6s}
.p-l{left:calc(var(--s) - 100vw);width:calc(100vw + var(--k));background:var(--cv-l-bg);--a:var(--teal);--ai:var(--teal-ink);
  clip-path:polygon(0 0,100% 0,calc(100% - var(--k)) 100%,0 100%)}
.p-r{left:var(--s);width:100vw;background:var(--cv-r-bg);--a:var(--blue);--ai:var(--blue-ink);
  clip-path:polygon(var(--k) 0,100% 0,100% 100%,0 100%)}
.panel-art{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .85s cubic-bezier(.72,0,.18,1);pointer-events:none}
.p-l .panel-art,.p-l .portal-art img{object-position:9% center}
.p-r .panel-art,.p-r .portal-art img{object-position:68% center}
.gate[data-open] .panel-art{opacity:.07}
.p-r{--bg:#edf2ff;--panel:#fafbff;--panel2:#e9efff;--ink:#14213d;--muted:#52627e;--line:#cbd6ed;
  --blue:#315bb6;--blue-ink:#fff;--route:#315bb6;--route-ink:#fff;--map:#e4ebfa;--street:#f7f9ff;--block:#d9e2f5;--park:#c9d8f1;--water:#bfd3e6;
  --edge:#14213d;--shadow:rgba(32,57,112,.22)}
.p-r .btn.primary,.p-r .seg button[aria-pressed="true"]{background:var(--cv-r-acc);color:var(--cv-r-acc-ink);border-color:var(--edge)}
.p-r .btn.primary:hover:not(:disabled){filter:brightness(1.04)}
.gate[data-open="r"] ~ .back{--a-open:var(--cv-r-acc)}
.gate[data-open="r"] ~ .chrome-r .seg button[aria-pressed="true"]{background:var(--cv-r-acc);color:var(--cv-r-acc-ink);border-color:var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .p-r{--bg:#0a1430;--panel:#111f3f;--panel2:#192a4f;--ink:#eaf0ff;--muted:#a0afd0;--line:#2e4068;
  --blue:#86a6ff;--blue-ink:#07132e;--route:#93adff;--route-ink:#08132d;--map:#111e3b;--street:#243452;--block:#172847;--park:#1b3c3b;--water:#173c50;--edge:#060d20;--shadow:rgba(0,0,0,.5)}}
:root[data-theme="dark"] .p-r{--bg:#0a1430;--panel:#111f3f;--panel2:#192a4f;--ink:#eaf0ff;--muted:#a0afd0;--line:#2e4068;
  --blue:#86a6ff;--blue-ink:#07132e;--route:#93adff;--route-ink:#08132d;--map:#111e3b;--street:#243452;--block:#172847;--park:#1b3c3b;--water:#173c50;--edge:#060d20;--shadow:rgba(0,0,0,.5)}
.gate[data-open] .panel{background:var(--bg)}

/* covers */
.cover{position:absolute;top:0;bottom:0;cursor:pointer;opacity:1;visibility:visible;transition:opacity .35s,visibility 0s}
.gate[data-open] .cover{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.cv-l{right:0;width:calc(var(--s) + var(--k));color:var(--cv-l-ink);
  background-image:none}
.cv-r{left:0;width:calc(100vw - var(--s));color:var(--cv-r-ink);overflow:hidden}
.cv-r svg.trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cover::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none}
.cv-l::before{background:linear-gradient(90deg,color-mix(in srgb,var(--cv-l-bg) 88%,transparent),color-mix(in srgb,var(--cv-l-bg) 54%,transparent) 48%,transparent 92%)}
.cv-r::before{background:linear-gradient(90deg,color-mix(in srgb,var(--cv-r-bg) 88%,transparent),color-mix(in srgb,var(--cv-r-bg) 54%,transparent) 52%,transparent 94%)}
.cv-in{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding-block:96px 56px;min-width:0}
.cv-l .cv-in{padding-inline:clamp(20px,5vw,72px) calc(var(--k) + clamp(20px,4vw,56px))}
.cv-r .cv-in{padding-inline:calc(var(--k) + clamp(20px,4vw,56px)) clamp(20px,5vw,72px)}
.cv-ico{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;border:2.5px solid currentColor;transform:rotate(-4deg)}
.cv-l .cv-ico{background:var(--cv-l-acc);color:var(--cv-l-acc-ink);border-color:var(--edge);box-shadow:4px 4px 0 var(--cv-l-ink)}
.cv-r .cv-ico{background:var(--cv-r-acc);color:var(--cv-r-acc-ink);border-color:var(--cv-r-bg);box-shadow:4px 4px 0 var(--cv-r-ink);transform:rotate(4deg)}
.cv-tag{font:600 12px var(--font-body);text-transform:uppercase;letter-spacing:.1em}
.cv-l .cv-tag{color:var(--cv-l-acc)} .cv-r .cv-tag{color:var(--cv-r-acc)}
.cv-in h2{font-size:clamp(30px,4.4vw,60px);font-weight:800;line-height:1.02;max-width:12ch}
.cv-in .alt{font:600 15px var(--font-mono);opacity:.75}
.cv-in .sub{max-width:38ch;font-size:clamp(15px,1.25vw,18px);opacity:.82}
.cv-live{display:inline-flex;align-items:center;gap:10px;font:500 13px var(--font-mono);padding:7px 12px;border-radius:99px;align-self:flex-start;max-width:100%}
.cv-l .cv-live{background:color-mix(in srgb,var(--cv-l-ink) 10%,var(--cv-l-bg))}
.cv-r .cv-live{background:color-mix(in srgb,var(--cv-r-ink) 14%,var(--cv-r-bg))}
.cv-live i{width:8px;height:8px;border-radius:50%;flex:none;animation:blink 1.8s infinite}
.cv-l .cv-live i{background:var(--cv-l-acc)} .cv-r .cv-live i{background:var(--cv-r-acc)}
@keyframes blink{50%{opacity:.25}}
.cv-cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font:700 16px var(--font-display);padding:12px 18px;border-radius:10px;border:2.5px solid;transition:transform .2s,box-shadow .2s}
.cv-l .cv-cta{background:var(--cv-l-acc);color:var(--cv-l-acc-ink);border-color:var(--edge);box-shadow:4px 4px 0 var(--cv-l-ink)}
.cv-r .cv-cta{background:var(--cv-r-acc);color:var(--cv-r-acc-ink);border-color:var(--cv-r-bg);box-shadow:4px 4px 0 var(--cv-r-ink)}
.cover:hover .cv-cta{transform:translate(-2px,-2px)}
.cover:focus-visible{outline:3px solid var(--cv-r-acc);outline-offset:-6px}
.cv-l:focus-visible{outline-color:var(--cv-l-acc)}

/* fixed chrome */
.brand{position:fixed;z-index:30;top:calc(env(safe-area-inset-top,0px) + 16px);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:99px;background:var(--panel);color:var(--ink);border:2px solid var(--edge);
  font:700 17px/1 var(--font-display);box-shadow:3px 3px 0 var(--shadow);transition:opacity .3s,visibility 0s;white-space:nowrap}
.gate[data-open] .brand{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.brand svg{display:block}
.chrome-r{position:fixed;z-index:30;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;display:flex;gap:8px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.seg button{border:0;background:transparent;padding:7px 12px;cursor:pointer;font-size:13px;font-weight:500;border-right:1px solid var(--line);display:inline-flex;align-items:center;gap:6px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--a,var(--teal));color:var(--ai,var(--teal-ink))}
.chrome-r .seg button{padding:7px 10px}
.back{position:fixed;z-index:30;top:calc(env(safe-area-inset-top,0px) + 14px);left:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);cursor:pointer;font-weight:600;font-size:13.5px;box-shadow:0 2px 10px rgba(0,0,0,.12);
  opacity:0;visibility:hidden;transform:translateX(-12px);transition:opacity .3s,transform .3s,visibility 0s .3s}
.gate[data-open] ~ .back{opacity:1;visibility:visible;transform:none;transition:opacity .4s .5s,transform .4s .5s,visibility 0s .5s}
.back:hover{border-color:var(--a-open,var(--teal))}
.gate[data-open="r"] ~ .back{--a-open:var(--blue)}

/* consoles */
.console{position:absolute;inset:0;overflow-y:auto;padding:72px clamp(16px,3vw,36px) 56px;color:var(--ink);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.gate[data-open="l"] .p-l .console,.gate[data-open="r"] .p-r .console{opacity:1;visibility:visible;transition:opacity .55s .45s,visibility 0s .45s}
.wrap{max-width:1280px;margin-inline:auto;display:flex;flex-direction:column;gap:20px}
.c-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 24px}
.c-head h1{font-size:clamp(28px,3.6vw,44px);font-weight:800;line-height:1.05}
.c-head p{color:var(--muted);max-width:60ch;margin-top:6px}
.portal-art{width:clamp(116px,14vw,176px);flex:0 0 auto;margin:0;text-align:center}
.portal-art img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--edge);border-radius:14px;box-shadow:4px 4px 0 var(--shadow)}
.portal-art figcaption{margin-top:8px;color:var(--muted);font-size:11.5px;line-height:1.3}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.09em;font-weight:600;color:var(--a)}
.head-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.clock{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--muted);padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:var(--panel)}
.clock b{font:600 14px var(--font-mono);color:var(--ink)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;min-width:0}
.pad{padding:18px;display:flex;flex-direction:column;gap:14px}
.grid2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
.col{display:flex;flex-direction:column;gap:20px;min-width:0}
.btn{border:1px solid var(--line);background:var(--panel);padding:9px 14px;border-radius:8px;cursor:pointer;font-weight:500}
.btn:hover:not(:disabled){border-color:var(--a)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--a);color:var(--ai);border:2px solid var(--edge);font-weight:600;box-shadow:3px 3px 0 var(--shadow)}
.btn.primary:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow)}
.btn.primary:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.btn.ghost{background:transparent}
.pulse{display:flex;flex-wrap:wrap;gap:12px}
.pulse>div{flex:1 1 150px;min-width:0;padding:10px 14px;border:2px solid var(--edge);border-radius:12px;background:var(--panel);box-shadow:3px 3px 0 var(--shadow);display:flex;flex-direction:column;gap:2px}
.pulse b{font:800 28px/1.05 var(--font-display);font-variant-numeric:tabular-nums}
.pulse span{font-size:12.5px;color:var(--muted)}
.pulse .hot b{color:var(--c-crit)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stat{background:var(--panel);padding:10px 14px;display:flex;flex-direction:column;gap:1px;min-width:0}
.stat .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stat .v{font:600 23px/1.15 var(--font-display);font-variant-numeric:tabular-nums}
.stat .s{font-size:12.5px;color:var(--muted)}
.empty{padding:14px;border:1.5px dashed var(--line);border-radius:10px;color:var(--muted);font-size:13.5px;background:var(--panel2)}
.sub-h{font:600 12px var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* map */
.maptools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 14px}
.layerpick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.layerpick .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.caption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 18px;padding:10px 14px;border-block:1px solid var(--line);background:var(--panel2)}
.caption p{font-size:13px;min-width:0;flex:1 1 260px}
.caption p small{display:inline-block;margin-top:3px;color:var(--muted);font-size:11px}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:50%;background:var(--lc);display:inline-block}
.mapwrap{overflow-x:auto;background:var(--map);border-radius:0 0 14px 14px}
.mapsvg{display:block;width:100%;min-width:600px;height:auto}
.geo-map{height:430px;min-width:0;overflow:hidden;background:var(--map)}
.geo-map .maplibregl-canvas{outline:none}
.geo-bin{position:relative;display:block;width:32px;height:32px;padding:0;border:0;background:transparent;cursor:pointer;color:var(--ink);font:500 10px var(--font-mono);white-space:nowrap}
.geo-bin::before{content:attr(data-place);position:absolute;z-index:5;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:8px 11px;border:1.5px solid var(--edge);border-radius:9px;background:var(--panel);color:var(--ink);box-shadow:3px 3px 0 var(--shadow);font:600 12px/1.25 var(--font-body);white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease,visibility 0s .16s;pointer-events:none}
.geo-bin::after{content:"";position:absolute;z-index:6;left:50%;bottom:calc(100% + 2px);width:9px;height:9px;border-right:1.5px solid var(--edge);border-bottom:1.5px solid var(--edge);background:var(--panel);transform:translate(-50%,4px) rotate(45deg);opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease,visibility 0s .16s;pointer-events:none}
.geo-bin:hover::before,.geo-bin:focus-visible::before,.geo-bin:hover::after,.geo-bin:focus-visible::after{opacity:1;visibility:visible;transition-delay:0s}
.geo-bin:hover::before,.geo-bin:focus-visible::before{transform:translate(-50%,0)}
.geo-bin:hover::after,.geo-bin:focus-visible::after{transform:translate(-50%,0) rotate(45deg)}
.geo-bin-ring{display:grid;place-items:center;width:32px;height:32px;border:3px solid var(--pin);border-radius:50%;background:var(--panel);color:var(--ink);font:600 11px var(--font-mono);box-shadow:0 1px 5px #0005}
.geo-bin.sel .geo-bin-ring{outline:3px solid var(--a);outline-offset:2px}
.geo-bin.dim{opacity:.4}.geo-bin.dim.sel,.geo-bin.dim:hover{opacity:1}
.geo-bin:hover .geo-bin-ring{transform:scale(1.08)}
.geo-bin-label{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);padding:1px 3px;border-radius:3px;background:var(--panel);box-shadow:0 1px 3px #0003}
.geo-stop{position:absolute;top:-5px;right:-12px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--route);color:var(--route-ink);border:1px solid var(--panel);font:600 10px var(--font-mono)}
.geo-stop.done{background:var(--c-low)}
.geo-depot,.geo-truck{display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--panel);border-radius:7px;background:var(--ink);color:var(--bg);box-shadow:0 1px 5px #0005;font:700 12px var(--font-mono)}
.geo-truck{background:var(--route);color:var(--route-ink);border-radius:50%;font-size:15px}
.geo-map .maplibregl-ctrl-group{border-radius:8px;overflow:hidden}
.geo-hover-popup .maplibregl-popup-content{padding:0;border:1.5px solid var(--edge);border-radius:9px;background:var(--panel);color:var(--ink);box-shadow:3px 3px 0 var(--shadow)}
.geo-hover-popup .maplibregl-popup-tip{border-top-color:var(--panel);border-bottom-color:var(--panel)}
.geo-hover-card{display:grid;gap:4px;padding:9px 11px;font:12px/1.35 var(--font-body)}
.geo-hover-card b{font-weight:700}.geo-hover-card span{color:var(--muted);font-size:11px}
.mapsvg .st{font:500 10px var(--font-mono);fill:var(--muted);letter-spacing:.12em}
.bin{cursor:pointer;outline:none}
.bin .ring{fill:var(--panel);stroke-width:5}
.bin .fut{fill:none;stroke-width:2;stroke-dasharray:3 3}
.bin .val{font:600 13px var(--font-mono);fill:var(--ink);text-anchor:middle}
.bin .bid{font:500 10.5px var(--font-mono);fill:var(--muted);text-anchor:middle}
.bin .halo{fill:none;stroke:var(--a);stroke-width:2.5}
.bin .fr{fill:none;stroke:none}
.bin-place-tooltip{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease}
.bin-place-tooltip rect{fill:var(--panel);stroke:var(--edge);stroke-width:1.5;filter:drop-shadow(2px 2px 0 var(--shadow))}
.bin-place-tooltip path{fill:var(--panel);stroke:var(--edge);stroke-width:1.5;stroke-linejoin:round}
.bin-place-tooltip text{font:600 12px var(--font-body);fill:var(--ink);text-anchor:middle}
.bin:hover .bin-place-tooltip,.bin:focus-visible .bin-place-tooltip{opacity:1;visibility:visible}
.bin:focus-visible .fr{stroke:var(--a);stroke-width:2.5;stroke-dasharray:4 3}
.bin:hover .ring{stroke-width:6.5}
.bin.dim{opacity:.38}
.bin.dim.sel,.bin.dim:hover{opacity:1}
.stop circle{fill:var(--route)}
.stop text{fill:var(--route-ink);font:600 10px var(--font-mono);text-anchor:middle}
.stop.done circle{fill:var(--c-low)}
.route-casing{fill:none;stroke:var(--panel);stroke-width:9;stroke-linejoin:round;opacity:.9}
.route-line{fill:none;stroke:var(--route);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.depot rect{fill:var(--ink)} .depot text{fill:var(--bg);font:600 12px var(--font-mono);text-anchor:middle}
.depot .lbl{fill:var(--ink);font:600 10px var(--font-mono)}

/* inspector */
.insp-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.insp-head h3{font-size:19px;font-weight:700}
.insp-head p{margin-top:2px;color:var(--muted);font-size:13px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:99px;font-size:12px;border:1px solid var(--line);white-space:nowrap;background:var(--panel)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tc,var(--muted))}
.t-low{--tc:var(--c-low)} .t-med{--tc:var(--c-med)} .t-high{--tc:var(--c-high)} .t-crit{--tc:var(--c-crit)}
.meter{position:relative;height:14px;background:var(--panel2);border-radius:7px;border:1px solid var(--line)}
.meter .m-cur{position:absolute;inset:0 auto 0 0;border-radius:6px 0 0 6px}
.meter .m-pred{position:absolute;top:-5px;bottom:-5px;width:3px;background:var(--ink);border-radius:2px;transform:translateX(-1px)}
.meter .m-100{position:absolute;top:0;bottom:0;border-left:1.5px dashed var(--muted)}
.m-legend{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px;gap:8px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kv div{background:var(--panel2);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.kv span{font-size:11.5px;color:var(--muted)}
.kv b{font:600 15px var(--font-mono)}
.score{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.score b{font:700 36px/1 var(--font-display)}
.score span{color:var(--muted);font-size:13px}
.bd{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.bd-row{display:grid;grid-template-columns:116px minmax(0,1fr) 44px;gap:8px;align-items:center;font-size:12.5px}
.bd-bar{height:8px;background:var(--panel2);border-radius:4px;overflow:hidden}
.bd-bar i{display:block;height:100%;background:var(--a);border-radius:4px}
.bd-row small{display:block;color:var(--muted);font:400 11px var(--font-mono)}
.bd-row b{font:600 13px var(--font-mono);text-align:right}

/* reporter */
.rep-for{font-size:13.5px;color:var(--muted)}
.drop{position:relative;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;text-align:center;border:1.5px dashed var(--line);border-radius:10px;padding:16px;cursor:pointer;background:var(--panel2)}
.drop:hover{border-color:var(--a)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop:focus-within{outline:2px solid var(--a);outline-offset:2px}
.drop small{color:var(--muted)}
.samples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sample{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:4px;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:stretch;font-size:11.5px;min-width:0}
.sample img{width:100%;height:auto;border-radius:5px;display:block}
.sample:hover{border-color:var(--a)}
.result{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.result img{width:84px;height:64px;object-fit:cover;border-radius:6px}
.result p{margin-top:4px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center;font-size:12px;color:var(--muted)}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:3px 10px;cursor:pointer;font-size:12px}
.chip[aria-pressed="true"]{background:var(--a);color:var(--ai);border-color:var(--a)}
.busy{padding:14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--a);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.feed{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.feed li{display:flex;gap:8px;color:var(--muted)} .feed time{font-family:var(--font-mono);flex:none}

/* collector */
.tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:420px;overflow-y:auto}
.task{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer}
.task:hover{border-color:var(--a)}
.task.sel{background:var(--panel2);border-color:var(--a)}
.task.ok{opacity:.6}
.task.ok .tn{text-decoration:line-through}
.tick{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--muted);background:transparent;cursor:pointer;display:grid;place-items:center;font-size:13px;line-height:1;padding:0;color:var(--ai)}
.tick[aria-pressed="true"]{background:var(--c-low);border-color:var(--c-low)}
.ord{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--route);color:var(--route-ink);font:600 11px var(--font-mono)}
.task .tn{font-size:13.5px;font-weight:500;min-width:0}
.task .tn small{display:block;color:var(--muted);font:400 11.5px var(--font-mono)}
.defer{font-size:12.5px;color:var(--muted)}
.progress{height:6px;border-radius:3px;background:var(--panel2);overflow:hidden}
.progress i{display:block;height:100%;background:var(--c-low);transition:width .3s}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
tr[data-id]{cursor:pointer} tr[data-id]:hover td,tr.sel td{background:var(--panel2)}
td.n,th.n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.act{font-weight:500}.act.go{color:var(--a)}.act.skip{color:var(--muted)}
.tune summary{padding:16px 18px;cursor:pointer;font-weight:700;font-family:var(--font-display);font-size:18px}
.tune-body{padding:4px 18px 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px 28px}
.tune-body h3{grid-column:1/-1;font:600 12px var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ctl{display:flex;flex-direction:column;gap:4px;font-size:13px;min-width:0}
.ctl label{display:flex;justify-content:space-between;gap:8px}
.ctl output{font:500 13px var(--font-mono)}
.ctl input[type=range]{width:100%;accent-color:var(--a)}
.ctl small{color:var(--muted);font-size:12px}
.foot{font-size:12.5px;color:var(--muted);text-align:center}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px);z-index:40}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* narrow screens: stack the two portals top and bottom */
@media (max-width:980px){.grid2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .gate{--s:50dvh;--k:0px}
  .gate[data-open="l"]{--s:100dvh}
  .gate[data-open="r"]{--s:0dvh}
  .p-l{left:0;width:100%;top:calc(var(--s) - 100dvh);bottom:auto;height:100dvh;clip-path:none}
  .p-r{left:0;width:100%;top:var(--s);bottom:auto;height:100dvh;clip-path:none}
  .cv-l{right:auto;left:0;top:auto;bottom:0;width:100%;height:var(--s)}
  .cv-r{left:0;top:0;bottom:auto;width:100%;height:calc(100dvh - var(--s))}
  .cv-in{padding-block:24px;gap:10px;justify-content:center}
  .cv-l .cv-in{padding-inline:20px;padding-top:64px}
  .cv-r .cv-in{padding-inline:20px;padding-top:44px}
  .cv-ico{width:48px;height:48px;border-radius:12px}
  .cv-ico svg{width:26px;height:26px}
  .cv-in h2{font-size:clamp(24px,7vw,32px);max-width:none}
  .cv-in .alt,.cv-in .cv-tag{display:none}
  .cv-in .sub{font-size:14px;line-height:1.4;max-width:34ch}
  .cv-live{font-size:12px}
  .cv-cta{padding:9px 14px;font-size:14px}
  .brand{left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);transform:translateX(-50%)}
  .chrome-r{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
  .console{padding-top:64px}
  .portal-art{width:clamp(104px,25vw,144px)}
  .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-row{grid-template-columns:96px minmax(0,1fr) 40px}
}
@media (prefers-reduced-motion: reduce){
  .gate,.panel,.console,.cover,.back,.brand,#toast,.btn,.cv-cta{transition:none!important}
  .spin,.cv-live i{animation:none}
}

/* ---------- cloud additions ---------- */
.mode-pill{font:600 12px var(--font-mono);padding:6px 10px;border-radius:99px;background:var(--c-med);color:#1b1500;border:1.5px solid var(--edge);cursor:help;align-self:center}
.seg{box-shadow:0 2px 10px rgba(0,0,0,.14)}
.banner{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);font-size:13.5px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.banner.err{border-color:var(--c-crit);background:color-mix(in srgb,var(--c-crit) 10%,var(--panel))}
.banner .btn{padding:5px 12px}
.tag-note{font-size:12px;color:var(--muted)}
@media (max-width:760px){.chrome-r{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 32px)}}

@media (max-width:760px) and (max-height:700px){.cv-live{display:none}.cv-in .sub{font-size:13px}}