/* Concourz — dark salon theme: near-black, teal, Fjalla One / Lato / Roboto Condensed */
/* The typefaces, served from this site (Latin subset, SIL Open Font License: fonts/OFL-*.txt). No request leaves for a
   font server, and the service worker keeps them, so an offline shop tablet never falls back mid-shift. */
@font-face{font-family:'Fjalla One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fjalla-one-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lato-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lato-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/lato-900.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/roboto-condensed-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Fallback faces sized to the webfonts' measured width and vertical metrics (canvas, Chrome 152), so the swap is invisible. */
@font-face{font-family:'Fjalla Fallback';src:local('Arial');size-adjust:73.53%;ascent-override:137.37%;descent-override:34%;line-gap-override:0%}
@font-face{font-family:'Condensed Fallback';font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');size-adjust:82.13%;ascent-override:113.24%;descent-override:29.22%;line-gap-override:0%}
@font-face{font-family:'Lato Fallback';font-weight:400;src:local('Arial');size-adjust:96.14%;ascent-override:102.97%;descent-override:21.84%;line-gap-override:0%}
@font-face{font-family:'Lato Fallback';font-weight:700 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');size-adjust:92.54%;ascent-override:106.99%;descent-override:22.69%;line-gap-override:0%}
:root{
  --r-xs:4px;--r-lg:14px;--r-pill:999px;--photo-bg:#0a0c0c;--ov-teal:#61cccb;--accent-glow:#61cccb;--ov-teal-line:#107c7c;--ov-warn:#e6b450;--ov-bad:#f0746a;

  --bg:#060606;--s1:#0e1010;--s2:#151818;--s3:#1d2121;--line:#262b2b;--line2:#353c3c;
  --ink:#fff;--ink2:#c9cdcd;--ink3:#8f9696;
  --teal:#61cccb;--teal2:#29aab1;--teal3:#107c7c;--tealbg:#0c2b2b;
  --ok:#5cc246;--okbg:#12290d;--warn:#e6b450;--warnbg:#2e2408;--bad:#f0746a;--badbg:#321210;--info:#7fb2e8;--infobg:#0e2033;
  --disp:'Fjalla One','Fjalla Fallback',Impact,sans-serif;--cond:'Roboto Condensed','Condensed Fallback','Lato',sans-serif;--body:'Lato','Lato Fallback',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-in:cubic-bezier(.5,0,.8,.2);--d1:120ms;--d2:220ms;--d3:380ms;
  --r:10px;--r2:6px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  color-scheme:dark;
  /* type scale: 12 steps plus the 16px input size (iOS zooms into anything smaller). 11px is the floor. */
  --t-2xs:.6875rem;--t-xs:.75rem;--t-sm:.8125rem;--t-md:.875rem;--t-base:.9375rem;--t-input:1rem;--t-lg:1.0625rem;--t-xl:1.25rem;--t-2xl:1.5rem;--t-3xl:1.75rem;--t-4xl:2.25rem;--t-5xl:2.75rem;--t-6xl:3.5rem;
  /* tracking: tight for big numerals, display for Fjalla, caps for condensed labels, wide for eyebrows */
  --tr-tight:.01em;--tr-display:.04em;--tr-caps:.12em;--tr-wide:.16em;
  --lh-tight:1.04;

  --ph:#7b8181;--on-accent:#041313;--accent-hover:#7ddad9;--on-bad:#000;--tint-1:#0b1f1f;--tint-2:#0c2424;--tint-3:#0f3c3c;--hero-glow:#123a3a;--warn-line:#5a4510;--bad-line:#6d2a25;--info-line:#1d3b5c;--bar-bg:rgba(6,6,6,.92);--tabs-bg:rgba(14,16,16,.97);--day-sub:#0a3b3b;--sw-ring:rgba(255,255,255,.28);--scroll-shadow:rgba(0,0,0,.6);--toast-bg:#fff;--toast-ink:#000;--st-booked:#8f9696;--st-checkedin:#7fb2e8;--st-inprogress:#61cccb;--st-qc:#e6b450;--st-ready:#5cc246;--st-delivered:#4a5252;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-base)/1.5 var(--body);-webkit-text-size-adjust:100%}
body{min-height:100vh;overflow-x:hidden}
html{font-size:100%}   /* the reader's own default text size; every type token is rem */
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:var(--tr-display);margin:0;line-height:1.15}
h1{font-size:var(--t-4xl)}h2{font-size:var(--t-2xl)}h3{font-size:var(--t-lg);letter-spacing:var(--tr-display)}h4{font-size:var(--t-xs);letter-spacing:var(--tr-caps);color:var(--teal)}
p{margin:0 0 10px}a{color:var(--teal)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:var(--r-xs)}
@media (forced-colors:active){:focus-visible{outline:3px solid CanvasText}.btn,.chip,.carid,.slot,.dayb,.opt{forced-color-adjust:none;border:1px solid CanvasText}}
::selection{background:var(--teal);color:var(--on-accent)}
.skip{position:absolute;left:-999px;top:0;background:var(--teal);color:var(--on-accent);padding:8px 12px;z-index:99}.skip:focus{left:8px;top:8px}
.muted{color:var(--ink3)}.ink2{color:var(--ink2)}.teal{color:var(--teal)}.right{text-align:right}.center{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:var(--tr-display)}
.eyebrow{font:700 var(--t-2xs)/1 var(--cond);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--teal)}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.side{background:var(--s1);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow:auto;padding:18px 12px;display:flex;flex-direction:column;gap:4px}
.brand{display:block;padding:4px 8px 16px;text-decoration:none;color:var(--ink)}
.brand b{text-wrap:balance;display:block;font:400 var(--t-3xl)/1 var(--disp);letter-spacing:var(--tr-display);text-transform:uppercase}
.brand b i{font-style:normal;color:var(--teal)}
.brand span{font:700 var(--t-2xs)/1 var(--cond);letter-spacing:.3em;color:var(--ink3);text-transform:uppercase;display:block;margin-top:8px}
.nav-g{font:700 var(--t-2xs)/1 var(--cond);letter-spacing:var(--tr-wide);color:var(--ink3);text-transform:uppercase;padding:14px 10px 6px}
.nav a{transition:background var(--d2) var(--ease),color var(--d2) var(--ease);display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r2);color:var(--ink2);text-decoration:none;font:700 var(--t-sm)/1 var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase}
.nav a svg{width:18px;height:18px;flex:none;opacity:.85}
.nav a:hover{background:var(--s2);color:var(--ink)}
.nav a[aria-current=page]{background:var(--tealbg);color:var(--teal)}
.nav a .ct{margin-left:auto;background:var(--s3);color:var(--ink2);border-radius:var(--r-pill);padding:4px 8px;font-size:var(--t-2xs);letter-spacing:0}
.nav a[aria-current=page] .ct{background:var(--teal3);color:#fff}
.side-foot{margin-top:auto;padding:12px 8px 0;font-size:var(--t-xs);color:var(--ink3)}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:18px 26px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bar-bg);backdrop-filter:blur(8px);z-index:20;padding-top:calc(14px + var(--safe-t))}
.top .ttl{min-width:0;flex:1}
.top .ttl h1{font-size:var(--t-3xl);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .ttl .sub{font-size:var(--t-sm);color:var(--ink3);margin-top:2px}
.top .mbrand{display:none}
#view{padding:22px 26px 60px;outline:none;max-width:1500px;width:100%}
#view.enter>*{animation:rise var(--d3) var(--ease) both}@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.kpis>*{animation:rise var(--d3) var(--ease) both}.kpis>*:nth-child(2){animation-delay:40ms}.kpis>*:nth-child(3){animation-delay:80ms}.kpis>*:nth-child(4){animation-delay:120ms}
.kpi .v{font-variant-numeric:tabular-nums}
.tabs{display:none}
.demo-strip{background:var(--warnbg);color:var(--warn);border:1px solid var(--warn-line);border-radius:var(--r2);padding:8px 12px;font-size:var(--t-sm);display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.demo-strip button{margin-left:auto}

/* ---------- primitives ---------- */
.btn{transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease),transform var(--d1) var(--ease),opacity var(--d2) var(--ease);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r2);border:1px solid var(--teal);background:var(--teal);color:var(--on-accent);font:700 var(--t-sm)/1 var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:not([disabled]):hover{background:var(--accent-hover)}.btn:not([disabled]):active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--teal);border-color:var(--teal3)}.btn.ghost:not([disabled]):hover{background:var(--tealbg)}
.btn.quiet{background:var(--s2);border-color:var(--line2);color:var(--ink)}.btn.quiet:not([disabled]):hover{background:var(--s3)}
.btn.danger{background:transparent;border-color:var(--bad-line);color:var(--bad)}.btn.danger:not([disabled]):hover{background:var(--badbg)}
.btn.sm{min-height:32px;padding:0 12px;font-size:var(--t-xs)}.btn.lg{min-height:54px;padding:0 28px;font-size:var(--t-input);letter-spacing:var(--tr-caps)}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}.btn[aria-busy=true]{opacity:.7;cursor:progress}
.btn svg{width:16px;height:16px}
.card{transition:border-color var(--d2) var(--ease);background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card.flush{padding:0;overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.card-h h3{flex:1 1 auto;min-width:min(100%,180px)}
.card.flush .card-h{padding:14px 16px;margin:0;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.row{display:flex;align-items:center;gap:10px}.row.wrap{flex-wrap:wrap}.sp{flex:1}
.stack{display:flex;flex-direction:column;gap:10px}/* one caps label: every small uppercase label in the product (was repeated in 18 rules, two line-heights) */
.chip,.field label,.lbl,.tbl th,.kpi .k,.pipe a span,.day-h span,.ev .tagm,.kv div>span,.stepper span,.pt .tag,.pt.add,.tl time,.steps span,.dayb span,.ev .tags,.find-head,.find-kind,.ev .tagw{font:700 var(--t-2xs)/1.2 var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase}

.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--r-pill);background:var(--s3);color:var(--ink2);white-space:nowrap}
.chip.teal{background:var(--tealbg);color:var(--teal)}.chip.ok{background:var(--ok);color:var(--on-accent)}.chip.warn{background:var(--warnbg);color:var(--warn)}.chip.bad{background:var(--badbg);color:var(--bad)}.chip.info{background:var(--infobg);color:var(--info)}
.chip svg{width:12px;height:12px}
.carid{font:700 var(--t-sm)/1 ui-monospace,Menlo,monospace;letter-spacing:var(--tr-caps);color:var(--teal);background:var(--tealbg);border:1px solid var(--teal3);padding:4px 8px;border-radius:var(--r-xs);white-space:nowrap}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label,.lbl{color:var(--ink3)}
.inp,select.inp,textarea.inp{width:100%;min-height:42px;background:var(--s2);border:1px solid var(--line2);border-radius:var(--r2);padding:8px 12px;font-size:var(--t-input);color:var(--ink)}
textarea.inp{min-height:84px;resize:vertical;line-height:1.4}
.inp:focus{outline:2px solid var(--teal);outline-offset:0;border-color:var(--teal)}
.inp::placeholder{color:var(--ph)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.fgrid .full{grid-column:1/-1}
.fgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.check{display:flex;gap:10px;align-items:flex-start;padding:8px 0;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--teal);flex:none;margin-top:1px}
/* film record dialog: one section per kind of film, panels in columns */
.film-sec{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 16px;margin:0 0 16px}
.film-sec legend{padding:0 8px;font:700 var(--t-xs)/1 var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink2)}
.film-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 16px}
.film-grid .check{padding:4px 0}
/* damage to quote: each recorded note beside the repair it needs */
.dq{display:grid;gap:12px}
.dq-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dq-note{display:grid;gap:4px}
.dq-pick{display:flex;gap:8px}
.dq-pick select{flex:1;min-width:0}
.dq-pick .num-inp{width:64px;flex:none}
/* accounts: fixed prices in two columns, the batch table stays compact */
.acct-rates{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 16px}
.acct-rate{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0}
.acct-rate .num-inp{width:88px;flex:none}
/* what a shop account adds, before there is one: visible, plainly not usable yet */
.acct-soon{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.acct-soon b{color:var(--ink2)}
.acct-soon .btn{flex:none}
@media (max-width:520px){.acct-soon{flex-direction:column}}
.tbl.batch td{padding:4px}
.tbl.batch .inp{min-width:84px}
.tbl.batch .num-inp{width:72px;min-width:72px}
@media (max-width:620px){.dq-row{grid-template-columns:minmax(0,1fr)}}
.switch{appearance:none;width:42px;height:24px;border-radius:var(--r-pill);background:var(--s3);border:1px solid var(--line2);position:relative;cursor:pointer;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ink3);transition:transform .15s}
.switch:checked{background:var(--teal3);border-color:var(--teal)}.switch:checked::after{transform:translateX(18px);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--t-md)}
.tbl th{color:var(--ink3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr.link{cursor:pointer}.tbl tbody tr.link:hover{background:var(--s2)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tscroll{overflow-x:auto}
.empty{padding:34px 16px;text-align:center;color:var(--ink3)}
.empty b{display:block;color:var(--ink2);font:400 var(--t-xl) var(--disp);text-transform:uppercase;letter-spacing:var(--tr-display);margin-bottom:4px}
.seg{display:inline-flex;background:var(--s2);border:1px solid var(--line2);border-radius:var(--r2);padding:4px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--ink2);padding:8px 12px;border-radius:var(--r-xs);cursor:pointer;font:700 var(--t-xs)/1 var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase}
.seg button[aria-pressed=true]{background:var(--teal);color:var(--on-accent)}
.search{position:relative;min-width:200px;flex:1;max-width:360px}
.search input{padding-left:36px}.search svg{position:absolute;left:11px;top:12px;width:18px;height:18px;color:var(--ink3)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--s3);color:var(--ink);font:700 var(--t-xs) var(--cond);flex:none;letter-spacing:var(--tr-display)}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.kpi{background:var(--s1);border:1px solid var(--line);border-top:3px solid var(--line2);border-radius:var(--r);padding:16px 18px 18px;min-width:0;text-decoration:none;color:inherit;display:block}
a.kpi{transition:border-color var(--d2) var(--ease),transform var(--d2) var(--ease)}a.kpi:hover{border-color:var(--teal3);transform:translateY(-2px)}
.kpi .k{color:var(--ink3)}
.kpi .v{font:400 var(--t-5xl)/1 var(--disp);margin-top:10px;letter-spacing:var(--tr-tight);font-variant-numeric:tabular-nums}
.kpi .d{font-size:var(--t-sm);color:var(--ink3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .d.up{color:var(--ok)}.kpi .d.down{color:var(--bad)}
.kpi.hot{border-color:var(--teal3);border-top-color:var(--teal);background:linear-gradient(180deg,var(--tint-2),var(--s1))}.kpi.hot .v{color:var(--teal);font-size:var(--t-6xl)}

/* ---------- pipeline + board ---------- */
.pipe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;border-radius:var(--r2);overflow:hidden}
.pipe a{background:var(--s2);padding:16px 8px 14px;border-top:3px solid transparent;text-align:center;text-decoration:none;color:var(--ink)}
.pipe a:hover{background:var(--s3)}
.pipe a b{display:block;font:400 var(--t-4xl)/1 var(--disp)}
.pipe a span{color:var(--ink3);display:block;margin-top:6px}
.pipe a.on{border-top-color:var(--stage,var(--teal))}.pipe a.on b{color:var(--stage,var(--teal))}
.board{display:grid;grid-template-columns:repeat(6,minmax(230px,1fr));gap:12px;overflow-x:auto;padding-bottom:12px;align-items:start}
.col{background:var(--s1);border:1px solid var(--line);border-top:4px solid var(--stage,var(--line2));border-radius:var(--r);min-height:200px}
.col{transition:border-color var(--d2) var(--ease),background var(--d2) var(--ease)}.col.over{border-color:var(--teal);background:var(--tint-1)}
.col-h{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;border-bottom:1px solid var(--line);position:sticky;top:0}
.col-h h3{font-size:var(--t-md);letter-spacing:var(--tr-caps);flex:1}.col-h .chip{font-size:var(--t-xs)}
.col-h .dot{width:8px;height:8px;border-radius:50%}
.col-b{padding:10px;display:flex;flex-direction:column;gap:10px}
.jc{background:var(--s2);border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden;cursor:grab}
.jc{transition:border-color var(--d2) var(--ease),transform var(--d2) var(--ease),box-shadow var(--d2) var(--ease),opacity var(--d2) var(--ease)}.jc:hover{border-color:var(--teal3);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.45)}.jc.dragging{opacity:.4;transform:scale(.98)}
.jc.moved{animation:landed var(--d3) var(--ease) both}@keyframes landed{0%{transform:translateY(-8px);box-shadow:0 0 0 2px var(--teal)}100%{transform:none;box-shadow:0 0 0 0 transparent}}
.jc .ph{aspect-ratio:16/8;background:var(--photo-bg);position:relative;overflow:hidden}
.jc .ph img{width:100%;height:100%;object-fit:cover;display:block}
.jc .ph>div svg{width:30px;height:30px}
.jc .ph .carid{position:absolute;left:8px;top:8px;background:rgba(6,6,6,.85)}
.jc .ph .chip{position:absolute;right:8px;top:8px}
.jc .bd{padding:10px}
.jc .bd b{display:block;font:400 var(--t-lg)/1.15 var(--disp);text-transform:uppercase;letter-spacing:var(--tr-display)}
.jc .bd .svc{font-size:var(--t-sm);color:var(--ink2);margin-top:2px}
.jc .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.jc .acts{display:flex;gap:6px;padding:0 10px 10px}
.jc .acts .btn{flex:1}
.prog{height:5px;background:var(--s3);border-radius:var(--r-xs);overflow:hidden;margin-top:8px}.prog i{display:block;height:100%;background:var(--teal);border-radius:var(--r-xs);transition:width var(--d3) var(--ease)}

/* ---------- lists ---------- */
.li{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;min-width:0}
.li:last-child{border-bottom:0}a.li:hover,button.li:hover{background:var(--s2)}
button.li{width:100%;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer}
.li .t{min-width:0;flex:1}.li .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--t-md)}
.li .t>span{display:block;font-size:var(--t-sm);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .time{font:400 var(--t-xl)/1 var(--disp);width:64px;flex:none;color:var(--ink2)}
.li .thumb{width:64px;height:44px;border-radius:var(--r-xs);overflow:hidden;background:var(--photo-bg);flex:none}
.li .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.alert:last-child{border-bottom:0}.alert:hover{background:var(--s2)}
.alert .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none}
.alert .ic svg{width:15px;height:15px}
.alert.warn .ic{background:var(--warnbg);color:var(--warn)}.alert.bad .ic{background:var(--badbg);color:var(--bad)}.alert.info .ic{background:var(--infobg);color:var(--info)}.alert.ok .ic{background:var(--okbg);color:var(--ok)}
.alert b{display:block;font-size:var(--t-md)}.alert span{font-size:var(--t-sm);color:var(--ink3)}

/* ---------- charts ---------- */
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .bar{fill:var(--teal2);transform-box:fill-box;transform-origin:bottom;animation:growy var(--d3) var(--ease) both;transition:fill var(--d1) var(--ease)}@keyframes growy{from{transform:scaleY(0)}}.chart .bar.today{fill:var(--teal)}.chart .bar.hov{fill:var(--accent-hover)}.chart .b:focus-visible{outline:none}.chart .b:focus-visible .bar{fill:var(--accent-hover);stroke:var(--ink);stroke-width:1.5}
.chart-tbl{margin-top:8px}.chart-tbl summary{cursor:pointer;font-size:var(--t-sm);color:var(--ink3)}.chart-tbl table{font-size:var(--t-sm);margin-top:6px}
.chart .ax{font:400 var(--t-2xs) var(--body);fill:var(--ink3)}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .lab{font:700 var(--t-2xs) var(--body);fill:var(--ink2)}
.tip{animation:fadein var(--d1) var(--ease) both;position:absolute;pointer-events:none;background:#000;border:1px solid var(--line2);border-radius:var(--r2);padding:6px 8px;font-size:var(--t-sm);white-space:nowrap;z-index:5;transform:translate(-50%,-100%);margin-top:-8px}
.tip b{display:block;font-size:var(--t-md)}
.hb{display:grid;grid-template-columns:minmax(90px,150px) 1fr auto;gap:10px;align-items:center;padding:6px 0;font-size:var(--t-md)}
.hb .tr{height:10px;background:var(--s3);border-radius:0 4px 4px 0;overflow:hidden}.hb .tr i{display:block;height:100%;background:var(--teal2);border-radius:0 4px 4px 0;transform-origin:left;animation:growx var(--d3) var(--ease) both}@keyframes growx{from{transform:scaleX(0)}}
.hb .n{font-variant-numeric:tabular-nums;color:var(--ink2)}
.hb .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- schedule ---------- */
.week{display:grid;grid-template-columns:repeat(var(--days,5),minmax(170px,1fr));gap:10px;overflow-x:auto;padding-bottom:10px}
.day{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);min-height:260px}
.day.today{border-color:var(--teal3)}
.day-h{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:8px}
.day-h b{font:400 var(--t-3xl)/1 var(--disp)}.day-h span{color:var(--ink3)}
.day.today .day-h b{color:var(--teal)}
.day-b{padding:8px;display:flex;flex-direction:column;gap:6px}
.ev{display:block;text-decoration:none;color:inherit;background:var(--s2);border-left:3px solid var(--stage,var(--teal));border-radius:var(--r-xs);padding:8px 8px;font-size:var(--t-sm)}
.ev:hover{background:var(--s3)}.ev b{display:block;font-size:var(--t-sm)}.ev .tagm{color:var(--info)}.ev.done{opacity:.55}
.ev.multi{border-left-style:dashed}
.load{height:4px;background:var(--s3);margin:0 12px 8px;border-radius:var(--r-pill);overflow:hidden}.load i{display:block;height:100%;background:var(--teal2);transition:width var(--d3) var(--ease)}.load i.full{background:var(--warn)}

/* ---------- job / vehicle detail ---------- */
.hero{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;margin-bottom:16px}
.hero .pic{border-radius:var(--r);overflow:hidden;background:var(--photo-bg);aspect-ratio:4/3;border:1px solid var(--line);position:relative}
.hero .pic img{width:100%;height:100%;object-fit:cover;display:block}
.hero h2{font-size:var(--t-4xl);margin:8px 0 4px;line-height:var(--lh-tight)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:14px}
.kv div>span{display:block;color:var(--ink3)}
.kv div b{font-size:var(--t-input);font-weight:700}
.stepper{display:flex;gap:4px;margin:14px 0 4px}
.stepper div{flex:1;min-width:0}
.stepper i{display:block;height:6px;border-radius:var(--r-pill);background:var(--s3);transition:background var(--d3) var(--ease)}
.stepper .done i{background:var(--teal3)}.stepper .cur i{background:var(--stage,var(--teal))}
.stepper span{display:block;color:var(--ink3);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper .cur span{color:var(--stage,var(--teal))}.stepper .done span{color:var(--ink2)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.pt{position:relative;aspect-ratio:4/3;border-radius:var(--r2);overflow:hidden;background:var(--photo-bg);border:1px solid var(--line);padding:0;cursor:pointer;display:block;width:100%}
.pt img{width:100%;height:100%;object-fit:cover;display:block}
.pt .tag{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.8);padding:4px 6px;border-radius:var(--r-xs)}
.pt .tag.before{color:var(--warn)}.pt .tag.after{color:var(--teal)}.pt .tag.damage{color:var(--bad)}
.pt.add{display:grid;place-items:center;border:1px dashed var(--line2);color:var(--ink3);background:transparent}
.pt.add:hover{border-color:var(--teal);color:var(--teal)}.pt.add svg{width:24px;height:24px;display:block;margin:0 auto 6px}
.ba{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--photo-bg);border:1px solid var(--line);user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba .aft{clip-path:inset(0 0 0 var(--p,50%))}
.ba.hint .aft{animation:sweep 1.4s var(--ease) both}.ba.hint .bar{animation:sweepbar 1.4s var(--ease) both}@keyframes sweep{0%{clip-path:inset(0 0 0 50%)}40%{clip-path:inset(0 0 0 30%)}75%{clip-path:inset(0 0 0 62%)}100%{clip-path:inset(0 0 0 50%)}}@keyframes sweepbar{0%{left:50%}40%{left:30%}75%{left:62%}100%{left:50%}}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.ba .bar::after{content:"◂ ▸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#000;font-size:var(--t-2xs);padding:6px 8px;border-radius:var(--r-pill);white-space:nowrap;letter-spacing:1px}
.ba .l{position:absolute;top:10px;font:700 var(--t-2xs)/1.2 var(--cond);letter-spacing:var(--tr-caps);background:rgba(0,0,0,.75);padding:4px 8px;border-radius:var(--r-xs);pointer-events:none}
.ba .l.b{left:10px;color:var(--warn)}.ba .l.a{right:10px;color:var(--teal)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba:focus-within{outline:2px solid var(--teal);outline-offset:2px}
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--line2);margin-left:6px}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--s3);border:2px solid var(--teal3)}
.tl li.big::before{background:var(--teal);border-color:var(--teal)}
.tl time{display:block;color:var(--ink3)}
.tl b{font-size:var(--t-md)}.tl p{margin:2px 0 0;font-size:var(--t-md);color:var(--ink2)}
.inv td{padding:8px 0;border:0;font-size:var(--t-md)}.inv .num{text-align:right;font-variant-numeric:tabular-nums}
.inv tr.tot td{border-top:2px solid var(--teal3);padding-top:12px;font:400 var(--t-3xl) var(--disp);letter-spacing:var(--tr-display)}
.inv tr.sub td{color:var(--ink2)}
.note{background:var(--s2);border-radius:var(--r2);padding:10px 12px;font-size:var(--t-md)}
.note small{display:block;color:var(--ink3);font-size:var(--t-xs);margin-top:4px}
.timer{font:400 var(--t-5xl)/1 var(--disp);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-display)}
.diagram:focus-visible{outline:2px solid var(--teal)}.diagram{position:relative;background:var(--s2);border-radius:var(--r2);border:1px solid var(--line2);cursor:crosshair;overflow:hidden}
.diagram svg{display:block;width:100%;height:auto}
.pin{position:absolute;width:22px;height:22px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--bad);color:var(--on-bad);font:700 var(--t-2xs)/22px var(--cond);text-align:center;border:0;padding:0;cursor:pointer}

/* ---------- camera / check-in ---------- */
.cam{position:relative;background:#000;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;max-height:64vh;margin:0 auto;border:1px solid var(--line)}
.cam video,.cam img{width:100%;height:100%;object-fit:cover;display:block}
.cam .frame{animation:breathe 3s ease-in-out infinite}@keyframes breathe{0%,100%{border-color:color-mix(in srgb,var(--accent-glow) 75%,transparent)}50%{border-color:color-mix(in srgb,var(--accent-glow) 35%,transparent)}}.cam .frame{position:absolute;inset:9% 7%;border:2px solid color-mix(in srgb,var(--accent-glow) 75%,transparent);border-radius:var(--r-lg);pointer-events:none;box-shadow:0 0 0 2000px rgba(0,0,0,.28)}
.cam .hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:700 var(--t-xs) var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase;text-shadow:0 1px 4px #000;pointer-events:none}
.cam .nocam{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:linear-gradient(180deg,#0e1a1a,#060606)}
.cam-bar{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:14px}
.shutter{width:72px;height:72px;border-radius:50%;border:4px solid #fff;background:var(--teal);cursor:pointer;flex:none}
.shutter:not([disabled]):hover{background:var(--accent-hover)}.shutter[disabled]{opacity:.35;cursor:not-allowed}
.scan{position:absolute;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;text-align:center}
.scan::before{content:"";position:absolute;left:0;right:0;height:3px;background:var(--teal);box-shadow:0 0 18px 4px var(--teal);animation:scan 1.6s ease-in-out infinite}
@keyframes scan{0%,100%{top:8%}50%{top:90%}}
.idcard{border:1px solid var(--teal3);background:linear-gradient(160deg,var(--tint-1),var(--s1) 60%);border-radius:var(--r);padding:18px}
.idcard{animation:idin var(--d3) var(--ease) both}@keyframes idin{from{opacity:0;transform:scale(.97)}}.idcard .big{font:400 var(--t-6xl)/1 var(--disp);letter-spacing:var(--tr-caps);color:var(--teal)}.idcard .big span{display:inline-block;animation:glyph var(--d2) var(--ease) both}@keyframes glyph{from{opacity:0;transform:translateY(6px)}}
.angles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.steps{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.steps span{padding:6px 10px;border-radius:var(--r-pill);background:var(--s2);color:var(--ink3)}
.steps span{transition:background var(--d2) var(--ease),color var(--d2) var(--ease)}.steps span.on{background:var(--teal);color:var(--on-accent)}.steps span.done{background:var(--tealbg);color:var(--teal)}

/* ---------- messages ---------- */
.msg{padding:12px 16px;border-bottom:1px solid var(--line)}
.msg:last-child{border-bottom:0}
.msg .hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px;font-size:var(--t-sm);color:var(--ink3)}
.msg .hd b{color:var(--ink);font-size:var(--t-md)}
.bubble{background:var(--s2);border-radius:12px 12px 12px 3px;padding:10px 12px;font-size:var(--t-md);white-space:pre-wrap;max-width:640px;color:var(--ink2);overflow-wrap:anywhere}
.auto{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.auto:last-child{border-bottom:0}

/* ---------- dialogs ---------- */
dialog{background:var(--s1);color:var(--ink);border:1px solid var(--line2);border-radius:var(--r-lg);padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 40px)}
dialog.wide{width:min(860px,calc(100vw - 24px))}
dialog[open]{animation:dlgin var(--d2) var(--ease) both}@keyframes dlgin{from{opacity:0;transform:translateY(10px) scale(.985)}}dialog[open]::backdrop{animation:fadein var(--d2) var(--ease) both}@keyframes fadein{from{opacity:0}}dialog::backdrop{background:rgba(0,0,0,.7)}
.dlg-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--s1);z-index:2}
.dlg-h h2{flex:1;font-size:var(--t-lg)}
.dlg-b{padding:18px}
.dlg-f{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--s1)}
.x{background:none;border:0;color:var(--ink3);cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center}.x:hover{background:var(--s2);color:var(--ink)}.x svg{width:18px;height:18px}
#toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));transform:translateX(-50%);background:var(--toast-bg);color:var(--toast-ink);padding:10px 16px;border-radius:var(--r-pill);font-weight:700;font-size:var(--t-md);opacity:0;pointer-events:none;transition:opacity .2s;z-index:200;max-width:calc(100vw - 32px);text-align:center}
#toast{transition:opacity var(--d2) var(--ease),transform var(--d2) var(--ease);transform:translate(-50%,8px)}#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- client surfaces ---------- */
body.client .side,body.client .tabs,body.client .top{display:none!important}
body.client .app{display:block}
body.client #view{max-width:none;padding:0}
.c-head{border-bottom:1px solid var(--line);padding:16px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:calc(16px + var(--safe-t))}
.c-head .brand{padding:0}.c-head .brand b{font-size:var(--t-3xl)}
.c-head .info{margin-left:auto;text-align:right;font-size:var(--t-sm);color:var(--ink2)}
.c-hero{padding:48px 20px 34px;text-align:center;background:radial-gradient(ellipse at 50% -20%,var(--hero-glow) 0,transparent 65%)}.c-hero .eyebrow{font-size:var(--t-xs)}.c-hero p{font-size:var(--t-lg)}
.c-hero h1{font-size:var(--t-6xl);line-height:var(--lh-tight);max-width:820px;margin:12px auto 16px}
.c-hero p{color:var(--ink2);max-width:560px;margin:0 auto}
.c-wrap{max-width:980px;margin:0 auto;padding:0 20px 80px}
.c-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.sum{position:sticky;top:16px;border-top:3px solid var(--teal)}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;color:inherit}
.opt{transition:border-color var(--d2) var(--ease),background var(--d2) var(--ease),transform var(--d1) var(--ease)}.opt:not([disabled]):active{transform:scale(.99)}.opt:not([disabled]):hover{border-color:var(--teal3)}.opt[disabled]{opacity:.45;cursor:not-allowed}
.opt[aria-pressed=true],.opt[aria-checked=true]{border-color:var(--teal);background:var(--tint-1);box-shadow:inset 4px 0 0 var(--teal)}
.opt .t{flex:1;min-width:0}.opt .t b{display:block;font:400 var(--t-xl) var(--disp);text-transform:uppercase;letter-spacing:var(--tr-display)}
.opt .t span{display:block;font-size:var(--t-sm);color:var(--ink2);margin-top:4px}
.opt .p{font:400 var(--t-2xl) var(--disp);color:var(--teal);white-space:nowrap;text-align:right}
.opt .p small{display:block;font:400 var(--t-xs) var(--body);color:var(--ink3);letter-spacing:0}
.opts{display:grid;gap:10px}.opts.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.slot,.dayb{transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease),color var(--d1) var(--ease)}.slot{min-height:44px;border-radius:var(--r2);border:1px solid var(--line2);background:var(--s1);cursor:pointer;font:700 var(--t-md) var(--cond);letter-spacing:var(--tr-display)}
.slot:not([disabled]):hover{border-color:var(--teal)}.slot[aria-pressed=true]{background:var(--teal);color:var(--on-accent);border-color:var(--teal)}
.slot[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.days{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px}
.dayb{flex:none;width:74px;padding:10px 4px;border-radius:var(--r2);border:1px solid var(--line2);background:var(--s1);cursor:pointer;text-align:center}
.dayb b{display:block;font:400 var(--t-2xl)/1 var(--disp)}.dayb span{display:block;color:var(--ink3);margin-bottom:4px}
.dayb small{display:block;font-size:var(--t-2xs);color:var(--ink3);margin-top:4px}
.dayb[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:var(--on-accent)}.dayb[aria-pressed=true] span,.dayb[aria-pressed=true] small{color:var(--day-sub)}
.dayb[disabled]{opacity:.35;cursor:not-allowed}
.track{display:flex;flex-direction:column;gap:0;margin:8px 0}
.track .st{display:flex;gap:14px;align-items:flex-start;position:relative;padding-bottom:20px}
.track .st:last-child{padding-bottom:0}
.track .st::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line2)}
.track .st:last-child::before{display:none}
.track .st.done::before{background:var(--teal3)}
.track .b{width:28px;height:28px;border-radius:50%;border:2px solid var(--line2);background:var(--s2);display:grid;place-items:center;flex:none;color:var(--on-accent)}
.track .b svg{width:14px;height:14px}
.track .done .b{background:var(--teal3);border-color:var(--teal3);color:#fff}
.track .b{transition:background var(--d3) var(--ease),border-color var(--d3) var(--ease)}.track .cur .b{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-glow) 18%,transparent);animation:pulse 2.4s var(--ease) infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-glow) 16%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent-glow) 6%,transparent)}}
.track .done .b svg,.track .cur .b svg{animation:popin var(--d3) var(--ease) both}@keyframes popin{from{transform:scale(.4);opacity:0}}
.track .st b{display:block;font:400 var(--t-xl) var(--disp);text-transform:uppercase;letter-spacing:var(--tr-display);color:var(--ink3)}
.track .done b,.track .cur b{color:var(--ink)}
.track .st span{font-size:var(--t-sm);color:var(--ink3)}
.ready-banner{position:relative;overflow:hidden}.ready-banner::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--accent-glow) 18%,transparent),transparent);animation:sheen 1.6s var(--ease) .3s both}@keyframes sheen{to{left:120%}}.ready-banner{background:linear-gradient(135deg,var(--tint-3),var(--tint-2));border:1px solid var(--teal);border-radius:var(--r);padding:18px;margin-bottom:16px}
.ready-banner h2{color:var(--teal);font-size:var(--t-4xl);line-height:var(--lh-tight)}

/* ---------- colour that carries meaning: paint, stage, needs-action ---------- */
.sw{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;vertical-align:-1px;margin-right:8px;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.6),rgba(255,255,255,0) 46%),var(--paint,#5d646a);box-shadow:0 0 0 1.5px var(--sw-ring),0 1px 3px rgba(0,0,0,.6)}
.hero h2 .sw,.c-wrap h2 .sw{width:18px;height:18px;margin-right:12px;vertical-align:.08em}
.jc .bd b .sw{width:11px;height:11px;margin-right:6px;vertical-align:.06em}
label .sw{width:14px;height:14px;margin:0 0 0 6px;vertical-align:-3px}
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-22px 0 auto -26px;height:280px;background:radial-gradient(ellipse at 16% 42%,color-mix(in srgb,var(--paint,#000) 24%,transparent),transparent 64%);pointer-events:none;z-index:-1}
.hero .pic{box-shadow:0 24px 60px -26px color-mix(in srgb,var(--paint,#000) 75%,transparent),0 0 0 1px color-mix(in srgb,var(--paint,var(--line)) 30%,var(--line))}

.load i.busy{background:var(--warn)}.load i.full{background:var(--bad)}
.owed{color:var(--warn);font-variant-numeric:tabular-nums}
.nav a .ct.warn{background:var(--warn);color:var(--on-accent)}
tr.low td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.mob-in{display:none;font-style:normal;font-weight:700;color:var(--info)}
@media (forced-colors:active){.sw{forced-color-adjust:none}}

/* ---------- delight: the shine ---------- */
.glint{position:relative;overflow:hidden}
.glint::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.34) 48%,rgba(255,255,255,.08) 55%,transparent 70%);transform:translateX(-120%);animation:glintx .9s var(--ease) .12s both;pointer-events:none;z-index:4}
@keyframes glintx{to{transform:translateX(120%)}}
.sparks{position:absolute;inset:0;pointer-events:none;z-index:5}
.sparks i{position:absolute;width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:spark .9s var(--ease) both}
.sparks i:nth-child(1){left:18%;top:22%;animation-delay:.2s}.sparks i:nth-child(2){left:72%;top:14%;width:10px;height:10px;animation-delay:.38s}.sparks i:nth-child(3){left:58%;top:58%;width:8px;height:8px;animation-delay:.5s}
@keyframes spark{0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1) rotate(45deg)}100%{opacity:0;transform:scale(.4) rotate(90deg)}}
.cam .flash{position:absolute;inset:0;background:#fff;pointer-events:none;z-index:3;animation:flash .45s ease-out both}@keyframes flash{from{opacity:.85}to{opacity:0}}
.btn:not(.quiet):not(.ghost):not(.danger){position:relative;overflow:hidden}
.btn:not(.quiet):not(.ghost):not(.danger)::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-170%);pointer-events:none}
.btn:not(.quiet):not(.ghost):not(.danger):not([disabled]):hover::after{transform:translateX(280%);transition:transform .75s var(--ease)}
.okmark{width:64px;height:64px;display:block;margin:0 auto 12px}
.okmark circle{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .6s var(--ease) .1s forwards}
.okmark path{fill:none;stroke:var(--teal);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:draw .35s var(--ease) .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ms{font-style:normal;font-weight:700;color:var(--teal)}

/* ---------- overdrive ---------- */
/* shared element: the car photo morphs between card and hero on the same spring the board uses */
::view-transition-group(car-hero){animation-duration:var(--spring-d,480ms);animation-timing-function:var(--spring,cubic-bezier(.2,.7,.2,1))}
::view-transition-image-pair(car-hero){border-radius:var(--r);overflow:hidden}
::view-transition-old(car-hero),::view-transition-new(car-hero){width:100%;height:100%;object-fit:cover}
/* light across clean paint */
.hero .pic::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--lx,30%) var(--ly,25%),rgba(255,255,255,.38),rgba(255,255,255,.1) 22%,transparent 48%);mix-blend-mode:soft-light;opacity:0;transition:opacity .35s var(--ease)}
.hero .pic.lit::before{opacity:1}
/* scroll-driven, no JavaScript: booking progress rail and history reveal */
.c-progress{display:none}
@supports (animation-timeline: scroll()){@media (prefers-reduced-motion:no-preference){
  .c-progress{display:block;position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--teal3),var(--teal));transform-origin:0 50%;animation:cprog linear both;animation-timeline:scroll(root block)}
  .tl li{animation:tlin linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}}
@keyframes cprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tlin{from{opacity:0;transform:translateX(-10px)}}

/* ---------- typeset ---------- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}   /* light text on near-black renders heavy without it on macOS */
h1,h2,h3,h4,.c-hero h1,.ready-banner h2{text-wrap:balance}
p,li,.note,.bubble,.opt .t span{text-wrap:pretty}
.card p,.note{max-width:72ch}
.pipe a b,.kpi .v,.timer,.hb .n,.inv td,.opt .p,.day-h b,.dayb b,.li .time,.carid,.num,.slot,.ev b,.tbl td{font-variant-numeric:tabular-nums}
.inv tr.tot td{font-variant-numeric:tabular-nums}   /* its font: shorthand resets font-variant-numeric and out-specifies the rule above */
.btn.block{white-space:normal;text-wrap:balance;line-height:1.25;padding-top:10px;padding-bottom:10px}   /* full-width buttons wrap instead of clipping their label on phones */

/* ---------- layout: tablet icon rail (861-1279px) ----------
   A 236px sidebar on an iPad in landscape left the job page one column wide, with the timer,
   extra work and invoice 2,473px down. The rail keeps every destination one tap away in 72px. */
@media (min-width:861px) and (max-width:1279px){
  .app{grid-template-columns:72px minmax(0,1fr)}
  .side{padding:16px 8px}
  .brand{padding:4px 0 16px;text-align:center}
  .brand b,.brand span,.nav a>span:not(.ct),.side-foot .nl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .brand::before{content:attr(data-mono);content:attr(data-mono) / "";display:block;font:400 var(--t-2xl)/1 var(--disp);color:var(--teal);letter-spacing:var(--tr-display)}
  .nav-g{height:1px;margin:12px 12px;padding:0;background:var(--line);font-size:0;overflow:hidden}
  .nav a{justify-content:center;padding:12px 0;position:relative}
  .nav a svg{width:22px;height:22px}
  .nav a .ct{position:absolute;top:4px;right:4px;margin:0;padding:1px 5px;font-size:var(--t-2xs)}
  .side-foot{padding:12px 0 0}
  .side-foot .btn{padding:0;min-height:44px}
}
/* our own components set their own spacing instead of inheriting browser defaults (1px/3px on checkboxes, 1px on slot buttons) */
.check input{margin:2px 0 0}
.slot{padding:0 8px}
/* ---------- layout: touch targets on touch screens (44px, Apple HIG / WCAG 2.5.5) ----------
   Shop tablets are used with wet or gloved hands. Mouse and trackpad keep the denser desktop sizes. */
@media (pointer:coarse){
  .btn,.btn.sm,.btn.lg{min-height:44px}
  .seg button{min-height:44px}
  .inp{min-height:44px!important}   /* includes the job page stage select, which carries an inline 32px */
  .check{min-height:44px}
  .x{width:44px;height:44px}
  a.chip{min-height:44px}
  .brand{min-height:44px}
  .pin{width:32px;height:32px;margin:-16px 0 0 -16px;line-height:32px}   /* 32, not 44: pins sit close together on the diagram */
}

/* ---------- adapt: Daylight theme (outdoor mobile work, bright shops) ---------- */
:root[data-theme="light"]{color-scheme:light;--bg:#eef1f1;--s1:#ffffff;--s2:#f3f6f6;--s3:#e4e9e9;--line:#d3dada;--line2:#b9c3c3;--ink:#0a1212;--ink2:#2e3a3a;--ink3:#566262;--ph:#677272;--teal:#0a6e6e;--teal2:#0f8484;--teal3:#0a5a5a;--tealbg:#dcf1f0;--on-accent:#ffffff;--accent-hover:#0c7f7f;--ok:#2a7a1c;--okbg:#e2f2dc;--warn:#8a5800;--warnbg:#fbefd2;--bad:#b42318;--badbg:#fde6e3;--info:#1b5da6;--infobg:#e1ecf8;--on-bad:#ffffff;--tint-1:#e6f5f4;--tint-2:#d8f0ee;--tint-3:#cfeceb;--hero-glow:#cfeceb;--warn-line:#e6cf94;--bad-line:#f2b8b1;--info-line:#b9d0ec;--bar-bg:rgba(238,241,241,.92);--tabs-bg:rgba(255,255,255,.97);--day-sub:#d8f0ee;--sw-ring:rgba(0,0,0,.28);--scroll-shadow:rgba(0,0,0,.22);--toast-bg:#0a1212;--toast-ink:#ffffff;--st-booked:#5b6868;--st-checkedin:#1b5da6;--st-inprogress:#0a6e6e;--st-qc:#8a5800;--st-ready:#2a7a1c;--st-delivered:#9aa6a6;}
@media (prefers-color-scheme: light){:root[data-theme="auto"]{color-scheme:light;--bg:#eef1f1;--s1:#ffffff;--s2:#f3f6f6;--s3:#e4e9e9;--line:#d3dada;--line2:#b9c3c3;--ink:#0a1212;--ink2:#2e3a3a;--ink3:#566262;--ph:#677272;--teal:#0a6e6e;--teal2:#0f8484;--teal3:#0a5a5a;--tealbg:#dcf1f0;--on-accent:#ffffff;--accent-hover:#0c7f7f;--ok:#2a7a1c;--okbg:#e2f2dc;--warn:#8a5800;--warnbg:#fbefd2;--bad:#b42318;--badbg:#fde6e3;--info:#1b5da6;--infobg:#e1ecf8;--on-bad:#ffffff;--tint-1:#e6f5f4;--tint-2:#d8f0ee;--tint-3:#cfeceb;--hero-glow:#cfeceb;--warn-line:#e6cf94;--bad-line:#f2b8b1;--info-line:#b9d0ec;--bar-bg:rgba(238,241,241,.92);--tabs-bg:rgba(255,255,255,.97);--day-sub:#d8f0ee;--sw-ring:rgba(0,0,0,.28);--scroll-shadow:rgba(0,0,0,.22);--toast-bg:#0a1212;--toast-ink:#ffffff;--st-booked:#5b6868;--st-checkedin:#1b5da6;--st-inprogress:#0a6e6e;--st-qc:#8a5800;--st-ready:#2a7a1c;--st-delivered:#9aa6a6;}}

/* ---------- adapt: tables scroll on narrow screens, and show that they do ----------
   .card.flush{overflow:hidden} out-specified .tscroll, so on phones every table was clipped with no way to scroll. */
.card.flush.tscroll{overflow-x:auto;overflow-y:hidden;
  background:linear-gradient(to right,var(--s1) 30%,transparent) left center/40px 100% no-repeat local,
             linear-gradient(to left,var(--s1) 30%,transparent) right center/40px 100% no-repeat local,
             radial-gradient(farthest-side at 0 50%,var(--scroll-shadow),transparent) left center/14px 100% no-repeat scroll,
             radial-gradient(farthest-side at 100% 50%,var(--scroll-shadow),transparent) right center/14px 100% no-repeat scroll;
  background-color:var(--s1)}
.li>.btn{flex:none}

/* ---------- adapt: phone on its side at check-in, like a camera app ---------- */
@media (orientation:landscape) and (max-height:500px){
  .top{padding-top:calc(6px + var(--safe-t));padding-bottom:6px}
  .top .ttl h1{font-size:var(--t-lg)}
  .top .ttl .sub,.demo-strip{display:none}
  #view{padding-top:10px}
  .steps{margin-bottom:8px}
  .card:has(> .cam){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px}
  .card > .cam{height:calc(100dvh - 190px);max-height:none;width:auto;max-width:100%;justify-self:center;margin:0}
  .card > .cam-bar{flex-direction:column;margin:0;gap:16px}
  .card > .cam-bar > span:empty{display:none}
}

/* ---------- adapt: offline ---------- */
#net{position:fixed;left:50%;top:calc(8px + var(--safe-t));transform:translateX(-50%);z-index:150;background:var(--warn);color:var(--on-accent);font:700 var(--t-xs) var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);white-space:nowrap}
#net[hidden]{display:none}

/* ---------- clarify: errors live at the field ---------- */
.ferr{margin:4px 0 0;color:var(--bad);font-size:var(--t-sm);font-weight:700;text-transform:none;letter-spacing:0}
[aria-invalid="true"]{border-color:var(--bad)!important;outline-color:var(--bad)}
.check .ferr{flex-basis:100%}
.check:has(.ferr){flex-wrap:wrap}

/* ---------- distill ---------- */
.demo-strip{padding:6px 12px;font-size:var(--t-sm);gap:8px 16px}
.demo-strip .link{margin-left:auto;background:none;border:0;padding:4px 0;color:inherit;font:700 var(--t-sm) var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (pointer:coarse){.demo-strip .link{min-height:44px}}
.hist summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.hist summary::-webkit-details-marker{display:none}
.hist summary h3{flex:1}
.hist summary::after{content:"▸";color:var(--ink3)}
.hist[open] summary::after{content:"▾"}
.hist[open] .tl{margin-top:14px}

/* ---------- quick find ---------- */
.find-btn{gap:8px}
.find-btn kbd,.find-hint kbd{font:700 var(--t-2xs)/1 var(--body);border:1px solid var(--line2);border-radius:var(--r-xs);padding:2px 5px;color:var(--ink3);background:var(--s1)}
dialog.find-dlg{width:min(640px,calc(100vw - 24px));align-self:start;margin-top:10vh}
.find .inp{font-size:var(--t-lg);min-height:52px}
#findList{max-height:min(56vh,480px);overflow:auto;margin-top:10px;display:flex;flex-direction:column;gap:2px}
.find-head{margin:6px 4px 4px;color:var(--ink3)}
.find-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r2);text-decoration:none;color:inherit;min-height:48px}
.find-item[aria-selected="true"]{background:var(--tealbg);outline:1px solid var(--teal3)}
.find-item:hover{background:var(--s2)}
.find-kind{flex:none;width:64px;color:var(--ink3)}
.find-t{min-width:0;display:flex;flex-direction:column}
.find-t b{font-size:var(--t-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.find-t span{font-size:var(--t-sm);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.find-hint{margin:10px 2px 0;font-size:var(--t-xs)}
@media (pointer:coarse){.find-hint{display:none}}
@media (max-width:520px){.top .find-btn{display:none}}   /* phones: Find is the first item in More, so the title keeps its room */

/* ---------- drop-off agreement ---------- */
.agree .terms-d summary,.card details summary{cursor:pointer;color:var(--teal);font-weight:700}
.terms{margin-top:10px;max-height:260px;overflow:auto;padding-right:6px}
.terms p{margin:0 0 8px;font-size:var(--t-sm);color:var(--ink2);max-width:72ch}
.sigwrap{margin:14px 0 6px}
.sigwrap .row{margin-bottom:6px}
.sigpad{display:block;width:100%;height:170px;background:#fff;border:1px solid var(--line2);border-radius:var(--r2);touch-action:none;cursor:crosshair}
.sigpad:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.sig-view{background:#fff;border-radius:var(--r2);border:1px solid var(--line2);padding:6px;min-height:72px;display:flex;align-items:center}
.sig-view img{max-width:100%;max-height:120px;display:block}
.sig-typed{font:italic 30px "Snell Roundhand","Segoe Script","Brush Script MT",cursive;color:#0a1212;padding:6px 12px}

/* ---------- quotes ---------- */
.qadd{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.qadd select{flex:1;min-width:200px}
.num-inp{max-width:110px;text-align:right;margin-left:auto}
.qlines td{vertical-align:middle}
.qlines td .inp{min-height:38px}
.qlines td:first-child .inp{min-width:180px}
/* phones: each quoted line becomes a small card instead of a crushed table row */
@media (max-width:640px){
  .qlines thead{display:none}
  .qlines tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding:12px 16px;border-bottom:1px solid var(--line)}
  .qlines td,.qlines td.num{padding:0;border:0;text-align:left}
  .qlines td:first-child,.qlines td.qdel,.qlines td[colspan]{grid-column:1/-1}
  .qlines td:first-child .inp{min-width:0}
  .qlines td[data-l]::before{content:attr(data-l);display:block;margin-bottom:4px;font:700 var(--t-2xs)/1.2 var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink3)}
  .qlines .num-inp{max-width:none;width:100%;text-align:left;margin:0}
  .qlines td.num[data-l="Line total"]{align-self:end;padding-bottom:9px;font-weight:700}
}
@media print{.qadd,.find-btn{display:none!important}.inp{border:0!important;background:none!important;padding:0!important;min-height:0!important;color:inherit!important;resize:none}}

/* ---------- responsive ---------- */
@media (max-width:960px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.g-main{grid-template-columns:minmax(0,1fr)}.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .app{display:block}.side{display:none}
  .top{padding:12px 16px;padding-top:calc(12px + var(--safe-t))}.top .ttl h1{font-size:var(--t-2xl)}
  #view{padding:16px 16px calc(96px + var(--safe-b))}
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--tabs-bg);border-top:1px solid var(--line);padding-bottom:var(--safe-b);z-index:30}
  .tabs a,.tabs button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 8px;color:var(--ink3);text-decoration:none;font:700 var(--t-2xs)/1.2 var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase;background:none;border:0;cursor:pointer}
  .tabs svg{width:22px;height:22px}
  .tabs a[aria-current=page]{color:var(--teal)}
  .tabs .camtab span{background:var(--teal);color:var(--on-accent);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin-top:-22px;border:4px solid var(--bg)}
  .hero{grid-template-columns:minmax(0,1fr)}.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .fgrid,.fgrid.c3{grid-template-columns:1fr}
  .c-grid{grid-template-columns:minmax(0,1fr)}.c-grid>*{min-width:0}.c-wrap h2{font-size:var(--t-lg);min-width:0}.sum{position:static}
  .c-hero h1{font-size:var(--t-5xl)}.opts.c2{grid-template-columns:1fr}.hero h2{font-size:var(--t-3xl)}.idcard .big{font-size:var(--t-5xl)}
  .pipe{grid-template-columns:repeat(3,1fr)}
  .top .hide-m{display:none}
}
@media (max-width:520px){.li .thumb{display:none}.li .time{width:auto;min-width:48px;font-size:var(--t-lg)}.li .time small{display:block;font-size:var(--t-2xs)}.li>.chip.info{display:none}.mob-in{display:inline}.kpis{gap:10px}.kpi{padding:14px}.kpi .v{font-size:var(--t-4xl)}.kpi.hot .v{font-size:var(--t-5xl)}.pipe a b{font-size:var(--t-3xl)}.c-head .info{display:none}.c-hero h1{font-size:var(--t-4xl)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.sparks,.cam .flash{display:none}.okmark circle,.okmark path{stroke-dashoffset:0!important}.btn::after{display:none}.scan::before{top:50%}.ba.hint .aft{clip-path:inset(0 0 0 50%)}}
@media (prefers-reduced-motion:no-preference){::view-transition-old(root){animation:vtout var(--d1) var(--ease-in) both}::view-transition-new(root){animation:vtin var(--d2) var(--ease) both}}@keyframes vtout{to{opacity:0}}@keyframes vtin{from{opacity:0;transform:translateY(4px)}}
@media print{
  :root{color-scheme:light;--bg:#eef1f1;--s1:#ffffff;--s2:#f3f6f6;--s3:#e4e9e9;--line:#d3dada;--line2:#b9c3c3;--ink:#0a1212;--ink2:#2e3a3a;--ink3:#566262;--ph:#677272;--teal:#0a6e6e;--teal2:#0f8484;--teal3:#0a5a5a;--tealbg:#dcf1f0;--on-accent:#ffffff;--accent-hover:#0c7f7f;--ok:#2a7a1c;--okbg:#e2f2dc;--warn:#8a5800;--warnbg:#fbefd2;--bad:#b42318;--badbg:#fde6e3;--info:#1b5da6;--infobg:#e1ecf8;--on-bad:#ffffff;--tint-1:#e6f5f4;--tint-2:#d8f0ee;--tint-3:#cfeceb;--hero-glow:#cfeceb;--warn-line:#e6cf94;--bad-line:#f2b8b1;--info-line:#b9d0ec;--bar-bg:rgba(238,241,241,.92);--tabs-bg:rgba(255,255,255,.97);--day-sub:#d8f0ee;--sw-ring:rgba(0,0,0,.28);--scroll-shadow:rgba(0,0,0,.22);--toast-bg:#0a1212;--toast-ink:#ffffff;--st-booked:#5b6868;--st-checkedin:#1b5da6;--st-inprogress:#0a6e6e;--st-qc:#8a5800;--st-ready:#2a7a1c;--st-delivered:#9aa6a6;}
  @page{margin:14mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none!important;transition:none!important}
  body{background:#fff}
  .side,.tabs,.demo-strip,#toast,#net,.btn,.seg,.x,.pt.add,[data-note],#stageSel,.chart-tbl,.c-progress,.sparks,.no-print,dialog{display:none!important}
  .hero::before,.hero .pic::before{display:none}
  .app{display:block}
  .top{position:static;border:0;background:none;padding:0 0 12px;backdrop-filter:none}
  #view{padding:0;max-width:none}
  .card,.hero,.kpi,.note,.tl li,.jc,.inv{break-inside:avoid}
  .hero .pic,.card{box-shadow:none}
  a{color:inherit;text-decoration:none}
}

/* ---------- maintenance plans ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px;margin-bottom:16px}
.card.plan{display:flex;flex-direction:column}.card.plan.retired{opacity:.7}
.plan .pp{display:flex;align-items:baseline;gap:8px;margin:4px 0 12px}.plan .pp b{font:400 var(--t-4xl)/1 var(--disp);color:var(--teal);font-variant-numeric:tabular-nums}.plan .pp span{color:var(--ink3);font-size:var(--t-sm)}
.pl-inc{list-style:none;margin:0;padding:0;display:grid;gap:8px}.pl-inc li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-md);color:var(--ink2)}.pl-inc svg{width:18px;height:18px;flex:none;color:var(--teal);margin-top:1px}
.pl-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));column-gap:16px;max-height:300px;overflow:auto}
.mem+.mem{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.mem-n{font:400 var(--t-xl) var(--disp);text-transform:uppercase;letter-spacing:var(--tr-display)}

/* ---------- supplies ---------- */
.th-sub{display:block;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink3);font-size:var(--t-2xs)}
.use-pick{row-gap:6px;max-height:none;overflow:visible}.use-row{display:grid;grid-template-columns:minmax(0,1fr) 84px 32px;gap:8px;align-items:center;font-size:var(--t-md)}.use-row small{color:var(--ink3)}
.sup td{font-size:var(--t-md)}

/* ---------- technician pay ---------- */
.inp.sm-inp{width:auto;min-height:36px;padding:6px 10px;font-size:var(--t-sm)}
.tbl tr.tot-row td{border-top:2px solid var(--line2);background:var(--s2)}

/* ---------- share card ---------- */
.share-prev{margin-top:14px;display:grid;place-items:center;min-height:200px;background:var(--s2);border-radius:var(--r2);padding:12px}
.share-prev img{display:block;max-width:100%;max-height:min(56vh,560px);width:auto;height:auto;border-radius:var(--r2);box-shadow:0 8px 30px rgba(0,0,0,.4)}

/* ---------- weather ---------- */
.chip.wx{gap:4px;vertical-align:middle}.chip.wx svg{width:14px;height:14px}
@media (max-width:640px){.li.stop{flex-wrap:wrap}.li.stop>.row{flex:1 1 100%;justify-content:flex-start!important;padding-left:52px}}   /* route stops: buttons below the details on phones (they squeezed the details to 0px) */
.ev .tagw{color:var(--warn)}

/* ---------- waitlist, import ---------- */
@media (max-width:640px){.li.wl{flex-wrap:wrap}.li.wl>.row{flex:1 1 100%;justify-content:flex-start!important}}
.imp-sum{margin:8px 0 0;padding-left:18px;color:var(--ink2);font-size:var(--t-md)}

/* ---------- onboarding ---------- */
.empty-act{justify-content:center;margin-top:14px}
.card.ob{margin-bottom:16px;border-color:var(--teal3)}
.ob-bar{height:4px;border-radius:var(--r-pill);background:var(--s2);overflow:hidden;margin:0 0 14px}.ob-bar i{display:block;height:100%;background:var(--teal);transition:width var(--d3,.4s) var(--ease)}
.ob-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ob-list li{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.ob-dot{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;margin-top:1px}
.ob-dot svg{width:14px;height:14px}
.ob-list li.done .ob-dot{background:var(--teal);border-color:var(--teal);color:var(--on-accent)}
.ob-list li.done b{color:var(--ink3);font-weight:400;text-decoration:line-through;text-decoration-color:var(--line2)}
.ob-list li.next .ob-dot{border-color:var(--teal)}
.ob-t{flex:1;min-width:0}.ob-t b{display:block;font-size:var(--t-base)}
/* the dashboard tour: a small panel beside the area it explains, which is lifted out of a dimmed page */
dialog.tour{position:fixed;margin:0;inset:auto;width:min(380px,calc(100vw - 24px));padding:16px 18px;border-color:var(--teal3);box-shadow:0 18px 48px rgba(0,0,0,.45)}
dialog.tour::backdrop{background:transparent}
dialog.tour.dock{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));top:auto;width:auto}
dialog.tour.dock.top{top:calc(12px + env(safe-area-inset-top));bottom:auto}
dialog.tour h2{font:400 var(--t-xl)/1.15 var(--disp);text-transform:uppercase;letter-spacing:var(--tr-display);margin:4px 0 8px}
dialog.tour p{margin:0;color:var(--ink2)}
.tour-n{font:700 var(--t-xs)/1 var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--teal)!important}
.tour-hl{position:relative;z-index:40;box-shadow:0 0 0 3px var(--teal),0 0 0 100vmax rgba(0,0,0,.55)!important;border-radius:var(--r);scroll-margin:96px}
@media (forced-colors:active){.tour-hl{outline:3px solid CanvasText;outline-offset:2px}}.ob-t p{margin:4px 0 10px;color:var(--ink2);font-size:var(--t-md);max-width:62ch}
@media (prefers-reduced-motion:reduce){.ob-bar i{transition:none}}

/* ---------- paged lists ---------- */
.more-row td,div.more-row{text-align:center;padding:12px}

/* ---------- polish ---------- */
/* Labels on photos keep a dark backing in both themes, so their ink must not follow the theme
   (Daylight turned them dark-on-dark: 3.3:1). Fixed values are the dark theme's own. */
.jc .ph .carid{color:var(--ov-teal);border-color:var(--ov-teal-line)}
.pt .tag.before,.ba .l.b{color:var(--ov-warn)}
.pt .tag.after,.ba .l.a{color:var(--ov-teal)}
.pt .tag.damage{color:var(--ov-bad)}
/* facts never clip: KPI captions and list detail lines wrap to a second line instead */
.kpi .d{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.li .t span.wrap2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stepper-cap{display:none}
.top .ttl h1{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}   /* long job and quote titles take a second line instead of an ellipsis */
@media (max-width:520px){
  /* the page title keeps at least a word's room; when the buttons don't fit beside it they drop below */
  .top{flex-wrap:wrap;row-gap:8px}.top .ttl{flex:1 1 9em}
  .top .ttl h1{-webkit-line-clamp:3}
  /* six stage names can't share 343px: bars only, one caption for where the job is */
  .stepper span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stepper-cap{display:block;font:700 var(--t-2xs)/1.2 var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--stage,var(--teal));margin-top:6px}
}
@media (max-width:760px){.inp.sm-inp{font-size:var(--t-input)}}   /* iOS zooms into anything under 16px */
@media (pointer:coarse){a.tap{display:inline-block;padding:12px 0;margin:-12px 0}}

/* ---------- critique: reading order and triage ---------- */
.al-more summary{list-style:none;cursor:pointer;padding:12px 16px;color:var(--teal);font:700 var(--t-xs) var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase;border-top:1px solid var(--line)}
.al-more summary::-webkit-details-marker{display:none}.al-more[open] summary{display:none}
.c-grid h2{scroll-margin-top:16px}
@media (max-width:960px){
  /* one column: what needs you comes right after the numbers, and the revenue chart (history, not today) goes last */
  body[data-route=dash] #view{display:flex;flex-direction:column}
  body[data-route=dash] #view .g-main,body[data-route=dash] #view .g-main>.stack{display:contents}
  body[data-route=dash] .g-main>.stack>*{margin-bottom:16px}
  .dash-needs{order:1}.dash-floor{order:2}.dash-lineup{order:3}.dash-money{order:4}.dash-team{order:5}.dash-rev{order:6}
}
/* the job page on a phone (below 700px): one column, the labor timer sits with the work, not below the notes */
@media (max-width:699px){
  body[data-route=job] #view{display:flex;flex-direction:column}
  body[data-route=job] .job-cols,body[data-route=job] .job-cols>.stack{display:contents}
  body[data-route=job] .job-cols>.stack>*{margin-bottom:16px;order:2}
  body[data-route=job] .job-cols .job-ba,body[data-route=job] .job-cols .job-photos{order:0}
  body[data-route=job] .job-cols .job-timer{order:1}
}
/* a portrait tablet (700-960px) has room for two: the work on the left, timer, invoice and updates on the right */
@media (min-width:700px) and (max-width:960px){body[data-route=job] .job-cols{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}

/* ---------- spacing utilities (the 4px grid) ----------
   For markup that used to carry inline style="" spacing. !important keeps the precedence an inline style had. */
.m-0{margin:0!important}
.mt-0{margin-top:0!important}.mt-4{margin-top:4px!important}.mt-8{margin-top:8px!important}.mt-12{margin-top:12px!important}.mt-16{margin-top:16px!important}.mt-24{margin-top:24px!important}
.mb-0{margin-bottom:0!important}.mb-4{margin-bottom:4px!important}.mb-8{margin-bottom:8px!important}.mb-12{margin-bottom:12px!important}.mb-16{margin-bottom:16px!important}.mb-24{margin-bottom:24px!important}
.pt-0{padding-top:0!important}.pt-4{padding-top:4px!important}.pt-8{padding-top:8px!important}.pt-12{padding-top:12px!important}.pt-16{padding-top:16px!important}.pt-24{padding-top:24px!important}
.gap-16{gap:16px!important}.span-all{grid-column:1/-1!important}
.fs-2xs{font-size:var(--t-2xs)!important}.fs-sm{font-size:var(--t-sm)!important}.fs-md{font-size:var(--t-md)!important}.fs-base{font-size:var(--t-base)!important}

.acc-pick{width:48px;height:40px;padding:2px;border:1px solid var(--line2);border-radius:var(--r2);background:var(--s2);cursor:pointer}

/* ---------- undo in the toast ---------- */
#toast.act{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:6px 8px 6px 16px}
.toast-act{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 10px;min-height:36px;border-radius:var(--r-pill)}
.toast-act:hover{background:color-mix(in srgb,var(--toast-ink) 8%,transparent)}
@media (pointer:coarse){.toast-act{min-height:44px}}

/* ---------- settings save bar ---------- */
.savebar{position:sticky;bottom:calc(12px + var(--safe-b));z-index:30;display:none;align-items:center;gap:12px;margin-top:16px;padding:12px 16px;background:var(--s3);border:1px solid var(--teal3);border-radius:var(--r);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.savebar.on{display:flex}.savebar span{flex:1;font-weight:700}
@media (max-width:860px){.savebar{bottom:calc(84px + var(--safe-b))}}

/* ---------- technician on board cards: initials, not a chip ---------- */
.jc .ph .tech-av{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(6,6,6,.85);color:#fff;border:1px solid var(--ov-teal-line);font:700 var(--t-2xs) var(--cond);letter-spacing:var(--tr-display)}
.jc .ph .tech-av.none{border:1px dashed rgba(255,255,255,.55);background:rgba(6,6,6,.6)}

/* ---------- board: technician filter ---------- */
.techbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.tf{min-width:40px;height:40px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--s1);color:var(--ink2);font:700 var(--t-xs) var(--cond);letter-spacing:var(--tr-display);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.tf small{font:inherit;color:var(--ink3)}
.tf[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:var(--on-accent)}.tf[aria-pressed=true] small{color:inherit;opacity:.75}
.tf:not([aria-pressed=true]):hover{border-color:var(--teal3)}
@media (pointer:coarse){.tf{min-height:44px;min-width:44px}}

/* ---------- booking in steps (phones) ---------- */
.bk-bar,.bk-prog{display:none}
@media (max-width:759px){
  .bk-step{display:none}.bk-step.on{display:block}
  .bk-hide-m{display:none!important}
  .bk-prog{display:block;height:4px;background:var(--s3);border-radius:var(--r-pill);overflow:hidden;margin:8px 0 4px}.bk-prog i{display:block;height:100%;background:var(--teal);transition:width var(--d2) var(--ease)}
  .bk-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:12px;padding:10px 16px calc(10px + var(--safe-b));background:var(--bar-bg);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
  .bk-bar .btn{flex:none;min-width:84px}.bk-sp{width:84px;flex:none}
  .bk-bar-mid{flex:1;min-width:0;text-align:center}.bk-bar-mid b{display:block;font-size:var(--t-sm)}.bk-bar-mid span{font-size:var(--t-xs);color:var(--ink3)}
  body.client #view{padding-bottom:104px}
}
@media (max-width:759px) and (prefers-reduced-motion:reduce){.bk-prog i{transition:none}}

/* ---------- My day ---------- */
.mygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.card.myjob .li{padding:0;border:0;background:none}
@media (max-width:520px){.card.myjob .li .thumb{display:block}}   /* the photo is how a technician spots the car; list rows elsewhere drop it on phones */

/* ---------- alerts with a fix ---------- */
.alert-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.alert-row>.alert{flex:1;min-width:0;border-bottom:0}
.alert-row>.alert-fix{flex:none;margin-right:12px}
@media (max-width:520px){.alert-row{flex-wrap:wrap;gap:0}.alert-row>.alert{flex:1 1 100%}.alert-row>.alert-fix{margin:-4px 16px 12px 58px}}   /* on phones the fix sits under the text, which keeps the full width */

/* ---------- first check-in guide ---------- */
.card.coach{border-color:var(--teal3);background:var(--tint-1)}
.coach-list{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink2)}.coach-list b{color:var(--ink)}

/* ---------- rail labels (touch long-press, keyboard focus) ---------- */
.rail-tip{position:fixed;z-index:300;transform:translate(0,-50%) scale(.96);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);font:700 var(--t-sm) var(--body);padding:6px 10px;border-radius:var(--r2);box-shadow:0 8px 20px rgba(0,0,0,.35);white-space:nowrap;transition:opacity var(--d1) var(--ease),transform var(--d1) var(--ease)}
.rail-tip.on{opacity:1;transform:translate(0,-50%) scale(1)}
@media (prefers-reduced-motion:reduce){.rail-tip{transition:none}}
@media (min-width:861px) and (max-width:1279px){#side .nav a{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}

/* ---------- photo frames while loading ----------
   A photo is read from this device's storage after the page draws: the frame shimmers until it arrives, then the image
   fades in. A photo taken on another device (photos stay on the device that took them until there is a server) says so
   instead of shimmering forever. */
img[data-ph]:not([src]){visibility:hidden}
img[data-ph][src]{animation:fadein var(--d2) var(--ease) both}
:is(.jc .ph,.pic,.pt,.ba,.li .thumb):has(>img[data-ph]:not([src]):not([data-missing])){background:linear-gradient(100deg,var(--photo-bg) 30%,color-mix(in srgb,var(--photo-bg) 82%,#fff) 50%,var(--photo-bg) 70%) var(--photo-bg);background-size:220% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
img[data-missing]{display:none}
:is(.jc .ph,.pic,.pt,.ba):has(>img[data-missing])::after{content:"Photo on another device";position:absolute;inset:0;display:grid;place-items:center;padding:8px;text-align:center;color:rgba(255,255,255,.6);font:700 var(--t-2xs)/1.3 var(--cond);letter-spacing:var(--tr-caps);text-transform:uppercase;pointer-events:none}
:is(.jc .ph,.pic,.pt,.ba):has(>img[data-missing="cloud"])::after{content:"Photo loads when this device is online"}   /* uploaded, not fetched yet */
@media (prefers-reduced-motion:reduce){:is(.jc .ph,.pic,.pt,.ba,.li .thumb){animation:none!important}img[data-ph][src]{animation:none}}