/* Layout: one question per screen, left-aligned in a 560px column. Thin progress line on top,
   big tap rows, and a thumb-reach action bar pinned to the bottom on phones. */
:root{
  --bg:#f5f6f8; --surface:#ffffff; --ink:#0f1726; --muted:#667085; --line:#e3e6ec; --line-strong:#cdd2db;
  --accent:#2453d6; --accent-ink:#ffffff; --accent-soft:#eaf0fe; --danger:#c4271c; --ok:#16804a;
  --plate:#f7d117; --plate-ink:#111111;
  --font:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c111a; --surface:#141b27; --ink:#eef1f6; --muted:#97a1b2; --line:#232c3b; --line-strong:#344055;
  --accent:#6f9bff; --accent-ink:#071026; --accent-soft:#18264a; --danger:#ff8a80; --ok:#5fd394; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c111a; --surface:#141b27; --ink:#eef1f6; --muted:#97a1b2; --line:#232c3b; --line-strong:#344055;
  --accent:#6f9bff; --accent-ink:#071026; --accent-soft:#18264a; --danger:#ff8a80; --ok:#5fd394; color-scheme:dark}
*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font:17px/1.5 var(--font);-webkit-font-smoothing:antialiased;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 40px;
  -webkit-tap-highlight-color:transparent}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- Customer form ---------- */
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:14px 10px;display:grid;gap:12px}
.toprow{display:flex;align-items:center;gap:10px}
.brand{font:600 13px var(--font);letter-spacing:.06em;color:var(--muted);margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{font:600 13px var(--font);padding:6px 12px;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer}
.lang button.on{background:var(--ink);color:var(--bg)}
.link{border:0;background:none;color:var(--muted);font:500 14px var(--font);cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--ink)}
.bar{height:4px;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);width:0;border-radius:99px;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.meta{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
#stage{flex:1;display:flex;flex-direction:column}

.q{flex:1;display:flex;flex-direction:column;gap:22px;padding-top:clamp(16px,6vh,56px)}
.q h2,.card h2{font:700 clamp(26px,6.4vw,34px)/1.18 var(--font);letter-spacing:-.02em;margin:0;text-wrap:balance}
.help{color:var(--muted);margin:-10px 0 0;font-size:16px;max-width:46ch}
.err{color:var(--danger);font-weight:600;font-size:15px}

.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:600 18px/1.3 var(--font);padding:16px 16px;min-height:60px;
  border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s}
.opt small{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:2px}
.opt .key{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;border:1px solid var(--line-strong);font:600 12px var(--font);color:var(--muted)}
.opt .tick{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center}
.opt:hover{border-color:var(--line-strong)}
.opt:active{transform:scale(.985)}
.opt.on{border-color:var(--accent);background:var(--accent-soft)}
.opt.on .tick{background:var(--accent);border-color:var(--accent)}
.opt.on .tick::after{content:"";width:6px;height:10px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.opt.on .key{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.opts.two .opt{justify-content:center;font-size:20px;min-height:76px}
.opts.two .opt .tick{display:none}
@media (pointer:coarse){.opt .key{display:none}}

.nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.num{min-height:56px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 19px var(--font);cursor:pointer;font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s}
.num:hover{border-color:var(--line-strong)}
.num.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

input,select,textarea{font:500 21px var(--font);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:15px 16px;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--line-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
textarea{min-height:140px;font-size:18px;resize:vertical}
.plate{background:var(--plate);color:var(--plate-ink);font:700 36px/1 "Arial Narrow",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-align:center;border:2px solid #111;max-width:340px}
.plate::placeholder{color:#00000038}
.plate:focus{border-color:#111;box-shadow:0 0 0 4px var(--accent-soft)}

.date{display:flex;gap:10px;align-items:flex-end}
.date label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.date input{text-align:center;font-variant-numeric:tabular-nums;font-size:24px;padding:15px 8px}
.date .dd,.date .mm{width:78px}
.date .yy{width:116px}
.date .sep{font-size:28px;color:var(--line-strong);padding-bottom:14px}
.datehint{font-size:15px;color:var(--muted);margin-top:-10px;min-height:1.5em}

.fields{display:grid;gap:16px}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:330px){.shots{grid-template-columns:1fr}}
.shot{position:relative;display:grid;place-items:center;align-content:center;gap:4px;min-height:170px;padding:14px;border:1.5px dashed var(--line-strong);border-radius:var(--r);background:var(--surface);cursor:pointer;text-align:center;overflow:hidden;margin:0}
.shot:hover{border-color:var(--accent)}
.shot.has{border-style:solid;border-color:var(--accent);padding:8px 8px 10px}
.shot img{width:100%;aspect-ratio:1.586;object-fit:cover;border-radius:10px;background:var(--bg)}
.shot input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.shot:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.shot-ic{width:44px;height:44px;color:var(--accent)}
.shot-ic svg{width:100%;height:100%}
.shot-t{font-weight:700;font-size:17px;color:var(--ink)}
.shot-s{font-size:13px;color:var(--muted);font-weight:500}
.zoom{position:fixed;inset:0;z-index:50;background:rgba(5,8,14,.88);display:grid;place-items:center;gap:14px;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));align-content:center}
.zoom img{max-width:100%;max-height:82vh;border-radius:10px;background:var(--surface)}
.fl{display:grid;gap:7px;font-weight:600;font-size:15px;color:var(--muted)}

.nav{display:flex;gap:10px;align-items:center;padding-top:4px}
.btn{font:600 17px var(--font);border-radius:var(--r);padding:16px 22px;min-height:58px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.go{flex:1;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.go:active{transform:scale(.99)}
.btn.icon{width:58px;padding:0;flex:none}
.btn:disabled{opacity:.5;cursor:default}
.enter{font-size:13px;color:var(--muted);white-space:nowrap}
@media (pointer:coarse){.enter{display:none}}

.card{display:grid;gap:18px;padding-top:24px}
.review{display:grid;gap:4px}
.review h3{font:600 12px var(--font);margin:18px 0 2px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.ritem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.ritem b{font-weight:600;font-size:17px;word-break:break-word}
.ritem span{color:var(--muted);grid-column:1}
.ritem button{grid-row:1/3;grid-column:2;align-self:center}
pre.summary{white-space:pre-wrap;word-break:break-word;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;font:13px/1.5 ui-monospace,Menlo,monospace;max-height:320px;overflow:auto;margin:0}
.done{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.done svg{width:34px;height:34px}
.hint{font-size:14px;color:var(--muted)}

@media (prefers-reduced-motion:no-preference){
  .q,.card{animation:in .28s cubic-bezier(.2,.7,.2,1)}
  @keyframes in{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---------- Manager view ---------- */
.tag{font-size:12px;padding:2px 8px;border-radius:6px;background:var(--plate);color:var(--plate-ink);font-weight:700}
.mgr{max-width:1120px;margin:0 auto;display:grid;gap:16px;padding-block:20px}
.mgr-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.mgr-top h1{font:700 28px var(--font);letter-spacing:-.02em;margin:0}
.mgr-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:820px){.mgr-body{grid-template-columns:1fr}}
.list{display:grid;gap:8px;max-height:80vh;overflow:auto}
.li{display:grid;gap:4px;text-align:left;width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:15px var(--font)}
.li.on{border-color:var(--accent);background:var(--accent-soft)}
.li .r1{display:flex;justify-content:space-between;gap:8px;font-weight:700}
.li .r2{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);flex-wrap:wrap}
.chip{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px}
.chip.new{background:var(--accent);color:var(--accent-ink)}
.chip.done{background:var(--line);color:var(--muted)}
.filters{display:flex;gap:6px}
.filters button{font:600 14px var(--font);padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.filters button.on{border-color:var(--accent);background:var(--accent-soft)}
.detail{display:grid;gap:14px;min-width:0}
.detail .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 18px}
.detail .nav{position:static;margin:0;padding:0;background:none}
.dhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center}
.dhead h2{font:700 24px var(--font);margin:0}
.dsec{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dsec h3{margin:0;padding:10px 16px;font:600 12px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg);border-bottom:1px solid var(--line)}
.drow{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--line);font-size:15px}
.drow:last-child{border-bottom:none}
.drow .k{color:var(--muted);font-weight:600;font-size:14px}
.drow .v{font-weight:600;word-break:break-word;font-variant-numeric:tabular-nums}
.cps{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.cp{font:600 13px var(--font);padding:6px 12px;border-radius:8px;border:1.5px solid var(--accent);background:var(--surface);color:var(--accent);cursor:pointer;white-space:nowrap}
.cp.sm{padding:6px 8px;border-color:var(--line);color:var(--ink)}
.cp.ok{background:var(--ok);border-color:var(--ok);color:var(--surface)}
@media (max-width:520px){.drow{grid-template-columns:1fr auto}.drow .k{grid-column:1/-1}}
.cprow{display:flex;gap:8px;align-items:center}
.cprow input{flex:1;background:var(--bg);font-size:18px}
.cprow .cp{padding:7px 10px;font-size:12px;flex:none}
.opt.dim{opacity:.45}
.opt .cp{margin-left:auto;flex:none;padding:5px 9px;font-size:12px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
.row label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}

/* ---------- Dashboard list and new controls ---------- */
.drow.used{background:var(--accent-soft)}
.drow.used .k::before{content:"✓ ";color:var(--ok);font-weight:700}
.v.warn{color:var(--danger)}
.v.note{color:var(--muted);font-weight:500;font-style:italic}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs img{width:132px;aspect-ratio:1.586;object-fit:cover;border-radius:8px;cursor:zoom-in;background:var(--bg);border:1px solid var(--line)}
.milesin{max-width:300px}
.nums.miles{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.dsec h3{position:sticky;top:0;z-index:1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.login{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 20px;margin-top:10vh}
.mgr .wrap{min-height:0}
.confirm{position:fixed;inset:0;z-index:60;background:rgba(5,8,14,.55);display:grid;place-items:center;padding:16px}
.confirm-box{background:var(--surface);color:var(--ink);border-radius:16px;padding:22px 20px;max-width:420px;width:100%;display:grid;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.confirm-box h2{font:700 24px/1.2 var(--font);margin:0}
.confirm-box .nav .btn{flex:1}
/* ---------- Quote list ---------- */
.qtools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.filters .cnt{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600;margin-left:2px}
.filters button.on .cnt{color:var(--accent)}
.qsearch{flex:1;min-width:220px;max-width:420px}
.qsearch input{font-size:16px;padding:11px 14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qtable{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.qhead,.qrow{display:grid;grid-template-columns:150px minmax(0,1.6fr) 120px minmax(0,1.4fr) 90px 120px;gap:12px;align-items:center;padding:12px 16px}
.qhead{background:var(--bg);border-bottom:1px solid var(--line);font:600 12px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.qrow{width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink);font:15px var(--font);cursor:pointer}
.qrow:last-child{border-bottom:0}
.qrow:hover{background:var(--accent-soft)}
.qrow.isnew .c-who b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle}
.qrow b{font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow small{display:block;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-when,.c-drv{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.c-cover{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-st{display:flex;gap:6px;flex-wrap:wrap;align-items:center;align-self:center}
.c-st .chip{display:inline-block;line-height:1.5;height:auto;flex:none}
.chip.lang{background:var(--line);color:var(--ink)}
#qmore{display:flex;justify-content:center}
.qnav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.qnav .btn{min-height:44px;padding:10px 16px;font-size:15px}
.qpn{display:flex;gap:8px}
.mgr #det{gap:14px}
@media (max-width:760px){
  .qhead{display:none}
  .qrow{grid-template-columns:1fr auto;grid-template-areas:"who st" "car cover" "when drv";gap:6px 12px;padding:14px}
  .c-who{grid-area:who;min-width:0}.c-st{grid-area:st;justify-content:flex-end;align-self:start}.c-car{grid-area:car}.c-cover{grid-area:cover;text-align:right;font-size:14px;color:var(--muted)}
  .c-when{grid-area:when;font-size:13px}.c-drv{grid-area:drv;text-align:right;font-size:13px}
  .qsearch{max-width:none}
}
.filters button.dim{opacity:.5}
/* ---------- Logbook photo (one picture) ---------- */
.shots.one{grid-template-columns:1fr}
.shots.one .shot{min-height:220px}
/* ---------- Status chips and Sold / Not sold ---------- */
.mgr{max-width:1320px}
.chip.sold{background:var(--ok);color:var(--surface)}
.chip.notsold{background:#fde8e6;color:#a1271d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.notsold{background:#3a1c1a;color:#ff9f95}}
.qright{display:flex;gap:10px;flex:1;justify-content:flex-end;flex-wrap:wrap;min-width:0}
.btn.rep{min-height:44px;padding:10px 16px;font-size:15px;flex:none}
.filters{flex-wrap:wrap}
.outcome{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.outcome .ol{font-weight:700;margin-right:4px}
.ob{font:700 15px var(--font);padding:9px 18px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;min-height:42px}
.ob.sold.on{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.ob.notsold.on{background:#c4271c;border-color:#c4271c;color:#fff}
.ob:disabled{opacity:.6}
.outcome .hint{margin-left:4px}
/* ---------- Monthly report ---------- */
.rep-head h2{font:700 24px var(--font);margin:0 0 4px}
.rep-head .hint{margin:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:2px}
.kpi span{font-size:13px;font-weight:600;color:var(--muted)}
.kpi b{font:700 30px var(--font);font-variant-numeric:tabular-nums}
.kpi.ok b{color:var(--ok)}.kpi.bad b{color:var(--danger)}
.rrow{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr)) minmax(0,1.4fr);gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.rrow:last-child{border-bottom:0}
.rrow.rh{background:var(--bg);font:600 12px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rrow .ok{color:var(--ok);font-weight:700}.rrow .bad{color:var(--danger);font-weight:700}
.rrow .bar{display:inline-block;width:70px;height:6px;margin-right:8px;vertical-align:middle;background:var(--line);border-radius:99px;overflow:hidden}
.rrow .bar i{display:block;height:100%;background:var(--ok)}
@media (max-width:760px){
  .rrow.rh{display:none}
  .rrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px}
  .rrow>span:first-child{grid-column:1/-1}
  .rrow>span[data-l]::before{content:attr(data-l);display:block;font-size:12px;color:var(--muted);font-weight:600}
}
/* ---------- Photos pinned beside the details (computer) or along the top (phone) ---------- */
.dlay{display:grid;gap:16px;align-items:start}
.pdock{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:10px}
.pd-head{display:flex;align-items:center;gap:10px}
.pd-head b{font-size:15px}
.pd-head .hint{margin-right:auto;font-size:13px}
.pd-g{margin:0;display:grid;gap:6px}
.pd-g figcaption{font:700 13px var(--font);color:var(--muted)}
.pd-imgs{display:grid;gap:8px}
.pd-img{position:relative;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);cursor:zoom-in;display:block;width:100%}
.pd-img img{display:block;width:100%;aspect-ratio:1.586;object-fit:contain;background:var(--bg)}
.pd-img span{position:absolute;left:6px;top:6px;font:700 11px var(--font);background:rgba(15,23,38,.75);color:#fff;padding:2px 7px;border-radius:999px}
.pd-img.missing img{visibility:hidden}
.pdock.shut .pd-body{display:none}
@media (min-width:1000px){
  .dlay.hasph{grid-template-columns:minmax(0,1fr) 420px}
  .dlay.hasph .pdock{order:2;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
  .dlay.hasph .detail{order:1}
  .pd-body{display:grid;gap:14px}
}
@media (max-width:999px){
  .dlay.hasph .pdock{position:sticky;top:0;z-index:6;border-radius:0 0 14px 14px;margin-inline:-4px;box-shadow:0 6px 16px rgba(15,23,38,.08)}
  .pd-body{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}
  .pd-g{flex:none}
  .pd-imgs{grid-auto-flow:column;grid-auto-columns:minmax(150px,170px)}
  .dlay.hasph .dsec h3{position:static}
}
/* Enlarged photo with rotate */
.zoom .zbar{display:flex;gap:10px;justify-content:center}
.zoom .zbar .btn{flex:none;min-width:110px}
/* "New quote" pop-up on the dashboard */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 14px 12px 18px;display:flex;gap:12px;align-items:center;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.25);max-width:calc(100vw - 32px)}
.toast button{font:700 14px var(--font);border:0;border-radius:10px;padding:8px 12px;background:var(--accent);color:var(--accent-ink);cursor:pointer}
.toast .x{background:transparent;color:var(--bg);opacity:.7}
/* WhatsApp hand-off on the thank-you screen */
.btn.wa{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#1a8f4a;border-color:#1a8f4a;color:#fff;text-decoration:none;font-weight:700}
.btn.wa:hover{background:#157a3f}
/* Details read automatically from a licence photo */
.drow .k .auto{display:inline-block;margin-left:6px;font:700 10px var(--font);letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent);vertical-align:middle}
/* Photo slots: upload photos that came in on WhatsApp */
.pd-cell{display:grid;gap:4px}
.pd-rep{justify-self:end;font:600 12px var(--font);color:var(--accent);cursor:pointer;position:relative;padding:2px 4px}
.pd-rep:hover{text-decoration:underline}
.pd-empty{position:relative;display:grid;place-items:center;align-content:center;gap:2px;aspect-ratio:1.586;width:100%;border:1.5px dashed var(--line-strong);border-radius:10px;background:var(--bg);color:var(--muted);text-align:center;font-size:13px;cursor:pointer;padding:8px}
label.pd-empty:hover{border-color:var(--accent);color:var(--accent)}
.pd-empty span{font:700 12px var(--font);text-transform:uppercase;letter-spacing:.05em}
.pd-empty b{font:700 15px var(--font);color:var(--accent)}
.pd-empty small{font-size:12px}
.pd-empty input,.pd-rep input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pd-empty:focus-within,.pd-rep:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.busy{opacity:.6;pointer-events:none}
.chip.due{background:#fff1d6;color:#8a5300}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.due{background:#3a2a0c;color:#ffc56b}}
.btn.wa svg{flex:none;width:24px;height:24px}
[hidden]{display:none!important}
/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;margin-right:auto;color:var(--muted);text-decoration:none;min-width:0}
.logo .lg{height:40px;width:auto;display:block}
/* ---------- Start page: which insurance ---------- */
.types{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.type{position:relative;display:grid;gap:14px;align-content:start;text-align:left;padding:20px 18px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);font:700 18px/1.25 var(--font);color:var(--ink);cursor:pointer;min-height:150px}
.type>svg{width:34px;height:34px;color:var(--accent)}
.type .go{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:15px;color:var(--accent)}
.type .go svg{width:16px;height:16px}
.type:not(.off):hover,.type.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.type.off{cursor:not-allowed;color:var(--muted);background:transparent;border-style:dashed}
.type.off>svg{color:var(--line-strong)}
.soon{position:absolute;top:14px;right:14px;font:700 11px var(--font);letter-spacing:.04em;text-transform:uppercase;background:var(--line);color:var(--muted);padding:3px 8px;border-radius:999px}
@media (max-width:340px){.types{grid-template-columns:1fr}}
/* ---------- WhatsApp chat button ---------- */
.wafab{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:10px;background:#1a8f4a;color:#fff;border-radius:999px;padding:14px;box-shadow:0 10px 24px rgba(0,0,0,.18);font:700 15px var(--font);text-decoration:none}
.wafab svg{width:28px;height:28px;flex:none}
.wafab span{padding-right:6px}
.wafab:hover{background:#157a3f}
@media (max-width:600px){.wafab span{display:none}#formWrap{padding-bottom:70px}}
.pd-empty.drag{border-color:var(--accent);border-style:solid;background:var(--accent-soft);color:var(--accent)}
/* The logo is just a picture, not a link */
.logo{cursor:default}