/* Fountco · components. Every component here is shown, in every state, in components.html.
   Areas: append a clearly marked block at the END of this file only after adding the component to components.html. */

/* ===== Buttons ===== */
.btn{--h:40px;height:var(--h);padding:0 16px;border-radius:var(--r-m);border:0;font-size:14px;font-weight:620;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;text-decoration:none;
  background:var(--raised);color:var(--ink);transition:transform var(--t-fast) ease-out,background-color var(--t) ease-out,color var(--t) ease-out;position:relative;flex:none}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;flex:none}
.btn-sm{--h:32px;padding:0 12px;font-size:13px;border-radius:10px}
.btn-lg{--h:48px;padding:0 20px;font-size:15px}
.btn-block{width:100%}
.btn-icon{width:var(--h);padding:0}
/* primary: ink (the portal's one commit may be ink; yellow stays the driver's) */
.btn-ink{background:var(--btn-ink);color:var(--on-btn-ink)}
/* secondary: raised with a line */
.btn-s{background:var(--raised);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(var(--cast),.08)}
/* ghost: no chrome until hover */
.btn-ghost{background:transparent;color:var(--ink-2)}
/* danger: failed-red with its word */
.btn-danger{background:var(--raised);color:var(--bad);box-shadow:0 0 0 1px color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn-danger.is-solid{background:var(--bad);color:#fff;box-shadow:none}
/* the driver's commit (signal yellow, the ONE job) */
.btn-sig{background:var(--sig);color:var(--on-sig)}
@media (hover:hover){
  .btn-ink:hover{background:color-mix(in srgb,var(--btn-ink) 86%,var(--page))}
  .btn-s:hover{background:var(--inset)}
  .btn-ghost:hover{background:var(--inset);color:var(--ink)}
  .btn-danger:hover{background:var(--bad-bg)}
  .btn-sig:hover{background:var(--sig-300)}
}
.btn-ink.is-hover{background:color-mix(in srgb,var(--btn-ink) 86%,var(--page))}
.btn-s.is-hover,.btn-ghost.is-hover{background:var(--inset);color:var(--ink)}
.btn-danger.is-hover{background:var(--bad-bg)}
.btn-sig.is-hover{background:var(--sig-300)}
.btn:focus-visible,.btn.is-focus{outline:none;box-shadow:0 0 0 2px var(--page),0 0 0 4px var(--focus)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--inset);color:var(--ink-3);box-shadow:none;cursor:not-allowed;transform:none}
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"] .lring{width:16px;height:16px}

/* ===== Loading ring (the motif: a ring filling) ===== */
.lring{width:20px;height:20px;transform:rotate(-90deg);flex:none}
.lring circle{fill:none;stroke-width:2.4}
.lring .tr{stroke:currentColor;opacity:.2}
.lring .fl{stroke:currentColor;stroke-linecap:round;stroke-dasharray:56.55;stroke-dashoffset:56.55;animation:lring 1.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes lring{0%{stroke-dashoffset:56.55}70%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:48px 16px;color:var(--ink-3);font-size:13.5px;font-weight:520}
.loading .lring{width:32px;height:32px;color:var(--ink-2)}
/* skeleton lines */
.sk{display:block;height:12px;border-radius:6px;background:var(--inset);position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);animation:sk 1.4s ease-in-out infinite}
:root[data-theme="dark"] .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}}
@keyframes sk{to{transform:translateX(100%)}}
.sk.t{height:22px;width:60%;border-radius:8px}
.sk.r{height:36px;border-radius:var(--r-m)}

/* ===== Hold-to-send key (driver commit) ===== */
.keys{display:grid;grid-template-columns:92px 1fr;gap:10px}
.key{height:64px;padding:0 18px;min-width:0;white-space:nowrap;border-radius:22px;border:0;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform var(--t-fast) ease-out,background-color var(--t) ease-out;font-family:var(--font)}
.key-fail,.key.fail{background:var(--g3);color:var(--g-ink);font-size:16px;font-weight:620}
.key-commit,.key.commit{background:var(--sig);color:var(--on-sig);touch-action:pan-y}
@media (hover:hover){.key-commit:hover,.key.commit:hover{background:var(--sig-300)}.key-fail:hover,.key.fail:hover{background:var(--g4)}}
.key-commit.is-hover{background:var(--sig-300)}
.key-commit:active,.key-commit.is-held,.key.commit:active,.key.commit.is-held{transform:scale(.97)}
.key-commit:focus-visible,.key-commit.is-focus,.key.commit:focus-visible{outline:none;box-shadow:0 0 0 2px var(--g1),0 0 0 4px var(--sig-200);border-radius:22px}
.key-fail:focus-visible{outline:none;box-shadow:0 0 0 2px var(--g1),0 0 0 4px var(--g-ink-2);border-radius:22px}
.key[disabled]{background:var(--g2);color:var(--g-ink-3);cursor:not-allowed;transform:none}
.key[disabled] .ring .tr{stroke:rgba(255,255,255,.14)}
.key .kl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.key .kl b{font-size:17px;font-weight:620;letter-spacing:-.01em}
.key .kl small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.72;margin-top:3px}
.key.is-held .kl small{opacity:1}
.key .ring{width:26px;height:26px;flex:none;transform:rotate(-90deg)}
.key .ring circle{fill:none;stroke-width:2.4}
.key .ring .tr{stroke:rgba(27,22,0,.22)}
.key .ring .fl{stroke:var(--on-sig);stroke-linecap:round;stroke-dasharray:62.83;stroke-dashoffset:var(--off,62.83)}
.key.is-busy .ring .fl{animation:lring 1.1s cubic-bezier(.4,0,.2,1) infinite;stroke-dasharray:62.83}
.key.is-done{background:var(--g2);color:var(--g-ink)}
.key.is-done .ring .tr{stroke:var(--ok-g)}
.key.is-done .ring .fl{stroke:var(--ok-g);stroke-dashoffset:0}

/* ===== Fields ===== */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>label,.fld .lbl{font-size:12.5px;font-weight:560;color:var(--ink-2);line-height:1.3}
.inp{min-height:40px;width:100%;border-radius:var(--r-m);background:var(--inset);border:0;display:flex;align-items:center;gap:8px;padding:0 12px;
  font-size:15px;line-height:1.3;color:var(--ink);box-shadow:var(--sh-in);transition:box-shadow var(--t) ease-out}
.inp input,.inp select,.inp textarea{flex:1;min-width:0;height:38px;border:0;background:none;outline:none;font-size:15px;color:var(--ink);padding:0}
.inp textarea{height:auto;min-height:76px;padding:10px 0;resize:vertical;line-height:1.45}
input.inp,select.inp,textarea.inp{display:block;outline:none}
textarea.inp{min-height:88px;padding:10px 12px;resize:vertical;line-height:1.45}
.inp::placeholder,.inp input::placeholder,.inp textarea::placeholder{color:var(--ink-3)}
.inp:focus-within,input.inp:focus,select.inp:focus,textarea.inp:focus,.inp.is-focus{box-shadow:var(--sh-in),0 0 0 2px var(--page),0 0 0 4px var(--focus)}
.inp .u{margin-left:auto;color:var(--ink-3);font-size:13px;white-space:nowrap}
.inp svg{width:16px;height:16px;color:var(--ink-3)}
.fld .hint{font-size:12px;color:var(--ink-3);line-height:1.4}
.fld .msg{font-size:12.5px;color:var(--bad);line-height:1.35;display:flex;gap:6px;align-items:flex-start}
.fld.err .inp,.inp.err{box-shadow:inset 0 0 0 1.5px var(--bad)}
.fld.err .inp:focus-within,.fld.err input.inp:focus{box-shadow:inset 0 0 0 1.5px var(--bad),0 0 0 2px var(--page),0 0 0 4px var(--bad)}
.fld.dis .inp,.inp:disabled,.inp.dis{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-3);cursor:not-allowed}
.fld.dis>label{color:var(--ink-3)}
/* select */
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}
.sel::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:rotate(45deg);pointer-events:none}
/* checkbox / radio rows */
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;cursor:pointer}
.chk input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:5px;background:var(--inset);box-shadow:inset 0 0 0 1.5px var(--ink-3);flex:none;margin-top:1px;display:grid;place-items:center;cursor:pointer}
.chk input[type="radio"]{border-radius:50%}
.chk input:checked{background:var(--btn-ink);box-shadow:none}
.chk input:checked::after{content:"";width:9px;height:5px;border-left:2px solid var(--on-btn-ink);border-bottom:2px solid var(--on-btn-ink);transform:translateY(-1px) rotate(-45deg)}
.chk input[type="radio"]:checked::after{width:6px;height:6px;border:0;border-radius:50%;background:var(--on-btn-ink);transform:none}
.chk input:focus-visible{box-shadow:0 0 0 2px var(--page),0 0 0 4px var(--focus)}

/* ===== Segmented control ===== */
.seg{display:inline-flex;background:var(--inset);border-radius:var(--r-m);padding:3px;gap:2px;box-shadow:var(--sh-in);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{border:0;background:none;height:30px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:520;color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:color var(--t) ease-out}
.seg button b{font-weight:620;color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--raised);color:var(--ink);box-shadow:0 1px 2px rgba(var(--cast),.12)}
@media (hover:hover){.seg button:not([aria-pressed="true"]):hover{color:var(--ink)}}
.seg button:focus-visible{box-shadow:0 0 0 2px var(--focus);border-radius:9px}
.seg button[disabled]{color:var(--ink-3);opacity:.6;cursor:not-allowed}
.seg.sm button{height:26px;padding:0 9px;font-size:12.5px}

/* ===== Tabs ===== */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs button{position:relative;border:0;background:none;padding:10px 12px 12px;font-size:14px;font-weight:560;color:var(--ink-2);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-s) var(--r-s) 0 0}
.tabs a[aria-current="page"],.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs a[aria-current="page"]::after,.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--ink)}
@media (hover:hover){.tabs a:not([aria-current="page"]):hover,.tabs button:not([aria-selected="true"]):hover{color:var(--ink)}}
.tabs .ct{font-size:12px;font-weight:600;color:var(--ink-3)}

/* ===== Ring statuses (the motif, always with its word) =====
   filled = Delivered · three-quarter = Collected · half = In transit (amber = Late) · empty = Allocated · broken arc = Failed · dashed = Booked */
.st{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:560;color:var(--ink-2);white-space:nowrap;line-height:1.3}
.st::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.st.ok{color:var(--ok)}.st.ok::before{background:currentColor}
.st.go{color:var(--ink)}
.st.go::before,.st.late::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.st.col{color:var(--ink)}
.st.col::before{background:conic-gradient(currentColor 0 270deg,transparent 0)}
.st.late{color:var(--late)}
.st.al{color:var(--ink-2)}
.st.bad{color:var(--bad)}
.st.bad::before{box-shadow:none;background:conic-gradient(from 40deg,currentColor 0 290deg,transparent 0);-webkit-mask:radial-gradient(circle,transparent 3.4px,#000 3.6px);mask:radial-gradient(circle,transparent 3.4px,#000 3.6px)}
.st.bk{color:var(--ink-3)}
.st.bk::before{box-shadow:none;border:1.5px dashed currentColor}
.st.lg{font-size:14px;gap:9px}
.st.lg::before{width:14px;height:14px;box-shadow:inset 0 0 0 2px currentColor}
.st.lg.bad::before{box-shadow:none;-webkit-mask:radial-gradient(circle,transparent 4.6px,#000 5px);mask:radial-gradient(circle,transparent 4.6px,#000 5px)}
.st.lg.bk::before{box-shadow:none;border-width:2px}
.st .sub{color:var(--ink-3);font-weight:450}
.on-g .st.go,.panel .st.go,.on-g .st.col,.panel .st.col{color:var(--g-ink)}
.on-g .st.al,.panel .st.al{color:var(--g-ink-2)}
.on-g .st.ok,.panel .st.ok{color:var(--ok-g)}
/* status timeline (vertical, rings) */
.stl{list-style:none;display:flex;flex-direction:column}
.stl li{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:start;position:relative;padding-bottom:16px;font-size:14px}
.stl li:last-child{padding-bottom:0}
.stl li::before{content:"";position:absolute;left:8.25px;top:18px;bottom:2px;width:1.5px;background:var(--line)}
.stl li.done::before{background:var(--ink-3)}
.stl li:last-child::before{display:none}
.stl .rg{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-3);margin-top:1px;background:var(--raised);position:relative;z-index:1}
.stl li.done .rg{background:var(--ink);box-shadow:none}
.stl li.now .rg{background:linear-gradient(90deg,var(--ink) 50%,var(--raised) 50%);box-shadow:inset 0 0 0 1.5px var(--ink)}
.stl li.ok .rg{background:var(--ok);box-shadow:none}
.stl li.bad .rg{background:none;box-shadow:none}
.stl li.bad .rg::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 40deg,var(--bad) 0 290deg,transparent 0);-webkit-mask:radial-gradient(circle,transparent 6.4px,#000 6.8px);mask:radial-gradient(circle,transparent 6.4px,#000 6.8px)}
.stl b{font-weight:600;display:block;line-height:1.3}
.stl .d{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.stl .tm{font-size:15px;font-weight:560;letter-spacing:-.02em;text-align:right}
.stl li.todo{color:var(--ink-3)}
.stl li.todo .tm{color:var(--ink-3);font-weight:450}

/* ===== Readout block: big tabular time + state line ===== */
.ro{background:var(--inset);border-radius:var(--r-l);padding:18px 20px;box-shadow:var(--sh-in)}
.ro .t{font-size:52px;line-height:.95;font-weight:540;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ro .t small{font-size:30px;color:var(--ink-3);letter-spacing:-.03em}
.ro .l{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.ro .l b{font-weight:600;color:var(--ink)}
.ro .l b.ok{color:var(--ok)} .ro .l b.late{color:var(--late)} .ro .l b.bad{color:var(--bad)}
.ro p{margin-top:6px;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.ro p b{color:var(--ink);font-weight:600}
.ro .sgn{font-size:12.5px;color:var(--ink-3);margin-top:10px}
.ro .sgn a{color:var(--ink);font-weight:560}
/* graphite readout (inside instruments / the driver app) */
.ro.g{background:var(--g0);color:var(--g-ink);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);display:flex;justify-content:space-between;align-items:flex-end;padding:12px 16px}
.ro.g .t small{color:var(--g-ink-2)}
.ro.g .rl{font-size:12px;font-weight:520;color:var(--g-ink-2);text-align:right;line-height:1.35}
.ro.g .rl b{display:block;color:var(--ok-g-ink);font-weight:600;font-size:12px}
.ro.g .rl b.late{color:#F0A564}.ro.g .rl b.bad{color:#F08C79}.ro.g .rl b.ink{color:var(--g-ink)}
.ro.sm .t{font-size:38px}.ro.sm .t small{font-size:22px}

/* ===== Journey scale ===== */
.jsw{container-type:inline-size;width:100%}
.jscale{display:block;width:100%;height:auto;overflow:visible}
.jscale text{font-family:var(--font)}
.jscale .ax{stroke:var(--ink-3)}
.jscale .hl{fill:var(--ink-3)}
.jscale .b0{fill:var(--inset)}
.jscale .b1{fill:var(--ink-3)}
.jscale .b2{fill:var(--ink)}
.jscale .bp{fill:none;stroke:var(--ink-3);stroke-dasharray:3 3}
.jscale .nd{stroke:var(--ok)}
.jscale .dt{fill:var(--ok);stroke:var(--raised)}
.jscale .mk{fill:var(--raised);stroke:var(--ink-2)}
.jscale .cb{fill:var(--ok-bg)}
.jscale .ct{fill:var(--ok)}
.jscale .sl{fill:var(--ink-3)}
.jscale .sv{fill:var(--ink)}
.jscale .eta{stroke:var(--ink-2);stroke-dasharray:2 2}
.jscale.k-go .nd{stroke:var(--ink)} .jscale.k-go .dt{fill:var(--ink)} .jscale.k-go .cb{fill:var(--inset)} .jscale.k-go .ct{fill:var(--ink)}
.jscale.k-late .nd{stroke:var(--late)} .jscale.k-late .dt{fill:var(--late)} .jscale.k-late .cb{fill:var(--late-bg)} .jscale.k-late .ct{fill:var(--late)} .jscale.k-late .b2{fill:var(--late)}
.jscale.k-bad .nd{stroke:var(--bad)} .jscale.k-bad .dt{fill:var(--bad)} .jscale.k-bad .cb{fill:var(--bad-bg)} .jscale.k-bad .ct{fill:var(--bad)}
.jscale.k-al .cb{fill:var(--inset)} .jscale.k-al .ct{fill:var(--ink-2)} .jscale.k-al .nd{stroke:var(--ink-2)} .jscale.k-al .dt{fill:var(--raised);stroke:var(--ink-2)}
.jscale.js-m{display:none}
@container (max-width:560px){.jscale.js-d{display:none}.jscale.js-m{display:block}}
.scale-h{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--ink-2);margin-bottom:8px;gap:16px;flex-wrap:wrap}
.scale-h .mono{color:var(--ink)}

/* ===== Chips ===== */
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;font-size:12.5px;font-weight:560;white-space:nowrap;
  background:var(--inset);color:var(--ink-2);border:0;line-height:1}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.late{background:var(--late-bg);color:var(--late)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.ink{background:var(--btn-ink);color:var(--on-btn-ink)}
.chip.line{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.chip .mono{font-size:11.5px}
.chip svg{width:14px;height:14px}
button.chip{cursor:pointer;transition:background-color var(--t) ease-out}
button.chip[aria-pressed="true"]{background:var(--btn-ink);color:var(--on-btn-ink)}
@media (hover:hover){button.chip:not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--inset) 70%,var(--line))}}
.chip .x{width:16px;height:16px;margin-right:-4px;border-radius:50%;display:grid;place-items:center;border:0;background:none;color:inherit;padding:0}
.chip .x svg{width:12px;height:12px}

/* ===== Menu / popover ===== */
.pop{position:fixed;z-index:80;min-width:220px;max-width:min(320px,calc(100vw - 16px));background:var(--raised);border-radius:var(--r-l);box-shadow:var(--sh-pop);padding:6px;
  transform-origin:var(--ox,top right);animation:pop-in 140ms ease-out}
@keyframes pop-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.pop.static{position:relative;animation:none;z-index:auto}
.menu{display:flex;flex-direction:column;gap:1px}
.menu .mh{padding:10px 10px 8px;font-size:12.5px;color:var(--ink-3);line-height:1.35}
.menu .mh b{display:block;color:var(--ink);font-size:13.5px;font-weight:600}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;background:none;border-radius:10px;font-size:13.5px;font-weight:520;color:var(--ink);text-decoration:none;text-align:left;white-space:nowrap}
.menu a svg,.menu button svg{width:16px;height:16px;color:var(--ink-2)}
.menu .kbd{margin-left:auto;font-size:12px;color:var(--ink-3);font-weight:450}
.menu .is-danger{color:var(--bad)}.menu .is-danger svg{color:var(--bad)}
.menu [aria-checked="true"]::after{content:"";margin-left:auto;width:8px;height:8px;border-radius:50%;background:currentColor}
@media (hover:hover){.menu a:hover,.menu button:hover{background:var(--inset)}}
.menu a:focus-visible,.menu button:focus-visible,.menu .is-hover{background:var(--inset);box-shadow:none}
.menu hr{border:0;height:1px;background:var(--line-2);margin:5px 4px}
.menu .theme-row{padding:6px 6px 4px}
.menu .theme-row .seg{width:100%}
.menu .theme-row .seg button{flex:1;justify-content:center}

/* ===== Sheet / dialog (scales in from .96) ===== */
.scrim{position:fixed;inset:0;z-index:90;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:24px;animation:fade-in 160ms ease-out}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.sheet{position:relative;width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;background:var(--raised);border-radius:var(--r-xl);box-shadow:var(--sh-pop);
  animation:sheet-in 180ms var(--ease)}
@keyframes sheet-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.sheet.wide{width:min(820px,100%)}
.sheet-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 0}
.sheet-h h2{font-size:20px;line-height:1.2;letter-spacing:-.02em}
.sheet-h p{font-size:13.5px;color:var(--ink-2);margin-top:4px}
.sheet-b{padding:16px 22px 20px}
.sheet-f{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px 18px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.sheet .x{width:32px;height:32px;border:0;border-radius:10px;background:none;display:grid;place-items:center;color:var(--ink-2);flex:none;margin:-4px -8px 0 0}
.sheet .x svg{width:16px;height:16px}
@media (hover:hover){.sheet .x:hover{background:var(--inset);color:var(--ink)}}
.sheet.static{animation:none;max-height:none}
.scrim.closing{animation:fade-out 140ms ease-in forwards}
.scrim.closing .sheet{animation:sheet-out 140ms ease-in forwards}
@keyframes fade-out{to{opacity:0}}
@keyframes sheet-out{to{opacity:0;transform:scale(.96)}}
@media (max-width:620px){
  .scrim{align-items:flex-end;padding:0}
  .sheet{width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:calc(100vh - 32px);animation:sheet-up 200ms var(--ease)}
  .sheet::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 0}
  .sheet.static::before{display:none}
  .sheet-f .btn{flex:1}
  @keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
}

/* ===== Toast (inline check: the ring closes + tick) ===== */
.toasts{position:fixed;z-index:95;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;min-height:48px;max-width:min(440px,calc(100vw - 32px));padding:10px 12px 10px 12px;border-radius:var(--r-l);
  background:var(--g1);color:var(--g-ink);box-shadow:0 0 0 1px var(--g-rim),0 12px 32px -10px rgba(0,0,0,.45);font-size:13.5px;font-weight:520;line-height:1.35;animation:toast-in 180ms var(--ease)}
.toast.static{animation:none}
@keyframes toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.toast .tk{width:22px;height:22px;flex:none}
.toast .tk .r{fill:none;stroke:var(--ok-g);stroke-width:2;stroke-dasharray:57;stroke-dashoffset:57;animation:tk-r 300ms ease-out forwards;transform:rotate(-90deg);transform-origin:11px 11px}
.toast .tk .c{fill:none;stroke:var(--g-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;animation:tk-c 200ms 260ms ease-out forwards}
.toast.static .tk .r,.toast.static .tk .c{animation:none;stroke-dashoffset:0}
@keyframes tk-r{to{stroke-dashoffset:0}}
@keyframes tk-c{to{stroke-dashoffset:0}}
.toast.bad .tk .r{stroke:#F08C79}
.toast .ta{margin-left:6px;border:0;background:none;color:var(--g-ink);font-weight:620;text-decoration:underline;text-underline-offset:3px;padding:4px 6px;border-radius:8px}
.toast.out{animation:fade-out 160ms ease-in forwards}
@media (max-width:620px){.toasts{left:16px;right:16px;bottom:16px;align-items:stretch}.toast{max-width:none}}

/* inline confirmation (copy/save): a check that draws */
.ok-inline{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:560;color:var(--ok)}
.ok-inline svg{width:16px;height:16px}

/* ===== Empty state (ring motif) ===== */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 24px;color:var(--ink-2)}
.empty .er{width:56px;height:56px;margin-bottom:8px;color:var(--ink-3)}
.empty h3{font-size:18px;font-weight:620;letter-spacing:-.015em;color:var(--ink)}
.empty p{font-size:14px;max-width:44ch;line-height:1.5}
.empty .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.empty.boxed{background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--line)}

/* ===== Table ===== */
.tbl-wrap{background:var(--raised);border-radius:var(--r-l);box-shadow:var(--sh-1);overflow:auto;max-width:100%;position:relative}
.tbl-wrap.fixed{max-height:var(--tbl-h,520px)}
.tbl{width:100%;font-size:13.5px;border-spacing:0}
.tbl caption{text-align:left}
.tbl thead th{position:sticky;top:0;z-index:2;background:var(--raised);height:36px;padding:0 12px;text-align:left;white-space:nowrap;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);box-shadow:inset 0 -1px 0 var(--line-2)}
.tbl th.r,.tbl td.r{text-align:right}
.tbl th .so{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:4px 6px;margin:0 -6px;border-radius:6px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.tbl th .so svg{width:12px;height:12px;opacity:.45}
.tbl th[aria-sort] .so{color:var(--ink)}
.tbl th[aria-sort] .so svg{opacity:1}
.tbl th[aria-sort="descending"] .so svg{transform:rotate(180deg)}
@media (hover:hover){.tbl th .so:hover{color:var(--ink);background:var(--inset)}}
.tbl tbody td{height:36px;padding:0 12px;white-space:nowrap;border-top:4px solid transparent;border-bottom:0;background-clip:padding-box}
.tbl tbody tr{transition:background-color var(--t) ease-out}
.tbl tbody tr td:first-child{border-radius:var(--r-m) 0 0 var(--r-m)}
.tbl tbody tr td:last-child{border-radius:0 var(--r-m) var(--r-m) 0}
.tbl tbody tr[data-href]{cursor:pointer}
@media (hover:hover){.tbl tbody tr:hover td{background:var(--inset)}}
.tbl tbody tr.is-hover td{background:var(--inset)}
.tbl tbody tr.is-sel td,.tbl tbody tr[aria-selected="true"] td{background:var(--card);box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.tbl tbody tr.is-sel td:first-child,.tbl tbody tr[aria-selected="true"] td:first-child{box-shadow:inset 1px 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.tbl tbody tr.is-sel td:last-child,.tbl tbody tr[aria-selected="true"] td:last-child{box-shadow:inset -1px 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.tbl td .mono{color:var(--ink-2)}
.tbl td a.mono{text-decoration:none;color:var(--ink-2)}
.tbl td a.mono:focus-visible{border-radius:4px}
.tbl .tm{font-size:15px;font-weight:560;letter-spacing:-.02em}
.tbl .num{font-variant-numeric:tabular-nums}
.tbl .ell{max-width:280px;overflow:hidden;text-overflow:ellipsis}
.tbl .dim{color:var(--ink-3)}
.tbl tr.grp td{height:30px;padding-top:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:none!important;cursor:default}
.tbl-wrap .empty{padding:40px 16px}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line-2)}

/* ===== Key/value ===== */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:13.5px;color:var(--ink)}
.kv dt{color:var(--ink-3);font-weight:450}
.kv dd{min-width:0}
.addr-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.addr-pair .dl{font-size:12px;color:var(--ink-3);margin-bottom:3px}
.addr-pair b{display:block;color:var(--ink);font-weight:600}
@media (max-width:620px){.addr-pair{grid-template-columns:1fr}}

/* ===== Handset frame (driver app) ===== */
.handset{position:relative;width:362px;height:782px;border-radius:var(--r-hs);flex:none;
  background:linear-gradient(150deg,#30353B 0%,#1C1F22 45%,#16181A 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 1.5px 1.5px 0 rgba(255,255,255,.12),0 0 0 1px var(--g-rim),
    1px 2px 1px rgba(var(--cast),.30),4px 7px 6px -1px rgba(var(--cast),.22),22px 34px 42px -8px rgba(var(--cast),.28)}
.hs-screen{position:absolute;inset:12px;border-radius:32px;overflow:hidden;background:var(--g1);color:var(--g-ink);display:flex;flex-direction:column;font-size:14px}
.hs-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 0;height:34px;font-size:13px;font-weight:600;color:var(--g-ink-2);flex:none}
.hs-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;scrollbar-width:none}
.hs-body::-webkit-scrollbar{display:none}
.hs-home{width:128px;height:5px;border-radius:3px;background:var(--g-ink);opacity:.8;margin:6px auto 8px;flex:none}
.hs-stage{display:flex;justify-content:center;padding:24px 0 40px}
/* driver app full-screen at phone width: add .is-app */
@media (max-width:620px){
  .handset.is-app{width:100%;height:auto;min-height:calc(100dvh - var(--top-h));border-radius:0;background:var(--g1);box-shadow:none}
  .handset.is-app .hs-screen{position:relative;inset:auto;border-radius:0;min-height:inherit}
  .handset.is-app .hs-bar,.handset.is-app .hs-home{display:none}
  .hs-stage{padding:0}
}
/* graphite surfaces inside the handset */
.g-step{display:flex;gap:12px;align-items:center;background:var(--g2);border-radius:14px;padding:12px 14px;min-height:56px}
.g-step .txt{flex:1;font-size:13px;color:var(--g-ink-2);line-height:1.35;min-width:0}
.g-step .txt b{display:block;color:var(--g-ink);font-weight:600;font-size:14.5px}
.led{width:10px;height:10px;border-radius:50%;background:var(--ok-g);flex:none}
.led.off{background:none;box-shadow:inset 0 0 0 1.5px var(--g4)}

/* ===== POD mini document ===== */
.podm{background:var(--raised);border-radius:var(--r-l);box-shadow:var(--sh-3);color:var(--ink);text-align:left}
.podm .doc-in{padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px}
.d-head{display:flex;align-items:center;gap:10px}
.d-head .mark{font-size:17px}
.d-head .ttl{font-size:13.5px;font-weight:520;color:var(--ink-2)}
.d-head .mono{margin-left:auto;color:var(--ink-2)}
.d-out{font-size:15px;line-height:1.3;font-weight:620;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.d-ref{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--ink-2);margin-top:-4px;flex-wrap:wrap}
.d-ref .mono{color:var(--ink)}
.d-addr{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:13px;line-height:1.38;color:var(--ink-2)}
.d-addr .dl{font-size:12px;color:var(--ink-3);margin-bottom:2px}
.d-addr b{display:block;color:var(--ink);font-weight:600;font-size:13px}
.d-media{display:grid;grid-template-columns:140px 1fr;gap:10px}
.d-media figure{margin:0;min-width:0}
.d-media img{width:100%;height:86px;object-fit:cover;border-radius:10px;background:var(--inset)}
.d-media figcaption{font-size:12px;color:var(--ink-3);margin-top:4px}
.d-sig{position:relative;min-height:86px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 12px 8px;border-radius:var(--r-m);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.d-sig .sig{position:absolute;left:10px;top:6px;width:min(150px,80%);height:auto;color:var(--ink)}
.d-sig .who{position:relative;font-size:12px;line-height:1.3;color:var(--ink);font-weight:560}
.d-sig .at{position:relative;font-size:12px;color:var(--ink-3);margin-top:2px}
.d-sig.hidden-sig{justify-content:center;align-items:center;text-align:center;color:var(--ink-3);font-size:12.5px;padding:12px}
.d-note{font-size:13px;color:var(--ink-2)}
.d-drv{font-size:12px;color:var(--ink-2);display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.d-gen{font-size:12px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:10px}
.d-gen b{color:var(--ink);font-weight:560}
@media (max-width:420px){.d-addr{grid-template-columns:1fr}.d-media{grid-template-columns:1fr 1fr}}

/* ===== Route map (graphite instrument, monochrome) ===== */
.rmw{container-type:inline-size;width:100%}
.rmw .rm-m{display:none}
@container (max-width:560px){.rmw .rm-d{display:none}.rmw .rm-m{display:block}}
.rmap{position:relative;overflow:hidden;border-radius:var(--r-xl)}
.rmap svg{display:block;width:100%;height:auto}
.rmap .grid{fill:var(--g3)}
.rmap .ctx{fill:none;stroke:var(--g3);stroke-width:1.2}
.rmap .ctx-l{fill:var(--g-ink-3);font-size:11px;font-family:var(--font)}
.rmap .ctx-d{fill:var(--g4)}
.rmap .rt-all{fill:none;stroke:var(--g4);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rmap .rt-done{fill:none;stroke:var(--g-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rmap .rt-left{fill:none;stroke:var(--g-ink-2);stroke-width:2;stroke-dasharray:1 6;stroke-linecap:round}
.rmap .end{fill:var(--g1);stroke:var(--g-ink);stroke-width:2}
.rmap .end.to{fill:var(--g-ink)}
.rmap .lbl{fill:var(--g-ink);font-size:13px;font-weight:600;font-family:var(--font)}
.rmap .lbl2{fill:var(--g-ink-2);font-size:11.5px;font-family:var(--font)}
.rmap .shield rect{fill:var(--g2);stroke:var(--g4)}
.rmap .shield text{fill:var(--g-ink-2);font-size:11px;font-weight:600;font-family:var(--font)}
.rmap .needle{stroke:var(--g-ink);stroke-width:2}
.rmap .van{fill:var(--g1);stroke:var(--g-ink);stroke-width:2.5}
.rmap .van-c{fill:var(--g-ink)}
.rmap .van-l rect{fill:var(--g0)}
.rmap .van-l text{fill:var(--g-ink);font-size:12px;font-weight:600;font-family:var(--font)}
.rmap.k-ok .needle{stroke:var(--ok-g)}.rmap.k-ok .van{stroke:var(--ok-g)}.rmap.k-ok .van-c{fill:var(--ok-g)}
.rmap.k-late .needle{stroke:#F0A564}.rmap.k-late .van{stroke:#F0A564}.rmap.k-late .van-c{fill:#F0A564}
.rmap.k-bad .needle{stroke:#F08C79}.rmap.k-bad .van{stroke:#F08C79}.rmap.k-bad .van-c{fill:#F08C79}
.rmap-f{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px 14px;font-size:12.5px;color:var(--g-ink-2);flex-wrap:wrap}
.rmap-f b{color:var(--g-ink);font-weight:600}

/* ===== Portal row (customer's job row) ===== */
.prow{position:relative;background:var(--raised);border-radius:var(--r-l);padding:12px 14px 14px;box-shadow:0 0 0 1px var(--prow-line),0 1px 2px rgba(var(--cast),.10),4px 8px 20px -10px rgba(var(--cast),.20)}
.prow-h{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink-3);margin-bottom:8px}
.prow-m{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;height:36px;padding:0 10px;margin:0 -4px;border-radius:var(--r-m);background:var(--card)}
.prow-m .rt{font-size:13.5px;font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Area stub ===== */
.stub{padding-top:40px;padding-bottom:24px}
.stub .empty{padding:72px 24px}

/* ===== Hero tracking field (also used by track view) ===== */
.trackf{max-width:430px}
.trackf label{display:block;font-size:13.5px;font-weight:560;margin-bottom:8px}
.trackf .field{display:flex;align-items:center;height:52px;border-radius:var(--r-m);background:var(--inset);box-shadow:var(--sh-in);padding:0 6px 0 14px;gap:8px;transition:box-shadow var(--t) ease-out}
.trackf .field:focus-within{box-shadow:var(--sh-in),0 0 0 2px var(--page),0 0 0 4px var(--focus)}
.trackf .field input{flex:1;min-width:0;height:100%;border:0;background:none;font-size:16px;color:var(--ink);outline:none}
.trackf .field input::placeholder{color:var(--ink-3)}
.trackf .msg{font-size:13.5px;margin-top:10px;color:var(--ink-2);min-height:21px}
.trackf .msg.bad{color:var(--bad)}
.trackf .msg b{color:var(--ink);font-weight:600}

/* ===== Theme switch ===== */
.theme{display:inline-flex;background:var(--inset);border-radius:var(--r-m);padding:3px;gap:2px}
.theme button{border:0;background:none;height:28px;padding:0 10px;border-radius:9px;font-size:12.5px;font-weight:520;color:var(--ink-2)}
.theme button[aria-pressed="true"]{background:var(--raised);color:var(--ink);box-shadow:0 1px 2px rgba(var(--cast),.12)}

@media (prefers-reduced-motion:reduce){
  .btn,.key,.seg button,.tbl tbody tr,.chip,.inp{transition:none}
  .pop,.sheet,.scrim,.toast{animation:fade-in 120ms linear}
  .scrim.closing,.scrim.closing .sheet,.toast.out{animation:fade-out 120ms linear forwards}
  .sk::after{animation:none}
  .lring .fl{animation:none;stroke-dashoffset:14}
  .toast .tk .r,.toast .tk .c{animation:none;stroke-dashoffset:0}
}