/* Blase Towing app (app.js). Made for phones first: drivers check plates outside, at night, with one hand.
   Layout: one column at most 760px wide. Phones: a floating glass brand bar on top and a floating glass tab bar at the
   bottom, with the page fading under both (like the website). From 880px wide (the office computer) the tabs move up
   into the bar. The look is the website's: black, white and the signs' red; the company name in the trucks' lettering
   (the #wordmark symbol in index.html); Barlow Condensed headings, Montserrat text, Michroma labels. */
/* the fonts, served from this site (public/fonts, SIL Open Font License): Barlow Condensed for headings, Montserrat
   for text, Michroma for small labels. Latin, plus Montserrat's extended Latin for names. */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-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:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-800.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:Michroma;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/michroma-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:Montserrat;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/montserrat.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:Montserrat;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/montserrat-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#f3f3f1; --surface:#ffffff; --sunken:#f5f5f3; --ink:#111214; --muted:#575b62; --line:#dfe0e2; --edge-line:#8d929a;
  --band:#0b0b0c; --band-ink:#f5f5f4; --band-muted:#a6a9ae;
  --accent:#c8141f; --accent-hover:#a50f18; --accent-ink:#ffffff; --accent-text:#b0121c; --accent-soft:#fbe9e8;
  --go:#127a45; --go-soft:#e1f3e8; --stop:#c3271f; --stop-soft:#fde8e6; --hold:#9c5600; --hold-soft:#fff0d2;
  --go-fill:#13804a; --stop-fill:#c62a22; --hold-fill:#b46100; --on-fill:#ffffff;
  --plate:#fbfbf7; --plate-ink:#1b3c8c; --plate-edge:#a6afbe; --plate-rim:rgba(27,60,140,.28);
  --focus:#2563eb; --scrim:rgba(10,10,12,.45);
  --glass-dark:rgba(16,16,18,.62); --glass:rgba(255,255,255,.7); --glass-ink:#111214; --edge-tint:rgba(243,243,241,.9);
  --bar:var(--glass); --bar-ink:#111214; --bar-muted:#3d4046; --bar-hover:rgba(17,18,20,.06); --bar-on:rgba(17,18,20,.1);
  --bar-shadow:0 10px 30px rgba(17,18,20,.12),0 0 0 .5px rgba(17,18,20,.1); --mark-glow:none; --toast:var(--glass-dark); --toast-ink:#fff;
  --shadow:0 1px 2px rgba(17,18,20,.05),0 8px 24px rgba(17,18,20,.07);
  --shadow-up:0 2px 4px rgba(17,18,20,.06),0 14px 34px rgba(17,18,20,.12);
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --label:Michroma,"Arial Black",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --round:22px;
  --top:calc(env(safe-area-inset-top,0px) + 88px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e0f11; --surface:#17181b; --sunken:#1d1f22; --ink:#f1f1f0; --muted:#a3a7ad; --line:#2b2e33; --edge-line:#5d636c;
  --band:#060607; --band-ink:#f1f1f0; --band-muted:#9a9ea4;
  --accent:#d01d27; --accent-hover:#e2333c; --accent-ink:#ffffff; --accent-text:#ff6a63; --accent-soft:#2c1415;
  --go:#3fcf86; --go-soft:#10291c; --stop:#ff6359; --stop-soft:#331614; --hold:#ffb64a; --hold-soft:#2f2412;
  --go-fill:#16834c; --stop-fill:#c62f27; --hold-fill:#b56400; --on-fill:#ffffff;
  --plate:#f1f1eb; --plate-ink:#1b3c8c; --plate-edge:#6c7587; --plate-rim:rgba(27,60,140,.34);
  --focus:#7aa7ff; --scrim:rgba(0,0,0,.6);
  --glass-dark:rgba(12,12,14,.66); --glass:rgba(24,25,28,.72); --glass-ink:#f1f1f0; --edge-tint:rgba(14,15,17,.9);
  --bar:var(--glass-dark); --bar-ink:var(--band-ink); --bar-muted:var(--band-muted); --bar-hover:rgba(255,255,255,.08); --bar-on:rgba(255,255,255,.14);
  --bar-shadow:0 10px 30px rgba(0,0,0,.26),0 0 0 .5px rgba(255,255,255,.12); --mark-glow:drop-shadow(0 0 10px rgba(224,32,44,.25)); --toast:rgba(241,241,240,.94); --toast-ink:#111214;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  --shadow-up:0 2px 4px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.5);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e0f11; --surface:#17181b; --sunken:#1d1f22; --ink:#f1f1f0; --muted:#a3a7ad; --line:#2b2e33; --edge-line:#5d636c;
  --band:#060607; --band-ink:#f1f1f0; --band-muted:#9a9ea4;
  --accent:#d01d27; --accent-hover:#e2333c; --accent-ink:#ffffff; --accent-text:#ff6a63; --accent-soft:#2c1415;
  --go:#3fcf86; --go-soft:#10291c; --stop:#ff6359; --stop-soft:#331614; --hold:#ffb64a; --hold-soft:#2f2412;
  --go-fill:#16834c; --stop-fill:#c62f27; --hold-fill:#b56400; --on-fill:#ffffff;
  --plate:#f1f1eb; --plate-ink:#1b3c8c; --plate-edge:#6c7587; --plate-rim:rgba(27,60,140,.34);
  --focus:#7aa7ff; --scrim:rgba(0,0,0,.6);
  --glass-dark:rgba(12,12,14,.66); --glass:rgba(24,25,28,.72); --glass-ink:#f1f1f0; --edge-tint:rgba(14,15,17,.9);
  --bar:var(--glass-dark); --bar-ink:var(--band-ink); --bar-muted:var(--band-muted); --bar-hover:rgba(255,255,255,.08); --bar-on:rgba(255,255,255,.14);
  --bar-shadow:0 10px 30px rgba(0,0,0,.26),0 0 0 .5px rgba(255,255,255,.12); --mark-glow:drop-shadow(0 0 10px rgba(224,32,44,.25)); --toast:rgba(241,241,240,.94); --toast-ink:#111214;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  --shadow-up:0 2px 4px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.5);
  color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-padding:calc(env(safe-area-inset-top,0px) + 80px) 0 calc(env(safe-area-inset-bottom,0px) + 92px)}  /* focused fields clear the bars */
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:16px/1.45 var(--body);
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.boot{padding:30vh 0;text-align:center;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- the page fades under the floating bars, like the website ---- */
.edge{position:fixed;left:0;right:0;z-index:15;pointer-events:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.edge--top{top:0;height:calc(env(safe-area-inset-top,0px) + 96px);
  background:linear-gradient(to bottom,var(--edge-tint),rgba(243,243,241,0));
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);mask-image:linear-gradient(to bottom,#000 30%,transparent)}
.edge--bottom{bottom:0;height:calc(env(safe-area-inset-bottom,0px) + 104px);
  background:linear-gradient(to top,var(--edge-tint),rgba(243,243,241,0));
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent);mask-image:linear-gradient(to top,#000 30%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .edge--top{background:linear-gradient(to bottom,var(--edge-tint),rgba(14,15,17,0))}
  :root:not([data-theme="light"]) .edge--bottom{background:linear-gradient(to top,var(--edge-tint),rgba(14,15,17,0))}}
:root[data-theme="dark"] .edge--top{background:linear-gradient(to bottom,var(--edge-tint),rgba(14,15,17,0))}
:root[data-theme="dark"] .edge--bottom{background:linear-gradient(to top,var(--edge-tint),rgba(14,15,17,0))}
@media (min-width:880px){.edge--bottom{display:none}}
body.signed-out .edge{display:none}

/* ---- the brand bar: a floating glass pill in the trucks' black ---- */
.band{position:fixed;top:0;left:0;right:0;z-index:20;pointer-events:none;
  padding:calc(env(safe-area-inset-top,0px) + 10px) max(10px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px))}
.band__in{position:relative;pointer-events:auto;max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px;min-height:58px;
  padding:0 8px 0 20px;border-radius:999px;color:var(--bar-ink)}
.band__in:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--bar);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--bar-shadow)}
.band__in:before,.tabs:before,.sheet:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 38%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.26));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.brand{display:flex;align-items:center;flex:0 0 auto;min-height:44px;font:800 22px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;color:var(--bar-ink)}
.brand .wordmark{display:block;width:clamp(140px,40vw,210px);height:auto;flex:0 0 auto}
.band__who{margin-left:auto;flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:10px;text-align:right;align-self:stretch;padding:0 4px;margin-right:-4px}
.band__name{display:none;min-width:0;font-size:12.5px;line-height:1.25;color:var(--bar-muted)}
.band__name strong{display:block;color:var(--bar-ink);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#2a2b2f,#121316);color:#fff;font:700 15px/1 var(--display);letter-spacing:.04em;
  box-shadow:0 0 0 2px var(--accent),inset 0 1px 0 rgba(255,255,255,.18)}
.band .wordmark{filter:var(--mark-glow)}

/* ---- tabs: a floating glass bar at the bottom on phones, in the band on wide screens ---- */
.tabs{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
  bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:30;display:flex;gap:2px;padding:5px;border-radius:30px;
  background:var(--glass);color:var(--glass-ink);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--shadow-up),0 0 0 .5px rgba(17,18,20,.1)}
.tab{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:8px 2px 7px;border-radius:24px;
  color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .25s var(--ease),background .3s var(--ease)}
.tab svg{width:25px;height:25px;transition:transform .35s var(--ease)}
.tab[aria-current]{color:var(--accent-text);background:var(--accent-soft)}
.tab[aria-current] svg{transform:translateY(-1px) scale(1.06)}
.tab:active svg{transform:scale(.92)}
.tab__badge{position:absolute;top:5px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--stop-fill);color:var(--on-fill);font-size:11.5px;font-weight:700;line-height:18px;text-align:center;
  box-shadow:0 0 0 2px var(--surface)}
@media (max-width:429px){.tab{font-size:10.5px;letter-spacing:0;padding-left:0;padding-right:0}}
@media (max-width:359px){.tab{font-size:10px}}
@media (min-width:880px){
  html{scroll-padding-bottom:0}
  .band__in{max-width:1060px}
  .brand .wordmark{width:176px}
  .tabs{position:static;flex:0 0 auto;border:0;background:none;padding:0;gap:2px;margin-left:16px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
  .tabs:before{display:none}
  .tab{flex:0 0 auto;flex-direction:row;gap:8px;padding:0 14px;height:40px;border-radius:999px;font-size:14px;color:var(--bar-muted);overflow:visible}
  .tab:hover{color:var(--bar-ink);background:var(--bar-hover)}
  .tab svg{width:19px;height:19px}
  .tab[aria-current]{color:var(--bar-ink);background:var(--bar-on)}
  .tab[aria-current] svg{transform:none}
  .tab__badge{position:static;margin-left:2px;box-shadow:none}
  .band__who{margin-left:auto}
  .band__name{display:block}
  .avatar{width:36px;height:36px;font-size:14px}
}

main{max-width:760px;margin:0 auto;padding:var(--top) max(16px,env(safe-area-inset-right,0px)) calc(120px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
@media (min-width:880px){main{--top:112px;padding-bottom:60px}}
main.signed-out{padding-top:0;padding-bottom:40px}
.screen{animation:screen-in .5s var(--ease) both}
@keyframes screen-in{from{opacity:0;transform:translateY(12px)}}

/* ---- page heads ---- */
.back{display:inline-flex;align-items:center;gap:4px;margin:0 0 10px -4px;min-height:36px;padding-right:10px;border-radius:999px;color:var(--accent-text);font-weight:600;font-size:15.5px}
.back svg{width:20px;height:20px}
.back:hover{background:var(--accent-soft)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.head__text{min-width:0;flex:1 1 260px}
.kicker{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px;font:400 10.5px/1.4 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);overflow-wrap:anywhere}
.kicker:before{content:"";width:22px;height:2px;margin-top:6px;background:currentColor;flex:0 0 auto}
h1{margin:0;font:800 clamp(34px,8.5vw,44px)/.98 var(--display);letter-spacing:.01em;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere}
.sub{margin:8px 0 0;color:var(--muted);font-size:15.5px;text-wrap:pretty}
h2{display:flex;align-items:center;gap:12px;margin:28px 0 10px;font:400 11px/1.4 var(--label);text-transform:uppercase;letter-spacing:.16em;color:var(--accent-text);white-space:nowrap}
h2:after{content:"";flex:1;height:1px;background:var(--line)}
h2.sec{gap:9px;margin-top:32px;font-size:12.5px;letter-spacing:.14em}
@media (max-width:359px){h2.sec{font-size:11px;letter-spacing:.1em}}  /* "Stand-by and cleanup" fits a 320 px phone */
@media (max-width:359px){h2{font-size:10px;letter-spacing:.1em}}  /* the owner's Account "When you do a tow yourself" fits a 320 px phone (it can't wrap) */
.emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;letter-spacing:0;line-height:1;text-transform:none}
h2.sec .emo{font-size:22px}
.pick .emo{font-size:17px}
.hint{font-size:14.5px;color:var(--muted);margin:8px 2px 0}
.note{position:relative;margin:0 0 18px;padding:12px 16px 13px 18px;border-radius:18px;background:var(--accent-soft);font-size:15.5px;white-space:pre-line;overflow:hidden}
.note:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.note b{display:block;font:400 10.5px/1.4 var(--label);text-transform:uppercase;letter-spacing:.14em;color:var(--accent-text);margin-bottom:4px}
.note--bad{background:var(--hold-soft)}.note--bad:before{background:var(--hold)}.note--bad b{color:var(--hold)}
.note--good{background:var(--go-soft)}.note--good:before{background:var(--go)}.note--good b{color:var(--go)}

/* ---- at a glance: the numbers that matter today ---- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 20px}
@media (min-width:600px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{position:relative;display:block;padding:14px 16px 12px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  overflow:hidden;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stat:after{content:"";position:absolute;left:16px;top:0;width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.stat b{display:block;font:800 32px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.stat span{display:block;margin-top:5px;font:400 9.5px/1.4 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.stat--alert:after{background:var(--stop)}
.stat--alert b{color:var(--stop)}
a.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-up)}
a.stat:active{transform:scale(.98)}

/* ---- buttons, in the website's style ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;
  font:700 17px/1.1 var(--display);letter-spacing:.05em;text-transform:uppercase;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);
  white-space:nowrap;box-shadow:var(--shadow);transition:transform .25s var(--ease),background .2s,box-shadow .25s var(--ease),border-color .2s}
.btn svg{width:19px;height:19px;flex:0 0 auto}
.btn:hover{border-color:var(--edge-line)}
.btn:active{transform:scale(.97)}
.btn--main{background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 22px rgba(200,20,31,.26)}
.btn--main:hover{background:var(--accent-hover);border-color:transparent}
.btn--danger{color:var(--stop)}
.btn--ink{background:var(--ink);color:var(--bg);border-color:transparent}
.btn--ink:hover{background:var(--ink);border-color:transparent;opacity:.92}
.btn--block{display:flex;width:100%}
.btn--small{min-height:38px;padding:0 14px;font-size:15px}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.actions .btn{flex:1 1 auto}
.stack{display:grid;gap:10px;margin-top:24px}

/* ---- lists ---- */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--round);overflow:hidden;box-shadow:var(--shadow)}
.row{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px 14px 18px;min-height:62px;width:100%;text-align:left;
  transition:background .2s var(--ease)}
.row + .row:before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:var(--line)}
a.row:hover,button.row:hover{background:var(--sunken)}
a.row:active,button.row:active{background:var(--sunken)}
button.row:disabled{opacity:.55;cursor:not-allowed;background:none}
.row__main{flex:1;min-width:0}
.row__title{font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.row__sub{font-size:14.5px;color:var(--muted);line-height:1.35;margin-top:2px;overflow-wrap:anywhere}
.row__end{flex:0 0 auto;text-align:right;color:var(--muted);font-size:13.5px;line-height:1.3}
.chev{flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--muted);border-top:2px solid var(--muted);transform:rotate(45deg);opacity:.55;
  transition:transform .25s var(--ease),opacity .25s}
a.row:hover .chev,button.row:hover .chev{transform:translateX(2px) rotate(45deg);opacity:.9}
.empty{padding:30px 20px 28px;text-align:center;color:var(--muted);font-size:15px}
.empty svg{display:block;width:34px;height:34px;margin:0 auto 10px;opacity:.5}
.empty strong{display:block;color:var(--ink);font:700 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-bottom:6px}
.count{font-variant-numeric:tabular-nums}
/* rows settle in one after another */
.screen .list > .row{animation:row-in .55s var(--ease) both}
.screen .list > .row:nth-child(2){animation-delay:40ms}.screen .list > .row:nth-child(3){animation-delay:80ms}
.screen .list > .row:nth-child(4){animation-delay:120ms}.screen .list > .row:nth-child(5){animation-delay:160ms}
.screen .list > .row:nth-child(6){animation-delay:200ms}.screen .list > .row:nth-child(n+7){animation-delay:240ms}
@keyframes row-in{from{opacity:0;transform:translateY(8px)}}

.chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;font-size:12.5px;font-weight:600;white-space:nowrap;
  background:var(--sunken);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.chip--until{background:var(--ink);color:var(--bg);box-shadow:none}
.chip--expired,.chip--off{background:var(--stop-soft);color:var(--stop);box-shadow:none}
.chip--ok{background:var(--go-soft);color:var(--go);box-shadow:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}

/* ---- properties ---- */
.prop{align-items:flex-start;padding-block:16px}
.prop .row__title{font:700 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.prop__stat{flex:0 0 auto;text-align:center;min-width:56px;padding-top:2px}
.prop__stat b{display:block;font:800 30px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.prop__stat span{font:400 9px/1.4 var(--label);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}

/* ---- licence plates: white with a blue rim and lettering, and two bolt holes ---- */
.plate{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:6.6em;height:2.15em;
  padding:0 .6em;border-radius:6px;background:linear-gradient(var(--plate),color-mix(in srgb,var(--plate) 92%,#8a8f99));color:var(--plate-ink);border:1.5px solid var(--plate-edge);
  box-shadow:inset 0 0 0 2px var(--plate),inset 0 0 0 3.5px var(--plate-rim),0 1px 2px rgba(17,18,20,.15);
  font:700 19px/1 var(--display);letter-spacing:.09em;font-variant-numeric:tabular-nums;white-space:nowrap}
.plate:before,.plate:after{content:"";position:absolute;top:5px;width:4px;height:4px;border-radius:50%;background:var(--plate-edge)}
.plate:before{left:7px}
.plate:after{right:7px}
.plate--big{font-size:30px;min-width:7em}
.plate--sm{font-size:14px;min-width:0;height:1.9em;padding:0 .6em;vertical-align:middle;margin:0 2px}
.plate--sm:before,.plate--sm:after{display:none}

/* ---- forms ---- */
.form{display:grid;gap:18px}
.field{display:grid;gap:6px;min-width:0}
.field > span{font-weight:600;font-size:15px}
.field > span i{font-style:normal;font-weight:400;color:var(--muted)}
.input{width:100%;min-height:52px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);
  font-size:16px;color:var(--ink);box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}
textarea.input{min-height:100px;resize:vertical;line-height:1.4}
.input:hover{border-color:var(--edge-line)}
.input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 25%,transparent)}
.input::placeholder{color:var(--muted);opacity:.75}
.field--bad .input{border-color:var(--stop)}
.field__err{color:var(--stop);font-size:14.5px;font-weight:600}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:340px){.pair{grid-template-columns:1fr}}
.plate-input{width:100%;height:86px;padding:0 14px;border-radius:14px;background:linear-gradient(var(--plate),color-mix(in srgb,var(--plate) 92%,#8a8f99));color:var(--plate-ink);text-align:center;
  border:2px solid var(--plate-edge);box-shadow:inset 0 0 0 3px var(--plate),inset 0 0 0 5px var(--plate-rim),var(--shadow);
  font:700 44px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;transition:border-color .2s,box-shadow .2s}
.plate-input::placeholder{color:var(--plate-edge);letter-spacing:.08em;font-weight:600}
.plate-input:focus{outline:none;border-color:var(--focus);box-shadow:inset 0 0 0 3px var(--plate),inset 0 0 0 5px var(--plate-rim),0 0 0 4px color-mix(in srgb,var(--focus) 25%,transparent)}
.picks{display:flex;gap:8px;flex-wrap:wrap}
.pick{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--surface);font-size:15px;font-weight:500;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.pick:active{transform:scale(.96)}
.pick[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:600}
.dot{width:14px;height:14px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);flex:0 0 auto}
.checks{display:grid;gap:0}
.check{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 18px;min-height:54px}
.check + .check:before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:var(--line)}
.check input{width:22px;height:22px;accent-color:var(--accent);flex:0 0 auto}
.check small{display:block;color:var(--muted);font-size:14px}
.seg{display:flex;padding:4px;border-radius:999px;background:var(--sunken);border:1px solid var(--line);gap:3px}
.seg button{flex:1;min-height:40px;border-radius:999px;font-weight:600;font-size:15px;color:var(--muted);transition:background .25s var(--ease),color .2s,box-shadow .25s}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px}
label.row--switch{cursor:pointer}
.row--switch input{flex:none;width:26px;height:26px;margin:0;accent-color:var(--accent)}
.row--switch input:disabled{opacity:.45}
.row--switch .row__sub{white-space:normal}
.switch input{width:22px;height:22px;accent-color:var(--accent)}
.meta{font-size:14px;color:var(--muted);margin:2px 2px 0}

/* ---- asking for a patrol: big choices, a few steps ---- */
.bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin:0 0 10px}
.bar i{display:block;height:100%;background:var(--accent);transition:width .4s var(--ease)}
.steps{margin:0 0 16px;font:400 10.5px/1.4 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.step{display:grid;gap:18px}
.choices{display:grid;gap:10px}
.choice{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border-radius:18px;border:1.5px solid var(--line);background:var(--surface);
  text-align:left;box-shadow:var(--shadow);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.choice:hover{border-color:var(--edge-line)}
.choice:active{transform:scale(.985)}
.choice svg{width:28px;height:28px;flex:0 0 auto;color:var(--accent-text)}
.choice strong{display:block;font:700 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.choice span{display:block;color:var(--muted);font-size:14.5px;margin-top:3px}
.choice[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.patrol .row__title > span{font-weight:500;color:var(--muted)}
.chip--open{background:var(--accent);color:#fff;box-shadow:none}
.chip--now{background:var(--stop-soft);color:var(--stop);box-shadow:none}

/* ---- checking a plate ---- */
.picker{display:flex;align-items:center;gap:12px;width:100%;padding:12px 18px;margin-bottom:14px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);transition:background .2s,border-color .2s}
.picker:hover{border-color:var(--edge-line)}
.picker small{display:block;font:400 10px/1.4 var(--label);text-transform:uppercase;letter-spacing:.14em;color:var(--accent-text)}
.picker strong{display:block;font:700 20px/1.15 var(--display);text-transform:uppercase;letter-spacing:.01em}
.picker .chev{transform:rotate(135deg);margin-top:-4px}
.verdict{margin-top:16px;border-radius:var(--round);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-up);
  animation:pop .45s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}}
.verdict__top{display:flex;align-items:center;gap:14px;padding:20px 20px 18px;color:var(--on-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.verdict__top svg{width:46px;height:46px;flex:0 0 auto}
.verdict__word{font:800 36px/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.verdict__say{font-size:16px;margin-top:5px;opacity:.95}
.verdict--go .verdict__top{background:var(--go-fill)}
.verdict--stop .verdict__top{background:var(--stop-fill)}
.verdict--hold .verdict__top{background:var(--hold-fill)}
.verdict--wait .verdict__top{background:var(--sunken);color:var(--ink);box-shadow:none}
.verdict__body{padding:4px 20px 14px}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;padding:12px 0}
.facts dt{color:var(--muted);font-size:14.5px;padding-top:2px}
.facts dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.stamp{font-size:13px;color:var(--muted);padding-top:10px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.stamp:first-child{border-top:0;padding-top:12px}
#c-notes{margin-top:18px}
.also{margin-top:14px}
.also .row{min-height:54px}

/* ---- history ---- */
.event{align-items:flex-start}
.event__time{flex:0 0 64px;color:var(--muted);font-size:13.5px;padding-top:3px;font-variant-numeric:tabular-nums}
.event b{font-weight:600}

/* ---- sign in: the opening, in the website's style ---- */
body.signed-out{background:var(--band);color:#f5f5f4}
body.signed-out .band{display:none}
.signin{position:relative;max-width:440px;margin:0 auto;padding-top:calc(env(safe-area-inset-top,0px) + 7vh)}
.signin__mark{display:block;width:100%;height:auto;color:#f5f5f4;filter:drop-shadow(0 0 28px rgba(224,32,44,.3));animation:mark-in 1s var(--ease) both}
@keyframes mark-in{from{opacity:0;transform:translateY(12px) scale(.985)}}
.signin .kicker{display:block;margin:26px 0 10px;color:#ff5b55;text-align:center;white-space:normal;overflow:visible;font-size:10px;letter-spacing:.16em}
.signin .kicker:before{display:none}
.signin h1{text-align:center;color:#fff;font-size:clamp(36px,10vw,46px)}
.signin .sub{text-align:center;color:#a6a9ae}
.signin__card{margin-top:24px;padding:22px 20px 20px;border-radius:var(--round);background:var(--surface);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:screen-in .6s var(--ease) .15s both}
.signin .form{margin:0}
.signin .hint{color:#a6a9ae;text-align:center}
.signin__card .hint{color:var(--muted);text-align:left}
.err{color:var(--stop);font-weight:600;font-size:15.5px}

/* ---- a new sign-in, shown once ---- */
.secret{font:700 28px/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;padding:14px;border-radius:14px;
  background:var(--sunken);text-align:center;user-select:all;overflow-wrap:anywhere}
.share{white-space:pre-wrap;font-size:14.5px;background:var(--sunken);border-radius:14px;padding:12px 14px;color:var(--muted);user-select:all}

/* ---- sheets (dialogs) ---- */
#sheet{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}}
.sheet{position:relative;width:100%;max-width:560px;max-height:88vh;overflow:auto;background:var(--bg);border-radius:28px 28px 0 0;
  padding:26px max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));
  box-shadow:0 -12px 50px rgba(0,0,0,.3);animation:up .4s var(--ease)}
.sheet:before{inset:0}
.sheet:after{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
@media (min-width:700px){#sheet{align-items:center}.sheet{border-radius:28px;padding-bottom:22px}.sheet:after{display:none}}
@keyframes up{from{transform:translateY(40px);opacity:.3}}
.sheet h3{margin:0 0 6px;font:800 28px/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em}
.sheet p{margin:0 0 14px;color:var(--muted)}
.sheet .list{margin-bottom:12px}

#toast{position:fixed;left:0;right:0;bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;justify-content:center;
  pointer-events:none;padding:0 16px}
@media (min-width:880px){#toast{bottom:28px}}
#toast span{background:var(--toast);color:var(--toast-ink);padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 .5px rgba(255,255,255,.15);max-width:520px;animation:toast-in .4s var(--ease)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.96)}}
#toast span.bad{background:var(--stop-fill);color:var(--on-fill)}

.loading{height:3px;position:fixed;top:0;left:0;right:0;z-index:70;background:var(--accent);transform-origin:left;
  animation:load 1.2s ease-in-out infinite}
@keyframes load{0%{transform:scaleX(0)}60%{transform:scaleX(.7)}100%{transform:scaleX(1);opacity:0}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:880px) and (max-width:1023px){.band__name{display:none}}  /* the name is under Account */

/* ---- tows written up on scene (app.js: viewTows, towScreen, scanVin) ---- */
.btn--start{min-height:60px;font-size:18px;margin-bottom:4px}
.btn--start svg{width:24px;height:24px}
.thumb{flex:0 0 auto;width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--sunken)}
.thumb--none{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.thumb--none svg{width:26px;height:26px}
.save{display:flex;align-items:center;gap:8px;margin:-8px 0 18px;font-size:14px;color:var(--muted);cursor:default}
.save:before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--go)}
.save.is-busy:before{background:var(--hold);animation:pulse 1s infinite}
.save.is-bad{color:var(--stop);font-weight:600;cursor:pointer}
.save.is-bad:before{background:var(--stop)}
.loc{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.loc__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text)}
.loc__icon svg{width:22px;height:22px}
.loc__text{flex:1;min-width:0;font-size:15px;line-height:1.35}
.loc.is-ok .loc__icon{background:var(--go-soft);color:var(--go)}
.loc.is-warn .loc__icon{background:var(--hold-soft);color:var(--hold)}
.loc.is-busy .loc__icon{animation:pulse 1.2s infinite}
.loc .btn{flex:0 0 auto}
@media (max-width:429px){.loc{flex-wrap:wrap}.loc .btn{width:100%}}
.pick--big{min-height:48px;padding:0 18px;font-size:16px}
.pick svg{width:18px;height:18px;flex:0 0 auto}
#more-shots .pick{white-space:nowrap}
.picker small{color:var(--muted)}
.vin{display:flex;gap:10px}
.vin .input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:17px;letter-spacing:.06em}
.vin .btn{flex:0 0 auto}
.hint--bad{color:var(--stop);font-weight:600}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shots--more{grid-template-columns:repeat(3,1fr);margin-top:10px}
.shots--more[hidden]{display:none}
.shot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:4/3;padding:0;border-radius:16px;
  border:1.5px dashed var(--edge-line);background:var(--surface);color:var(--muted);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;overflow:hidden;
  -webkit-tap-highlight-color:transparent}
.shot svg{width:30px;height:30px}
.shot:active{transform:scale(.98)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot.has-photo{border-style:solid;border-color:var(--line)}
.shot__label{position:relative;z-index:1}
.shot.has-photo .shot__label{position:absolute;left:8px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;max-width:calc(100% - 16px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot.is-busy img{opacity:.55;animation:pulse 1s infinite}
.shot.is-bad{border-color:var(--stop)}
.shot.is-bad .shot__label{background:var(--stop-fill)}
.shot--small{aspect-ratio:1}
.slot{position:relative;display:grid}
.shot .emo{font-size:34px}
.shot .car{width:36px;height:52px;color:var(--muted)}
.car__dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.picks--grid{display:grid;grid-template-columns:repeat(4,1fr)}
.picks--grid .pick{justify-content:center;padding:0 6px}
.slot>.shot{width:100%}
.slot--empty>.shot{padding-bottom:34px}
.slot__phone{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;
  border-radius:999px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.slot__phone svg{width:16px;height:16px;flex:0 0 auto}
.slot__phone:active{transform:translateX(-50%) scale(.96)}
/* the cleanup photos: three to a row, and a wide box to add another */
.shots--cleanup{grid-template-columns:repeat(3,1fr)}
.slot--wide{grid-column:1/-1}
.slot--wide>.shot{aspect-ratio:auto;min-height:118px}
/* a field to tap that opens a list (the insurance company) */
.pickbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;text-align:left;cursor:pointer}
.pickbtn__v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickbtn.is-empty .pickbtn__v{color:var(--muted)}
.pickbtn .chev{transform:rotate(135deg);margin-top:-4px}
.pickbtn:disabled{cursor:default}
.pickbtn:disabled .chev{display:none}
.sheet .kicker{margin:4px 2px 8px}
.ins-list .row{min-height:52px;padding-block:12px}
.duty__offer{background:var(--hold-soft)}
.duty__offer[hidden]{display:none}
.duty__offer .row__title{color:var(--hold)}
.shot-big{display:block;width:100%;border-radius:14px;margin-bottom:12px;background:var(--sunken)}
.sugg{margin-top:-10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.sugg[hidden]{display:none}
.sugg__row{display:block;width:100%;padding:10px 14px;border:0;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.sugg__row:hover{background:var(--sunken)}
.sugg__row + .sugg__row{border-top:1px solid var(--line)}
.sugg__row b{display:block;font-weight:600}
.sugg__row span{display:block;font-size:13.5px;color:var(--muted)}
.scan{position:fixed;inset:0;z-index:80;background:#000}
.scan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan__frame{position:absolute;left:7%;right:7%;top:36%;height:24%;border-radius:14px;border:2px solid rgba(255,255,255,.92);box-shadow:0 0 0 200vmax rgba(0,0,0,.45)}
.scan__hint{position:absolute;left:16px;right:16px;top:calc(60% + 18px);margin:0;text-align:center;color:#fff;font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.scan__btns{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.scan__btns .btn{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.scan__btns .btn[hidden]{display:none}
body.scanning{overflow:hidden}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* on scene: bigger targets for cold hands, and a VIN that fits a narrow phone */
#jf .pick{min-height:44px}
#jf .pick:disabled,#jf .picker:disabled{opacity:.6;cursor:default}
#jf .input:disabled,#jf .plate-input:disabled{opacity:.75}
.loc .btn{min-height:44px}
@media (max-width:479px){.loc{flex-wrap:wrap}.loc .btn{width:100%}}
@media (max-width:379px){.vin .input{font-size:15px;letter-spacing:.02em;padding-left:12px;padding-right:12px}}
/* "Use it as a Mac app": a small card in the corner of a computer's browser tab (app.js: installNudge) */
.install-card{position:fixed;z-index:40;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:min(420px,calc(100vw - 32px));padding:14px 16px;border-radius:20px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.22);animation:pop .45s var(--ease) both}
.install-card img{flex:0 0 auto;width:44px;height:44px;border-radius:11px}
.install-card__text{flex:1 1 200px;min-width:0}
.install-card__text b{display:block;font-weight:700}
.install-card__text span{display:block;font-size:14px;color:var(--muted)}
.install-card__btns{display:flex;gap:8px;flex:1 1 100%;justify-content:flex-end}
.install-card .btn[hidden]{display:none}
#install-row .btn[hidden]{display:none}
@media (min-width:880px){.install-card{bottom:24px}}
.install-card[hidden]{display:none}
body.has-install-card .screen{padding-bottom:150px}
#install-row [hidden]{display:none}

/* ---- dispatch (app.js: the dispatch section) ---- */
.duty{margin-bottom:14px}
.duty .row--switch input{width:30px;height:30px}
#push-on{width:30px;height:30px}
.howto{list-style:none;margin:4px 0 14px;padding:0;display:grid;gap:12px}
.howto li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.4}
.howto .emo{font-size:22px;flex:0 0 28px;text-align:center}
.dispatch{margin:0 0 18px;padding:14px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:10px}
.dispatch__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dispatch__top b{font-weight:700}
.dispatch__by{color:var(--muted);font-size:14px;margin-left:auto}
.dispatch__when{margin:0;font-size:15px}
.dispatch__acts{display:flex;gap:8px;flex-wrap:wrap}
.dispatch__acts .btn svg{width:17px;height:17px}
.ranks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ranks__row{display:flex;align-items:center;gap:12px;padding:8px 4px;border-top:1px solid var(--line)}
.ranks__row:first-child{border-top:0}
.ranks__row b{display:block;font-weight:600}
.ranks__row span{color:var(--muted);font-size:14px}
.ranks__n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--sunken);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--ink)!important}
.ranks__state{margin-left:auto;flex:0 0 auto;font-weight:600}
.ranks__row.is-open .ranks__state{color:var(--hold)}
.ranks__row.is-accepted .ranks__state{color:var(--go)}
.ranks__row.is-declined .ranks__state,.ranks__row.is-expired .ranks__state{color:var(--stop)}
.ranks__row.is-open .ranks__n{background:var(--hold-soft);color:var(--hold)!important}
.ranks__row.is-accepted .ranks__n{background:var(--go-soft);color:var(--go)!important}
.offer{display:grid;gap:12px;text-align:center;padding-top:6px}
.offer .kicker{justify-content:center}
.offer .facts{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 16px}
.offer__clock{position:relative;width:150px;height:150px;margin:2px auto 0}
.offer__clock svg{width:100%;height:100%;transform:rotate(-90deg)}
.offer__track{fill:none;stroke:var(--line);stroke-width:9}
.offer__ring{fill:none;stroke:var(--go-fill);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .2s linear,stroke .3s}
.offer__ring.is-late{stroke:var(--stop-fill)}
.offer__clock b{position:absolute;left:0;right:0;top:36px;font:800 52px/1 var(--display);font-variant-numeric:tabular-nums}
.offer__clock span{position:absolute;left:0;right:0;top:92px;font-size:13px;color:var(--muted)}
.offer__away{margin:0;font:800 34px/1.05 var(--display);text-transform:uppercase}
.offer__by,.offer__sent{margin:0;color:var(--muted);font-size:14.5px}
.offer .err{text-align:center}
@media (max-height:700px){.offer{gap:9px}.offer__clock{width:112px;height:112px}.offer__clock b{top:27px;font-size:40px}.offer__clock span{top:69px;font-size:12px}.offer__away{font-size:28px}}

/* invoices */
.inv-total{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
.inv-line{padding:12px;margin-bottom:10px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.inv-line.is-over{border-color:var(--stop);background:var(--stop-soft)}
.inv-line .err{margin:8px 2px 0}
.inv-line__top{display:flex;gap:8px;align-items:center}
.inv-line__top .input{flex:1;font-weight:600}
.inv-detail{margin-top:8px;font-size:14px}
.inv-x{flex:0 0 auto;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:16px;cursor:pointer}
.inv-line__nums{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-top:8px}
.inv-line__nums label span{display:block;font-size:12.5px;color:var(--muted);margin:0 2px 4px}
.inv-amt{min-width:96px;text-align:right;font-size:17px;font-variant-numeric:tabular-nums;padding-bottom:12px}
.inv-sum{margin-top:14px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.inv-sum div{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.inv-sum .inv-sum__t{border:0;background:var(--band);color:var(--band-ink)}
.inv-sum__t b{font:800 24px/1 var(--display)}
.inv-frame{height:68vh;margin:-4px -4px 12px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#e9e9e6}
.inv-frame iframe{width:100%;height:100%;border:0}
.inv-panel{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow)}
.inv-panel>span:not(.emo):not(.chev){flex:1;min-width:0}
.inv-panel b{display:block}
.inv-panel small{display:block;color:var(--muted);font-size:13.5px}
.inv-panel .emo{font-size:24px}
.inv-panel--yard{cursor:default}

/* forms signed on the customer's phone */
.forms{margin-bottom:12px}
.forms .row .emo{flex:0 0 auto}
.qr{display:flex;justify-content:center;padding:14px;background:#fff;border-radius:16px}
.qr svg{width:260px;height:260px;max-width:100%}

/* ---- the yard: In yard (Towed, Released, Paid), Not paid, Done (app.js: viewYard, yardRow, yardCard, paySheet) ---- */
.search{position:relative;margin:0 0 12px}
.search .input{min-height:48px;padding-left:44px;padding-right:52px;-webkit-appearance:none;appearance:none}
.search .input::-webkit-search-cancel-button,.search .input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.search__icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);display:flex;color:var(--muted);pointer-events:none}
.search__icon svg{width:20px;height:20px}
.search__x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;color:var(--muted);font-size:17px;font-weight:600}
.search__x:hover{color:var(--ink);background:var(--sunken)}
.search__err{margin:-4px 2px 12px}
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 10px}
.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:64px;padding:10px 2px 9px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font:inherit;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s,transform .2s var(--ease)}
.stage:active{transform:scale(.97)}
.stage b{font:800 26px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.stage span{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.stage[aria-selected="true"]{background:var(--accent);border-color:transparent;color:var(--accent-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px rgba(200,20,31,.24)}
.stage[aria-selected="true"] span{color:inherit}
.stage--quiet:not([aria-selected="true"]) b{color:var(--muted)}
.stage--warn:not([aria-selected="true"]) b{color:var(--hold)}  /* Not paid, while there's any */
@media (max-width:374px){.stage b{font-size:24px}}
.stages__hint{margin:0 2px 10px}
/* In yard: its steps as pills, and what the yard holds */
.yard-pills{gap:6px;margin:0 0 10px}
.yard-pills .pick{flex:1 1 auto;justify-content:center;min-height:44px;padding:0 11px;gap:5px;font-size:14px}
@media (max-width:389px){.yard-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}  /* two by two, not three and one */
.yard-pills .pick b{font-weight:700;font-variant-numeric:tabular-nums}
.yard-sum{margin:0 2px;font-weight:600;font-variant-numeric:tabular-nums}
.yard-sum + .stages__hint{margin-top:2px}
.chip--sec{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge-line)}
.yard-row{align-items:flex-start;gap:12px}
.yard-row .thumb{width:50px;height:50px;margin-top:2px;border-radius:11px}
.yard-row .chev{align-self:center}
.yard-row__top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:2px 10px}
.yard-row__top .row__title{flex:1 1 112px;min-width:0}  /* a long date on the right goes under the car, not beside a squeezed one */
.yard-row__top.is-long .row__title{flex-basis:170px}
.yard-row__end{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;text-align:right}
.yard-row__top .inv-total{padding-top:1px;font-size:15px;white-space:nowrap}
.yard-row__end small{color:var(--muted);font-size:13px;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:379px){.yard-row{gap:10px;padding-left:14px;padding-right:12px}.yard-row .thumb{width:42px;height:42px;border-radius:10px}}
/* a tow's card: where the car is, its steps, and the next one as a big button */
.yard-card{margin:0 0 12px;padding:14px 16px 4px;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.yard-card__top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:2px 10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.yard-card__title{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.yard-card__title .emo{font-size:22px}
.yard-card__top .chip{flex:0 0 auto;margin-top:1px}
.yard-card__top small{flex:1 0 100%;color:var(--muted);font-size:13.5px;overflow-wrap:anywhere}
.yard-step{display:flex;align-items:center;gap:12px;padding:10px 0;min-height:64px}
.yard-step + .yard-step{border-top:1px solid var(--line)}
.yard-step__dot{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--edge-line)}
.yard-step__dot svg{width:26px;height:26px}
.yard-step.is-done .yard-step__dot{border:0;color:var(--go)}
.yard-step__text{flex:1;min-width:0}
.yard-step__text b{display:block;font-weight:700}
.yard-step__text small{display:block;color:var(--muted);font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.yard-step .btn{flex:0 0 auto;min-height:44px}
.yard-link{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--muted);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px}  /* a closed tow's invoice: there, not a step to take */
.yard-link:hover{color:var(--ink)}
.yard-foot{padding:14px 0 12px;border-top:1px solid var(--line)}
.yard-foot .note{margin:0 0 12px}
.yard-next{min-height:52px;padding:8px 18px;white-space:normal;text-align:center;line-height:1.15}  /* "Mark it paid · $1,234.56 owing" may need two lines at 320 px */
.yard-next .emo{font-size:20px}
.yard-quiet{display:block;min-height:44px;margin:6px auto 0;padding:0 12px;color:var(--muted);font:600 14.5px/1.2 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.yard-quiet:hover{color:var(--ink)}
.yard-closed{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.yard-closed span{flex:1;min-width:0}
.yard-closed .btn{flex:0 0 auto;min-height:44px}
.yard-next + .yard-closed,.yard-quiet + .yard-closed{margin-top:10px}
/* the invoice screen: what the driver wrote down, to price it from */
.drv-rec{padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.drv-rec dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;margin:0}
.drv-rec dl div{display:contents}
.drv-rec dt{color:var(--muted);font-size:13.5px;line-height:1.45}
.drv-rec dd{margin:0;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.drv-rec__note{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.drv-rec__note:first-child{margin-top:0;padding-top:0;border-top:0}
.drv-rec__note b{display:block;color:var(--muted);font-size:13.5px;font-weight:400;margin-bottom:3px}
.drv-rec__note p{margin:0;font-size:15px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.drv-rec__link{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin:10px -16px -14px;padding:0 16px;border-top:1px solid var(--line);
  border-radius:0 0 18px 18px;color:var(--accent-text);font-weight:600}
.drv-rec__link:hover{background:var(--sunken)}
/* payments on an invoice */
.pays__hint{margin:-6px 2px 12px}
.pays .row{min-height:58px}
.pays .row.is-void .row__title{color:var(--muted);font-weight:500}
.pays .row.is-void s{text-decoration-thickness:1.5px}
.pays__btns{margin-top:12px}
.pay-form .picks{gap:7px}
.pay-form .pick{min-height:44px}
.pay-form .hint{display:block}
.nowrap{white-space:nowrap}
/* Mark it paid: the invoice as it will be approved, what approving it still needs, then the payment */
.pay-form .mp-line{margin:-8px 2px 12px}
.mp-sum{margin:0}
.mp-sum div{gap:12px;align-items:baseline}
.mp-sum span{min-width:0;overflow-wrap:anywhere}
.mp-sum small{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.35}
.mp-sum b{flex:0 0 auto;white-space:nowrap}
.pay-form .mp-sum + .hint{margin:8px 2px 0}
.mp-see{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin-top:6px;padding:0 2px;color:var(--accent-text);font-weight:600}
.mp-block{margin:14px 0 0}
.mp-fix{display:flex;width:max-content;min-height:44px;margin-top:10px}
.mp-head{margin:16px 2px -8px;font:400 10.5px/1.4 var(--label);text-transform:uppercase;letter-spacing:.14em;color:var(--accent-text)}
#mp-inv{display:grid;gap:0}
#mp-inv > .field,#mp-inv > .pair{margin-top:18px}
#mp-inv > .mp-head + .field,#mp-inv > .mp-head + .pair{margin-top:16px}
.pay-form .mp-why{margin:-4px 2px 2px;text-align:center;color:var(--hold);font-weight:600}