/* ─────────────────────────────────────────────────────────────────────────────
   STONEX — "dispatch control room"
   Layout: left rail (desktop) / bottom tab bar (phone) · live ticker strip · content grid of panels.
   Units look like license plates (mono, boxed). Status = signal lights. One cobalt accent; good/warn/bad are semantic only.
   ───────────────────────────────────────────────────────────────────────────── */
/* Geist and Geist Mono, served from this server — no third-party font request.
   SIL Open Font License 1.1, see public/fonts/LICENSE.txt. Regenerate with tools/fetch-fonts.js. */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/geist-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/geist-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/geist-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/geist-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/geist-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/geist-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/geist-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/geist-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/geist-mono-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/geist-mono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/geist-mono-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/geist-mono-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/geist-mono-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/geist-mono-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --bg:#eef1f5; --bg2:#e6eaf0; --panel:#ffffff; --panel2:#f7f8fa; --raise:#ffffff;
  --line:#dfe3ea; --line2:#eceff4; --fg:#0b1220; --fg2:#2b3445; --muted:#5d6779; --faint:#929bab;
  --accent:#2f54eb; --accent-2:#4b6bff; --accent-soft:#e8edff; --accent-ink:#ffffff;
  --good:#0f9d58; --good-soft:#e3f5ea; --bad:#d93a3a; --bad-soft:#fdeaea; --warn:#c77800; --warn-soft:#fff2d9; --info:#0e7bd0; --info-soft:#e4f1fb;
  --CD:#c77800; --LO:#0f9d58; --OO:#2f54eb; --TEAM:#8a3ffc;
  --plate:#f3f5f8; --plate-line:#c9d0db;
  --display:"Geist","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Geist","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:14px; --r-sm:9px;
  --sh:0 1px 0 rgba(11,18,32,.03),0 1px 2px rgba(11,18,32,.06);
  --sh-pop:0 18px 50px -12px rgba(11,18,32,.28),0 4px 14px rgba(11,18,32,.08);
  --rail:248px; --top:58px; --tab:64px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#070a10; --bg2:#0b0f17; --panel:#0f141d; --panel2:#131a25; --raise:#161e2b;
  --line:#1f2836; --line2:#18202c; --fg:#e8ecf3; --fg2:#c4ccd8; --muted:#8c97a8; --faint:#5c6778;
  --accent:#7b93ff; --accent-2:#9aaeff; --accent-soft:#1a2347; --accent-ink:#070a10;
  --good:#34d17e; --good-soft:#0f2a1b; --bad:#ff6565; --bad-soft:#331617; --warn:#f5b041; --warn-soft:#33240c; --info:#4fb3ff; --info-soft:#0e2333;
  --CD:#f5b041; --LO:#34d17e; --OO:#7b93ff; --TEAM:#b98aff; --plate:#121925; --plate-line:#2a3546;
  --sh:none; --sh-pop:0 24px 60px -10px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#070a10; --bg2:#0b0f17; --panel:#0f141d; --panel2:#131a25; --raise:#161e2b;
  --line:#1f2836; --line2:#18202c; --fg:#e8ecf3; --fg2:#c4ccd8; --muted:#8c97a8; --faint:#5c6778;
  --accent:#7b93ff; --accent-2:#9aaeff; --accent-soft:#1a2347; --accent-ink:#070a10;
  --good:#34d17e; --good-soft:#0f2a1b; --bad:#ff6565; --bad-soft:#331617; --warn:#f5b041; --warn-soft:#33240c; --info:#4fb3ff; --info-soft:#0e2333;
  --CD:#f5b041; --LO:#34d17e; --OO:#7b93ff; --TEAM:#b98aff; --plate:#121925; --plate-line:#2a3546;
  --sh:none; --sh-pop:0 24px 60px -10px rgba(0,0,0,.7); color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--fg);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{text-wrap:balance;margin:0;font-family:var(--display);letter-spacing:-.015em}
.num,.tnum{font-variant-numeric:tabular-nums}
::selection{background:var(--accent-soft)}

/* ───── shell ───── */
.shell{min-height:100vh;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);background:linear-gradient(to right,var(--panel) var(--rail),transparent var(--rail))}
.rail{border-right:1px solid var(--line)}
.rail{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 10px 12px;scrollbar-width:thin}
.brand{display:flex;gap:11px;align-items:center;padding:4px 8px 16px}
.mark{width:36px;height:36px;border-radius:10px;background:var(--fg);color:var(--bg);display:grid;place-items:center;font:700 12px/1 var(--mono);letter-spacing:.02em;position:relative;flex:none}
.mark::after{content:"";position:absolute;right:-2px;top:-2px;width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 2px var(--panel)}
.brand b{display:block;font:700 15px/1.1 var(--display)} .brand small{color:var(--muted);font-size:11.5px}
.nav-h{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;color:var(--fg2);font-size:13.5px;font-weight:500;position:relative}
.nav a:hover{background:var(--line2);text-decoration:none;color:var(--fg)}
.nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav a.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent)}
.nav svg{width:17px;height:17px;flex:none;opacity:.85}
.nav .cnt{margin-left:auto;font:600 10.5px/18px var(--mono);background:var(--bad);color:#fff;border-radius:999px;padding:0 6px;min-width:18px;text-align:center}
.rail .me{margin-top:auto;border-top:1px solid var(--line);padding:12px 6px 2px;display:grid;gap:10px}
.rail .me .row b{display:block;font-size:13px} .rail .me .row span{color:var(--muted);font-size:12px}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:15;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .bar{display:flex;align-items:center;gap:10px;padding:10px 26px;min-height:var(--top)}
.top h1{font-size:19px;font-weight:700;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .crumb{color:var(--faint);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:1px}
.ticker{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line2);padding:0 18px;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.ticker::-webkit-scrollbar{display:none}
.tick{display:flex;align-items:baseline;gap:7px;padding:7px 12px;white-space:nowrap;font-size:12px;color:var(--muted);border-right:1px solid var(--line2)}
.tick b{font:600 13px var(--mono);color:var(--fg)} .tick.bad b{color:var(--bad)} .tick.good b{color:var(--good)} .tick.warn b{color:var(--warn)}
.tick a{color:inherit} .tick a:hover{text-decoration:none;color:var(--fg)}
/* When a figure is true. Every tick carries it, so a seat count read a second ago and a gross
   frozen on the Oct 13 board can never look equally current. */
.tick-asof{margin-left:7px;font-size:10px;color:var(--faint);letter-spacing:.01em}
.page{padding:22px 26px 80px;display:grid;gap:16px;max-width:1560px;width:100%}
.searchbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:6px 10px 6px 12px;color:var(--muted);font-size:13px;cursor:pointer;min-width:220px}
.searchbtn kbd{margin-left:auto;font:600 10.5px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;background:var(--panel2)}
.tabbar{display:none}
.icon-btn{border:1px solid var(--line);background:var(--panel);border-radius:10px;width:36px;height:36px;display:inline-grid;place-items:center;cursor:pointer;color:var(--fg2);flex:none}
.icon-btn svg{width:18px;height:18px}

/* ───── atoms ───── */
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--muted);white-space:nowrap}
.pill b{color:var(--fg);font-weight:600}
.live{display:inline-flex;align-items:center;gap:6px;font:600 10.5px var(--mono);letter-spacing:.08em;color:var(--good);text-transform:uppercase}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--fg);transition:border-color .15s,background .15s,transform .05s}
.btn:hover{border-color:var(--faint)} .btn:active{transform:translateY(1px)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn.pri:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)} .btn.ghost:hover{color:var(--fg);background:var(--line2)}
.btn.danger{color:var(--bad)} .btn.good{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,var(--line));background:var(--good-soft)}
.btn.sm{padding:4px 10px;font-size:12px;border-radius:8px}
.btn[disabled]{opacity:.55;cursor:wait}
.btn svg{width:15px;height:15px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],input[type=url],input[type=tel],select,textarea{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:13.5px;min-width:0;color:var(--fg);transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
textarea{width:100%;min-height:84px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
/* A field must keep its natural height and its chips must hug their text: as a stretched grid
   item the input grew to the tallest cell in the row and the "not set" tag spanned the column,
   which read as an empty second input. */
label.f{display:grid;gap:5px;font-size:12px;color:var(--muted);font-weight:500;align-content:start}
label.f input,label.f select,label.f textarea{width:100%}
label.f .tag{justify-self:start}
/* a unit suffix that sits inside the field, so "0.3" always reads as a percent */
.pct-in{position:relative;display:block}
.pct-in input{width:100%;padding-right:30px}
.pct-in b{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted);font:600 12.5px var(--sans);pointer-events:none}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .row.nw{flex-wrap:nowrap}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:12px} .xs{font-size:11px}
.mono{font-family:var(--mono)}
.c-good{color:var(--good)} .c-bad{color:var(--bad)} .c-warn{color:var(--warn)} .c-acc{color:var(--accent)}
.tag{font:600 11px/1.6 var(--sans);padding:1px 8px;border-radius:999px;white-space:nowrap;display:inline-block}
.tag.good{background:var(--good-soft);color:var(--good)} .tag.bad{background:var(--bad-soft);color:var(--bad)} .tag.warn{background:var(--warn-soft);color:var(--warn)} .tag.info{background:var(--accent-soft);color:var(--accent)} .tag.n{background:var(--line2);color:var(--muted)}
.st{font:700 10px/1.7 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:5px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st.g{background:var(--good-soft);color:var(--good)} .st.w{background:var(--warn-soft);color:var(--warn)} .st.r{background:var(--bad-soft);color:var(--bad)} .st.n{background:var(--line2);color:var(--muted)} .st.b{background:var(--accent-soft);color:var(--accent)} .st.i{background:var(--info-soft);color:var(--info)}
.ty{font:700 11.5px var(--mono)}.ty.CD{color:var(--CD)}.ty.LO{color:var(--LO)}.ty.OO{color:var(--OO)}.ty.TEAM{color:var(--TEAM)}
.plate{display:inline-flex;align-items:center;font:600 12.5px/1 var(--mono);letter-spacing:.02em;background:var(--plate);border:1px solid var(--plate-line);border-radius:6px;padding:4px 7px;white-space:nowrap;color:var(--fg)}
.plate small{font-size:10px;color:var(--muted);margin-left:4px}
.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font:700 11.5px var(--sans);flex:none;letter-spacing:.02em}
.delta{font:600 11.5px var(--mono)} .delta.up{color:var(--good)} .delta.down{color:var(--bad)}

/* ───── layout ───── */
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.k6{grid-template-columns:repeat(6,minmax(0,1fr))} .k5{grid-template-columns:repeat(5,minmax(0,1fr))} .k4{grid-template-columns:repeat(4,minmax(0,1fr))} .k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} .g12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1280px){.k6{grid-template-columns:repeat(3,minmax(0,1fr))}.k5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){.g2,.g21,.g3,.g12{grid-template-columns:minmax(0,1fr)}.k4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;min-width:0;box-shadow:var(--sh);position:relative}
.card.flat{box-shadow:none;background:var(--panel2)}
.card.hero{padding:22px 24px}
.card-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;min-height:28px}
.card-h h2{font-size:15px;font-weight:700}
.card-h .sub{color:var(--muted);font-size:12px}
.card-h .act{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi h3{font:600 12.5px var(--sans);color:var(--muted);display:flex;gap:6px;align-items:center;letter-spacing:0}
.kpi h3 .tag{margin-left:auto}
.kpi .v{font:700 30px/1.1 var(--display);letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.kpi .v small{font:500 13px var(--sans);color:var(--muted);letter-spacing:0}
.kpi .s{color:var(--muted);font-size:12px;margin-top:2px}
.kpi.link{cursor:pointer;transition:border-color .15s,transform .15s} .kpi.link:hover{border-color:var(--accent)}
.kpi .spark{margin-top:8px;height:30px}
.bar{height:6px;background:var(--line2);border-radius:6px;overflow:hidden;position:relative}
.bar i{display:block;height:100%;border-radius:6px;background:var(--accent);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar .goal{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--fg);opacity:.6;border-radius:2px}
.hb{display:grid;grid-template-columns:minmax(80px,160px) 1fr 48px;gap:10px;align-items:center;margin:8px 0;font-size:13px}
.hb b{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:26px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px;background:var(--panel2);font-size:13px}
.note{font-size:12px;color:var(--muted)}
.callout{border:1px solid var(--line);background:var(--panel2);border-radius:12px;padding:10px 13px;font-size:13px;display:flex;gap:10px;align-items:flex-start}
.callout .dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--muted)}
.callout.bad{border-color:color-mix(in srgb,var(--bad) 30%,var(--line));background:var(--bad-soft);color:color-mix(in srgb,var(--bad) 80%,var(--fg))} .callout.bad .dot{background:var(--bad)}
.callout.warn{border-color:color-mix(in srgb,var(--warn) 30%,var(--line));background:var(--warn-soft);color:color-mix(in srgb,var(--warn) 70%,var(--fg))} .callout.warn .dot{background:var(--warn)}
.callout.info{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:var(--accent-soft)} .callout.info .dot{background:var(--accent)}
a.callout{color:inherit} a.callout:hover{text-decoration:none;border-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:2px;background:var(--panel2);gap:2px}
.seg button{border:0;background:transparent;padding:5px 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--fg);box-shadow:var(--sh)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sep{width:1px;height:22px;background:var(--line)}
.section-t{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:6px 2px -4px}

/* ───── tables ───── */
.tw{overflow-x:auto;margin-inline:-6px;padding-inline:6px;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
table.t th{text-align:left;font:600 10.5px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.07em;padding:9px 9px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel);position:sticky;top:0;z-index:1}
table.t th.sort{cursor:pointer;user-select:none} table.t th.sort:hover{color:var(--fg)} table.t th .arr{opacity:.6;margin-left:3px}
table.t td{padding:9px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tr.click{cursor:pointer} table.t tr.click:hover td{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
table.t tr.hot td{background:color-mix(in srgb,var(--bad-soft) 60%,transparent)}
table.t tr.grp td{background:var(--panel2);font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:7px 9px}
table.t td.r,table.t th.r{text-align:right} table.t td.c,table.t th.c{text-align:center}
.tbl-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.tbl-tools input[type=search]{margin-left:auto;min-width:220px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);background:var(--panel);padding:4px 11px;border-radius:999px;cursor:pointer;font-size:12.5px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap;color:var(--fg2);flex:none}
.chip b{font:600 11.5px var(--mono);color:var(--muted)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .chip[aria-pressed="true"] b{color:var(--accent)}
.chip.bad b{color:var(--bad)}
.age{display:flex;align-items:center;gap:8px;white-space:nowrap}.age .bar{width:70px;flex:none}
.timer{display:flex;align-items:center;gap:8px;white-space:nowrap}
.timer .bar{width:74px;height:7px} .timer .bar .mid{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--fg);opacity:.35}
.inline-sel{border:1px solid var(--line);background:var(--panel2);border-radius:8px;padding:4px 26px 4px 9px;font-size:12.5px;max-width:190px}

/* ───── charts ───── */
svg.ch{display:block;overflow:visible}
svg.ch text{font-family:var(--sans);fill:var(--muted);font-size:11px}
svg.ch .val{fill:var(--fg);font-weight:600;font-family:var(--mono);font-size:11px}
svg.ch .grid-l{stroke:var(--line2)}
svg.ch .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1s cubic-bezier(.3,.7,.2,1) forwards}
/* bars carry their real height; the grow-in is a transform, so the resting state is correct */
svg.ch rect.grow{transform-box:fill-box;transform-origin:center bottom;animation:growY .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
.legend{display:flex;gap:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend span{display:inline-flex;gap:6px;align-items:center}.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.ring{position:relative;width:128px;height:128px;margin:4px auto}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 28px var(--display);letter-spacing:-.03em}
.ring circle.p{transition:stroke-dasharray 1s cubic-bezier(.2,.8,.2,1)}
.diverge{display:grid;grid-template-columns:minmax(90px,170px) 1fr 44px;gap:10px;align-items:center;font-size:13px;padding:3px 0;cursor:pointer;border-radius:6px}
.diverge:hover{background:var(--line2)}
.diverge .bars{display:grid;grid-template-columns:1fr 1fr;align-items:center;height:14px}
.diverge .l{display:flex;justify-content:flex-end;align-items:center;gap:5px;font:500 11px var(--mono);color:var(--muted)}
.diverge .rr{display:flex;align-items:center;gap:5px;font:500 11px var(--mono);color:var(--muted);border-left:1px solid var(--line)}
.diverge .l i{height:12px;border-radius:4px 0 0 4px;background:var(--bad);opacity:.85;display:block}
.diverge .rr i{height:12px;border-radius:0 4px 4px 0;background:var(--good);opacity:.85;display:block}
.diverge b{text-align:right;font:600 12.5px var(--mono)}

/* ───── big numbers / hero ───── */
.hero-n{font:700 clamp(54px,9vw,104px)/0.95 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.hero-n.fc{color:transparent;-webkit-text-stroke:1.5px var(--faint)}
.eyebrow{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fleet-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
@media (max-width:1280px){.fleet-board{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* The three figures the board is actually read for, above the six category tiles. */
.fleet-board.active-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.active-strip .fcat{background:var(--panel2,var(--panel))}
.active-strip .fcat .n{font-size:40px}
/* Every headline figure carries the moment it is true for — live, or the stored board reading. */
.fcat .asof{font:600 10px var(--mono);color:var(--faint);letter-spacing:.04em;margin-top:2px}
.asof-note{margin-top:8px}
.fcat{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--panel);cursor:pointer;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;transition:border-color .15s,transform .15s;text-align:left}
.fcat:hover{border-color:var(--accent);transform:translateY(-1px)}
.fcat[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fcat .n{font:700 34px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fcat .l{font-size:12.5px;font-weight:600}
.fcat .h{font-size:11px;color:var(--muted)}
.fcat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tone,var(--line))}
.fcat .pct{position:absolute;right:12px;top:12px;font:600 11px var(--mono);color:var(--faint)}
.stack{display:flex;height:12px;border-radius:7px;overflow:hidden;background:var(--line2)}
.stack i{display:block;height:100%}
.matrix td.cellv{text-align:center;font:600 12.5px var(--mono)}
.matrix td.cellv span{display:inline-block;min-width:30px;padding:2px 6px;border-radius:6px}

/* ───── podium ───── */
.podium{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;align-items:flex-end;padding:10px 0 22px}
.podium .p{text-align:center;min-width:150px;display:grid;justify-items:center;gap:4px}
.podium .p .av{width:62px;height:62px;font-size:19px}
.podium .p.first .av{width:84px;height:84px;font-size:25px;box-shadow:0 0 0 4px var(--warn-soft),0 0 0 6px color-mix(in srgb,var(--warn) 40%,transparent)}
.podium .crown{font-size:20px;line-height:1;color:var(--faint)} .podium .p.first .crown{color:var(--warn)} .podium .p.third .crown{color:#c56b3f}
.podium .big{font:700 30px/1 var(--display);letter-spacing:-.03em}
.podium .mini{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-top:6px}
.podium .mini div{padding:4px 10px;text-align:center;border-right:1px solid var(--line)} .podium .mini div:last-child{border:0}
.podium .mini small{display:block;font:600 9.5px var(--mono);letter-spacing:.08em;color:var(--faint)} .podium .mini b{font:600 13px var(--mono)}
.rank-ch{font:600 10.5px var(--mono)} .rank-ch.up{color:var(--good)} .rank-ch.down{color:var(--bad)}

/* ───── sheet / drawer, palette, toast ───── */
.drawer{position:fixed;inset:0;z-index:40}
.drawer-bg{position:absolute;inset:0;background:rgba(5,8,14,.5);animation:fade .15s}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(640px,100%);background:var(--bg);border-left:1px solid var(--line);overflow:auto;padding:24px;display:grid;gap:14px;align-content:start;animation:slide .22s cubic-bezier(.2,.8,.2,1);box-shadow:var(--sh-pop)}
.drawer .x{position:absolute;right:14px;top:12px;border:0;background:var(--line2);width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer;color:var(--muted);z-index:2}
@keyframes slide{from{transform:translateX(30px);opacity:.4}}
@keyframes fade{from{opacity:0}}
.pal{position:fixed;inset:0;z-index:50;display:grid;place-items:start center;padding:10vh 16px 16px;background:rgba(5,8,14,.5)}
.pal .box{width:min(640px,100%);background:var(--raise);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-pop);overflow:hidden;animation:pop .14s}
@keyframes pop{from{transform:scale(.98);opacity:.6}}
.pal input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 18px;font-size:16px;background:transparent;box-shadow:none!important}
.pal .res{max-height:55vh;overflow:auto;padding:6px}
.pal .it{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:13.5px}
.pal .it.on,.pal .it:hover{background:var(--accent-soft)}
.pal .grp{font:600 10.5px var(--mono);letter-spacing:.1em;color:var(--faint);text-transform:uppercase;padding:10px 12px 4px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:11px 16px;border-radius:12px;font-size:13px;z-index:60;max-width:min(92vw,560px);box-shadow:var(--sh-pop);animation:pop .15s}
.toast.err{background:var(--bad);color:#fff}

/* ───── auth ───── */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--bg)}
.auth .art{background:#05070c;color:#e8ecf3;padding:44px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth .art canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.auth .art > *{position:relative}
.auth .art h2{font:700 clamp(30px,3.6vw,46px)/1.05 var(--display);letter-spacing:-.04em;max-width:15ch}
.auth .art p{color:#9aa6b8;max-width:42ch}
.auth .form{display:grid;place-items:center;padding:32px 20px}
.auth .box{width:min(400px,100%);display:grid;gap:16px}
.auth h1{font-size:26px;letter-spacing:-.03em}
.auth .err{color:var(--bad);font-size:13px;min-height:18px}
.code-in{font:600 26px var(--mono)!important;letter-spacing:.4em;text-align:center}
@media (max-width:900px){.auth{grid-template-columns:1fr}.auth .art{min-height:220px;padding:26px}}

/* ───── kanban ───── */
.kan{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.kan .col{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px;align-content:start;min-height:180px;scroll-snap-align:start}
.kan .col h4{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between}
.kan .lead{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px;cursor:grab}
.kan .lead.drag{opacity:.4} .kan .col.over{outline:2px dashed var(--accent)}
table.mx td,table.mx th{text-align:center} table.mx td:first-child,table.mx th:first-child{text-align:left}
.ai-out{white-space:pre-wrap;line-height:1.65;font-size:13.5px}
.ai-out h1,.ai-out h2,.ai-out h3{font-size:14.5px;margin:14px 0 4px}
.chat{display:grid;gap:10px}
.msg{padding:10px 13px;border-radius:12px;max-width:92%;white-space:pre-wrap;line-height:1.55}
.msg.u{background:var(--accent);color:var(--accent-ink);justify-self:end}
.msg.a{background:var(--panel2);border:1px solid var(--line)}
.qr svg{width:180px;height:180px;background:#fff;border-radius:10px;padding:6px}
.skeleton{background:linear-gradient(90deg,var(--line2),var(--panel2),var(--line2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:10px;min-height:90px}
@keyframes sk{to{background-position:-200% 0}}

/* ───── phone ───── */
@media (max-width:860px){
  :root{--top:52px}
  .shell{grid-template-columns:1fr;background:none}
  .rail{position:fixed;inset:0 auto 0 0;width:min(86vw,320px);z-index:45;transform:translateX(-105%);transition:transform .22s cubic-bezier(.2,.8,.2,1);box-shadow:var(--sh-pop);padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .rail.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(5,8,14,.45);z-index:44}
  .top .bar{padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .top h1{font-size:17px}
  .searchbtn{min-width:0;padding:8px 12px;min-height:44px} .searchbtn span,.searchbtn kbd{display:none}
  /* iOS zooms the page when a focused control is under 16px — keep every control at 16px on phones */
  input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],
  input[type=url],input[type=tel],input[type=time],select,textarea,.inline-sel{font-size:16px;min-height:44px}
  textarea{min-height:88px}
  select,.inline-sel{max-width:100%}
  /* 44px minimum tap target for everything you are meant to touch */
  .nav a{min-height:44px;padding:10px 12px;font-size:14.5px}
  .btn{min-height:44px;padding:10px 15px}
  .btn.sm{min-height:44px;padding:8px 13px;font-size:13.5px}
  .icon-btn{width:44px;height:44px}
  .chip{min-height:44px;padding:8px 14px;font-size:13.5px}
  .seg button{min-height:44px;padding:10px 14px;font-size:13.5px}
  .drawer .x{width:44px;height:44px;font-size:24px}
  table.t th.sort{min-height:44px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  /* a checkbox cell still needs a comfortable row to hit */
  table.t.cards td input[type=checkbox]{margin:10px 0}
  .ticker{padding:0 6px}
  .tick{padding:0 10px}
  .tick a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
  .tick > span{display:inline-flex;align-items:center;min-height:44px}
  /* a full-width picker, so the heading beside it keeps its room */
  .pick-wide{max-width:100%;flex:1 0 100%}
  /* links that behave like buttons need a real tap area, even in dense tables */
  a.callout{min-height:44px}
  .card a.row{min-height:44px}
  a[data-l],a[data-del]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:34px}
  /* the "all 92" / "details 92" links in card headers are navigation, not prose */
  .card-h .act a,.card-h a.act{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  /* a checkbox stays small on purpose — the row or label around it carries the 44px target */
  table.t td:has(> input[type=checkbox]){min-height:44px;display:flex;align-items:center}
  label.chip:has(input[type=checkbox]){min-height:44px}
  label.row:has(input[type=checkbox]){min-height:44px}
  .page{padding:14px 14px calc(var(--tab) + 28px + env(safe-area-inset-bottom,0px));gap:12px}
  .card{padding:14px;border-radius:12px} .card.hero{padding:18px 16px}
  .kpis,.k6,.k5,.k4,.k3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi .v{font-size:24px}
  .fleet-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* three figures stay on one row on a phone — they are the headline, not a detail */
  .fleet-board.active-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .active-strip .fcat{padding:12px 10px}
  .fcat .n,.active-strip .fcat .n{font-size:28px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--tab);color:var(--muted);font-size:10.5px;font-weight:600;position:relative}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a.on{color:var(--accent)}
  .tabbar a:hover{text-decoration:none}
  .tabbar .cnt{position:absolute;top:8px;left:calc(50% + 6px);font:600 9.5px/16px var(--mono);background:var(--bad);color:#fff;border-radius:999px;padding:0 5px}
  /* tables become cards */
  table.t.cards thead{display:none}
  table.t.cards,table.t.cards tbody,table.t.cards tr,table.t.cards td{display:block;width:100%}
  table.t.cards tr{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
  table.t.cards tr.grp{display:block;background:transparent;border:0;padding:6px 2px}
  table.t.cards td{border:0;padding:2px 0;text-align:left!important;min-width:0}
  table.t.cards td::before{content:attr(data-l);display:block;font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  table.t.cards td.lead{grid-column:1/-1;font-size:14px} table.t.cards td.lead::before{display:none}
  table.t.cards td.wide{grid-column:1/-1}
  table.t.cards td:empty,table.t.cards td.hide-m{display:none}
  .tw:has(> table.cards){margin:0;padding:0;overflow:visible}
  .drawer-panel{top:auto;max-height:92vh;width:100%;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));animation:up .24s cubic-bezier(.2,.8,.2,1)}
  .drawer-panel::before{content:"";width:40px;height:4px;border-radius:4px;background:var(--line);justify-self:center;margin-top:-8px}
  @keyframes up{from{transform:translateY(40px);opacity:.5}}
  .podium{gap:12px}.podium .p{min-width:96px}.podium .p .av{width:48px;height:48px}.podium .p.first .av{width:62px;height:62px}.podium .big{font-size:22px}
  .hide-phone{display:none!important}
  .tbl-tools input[type=search]{min-width:0;width:100%;margin-left:0}
  .hero-n{font-size:64px}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.rail,.top,.tabbar{display:none}.shell{display:block}}

.more-b{display:flex;justify-content:center}.more-b:not(:empty){padding:12px}

/* A number you can open. Every headline figure that has a drill-down behind it uses this, so the
   fact that it is clickable is visible before you click. */
.linkish{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--fg);cursor:pointer;
  border-bottom:1px dashed var(--faint);line-height:1.2}
.linkish:hover{color:var(--accent);border-bottom-color:var(--accent)}
.linkish:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* On a phone a clickable number still has to be a 44px target, so it gets real padding there
   without changing how it sits inline on a desktop. */
@media (max-width:760px){
  /* a one-digit figure is still a target you have to hit with a thumb */
  .linkish{min-height:44px;min-width:28px;display:inline-flex;align-items:center;justify-content:flex-end;padding:0 4px}
}