/* YardX workspace, prototype visual layer.
   Geist for the app (the YARD wordmark keeps Archivo), one accent (the brand orange),
   one radius system (pills for controls, 22px shells with 17px cores for cards),
   semantic status colours for the live map only. */

#appView,.ck-view,#checkinView,.a-panel,.a-modal,.a-toast{
  --font-body:'Geist',system-ui,-apple-system,sans-serif;
  --font-display:'Geist',system-ui,-apple-system,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --ease2:cubic-bezier(.32,.72,0,1);
  --st-empty:#3FA877; --st-occ:#7590B8; --st-assigned:#D9A93A; --st-pickup:var(--accent); --st-exc:#E5534B; --st-dock:var(--fg);
  --r-shell:22px; --r-core:17px;
  font-family:var(--font-body);
}
:root[data-mode="light"] #appView,:root[data-mode="light"] .a-panel,:root[data-mode="light"] .ck-view{--st-empty:#2E8A5F; --st-occ:#4F6E9C; --st-assigned:#B8871B; --st-exc:#C9372F}
#appView h1,#appView h2,#appView h3,#appView h4,.a-panel h2,.a-modal h2,.ck-view h1,#checkinView h1{font-family:var(--font-display);font-weight:600;font-stretch:100%;letter-spacing:-.03em}
#appView .lockup .yard,.ck-view .lockup .yard{font-family:'Archivo','Arial Narrow',sans-serif;font-weight:800;font-stretch:118%;letter-spacing:-.025em}
#appView svg text,.ck-view svg text{font-family:var(--font-mono)}
.mono,#appView b[data-kpn],.kpi-n,.rp-n,.td-grid dd,.apr time{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);letter-spacing:-.01em}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--fg);color:var(--bg);font:600 14px var(--font-body);text-decoration:none;transition:top .3s var(--ease2,cubic-bezier(.32,.72,0,1))}
.skip:focus{top:12px}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#appView[hidden] ~ .grain{display:none}
#appView:not([hidden]) ~ .grain{display:none}  /* no film grain over the working app: it costs a full-screen repaint on scroll */
:root[data-mode="light"] .grain{opacity:.04}

/* ---------- controls: pills, custom easing, pressed feel ---------- */
#appView .btn,.a-panel .btn,.a-modal .btn,.ck-view .btn{border-radius:999px;font-family:var(--font-body);font-weight:600;letter-spacing:-.005em;transition:transform .5s var(--ease2),background-color .3s var(--ease2),box-shadow .4s var(--ease2),color .3s var(--ease2)}
#appView .btn-p:hover,.a-panel .btn-p:hover{box-shadow:0 14px 30px -14px color-mix(in srgb,var(--accent) 70%,transparent)}
#appView .btn:active,.a-panel .btn:active,.ck-view .btn:active{transform:scale(.98)}
.btn-xs{height:32px;padding:0 13px;font-size:13px;gap:6px}
.btn-xs svg{width:15px;height:15px}
.btn-pill{height:46px;padding:0 6px 0 20px;gap:12px;font-size:15px}
.btn-pill .bib{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent-ink) 14%,transparent);transition:transform .55s var(--ease2)}
.btn-pill .bib svg{width:17px;height:17px}
.btn-pill:hover .bib{transform:translate(2px,-1px) scale(1.06)}
#appView .a-seg,.a-panel .a-seg,.ck-view .a-seg{border-radius:999px;padding:4px}
#appView .a-seg button,.a-panel .a-seg button,.ck-view .a-seg button{border-radius:999px;font-weight:500}
#appView .a-seg-ind,.a-panel .a-seg-ind,.ck-view .a-seg-ind{border-radius:999px}
#appView .a-field input[type=text],#appView .a-field input[type=search],#appView .a-field select,.a-panel .a-field input,.a-panel .a-field select,.ck-view .a-field input{border-radius:14px;background:var(--field)}
#appView :focus-visible,.a-panel :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.a-icon-btn{border-radius:999px!important;transition:background-color .3s var(--ease2),color .3s var(--ease2),transform .4s var(--ease2)!important}
.a-icon-btn:active{transform:scale(.94)}
.a-linkbtn{display:inline-flex;align-items:center;gap:6px;text-decoration:none!important;font-weight:500!important}
.a-linkbtn svg{width:15px;height:15px;transition:transform .5s var(--ease2)}
.a-linkbtn:hover{color:var(--fg)}
.a-linkbtn:hover svg{transform:translateX(3px)}
.a-toast{font-family:var(--font-body);font-weight:500}

/* ---------- the double bezel: a shell with a core inside ---------- */
.bz{display:block;border-radius:var(--r-shell);padding:5px;background:color-mix(in srgb,var(--fg) 2.5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 7%,transparent);min-width:0}
.bz-in{display:block;height:100%;border-radius:var(--r-core);background:var(--panel);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 7%,transparent),0 1px 2px color-mix(in srgb,var(--shadow) 30%,transparent);padding:20px;min-width:0}
:root[data-mode="light"] .bz-in{background:color-mix(in srgb,var(--bg) 40%,#fff)}

/* ---------- main navigation: a floating island ---------- */
.a-navbar{position:sticky;top:114px;z-index:27;display:flex;justify-content:center;padding:14px clamp(12px,3vw,36px) 0;pointer-events:none}
.edit-mode .a-navbar{top:166px}
.a-nav{pointer-events:auto;display:flex;gap:2px;padding:5px;border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:color-mix(in srgb,var(--panel) 96%,var(--bg));
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 color-mix(in srgb,var(--fg) 8%,transparent),0 20px 40px -26px color-mix(in srgb,var(--shadow) 90%,transparent)}
.a-nav::-webkit-scrollbar{display:none}
.nv{position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;color:var(--muted);font:500 14px/1 var(--font-body);white-space:nowrap;text-decoration:none;flex:none;transition:background-color .45s var(--ease2),color .3s var(--ease2),transform .4s var(--ease2)}
.nv svg{width:17px;height:17px;flex:none}
.nv:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.nv:active{transform:scale(.97)}
.nv.on{background:var(--fg);color:var(--bg)}
.nv-n{font-style:normal;min-width:19px;height:19px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--panel-3);color:var(--fg);font:600 11px/1 var(--font-mono)}
.nv.on .nv-n{background:color-mix(in srgb,var(--bg) 18%,transparent);color:var(--bg)}
.nv-n.hi{background:var(--st-exc);color:#fff}
@media (max-width:1240px){.nv svg{display:none}.nv{padding:0 12px}}
@media (max-width:760px){.a-navbar{top:114px;padding-top:10px;justify-content:flex-start}.nv svg{display:inline}.nv span{font-size:13.5px}}
body[data-role="driver"] .a-navbar{display:none}
main.a-main{padding-top:0}

/* ---------- page heads ---------- */
.now-head,.pg-head,.yd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 28px;padding:30px 0 24px;flex-wrap:wrap}
.now-head h1,.pg-head h1,.yd-head h1{font-size:clamp(34px,4.2vw,52px);line-height:1.02;letter-spacing:-.04em;max-width:18ch;text-wrap:balance}
.now-head p,.pg-head p,.yd-head p{margin-top:12px;max-width:60ch;font-size:15px;line-height:1.5}
.nw-tools,.pg-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sel-pill{position:relative;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px 0 14px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted);transition:box-shadow .3s var(--ease2)}
.sel-pill:hover,.sel-pill:focus-within{box-shadow:inset 0 0 0 1px var(--fg)}
.sel-pill svg{width:17px;height:17px;flex:none}
.sel-pill select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--fg);font:500 15px var(--font-body);padding-right:16px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:right 5px center,right 0 center;background-size:5px 5px;background-repeat:no-repeat}
.sel-pill select option{background:var(--panel);color:var(--fg)}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:32px;flex-wrap:wrap}
.card-h h2{font-size:18px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.card-h h2 svg{width:19px;height:19px;color:var(--st-exc)}
.card-h .a-linkbtn{margin-left:auto}
.cnt{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 8px;border-radius:999px;background:var(--panel-3);font:600 12px/1 var(--font-mono);color:var(--fg)}
.cnt.hi{background:color-mix(in srgb,var(--st-exc) 22%,transparent);color:var(--st-exc)}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:var(--panel-3);color:var(--muted);font:500 12px/1 var(--font-body);white-space:nowrap}
.pill svg{width:13px;height:13px}
.pill.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.pill.bad{background:color-mix(in srgb,var(--st-exc) 18%,transparent);color:var(--st-exc)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:30px;padding:0 13px;border-radius:999px;border:0;background:var(--field);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);font:500 13px/1 var(--font-body);cursor:pointer;transition:background-color .35s var(--ease2),color .25s,box-shadow .3s}
.chip:hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-3)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);box-shadow:none}
.chips.big .chip{height:38px;padding:0 16px;font-size:14px}
.mini-empty{display:flex;align-items:center;gap:10px;padding:18px 4px;color:var(--dim);font-size:14px;flex-wrap:wrap}
.mini-empty svg{width:20px;height:20px;color:var(--st-empty);flex:none}
.mini-empty.big{justify-content:center;padding:60px 0;flex-direction:column}
.mini-empty.big svg{width:34px;height:34px;color:var(--dim)}
.empty-state{max-width:440px;margin:12vh auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.empty-state svg{width:44px;height:44px;color:var(--dim)}
.empty-state h1{font-size:34px}
.dim{color:var(--dim)} .bad{color:var(--st-exc)}

/* ---------- dashboard ---------- */
.kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{border:0;text-align:left;cursor:pointer;color:var(--fg);font:inherit;transition:transform .55s var(--ease2)}
.kpi:hover{transform:translateY(-3px)}
.kpi:active{transform:scale(.985)}
.kpi:disabled{cursor:default;transform:none}
.kpi .bz-in{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px}
.kpi-l{font-size:13px;color:var(--muted);font-weight:500}
.kpi-n{display:flex;align-items:baseline;gap:2px}
.kpi-n b{font:500 clamp(34px,3.2vw,44px)/1 var(--font-body);letter-spacing:-.045em}
.kpi-n em{font:500 18px var(--font-body);color:var(--dim);font-style:normal;letter-spacing:-.02em}
.kpi small{font-size:12px;color:var(--dim)}
.kpi.hi .bz-in{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-exc) 45%,transparent),inset 0 1px 0 color-mix(in srgb,var(--fg) 7%,transparent)}
.kpi.hi .kpi-n b,.kpi.hi .kpi-l{color:var(--st-exc)}
.nw-empty{margin-top:12px}
.nw-empty .bz-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nw-empty .bz-in > svg{width:30px;height:30px;color:var(--accent)}
.nw-empty b{display:block;font-size:16px}
.nw-empty span{color:var(--muted);font-size:14px}
.nw-empty-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.nw-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;margin-top:12px;align-items:start}
.nw-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.mvl,.exl{display:flex;flex-direction:column}
.mvr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.mvr:first-child{border-top:0;padding-top:2px}
.mvr-u{display:flex;flex-direction:column;gap:4px;min-width:0}
.mvr-u b{font-size:15px}
.mvr-u span{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvr-u span svg{width:13px;height:13px;flex:none}
.mvr-s{display:flex;align-items:center;gap:8px;flex:none}
.ex{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.ex:first-child{border-top:0;padding-top:2px}
.ex-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--st-assigned) 16%,transparent);color:var(--st-assigned)}
.ex.hi .ex-ic{background:color-mix(in srgb,var(--st-exc) 16%,transparent);color:var(--st-exc)}
.ex-ic svg{width:18px;height:18px}
.ex-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.ex-tx b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.ex-tx > span{font-size:13.5px;color:var(--muted);line-height:1.45}
.ex-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ex time{font:500 12px var(--font-mono);color:var(--dim);padding-top:3px}
.a-linkbtn.more{margin-top:6px}
.arr{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:thin}
.arr-c{scroll-snap-align:start;border-radius:14px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:3px;min-width:0}
.arr-c time{font:500 24px/1.1 var(--font-mono);letter-spacing:-.03em;margin-bottom:6px}
.arr-c b{font-size:14.5px}
.arr-c span,.arr-c small{font-size:13px;color:var(--muted)}
.arr-c .pill{align-self:flex-start;margin-top:8px}
.arr-c.late{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-exc) 40%,transparent)}

/* ---------- live map with statuses ---------- */
.om{border-radius:14px;overflow:hidden;background:var(--bg-deep);box-shadow:inset 0 0 0 1px var(--line)}
.om svg{display:block;width:100%;height:auto}
.om.big svg{max-height:calc(100dvh - 300px)}
.st-empty{--st:var(--st-empty)} .st-occupied{--st:var(--st-occ)} .st-assigned{--st:var(--st-assigned)} .st-pickup{--st:var(--st-pickup)} .st-exception{--st:var(--st-exc)} .st-dock{--st:var(--st-dock)}
.st-scheduled{--st:var(--dim)} .st-arrived{--st:var(--st-empty)} .st-late{--st:var(--st-exc)} .st-done{--st:var(--dim-2)} .st-noshow{--st:var(--dim-2)}
.ops-map .m-spot,.ops-map .m-dock{cursor:pointer}
.ops-map .m-spot .m-sb{fill:color-mix(in srgb,var(--st) 13%,transparent);stroke:color-mix(in srgb,var(--st) 75%,transparent);stroke-width:1.6;stroke-dasharray:none;transition:stroke .3s var(--ease2),opacity .4s var(--ease2)}
.ops-map .m-spot.st-empty .m-sb{fill:color-mix(in srgb,var(--st) 6%,transparent);stroke:color-mix(in srgb,var(--st) 55%,transparent);stroke-dasharray:5 4}
.ops-map .m-spot .m-body{fill:color-mix(in srgb,var(--st) 62%,var(--bg))}
.ops-map .m-spot .m-sec{opacity:.5}
.ops-map .m-spot:hover .m-sb{stroke:var(--fg)}
.ops-map .m-spot.sel .m-sb{stroke:var(--fg);stroke-width:3.5}
.ops-map .m-spot.st-exception .m-sb{stroke-width:2.4}
.ops-map .m-dock .m-dl{stroke:color-mix(in srgb,var(--st-dock) 70%,transparent)}
.ops-map .m-dock.st-exception .m-dl,.ops-map .m-dock.st-pickup .m-dl,.ops-map .m-dock.st-assigned .m-dl{stroke:var(--st)}
.ops-map .m-dock.st-pickup .m-dtrl,.ops-map .m-dock.st-exception .m-dtrl{stroke:var(--st)}
.ops-map .m-dock.sel .m-dl{stroke:var(--accent);stroke-width:10}
.ops-map.flt .m-spot,.ops-map.flt .m-dock{opacity:.16}
.ops-map.flt-empty .m-spot.st-empty,.ops-map.flt-occupied .m-spot.st-occupied,.ops-map.flt-assigned .st-assigned,.ops-map.flt-pickup .st-pickup,.ops-map.flt-exception .st-exception,.ops-map.flt-dock .m-dock{opacity:1}
.om-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.om-legend .lg{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:999px;border:0;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);font:500 13px/1 var(--font-body);color:var(--muted)}
.om-legend .lg i{width:10px;height:10px;border-radius:3px;background:var(--st);flex:none}
.om-legend .lg.st-empty i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--st)}
.om-legend .lg.st-dock i{height:3px;border-radius:2px}
.om-legend .lg b{font:600 12px/1 var(--font-mono);color:var(--fg)}
.om-legend.click .lg{cursor:pointer;transition:box-shadow .3s var(--ease2),background-color .3s var(--ease2)}
.om-legend.click .lg:hover{box-shadow:inset 0 0 0 1px var(--line-3)}
.om-legend.click .lg[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--st);background:color-mix(in srgb,var(--st) 10%,var(--field))}

/* ---------- live yard ---------- */
.yd{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start}
.yd-side{display:flex;flex-direction:column;gap:12px}
.yd-sum h2{font-size:22px}
.yd-sum > span{display:block;font-size:13px;margin-top:4px}
.yd-kv{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:18px 0 16px;border-radius:14px;overflow:hidden;background:var(--line)}
.yd-kv div{background:var(--panel);padding:12px 14px}
.yd-kv dt{font-size:12px;color:var(--muted)}
.yd-kv dd{margin:4px 0 0;font:500 26px/1 var(--font-body);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.yd-act{display:flex;gap:8px;margin-bottom:12px}
.yd-act .btn{flex:1}

/* ---------- moves ---------- */
.mv-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.mvc{border-radius:14px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);padding:16px;display:flex;flex-direction:column;gap:12px;transition:transform .5s var(--ease2)}
.mvc + .mvc{margin-top:10px}
.mvc.doing{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 70%,transparent)}
.mvc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mvc-top b{font-size:17px}
.mvc-route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.mvc-route small{display:block;font-size:11.5px;color:var(--dim)}
.mvc-route b{font-size:16px;letter-spacing:-.01em}
.mvc-route > svg{width:18px;height:18px;color:var(--accent)}
.mvc p{font-size:13px;color:var(--muted);line-height:1.45}
.mvc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.mvc-foot small{font-size:12.5px;color:var(--dim)}
.mvc-btns{display:flex;gap:6px}

/* ---------- appointments ---------- */
#aAppts .a-seg{margin-bottom:22px}
.ap-list{display:flex;flex-direction:column;gap:22px}
.ap-grp h2{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:-.005em;margin:0 0 10px 6px}
.ap-rows{padding:6px 20px}
.apr{display:grid;grid-template-columns:62px minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr) 120px 190px;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.apr:first-child{border-top:0}
.apr time{font-size:18px;letter-spacing:-.03em}
.apr-m,.apr-u{display:flex;flex-direction:column;gap:3px;min-width:0}
.apr-m b{font-size:15px}
.apr-m span,.apr-u span,.apr-f{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apr-u b{font-size:14px}
.apr .pill{justify-self:start;background:color-mix(in srgb,var(--st) 16%,transparent);color:var(--st)}
.apr.st-scheduled .pill{background:var(--panel-3);color:var(--muted)}
.apr-a{display:flex;gap:6px;justify-content:flex-end}
.apr.done,.apr.noshow{opacity:.62}
.apr.noshow .apr-m b{text-decoration:line-through}
.apr.late time{color:var(--st-exc)}
.apr.scheduled{--st:var(--dim)} .apr.arrived{--st:var(--st-empty)} .apr.late{--st:var(--st-exc)} .apr.done,.apr.noshow{--st:var(--dim)}

/* ---------- reports ---------- */
.rp-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:12px}
.rp-top .bz-in{display:flex;flex-direction:column;gap:8px;padding:22px}
.rp-n{font:500 clamp(40px,4vw,56px)/1 var(--font-body);letter-spacing:-.05em}
.rp-big .rp-n{color:var(--accent)}
.rp-top .a-muted{font-size:13px}
.rp-tbl{margin-top:12px}
.tbl-scroll{overflow-x:auto}
.rp-tbl table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.rp-tbl th,.rp-tbl td{text-align:left;padding:13px 12px;white-space:nowrap}
.rp-tbl thead th{font-size:12px;font-weight:500;color:var(--dim);border-bottom:1px solid var(--line)}
.rp-tbl tbody th{font-weight:600}
.rp-tbl tbody tr + tr > *{border-top:1px solid var(--line)}
.rp-tbl td{font-variant-numeric:tabular-nums;color:var(--muted)}
.rp-tbl td.hi{color:var(--st-exc);font-weight:600}
.occ{display:inline-block;width:64px;height:6px;border-radius:3px;margin-right:10px;vertical-align:middle;overflow:hidden}
.occ i{display:block;height:100%;border-radius:3px;background:var(--accent)}

/* ---------- trailer detail panel ---------- */
.td-kick{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 11px;border-radius:999px;background:color-mix(in srgb,var(--st) 14%,transparent);color:var(--st);font:600 12.5px/1 var(--font-body);margin-bottom:10px}
.td-kick i{width:8px;height:8px;border-radius:50%;background:var(--st)}
.td-head h2{font-size:30px;letter-spacing:-.035em}
.td-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 18px;border-radius:16px;overflow:hidden;background:var(--line)}
.td-grid > div{background:var(--panel);padding:14px 16px;min-width:0}
.td-grid dt{font-size:12px;color:var(--dim);margin-bottom:5px}
.td-grid dd{margin:0;font-size:15.5px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.td-grid dd small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px}
.td-exc{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;margin-bottom:14px;background:color-mix(in srgb,var(--st-exc) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-exc) 40%,transparent)}
.td-exc svg{width:20px;height:20px;color:var(--st-exc);flex:none;margin-top:1px}
.td-exc b{display:block;font-size:14.5px}
.td-exc span{font-size:13px;color:var(--muted)}
.td-foot .btn{flex:1}

/* ---------- panels and modals: rounded, floating ---------- */
@media (min-width:641px){
  .a-panel{top:10px;right:10px;bottom:10px;border-radius:26px;width:min(460px,calc(100vw - 20px));transform:translateX(110%);transition:transform .6s var(--ease2);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 color-mix(in srgb,var(--fg) 8%,transparent),-30px 0 80px -40px color-mix(in srgb,var(--shadow) 90%,transparent)}
  .a-panel.open{transform:none}
}
.a-modal{border-radius:26px!important}

/* ---------- jockey: one move, huge buttons ---------- */
.jk2{display:flex;flex-direction:column;gap:12px}
.jk2-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.jk2-hi{font-size:20px;font-weight:600;letter-spacing:-.02em}
.jk2-count{display:flex;justify-content:space-between;font:500 13px var(--font-mono);color:var(--muted);padding:0 4px}
.jk2-count span:first-child{color:var(--fg)}
.jk2-card{border-radius:26px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 color-mix(in srgb,var(--fg) 8%,transparent);padding:22px 20px 18px;display:flex;flex-direction:column;align-items:stretch;gap:2px}
.jk2-lbl{font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.jk2-unit{font-size:clamp(46px,14vw,64px);font-weight:600;letter-spacing:-.05em;line-height:1;margin-bottom:18px}
.jk2-leg{display:flex;flex-direction:column;padding:14px 16px;border-radius:18px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line)}
.jk2-leg b{font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1.05}
.jk2-leg.to{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 70%,transparent)}
.jk2-leg.to b{color:var(--accent)}
.jk2-down{display:flex;justify-content:center;padding:6px 0;color:var(--accent)}
.jk2-down svg{width:26px;height:26px}
.jk2-go{margin-top:16px;width:100%;min-height:76px;border:0;border-radius:22px;background:var(--accent);color:var(--accent-ink);font:600 22px/1.1 var(--font-body);letter-spacing:-.02em;cursor:pointer;transition:transform .45s var(--ease2),background-color .3s;padding:0 16px}
.jk2-go:hover{background:var(--accent-hi)}
.jk2-go:active{transform:scale(.97)}
.jk2-go.done{background:var(--st-empty);color:#fff}
.jk2-why{font-size:13px;color:var(--muted);line-height:1.45;margin-top:10px;text-align:center}
.jk2-card.doing{box-shadow:inset 0 0 0 2px var(--accent)}
.jk2-dest{font-size:clamp(46px,14vw,60px);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--accent)}
.jk2-sub{font-size:15px;color:var(--muted);margin-top:8px}
.jk2-cancel{align-self:center;margin-top:10px}
.jk2-card.empty{align-items:center;text-align:center;gap:8px;padding:36px 20px}
.jk2-card.empty svg{width:34px;height:34px;color:var(--st-empty)}
.jk2-card.empty b{font-size:20px}
.jk2-card.empty span{font-size:14px;color:var(--muted)}
.jk2-map .ck-map{border-radius:18px}
.jk2-key{display:flex;gap:16px;justify-content:center;margin-top:8px;font-size:12.5px;color:var(--muted)}
.jk2-key span{display:flex;align-items:center;gap:6px}
.jk2-key i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:600 10px/1 var(--font-mono);font-style:normal;background:var(--panel-3);color:var(--fg)}
.jk2-key i.k2{background:var(--accent);color:var(--accent-ink)}
.jk2-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.jk2-list{display:flex;flex-direction:column;gap:6px}
.jk2-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);font-size:14px}
.jk2-row span{display:flex;align-items:center;gap:6px;color:var(--muted)}
.jk2-row span svg{width:13px;height:13px}

/* ---------- driver: three big choices, then "I'm here" ---------- */
.dv2 h1{font-size:34px;line-height:1.05;letter-spacing:-.04em}
.dv2-main{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.dv2-big{display:grid;grid-template-columns:52px minmax(0,1fr) 22px;align-items:center;gap:14px;width:100%;min-height:96px;padding:16px 18px 16px 16px;border-radius:22px;border:0;background:var(--field);box-shadow:inset 0 0 0 1px var(--line-2);text-align:left;color:var(--fg);cursor:pointer;font:inherit;transition:transform .45s var(--ease2),box-shadow .3s}
.dv2-big:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.dv2-big:active{transform:scale(.98)}
.dv2-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.dv2-ic svg{width:26px;height:26px}
.dv2-tx b{display:block;font-size:20px;font-weight:600;letter-spacing:-.025em}
.dv2-tx small{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.35}
.dv2-big .dv-go{width:20px;height:20px;color:var(--dim)}
.dv2-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.dv2-more > span{width:100%;font-size:12.5px;color:var(--dim)}
.dv2-small{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--fg);font:500 14px var(--font-body);cursor:pointer}
.dv2-small svg{width:16px;height:16px;color:var(--muted)}
.dv2-unit{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:18px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line)}
.dv2-unit span{font-size:12.5px;color:var(--dim)}
.dv2-unit b{font-size:30px;letter-spacing:-.04em;line-height:1}
.dv2-go{font-size:clamp(44px,13vw,58px)!important;line-height:.98!important;letter-spacing:-.05em!important}
.dv2-go em{font-style:normal;color:var(--accent)}
.dv2-why{font-size:14px;color:var(--muted);line-height:1.45}
.dv2-next{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:14px 16px;border-radius:18px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line)}
.dv2-next > span{grid-column:1/-1;font-size:12.5px;color:var(--dim)}
.dv2-next b{font-size:20px;letter-spacing:-.02em}
.dv2-next small{font-size:15px;color:var(--fg);font-weight:500;align-self:end}
.dv2-now{font-size:16px;line-height:1.45;padding:12px 4px 0}
.dv2-here{width:100%;min-height:88px;border:0;border-radius:24px;background:var(--accent);color:var(--accent-ink);font:600 26px/1 var(--font-body);letter-spacing:-.03em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .45s var(--ease2),background-color .3s}
.dv2-here:active{transform:scale(.97)}
.dv2-here svg{width:26px;height:26px}
.dv2-here.done{background:var(--st-empty);color:#fff}
.dv2-steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.dv2-st{display:flex;align-items:center;gap:12px;padding:9px 4px;font-size:14px;color:var(--muted)}
.dv2-st i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font:600 12px/1 var(--font-mono);font-style:normal;background:var(--panel-3);color:var(--fg)}
.dv2-st i svg{width:14px;height:14px}
.dv2-st.cur{color:var(--fg)}
.dv2-st.cur i{background:var(--accent);color:var(--accent-ink)}
.dv2-st.done i{background:var(--st-empty);color:#fff}
.dv2-st small{margin-left:8px;color:var(--dim);font-family:var(--font-mono)}
.dv2-st.warn svg{width:18px;height:18px;color:var(--st-assigned);flex:none}
.dv2-exit{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:18px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line)}
.dv2-exit svg{width:22px;height:22px;color:var(--accent)}
.dv2-exit b{display:block;font-size:16px}
.dv2-exit span{font-size:13.5px;color:var(--muted)}
.dv2-again{align-self:center}
.ck-card{border-radius:26px!important}

/* ---------- gate ---------- */
.gt2 .gt-head{padding-top:26px}
.gt2 .gt-head h1{font-size:clamp(34px,4.2vw,52px);letter-spacing:-.04em}
.gt-exc{margin-bottom:12px}
.gt-exc .bz-in{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-exc) 40%,transparent),inset 0 1px 0 color-mix(in srgb,var(--fg) 7%,transparent)}
.gt-exc .exl{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:0 28px}
.gt-exc .ex{border-top:1px solid var(--line);padding:14px 0}
.gt2 .gt-acts{display:grid;grid-template-columns:1.15fr 1fr;gap:12px}
.gt-card{margin:0}
.gt-card .bz-in{display:flex;flex-direction:column;gap:12px}
.gt-card-h{display:flex;align-items:center;gap:10px;font-size:18px;letter-spacing:-.02em}
.gt-card-h svg{width:22px;height:22px;color:var(--accent)}
.gt-card.in .bz-in{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 1px 0 color-mix(in srgb,var(--fg) 7%,transparent)}
.gt-go{width:100%;height:56px;font-size:17px}
.gt-msg{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.4}
.gt-msg svg{width:18px;height:18px;flex:none;margin-top:1px}
.gt-msg.ok{background:color-mix(in srgb,var(--st-empty) 14%,transparent);color:var(--fg)}
.gt-msg.ok svg{color:var(--st-empty)}
.gt-msg.note{background:color-mix(in srgb,var(--st-assigned) 14%,transparent)}
.gt-msg.note svg{color:var(--st-assigned)}
.gt-msg.bad{background:color-mix(in srgb,var(--st-exc) 14%,transparent)}
.gt-msg.bad svg{color:var(--st-exc)}
.gt-card .a-linkbtn{align-self:flex-start}
.gt2 .gt-outrow{display:flex;gap:8px}
.gt2 .gt-outrow input{flex:1;min-width:0;height:46px;border-radius:14px;border:0;background:var(--field);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--fg);padding:0 14px;font:500 15px var(--font-body)}
.gt2 .gt-none{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted);padding:10px 0}
.gt2 .gt-hit{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.gt2 .gt-hit .btn{margin-left:auto}
.gt2 .gt-row{display:flex;flex-wrap:nowrap;gap:12px}
.gt2 .gt-row > span:not(.gt-u):not(.pill){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt2 .gt-row time{font-size:14px;color:var(--fg);min-width:44px}
.gt2 .gt-row .btn{margin-left:auto}
.gt2 .gt-row .pill + .btn{margin-left:8px}
.gt2 .gt-qr{padding:5px}
.gt2 .gt-qr .bz-in{display:flex;flex-direction:column;gap:10px}

/* ---------- facility list and the rest of the app ---------- */
#appView .a-kpi,#appView .a-fac,#appView .lv-card,#appView .lv-board,#appView .stg-body{border-radius:var(--r-shell)}
#appView .a-home-top h1,#appView .a-fhead h1,#appView .stg-head h1{letter-spacing:-.04em}
#appView .a-viewbar{font-family:var(--font-body)}

/* ---------- small screens ---------- */
@media (max-width:1100px){
  .kp{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nw-grid{grid-template-columns:1fr}
  .yd{grid-template-columns:1fr}
  .rp-top{grid-template-columns:1fr 1fr}
  .apr{grid-template-columns:56px minmax(0,1fr) minmax(0,1fr) 110px;grid-template-areas:"t m u p" "t f f a"}
  .apr time{grid-area:t}.apr-m{grid-area:m}.apr-u{grid-area:u}.apr .pill{grid-area:p}.apr-f{grid-area:f}.apr-a{grid-area:a}
}
@media (max-width:820px){
  .mv-board{grid-template-columns:1fr}
  .gt2 .gt-acts{grid-template-columns:1fr}
}
@media (max-width:640px){
  .now-head,.pg-head,.yd-head{padding:26px 0 18px}
  .kp{grid-template-columns:1fr 1fr;gap:8px}
  .kpi .bz-in{padding:14px}

  .bz-in{padding:16px}
  .rp-top{grid-template-columns:1fr}
  .ap-rows{padding:4px 14px}
  .apr{grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"t m p" "t u u" "t a a";gap:6px 12px}
  .apr-f{display:none}
  .apr-a{justify-content:flex-start}
  .ex{grid-template-columns:30px minmax(0,1fr)}
  .ex time{display:none}
  .nw-tools,.pg-tools{width:100%}
  .nw-tools .sel-pill,.pg-tools .sel-pill{flex:1}
  .gt-exc .exl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .kpi,.nv,.btn,.chip,.dv2-big,.jk2-go,.dv2-here,.a-panel{transition:none!important}
  .kpi:hover{transform:none}
}
/* the "View as" bar is a demo control: it scrolls away, the main nav stays */
#appView .a-viewbar{position:relative;top:auto}
.a-navbar{top:64px}
.edit-mode .a-navbar{top:116px}
@media (max-width:760px){.a-navbar{top:64px}}

@media (max-width:640px){.gt2 .gt-row{flex-wrap:wrap}.gt2 .gt-row > span:not(.gt-u):not(.pill){flex-basis:100%;order:3}}
@media (max-width:640px){.td-foot{gap:6px}.td-foot .btn{padding:0 10px;font-size:14px;gap:6px}.td-foot .btn svg.lead{display:none}}

/* ---------- live demo chip ---------- */
.demo-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:0;border-radius:999px;background:color-mix(in srgb,var(--st-empty) 14%,transparent);color:var(--fg);font:500 12.5px/1 var(--font-body);cursor:pointer;white-space:nowrap;transition:background-color .3s var(--ease2),transform .3s var(--ease2)}
.demo-chip:active{transform:scale(.96)}
.demo-chip i{width:7px;height:7px;border-radius:50%;background:var(--st-empty);box-shadow:0 0 0 0 color-mix(in srgb,var(--st-empty) 60%,transparent);animation:demoPulse 2s var(--ease2) infinite}
.demo-chip.off{background:var(--panel-2);color:var(--muted)}
.demo-chip.off i{background:var(--dim);animation:none}
@keyframes demoPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-empty) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:760px){.demo-chip span{display:none}.demo-chip{padding:0 10px}}
@media (prefers-reduced-motion:reduce){.demo-chip i{animation:none}}

/* ---------- detention ---------- */
.dt-card.hot > .bz-in{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-exc) 40%,transparent),inset 0 1px 0 color-mix(in srgb,var(--fg) 7%,transparent)}
.card-h h2 svg{color:var(--accent)}
.dt-card.hot .card-h h2 svg,.gt-exc .card-h h2 svg{color:var(--st-exc)}
.dt-mini{display:flex;flex-direction:column;gap:6px}
.dtm{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px}
.dtm b{font-size:14px}
.dtm span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtm em{font:600 12.5px/1 var(--font-mono);font-style:normal;color:var(--st-assigned)}
.dtm.det em{color:var(--st-exc)}
.dtm.det{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-exc) 35%,transparent)}
.dt-foot{margin-top:12px;font-size:12.5px;color:var(--dim)}
.dt-kp{grid-template-columns:repeat(4,minmax(0,1fr))}
.dt-kp .kpi{cursor:default}
.dt-kp .kpi:hover{transform:none}
.dt-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;margin-top:12px;align-items:start}
.dt-head,.dt-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.7fr) 168px;gap:14px;align-items:center}
.dt-head{padding:0 0 10px;border-bottom:1px solid var(--line);font-size:12px;color:var(--dim)}
.dt-row{padding:14px 0;border-bottom:1px solid var(--line)}
.dt-row:last-child{border-bottom:0}
.dt-u,.dt-c,.dt-t,.dt-m{display:flex;flex-direction:column;gap:3px;min-width:0}
.dt-u b{font-size:16px}
.dt-u span,.dt-c small,.dt-t small,.dt-m small{font-size:12.5px;color:var(--muted)}
.dt-c span{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-t b{font:600 17px/1.1 var(--font-body);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dt-m b{font:600 16px/1.1 var(--font-body);font-variant-numeric:tabular-nums}
.dt-row.det .dt-t b,.dt-row.det .dt-m b{color:var(--st-exc)}
.dt-row.soon .dt-t b{color:var(--st-assigned)}
.dt-row.free .dt-t b{color:var(--st-empty)}
.dt-a{display:flex;gap:6px;justify-content:flex-end}
.dt-note{font-size:13px;line-height:1.45;margin:-4px 0 14px}
.dt-set{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid var(--line)}
.dt-set b{font-size:15px}
.dt-in{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dt-in label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
.dt-in input{height:40px;border-radius:12px;border:0;background:var(--field);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--fg);padding:0 12px;font:500 15px var(--font-body);font-variant-numeric:tabular-nums;width:100%}
.dt-in input:focus{box-shadow:inset 0 0 0 1px var(--fg);outline:none}
.dt-in input[aria-invalid=true]{box-shadow:inset 0 0 0 1px var(--st-exc)}
.dt-set .btn{align-self:flex-start}
#lvDet:not([hidden]){margin-bottom:12px}
.lv-side #lvDet .bz-in{background:var(--panel)}
.wz-det{padding:14px;border-radius:16px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:1100px){.dt-grid{grid-template-columns:1fr}.dt-kp{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .dt-head{display:none}
  .dt-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"u t" "c m" "a a";gap:8px 12px}
  .dt-u{grid-area:u}.dt-c{grid-area:c}.dt-t{grid-area:t;text-align:right}.dt-m{grid-area:m;text-align:right}.dt-a{grid-area:a;justify-content:flex-start}
}
@media (max-width:480px){.demo-chip{display:none}}
/* dashboard: one tap into each yard */
.nw-yards{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.nw-yard{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px 8px 16px;border:0;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);font:inherit;cursor:pointer;text-align:left;transition:box-shadow .15s,transform .1s}
.nw-yard:hover{box-shadow:inset 0 0 0 1px var(--line-3)}
.nw-yard:active{transform:scale(.98)}
.nw-yard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nw-yard .nm{font-weight:600;font-size:15px}
.nw-yard .ct{font-size:13px;color:var(--muted)}
.nw-yard .ct b{color:var(--fg)}
.nw-yard svg{width:16px;height:16px;color:var(--muted)}