/* GuyWay Fleet Operations, design system v4 (2026-09-12): 15 px base, 14 px
   tables, 28 px KPI values, 236 px rail, nothing under 12.5 px; measured
   against the vendor panel (16 px base, 14 px body, 20 px titles).
   Skin modelled on the Yelowsoft admin panel the
   dispatch team already uses: light grey page, white rounded cards with a soft
   edge, an icon rail on the left, a white top bar with the page title, KPI
   cards across the top, card titles underlined with a short yellow rule,
   status as a coloured dot and a word. Brand tokens from the GuyWay design
   system v1.3; GT Walsheim throughout. No gradients, no dark blocks. */
/* WOFF2, subset to the characters this product actually sets: Latin, the
   punctuation, the currency marks and the few symbols the interface uses.
   The three OpenType files were 150 KB compressed and are 76 KB as subset
   WOFF2, which is 74 KB off every first launch of both phone apps, on a
   connection a driver pays for by the megabyte. Regenerate with pyftsubset if
   the glyph set ever needs to grow; the OTFs stay in the repo as the source.
   Three weights ship and only three exist: asking for 600 gets Bold. */
@font-face{font-family:"GT Walsheim";src:url(brand/GT-Walsheim-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"GT Walsheim";src:url(brand/GT-Walsheim-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"GT Walsheim";src:url(brand/GT-Walsheim-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--gw-yellow:#EAFF68;--gw-charcoal:#011E13;--gw-white:#FFFFFF;--gw-lavender:#DADDEF;--gw-mint:#61DDAA;--gw-lime:#D5EE37;--gw-sun:#FFE700;--gw-coral:#FF6742;
--c800:#0A2C1F;--c700:#16402F;--c600:#27594A;--c500:#45796A;--c400:#739A8D;--c300:#A9C1B8;--c200:#D2DFDA;--c100:#E8EFEC;--c050:#F3F7F5;--y400:#F1FF8E;--y600:#C7DC56;
--bg:#F5F7FB;--card:#FFFFFF;--panel:#F7F9FD;--tint:#EEF1F9;--fg0:#232A3B;--fg:#3B4256;--fg2:#5F677A;--fg3:#8A93A6;--border:#E6EAF2;--border2:#D3D9E5;--hover:#F7F9FD;--sel:#F0F3FA;
--crit:#B8461F;--okfg:#1E6B4E;--chg:#4A5591;--accent:var(--gw-sun);
--r:10px;--rs:6px;--side:236px;--top:64px;--shadow:0 1px 2px rgba(35,42,59,.05),0 1px 3px rgba(35,42,59,.04);--fs:15px;--fs-sm:13.5px;--fs-xs:12.5px;--fs-lbl:11.5px;--fs-title:17px;--fs-h1:22px;--fs-kpi:28px;
--font:"GT Walsheim",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html{font-size:15px}
body{margin:0;font-family:var(--font);font-size:var(--fs);background:var(--bg);color:var(--fg);line-height:1.5;-webkit-font-smoothing:antialiased;display:grid;grid-template-columns:var(--side) minmax(0,1fr);grid-template-rows:var(--top) minmax(0,1fr);min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}a{color:var(--c600)}
/* ---- sidebar: dark, grouped by area, like the dispatch panel ------------ */
.side{grid-row:1/-1;grid-column:1;background:var(--gw-charcoal);color:var(--c200);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;z-index:1100}
.side .brand{flex:none;display:flex;align-items:center;height:var(--top);padding:0 24px;border-bottom:1px solid var(--c800)}.side .brand img{height:24px;display:block}
.side .label{display:none}
.nav{display:flex;flex-direction:column;padding:8px 0 16px;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--c700) transparent}
.nav .sec{font-size:var(--fs-lbl);letter-spacing:.1em;text-transform:uppercase;color:var(--c400);padding:14px 24px 4px;font-weight:500}
.nav a{display:flex;align-items:center;gap:12px;color:var(--c200);text-decoration:none;padding:8px 24px;flex:none;font-size:14.5px;font-weight:500;border-left:3px solid transparent;transition:background .12s,color .12s}
.nav a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.85}
.nav a:hover{background:var(--c800);color:var(--gw-white)}.nav a.on{background:var(--c800);color:var(--gw-white);border-left-color:var(--gw-yellow)}.nav a.on svg{opacity:1;color:var(--gw-yellow)}.nav a.cur{color:var(--gw-white)}.nav a.cur svg{opacity:1}
/* flyout sub-menus: a dark panel to the right of the rail, opened by hover or keyboard focus (chrome.js positions it) */
.nav .item{flex:none;position:relative}.nav .item>a .chev{margin-left:auto;width:7px;height:7px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.5;flex:none}
.nav .item.open>a{background:var(--c800);color:var(--gw-white)}.nav .item.open>a .chev{opacity:.9}
.nav .sub{display:none;position:fixed;left:var(--side);z-index:1100;min-width:216px;background:var(--c800);color:var(--c200);border-radius:0 10px 10px 0;box-shadow:0 10px 30px rgba(1,30,19,.35);padding:6px 0 8px}.nav .item.open .sub{display:block}
.nav .sub b{display:block;font-weight:500;color:var(--gw-white);padding:10px 20px 6px;font-size:14.5px}.nav .sub .links a{display:block;padding:7px 20px;font-size:14px;font-weight:400;border-left:0;color:var(--c200);white-space:nowrap}
.nav .sub .links a:hover{background:var(--c700);color:var(--gw-white)}.nav .sub .links a.on{color:var(--gw-yellow)}.nav .sub.two .links{columns:2;column-gap:0;min-width:400px}.nav .sub.two .links a{break-inside:avoid}
.side .foot{flex:none;margin-top:auto;display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid var(--c800);font-size:var(--fs-xs);color:var(--c400)}.side .foot img{width:24px;height:24px;border-radius:6px}
/* ---- top bar ------------------------------------------------------------- */
.top{grid-column:2;grid-row:1;display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;min-width:0}
.top h1{margin:0;font-size:var(--fs-h1);font-weight:500;white-space:nowrap;color:var(--fg0);letter-spacing:-.01em}
.top .right{margin-left:auto;padding-left:16px;display:flex;align-items:center;gap:16px;color:var(--fg3);font-size:var(--fs-sm);white-space:nowrap;flex:none}
.env{font-size:var(--fs-xs);color:var(--fg2);padding:4px 12px;border:1px solid var(--border2);border-radius:999px;background:var(--panel)}.env.live{color:var(--okfg);border-color:var(--gw-mint)}
.who{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--border);position:relative}.who .whobtn{display:flex;align-items:center;gap:10px;background:none;border:0;padding:4px 6px;border-radius:var(--rs);cursor:pointer;color:inherit}.who .whobtn:hover{background:var(--hover)}.who .whobtn .chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.5;margin:0 2px 3px 2px}.who #logout{display:none}.who .acct{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 12px 40px rgba(35,42,59,.18);padding:6px 0;z-index:1150}.who .acct .head{padding:10px 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;display:flex;flex-direction:column;gap:2px}.who .acct .head b{font-weight:500;color:var(--fg0)}.who .acct .head span{font-size:var(--fs-lbl);letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}.who .acct a,.who .acct button{display:block;width:100%;text-align:left;padding:9px 16px;font-size:var(--fs-sm);color:var(--fg);text-decoration:none;background:none;border:0;cursor:pointer;font-weight:500}.who .acct a:hover,.who .acct button:hover,.who .acct a:focus-visible,.who .acct button:focus-visible{background:var(--sel);outline:0}.who .acct .out{border-top:1px solid var(--border);margin-top:6px;padding-top:12px}
.who .avatar{width:34px;height:34px;border-radius:50%;background:var(--gw-charcoal);color:var(--gw-yellow);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.who .name{color:var(--fg);font-weight:500}.who .role{font-size:var(--fs-lbl);letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}
/* ---- KPI cards (every page renders its counters into #stats) ------------- */
.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:16px}.stats[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.stats[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats span{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 20px 14px;min-width:0;display:flex;flex-direction:column-reverse;gap:4px;font-size:var(--fs-sm);color:var(--fg2);white-space:nowrap}
.stats b{font-size:var(--fs-kpi);font-weight:500;color:var(--fg0);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.stats .hl b{color:var(--crit)}
.stats i.dot{order:1;margin:0 0 4px;width:9px;height:9px}
/* ---- SOS strip (chrome.js) ---------------------------------------------- */
.sosstrip{grid-column:1/-1;background:var(--gw-coral);color:var(--gw-white);border-radius:var(--rs);padding:12px 16px;font-size:var(--fs);font-weight:500;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sosstrip b{background:var(--gw-white);color:var(--crit);padding:1px 8px;border-radius:999px;font-size:12px;letter-spacing:.06em}.sosstrip a{color:var(--gw-white);margin-left:auto;font-weight:600}
/* ---- content ------------------------------------------------------------- */
main{grid-column:2;grid-row:2;padding:24px 28px 36px;display:grid;gap:20px;align-content:start;min-width:0}
main.fleet{grid-template-columns:minmax(0,1.55fr) minmax(420px,1fr)}main.fleet.has-detail{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) 380px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.card h3{margin:0;padding:18px 22px 10px;font-size:var(--fs-title);font-weight:500;color:var(--fg0);position:relative;letter-spacing:-.005em}
.card h3::after{content:"";display:block;width:40px;height:3px;background:var(--accent);border-radius:2px;margin-top:8px}
.card .body{padding:16px 22px 20px}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--border)}
.toolbar input[type=search],.toolbar input[type=text],.toolbar input[type=date],.toolbar input[type=month],.toolbar select{height:38px;padding:0 14px;border:1px solid var(--border2);border-radius:var(--rs);background:var(--card);font-size:var(--fs-sm)}
.toolbar input[type=search]{flex:1;min-width:220px;max-width:380px;border-radius:999px;padding:0 18px}.toolbar label{font-size:var(--fs-sm);color:var(--fg2);display:flex;gap:6px;align-items:center}
/* ---- tables -------------------------------------------------------------- */
.tablewrap,.card.list{overflow:auto}.card.list{max-height:calc(100vh - var(--top) - 36px)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
th{position:sticky;top:0;z-index:2;background:var(--panel);text-align:left;padding:0 18px;height:44px;border-bottom:1px solid var(--border);font-size:13px;font-weight:500;color:var(--fg2);cursor:pointer;user-select:none;white-space:nowrap}
th:first-child{border-radius:0}th:hover{color:var(--fg)}th[aria-sort]{color:var(--fg)}th .dir{display:inline-block;width:1em;color:var(--fg3)}th[aria-sort=ascending] .dir::after{content:"\25B4"}th[aria-sort=descending] .dir::after{content:"\25BE"}
tr.filters td{position:sticky;top:44px;z-index:2;background:var(--card);padding:8px 10px;height:auto;border-bottom:1px solid var(--border)}
tr.filters input,tr.filters select{width:100%;height:32px;padding:0 10px;border:1px solid var(--border2);border-radius:var(--rs);font-size:var(--fs-sm);background:var(--card)}
td{padding:0 18px;height:46px;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}tbody tr{cursor:pointer}tbody tr:hover{background:var(--hover)}tbody tr.sel{background:var(--sel)}tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}.sub{color:var(--fg3);font-size:var(--fs-sm);margin-left:6px}
/* ---- status: a dot and a word ------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--fg);--dot:var(--c300)}
.pill::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot);flex:none}
.pill.critical{--dot:var(--gw-coral);color:var(--crit)}.pill.recall{--dot:var(--gw-coral);color:var(--crit)}.pill.warn{--dot:var(--gw-sun)}.pill.ok{--dot:var(--gw-mint)}.pill.charging{--dot:var(--chg)}.pill.unknown{--dot:var(--c300);color:var(--fg3)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c300);margin-right:6px;vertical-align:0}.dot.critical,.dot.recall{background:var(--gw-coral)}.dot.warn{background:var(--gw-sun)}.dot.ok{background:var(--gw-mint)}.dot.charging{background:var(--chg)}
/* ---- map ----------------------------------------------------------------- */
.card.map{position:relative;display:flex;flex-direction:column;min-height:460px}#map{flex:1;min-height:400px;background:var(--c100);border-radius:0 0 var(--r) var(--r)}
.map .legend{position:absolute;left:12px;bottom:12px;z-index:1001;background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:var(--rs);padding:8px 14px;font-size:var(--fs-sm);display:flex;gap:14px;flex-wrap:wrap;box-shadow:var(--shadow)}.map .legend span{display:inline-flex;align-items:center}
.leaflet-container{font:inherit}.carpin{background:none;border:0}.carpin .car{width:34px;height:34px}.carpin .car svg{width:34px;height:34px;display:block}.carpin .car.still svg{opacity:.88}.leaflet-control-layers{border:1px solid var(--border)!important;border-radius:var(--rs)!important;box-shadow:var(--shadow)!important;font-size:12px}.leaflet-control-layers label{display:inline-block;margin-right:8px}.yardpin b{display:inline-block;background:var(--gw-charcoal);color:var(--gw-yellow);font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow)}
/* ---- detail pane --------------------------------------------------------- */
.detail{padding:0;overflow:auto;max-height:calc(100vh - var(--top) - 36px);position:sticky;top:calc(var(--top) + 18px)}
.detail .head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:10px}.detail .head .btn{margin-left:auto}
.detail h2{margin:0;font-size:20px;font-weight:500;line-height:1.2;color:var(--fg0)}.detail .vin{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);color:var(--fg3)}
.detail>:not(.head):not(.sec){margin-left:22px;margin-right:22px}.detail>h2{margin-top:14px}.detail>.vin{margin-bottom:10px}
.detail .sec{padding:16px 22px;border-bottom:1px solid var(--border)}.detail .sec:last-child{border:0}.detail .sec h3{padding:0 0 8px;font-size:15px}.detail .sec h3::after{width:32px;height:2px;margin-top:4px}
.facts{display:grid;grid-template-columns:128px 1fr;gap:6px 12px;font-size:14px;margin:0}.facts dt{color:var(--fg3)}.facts dd{margin:0;font-weight:500}
.controls{display:flex;flex-wrap:wrap;gap:8px}canvas#d-chart{width:100%;height:80px;display:block}
/* ---- buttons ------------------------------------------------------------- */
.btn{height:36px;padding:0 16px;border-radius:var(--rs);border:1px solid var(--border2);background:var(--card);color:var(--fg);font-weight:500;cursor:pointer;font-size:14px;line-height:34px;transition:background .12s,border-color .12s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--hover);border-color:var(--fg3)}.btn.primary{background:var(--gw-charcoal);border-color:var(--gw-charcoal);color:var(--gw-white)}.btn.primary:hover{background:var(--c700)}
.btn.danger{background:var(--crit);border-color:var(--crit);color:var(--gw-white)}.btn.danger:hover{filter:brightness(.92)}
.btn:disabled{opacity:.4;cursor:not-allowed}.btn.small{height:31px;line-height:29px;padding:0 12px;font-size:13px}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--c500);outline-offset:1px}
/* ---- inline action form -------------------------------------------------- */
.actform{border:1px solid var(--border);border-radius:var(--rs);padding:14px 16px;margin:12px 0 0;background:var(--panel)}.actform h4{margin:0 0 8px;font-size:15px;font-weight:500;color:var(--fg0)}
.actform label{display:block;font-size:var(--fs-sm);margin:10px 0;color:var(--fg2)}.actform input:not([type=checkbox]),.actform select,.actform textarea{width:100%;padding:8px 12px;margin-top:5px;font-size:14px;border:1px solid var(--border2);border-radius:var(--rs);background:var(--card);color:var(--fg)}
.actform .note{font-size:var(--fs-sm);color:var(--fg3);margin:8px 0}
.result{min-height:1.4em;font-size:14px;font-weight:500;padding:8px 0 0}.result.bad{color:var(--crit)}.result.good{color:var(--okfg)}
.audit{list-style:none;padding:0;margin:0;font-size:var(--fs-sm);max-height:260px;overflow:auto}.audit li{padding:7px 0;border-bottom:1px solid var(--border)}.audit li:last-child{border:0}.audit b{font-weight:500}.audit time{color:var(--fg3);margin-right:6px;font-variant-numeric:tabular-nums}
.auditwide{grid-column:1/-1}.auditwide ul{list-style:none;padding:12px 22px 18px;margin:0;font-size:var(--fs-sm);columns:2;column-gap:28px}.auditwide li{padding:4px 0;break-inside:avoid}
.muted{color:var(--fg3);font-size:var(--fs-sm)}.hidden,.actform label.hidden,.card.hidden{display:none!important}
/* ---- moving around: page entry, smooth scroll, search and jump ------------ */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:no-preference){main{animation:gw-in .16s ease-out both}@keyframes gw-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}tbody tr{transition:background .1s}}
.jumpbtn kbd{font:inherit;font-size:var(--fs-xs);color:var(--fg3);border:1px solid var(--border2);border-radius:4px;padding:0 5px;margin-left:6px;line-height:18px}
.jump{position:fixed;top:calc(var(--top) + 8px);left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));z-index:1150;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 12px 40px rgba(35,42,59,.18);padding:10px}
.jump input{width:100%;height:40px;padding:0 14px;border:1px solid var(--border2);border-radius:var(--rs);background:var(--card);color:var(--fg);font-size:var(--fs)}
.jump ul{list-style:none;margin:8px 0 0;padding:0;max-height:min(420px,60vh);overflow:auto}
.jump li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--rs);cursor:pointer;font-size:var(--fs-sm)}.jump li[aria-selected=true],.jump li:hover{background:var(--sel)}
.jump li .k{flex:none;width:52px;font-size:var(--fs-lbl);letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}.jump li.none{color:var(--fg3);cursor:default}
/* The command bar says what it understood and what will happen before it
   happens: one status line under the box, one note per row. */
.jump .say{margin:8px 2px 0;font-size:var(--fs-sm);color:var(--fg2);min-height:1.2em}.jump .say[hidden]{display:none}
.jump li .t{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jump li .h{flex:1;min-width:0;text-align:right;color:var(--fg3);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jump li.confirmrow{background:var(--tint);border:1px solid var(--border2)}.jump li.confirmrow .t{font-weight:600}
@media(max-width:800px){.jump{top:auto;bottom:0;left:0;transform:none;width:100%;border-radius:var(--r) var(--r) 0 0;padding:12px}
.jump input{height:46px}.jump li{padding:12px 10px}.jump li .h{display:none}.jump li .t{max-width:none}}
/* ---- login --------------------------------------------------------------- */
body.login{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;place-items:center;background:var(--bg)}.login .card{width:400px;padding:36px}.login .card img{height:28px;display:block;margin-bottom:24px}
.login label{display:block;margin:14px 0 5px;font-size:var(--fs-sm);color:var(--fg2)}.login input{width:100%;height:40px;padding:0 14px;border:1px solid var(--border2);border-radius:var(--rs)}.login button{width:100%;margin-top:20px;justify-content:center}
.err{color:var(--crit);min-height:1.2em;font-size:var(--fs-sm);margin:0}
/* The second factor. The key, the otpauth link and the recovery codes are read
   off this screen and copied by hand onto a phone or onto paper, so they are
   set monospaced, spaced out, and wrapped inside the card rather than scrolled
   out of it. The policy is style-src 'self' with no unsafe-inline, so these
   rules have to live here: a style attribute on the page is dropped silently. */
.login h2{margin:0 0 10px;font-size:var(--fs-title);font-weight:500;color:var(--fg0)}
.login .key,.login .uri{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;background:var(--panel);border:1px solid var(--border);border-radius:var(--rs)}
.login .key{font-size:var(--fs-title);letter-spacing:.12em;padding:12px 14px;margin:12px 0;color:var(--fg0)}
.login .uri{font-size:var(--fs-xs);padding:10px 12px;margin:10px 0;color:var(--fg2)}
.login .codes{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs);letter-spacing:.08em;columns:2;margin:14px 0;padding-left:22px;color:var(--fg0)}
.login .codes li{margin:4px 0;break-inside:avoid}
.login a.btn{display:block;text-align:center;text-decoration:none;margin-top:16px}
/* ---- narrow and phone ---------------------------------------------------- */
@media(max-width:1100px){main.fleet,main.fleet.has-detail{grid-template-columns:1fr}.detail{position:static;max-height:none}.auditwide ul{columns:1}.card.list{max-height:60vh}}
@media(max-width:800px){body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto var(--top) minmax(0,1fr)}.side{min-width:0}.nav{min-width:0}
.side{grid-row:1;grid-column:1;height:auto;position:static;flex-direction:row;align-items:center;overflow:visible}.side .brand{flex:none}.side .brand{height:48px;padding:0 14px;border:0}.side .brand img{height:20px}
.nav{flex-direction:row;padding:0;overflow-x:auto;overflow-y:hidden;flex:1}.nav .sec{display:none}.nav a{padding:12px 14px;border-left:0;border-bottom:3px solid transparent;font-size:13.5px;white-space:nowrap}.nav .item{display:contents}.nav .sub,.nav .chev{display:none!important}.nav a.on{border-bottom-color:var(--gw-yellow)}.side .foot{display:none}
.top{grid-column:1;grid-row:2;padding:0 14px;gap:10px;overflow-x:auto}.top h1{font-size:18px}.who .name,.who .role{display:none}.jumpbtn kbd{display:none}
main{grid-column:1;grid-row:3;padding:14px;gap:14px}.stats,.stats[data-cols]{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.stats span{padding:12px 14px 10px}.stats b{font-size:22px}.card.map{min-height:320px}#map{min-height:300px}.toolbar input[type=search]{max-width:none}}
/* ---- colour modes and accent themes (Settings, Appearance) --------------
   Additive. /static/admin.theme.js stamps <html data-mode="light|dark|system"
   data-theme="sun|yellow|mint|lime|coral|lavender|custom"> and, for a custom
   accent, sets --accent-custom on <html>. Every existing token keeps its light
   value; dark mode only re-points the surface and text tokens. */
:root{--accent-custom:var(--gw-sun);--dk-bg:#0B1712;--dk-card:#10221B;--dk-panel:#14291F;--dk-tint:#183024;--dk-fg0:#F4F8F6;--dk-fg:#E8EFEC;--dk-fg2:#A9C1B8;--dk-fg3:#739A8D;--dk-border:#1F3A2E;--dk-border2:#2A4A3B;--dk-hover:#14291F;--dk-sel:#1B3529;--dk-okfg:#61DDAA;--dk-crit:#FF8A6A;--dk-chg:#A9AEDC;--dk-shadow:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3)}
:root[data-theme=sun]{--accent:var(--gw-sun)}:root[data-theme=yellow]{--accent:var(--gw-yellow)}:root[data-theme=mint]{--accent:var(--gw-mint)}:root[data-theme=lime]{--accent:var(--gw-lime)}:root[data-theme=coral]{--accent:var(--gw-coral)}:root[data-theme=lavender]{--accent:var(--gw-lavender)}:root[data-theme=custom]{--accent:var(--accent-custom)}
:root[data-mode=dark]{color-scheme:dark;--bg:var(--dk-bg);--card:var(--dk-card);--panel:var(--dk-panel);--tint:var(--dk-tint);--fg0:var(--dk-fg0);--fg:var(--dk-fg);--fg2:var(--dk-fg2);--fg3:var(--dk-fg3);--border:var(--dk-border);--border2:var(--dk-border2);--hover:var(--dk-hover);--sel:var(--dk-sel);--okfg:var(--dk-okfg);--crit:var(--dk-crit);--chg:var(--dk-chg);--shadow:var(--dk-shadow)}
:root[data-mode=dark] a{color:var(--gw-mint)}:root[data-mode=dark] .btn.primary{background:var(--gw-yellow);border-color:var(--gw-yellow);color:var(--gw-charcoal)}:root[data-mode=dark] .btn.primary:hover{background:var(--y400)}:root[data-mode=dark] .map .legend{background:var(--card)}:root[data-mode=dark] .who .avatar{background:var(--gw-yellow);color:var(--gw-charcoal)}
@media (prefers-color-scheme:dark){
:root[data-mode=system]{color-scheme:dark;--bg:var(--dk-bg);--card:var(--dk-card);--panel:var(--dk-panel);--tint:var(--dk-tint);--fg0:var(--dk-fg0);--fg:var(--dk-fg);--fg2:var(--dk-fg2);--fg3:var(--dk-fg3);--border:var(--dk-border);--border2:var(--dk-border2);--hover:var(--dk-hover);--sel:var(--dk-sel);--okfg:var(--dk-okfg);--crit:var(--dk-crit);--chg:var(--dk-chg);--shadow:var(--dk-shadow)}
:root[data-mode=system] a{color:var(--gw-mint)}:root[data-mode=system] .btn.primary{background:var(--gw-yellow);border-color:var(--gw-yellow);color:var(--gw-charcoal)}:root[data-mode=system] .btn.primary:hover{background:var(--y400)}:root[data-mode=system] .map .legend{background:var(--card)}:root[data-mode=system] .who .avatar{background:var(--gw-yellow);color:var(--gw-charcoal)}
}