:root{
  --bg:#f6f6f4; --card:#ffffff; --ink:#1d2228; --muted:#6b7280; --line:#e3e3df; --soft:#eeeeea;
  /* text-safe on white and on the tinted backgrounds (>= 4.5:1) */
  --green:#2f7d52; --amber:#8f5c00; --red:#b4322a;
  --green-bg:#e6f3ec; --amber-bg:#fbf1dc; --red-bg:#f8e3e0;
  --sea:#eef2f4; --land:#ffffff; --canvas:#c9cdc4;
  --blue:#1d5fa8; --green-solid:#2f7d52;   /* driver slides: white text on these */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15181b; --card:#1e2226; --ink:#e8e8e6; --muted:#9aa1a9; --line:#30363c; --soft:#262b30;
    --green:#4cb27a; --amber:#e0a634; --red:#e0604f;
    --green-bg:#1d3327; --amber-bg:#3a2f17; --red-bg:#3d2220;
    --sea:#181c20; --land:#23282d; --canvas:#4a5048;
    --blue:#2a6cb5; --green-solid:#2c7a4e;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 "Segoe UI",system-ui,sans-serif}
header{display:flex;align-items:center;gap:24px;padding:12px 20px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}
header h1{font-size:16px;margin:0;font-weight:600}
header .who{margin-left:auto;color:var(--muted);font-size:13px}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav button{border:0;background:none;padding:8px 12px;border-radius:6px;color:var(--muted);font:inherit;cursor:pointer}
nav button.on{background:var(--soft);color:var(--ink);font-weight:600}
main{max-width:1280px;margin:0 auto;padding:20px 16px 60px}
.screen{display:none}.screen.on{display:block}
.note{color:var(--muted);font-size:12.5px;margin:0 0 14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
h2{font-size:18px;margin:0 0 4px}
h3{font-size:14px;margin:0 0 10px}
.muted{color:var(--muted)}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:6px;font:inherit;cursor:pointer}
.btn.primary{background:var(--ink);color:var(--card);border-color:var(--ink)}
.link{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;cursor:pointer;font:inherit}

/* request */
.req{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
.form section{padding:14px 0;border-top:1px solid var(--line)}
.form section:first-of-type{border-top:0;padding-top:0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 12px}
.span2{grid-column:span 2}.span4{grid-column:span 4}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
input,select,textarea{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font:inherit}
.tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;background:var(--soft)}
.days{display:flex;gap:6px;flex-wrap:wrap}
.day{border:1px solid var(--line);border-radius:8px;padding:7px 12px;min-width:90px;text-align:left;background:var(--card);color:var(--ink);cursor:pointer;font:inherit}
.day small{display:block;font-size:11.5px;color:inherit;opacity:.92}
/* solid tiles, text checked for 4.5:1 contrast: green 5.0, amber (dark text) 8.8, red 6.1 */
.day.g{background:#2f7d52;border-color:#2f7d52;color:#fff}
.day.a{background:#f2b730;border-color:#f2b730;color:#1d2228}
.day.r{background:#b4322a;border-color:#b4322a;color:#fff}
.day.g:hover,.day.a:hover,.day.r:hover{filter:brightness(1.07)}
.day.closed{background:var(--soft);border-color:var(--line);color:var(--muted);cursor:not-allowed}
.day.closed small{color:var(--muted)}
.day.sel{outline:3px solid var(--ink);outline-offset:2px;font-weight:600}
.docs{display:flex;gap:8px;flex-wrap:wrap}
.doc{border:1px dashed var(--line);border-radius:6px;padding:6px 10px;font-size:12.5px}
.doc.ok{border-style:solid}
.check{position:sticky;top:12px}
.meter{margin:12px 0}
.meter .row{display:flex;justify-content:space-between;font-size:12.5px}
.bar{height:8px;background:var(--soft);border-radius:4px;position:relative;overflow:hidden;margin-top:4px}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--muted);opacity:.35}
.bar b{position:absolute;top:0;bottom:0;background:var(--green)}
.verdict{border-radius:8px;padding:10px 12px;margin-top:12px}
.verdict.g{background:var(--green-bg)}.verdict.a{background:var(--amber-bg)}.verdict.r{background:var(--red-bg)}
.verdict strong{display:block}
.pk{width:100%;border-collapse:collapse;font-size:12.5px}
.pk th{font-weight:500;color:var(--muted);text-align:left;padding:2px 4px}
.pk td{padding:3px 4px}
.pk input,.pk select{padding:5px 6px}
.pk .x{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit}
.pk input[readonly]{background:var(--soft);border-color:transparent}
.ready{margin-top:12px;border-radius:8px;padding:12px 14px;border-left:4px solid var(--line);background:var(--soft)}
.ready:empty{display:none}
.ready.g{border-left-color:var(--green);background:var(--green-bg)}
.ready.a{border-left-color:var(--amber);background:var(--amber-bg)}
.ready.r{border-left-color:var(--red);background:var(--red-bg)}
.ready dl{display:grid;grid-template-columns:repeat(4,auto);gap:4px 16px;margin:8px 0 0;font-size:12.5px}
.ready dt{color:var(--muted)}.ready dd{margin:0;font-weight:600}
.batch{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
.batch input{width:auto;margin-top:3px}
.batch.out{opacity:.5}
.src{font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:6px;font-weight:400}
.hero{margin-bottom:16px}
.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.sec-h h3{margin:0;font-size:15px}
.sec-h .sub{font-size:12px}
.stepn{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--card);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.search{display:flex;gap:8px;max-width:560px}
.search input{font-size:17px;padding:10px 12px;letter-spacing:.5px}
.search .btn{padding:10px 18px;white-space:nowrap}
.hint{font-size:12px;margin-top:6px}
.stack{display:flex;flex-direction:column;gap:16px}
.span3{grid-column:span 3}
.zonebox{padding-top:6px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.filters input[type=search]{flex:1 1 260px;width:auto}
.filters select,.filters input[type=date]{width:auto}
.filters label{display:flex;gap:6px;align-items:center;font-size:13px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:99px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer}
.chip.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
details.more{margin-top:12px;font-size:13px}
details.more summary{cursor:pointer;color:var(--muted)}
.flex{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cb{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:13.5px;margin:0;cursor:pointer}
.cb input[type=checkbox]{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--ink)}
.cb small{display:block;color:var(--muted);font-size:12px}
select.mini{width:auto;padding:2px 6px;display:inline-block}
.check .verdict{margin:0 0 12px}
.actionbar{position:sticky;bottom:0;margin-top:16px;display:flex;gap:10px;align-items:center;justify-content:flex-end;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;box-shadow:0 -4px 16px rgba(0,0,0,.06);flex-wrap:wrap}
.actionbar #sumbar{margin-right:auto;font-size:13px}
.mine{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.mrow{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.mrow.sel{background:var(--soft);margin:0 -16px;padding:12px 16px}
.mrow .who2{flex:1;min-width:200px}
.mrow .who2 small{display:block;color:var(--muted)}
.st{font-size:12px;padding:2px 9px;border-radius:99px;background:var(--soft);white-space:nowrap}
.st.g{background:var(--green-bg)}.st.a{background:var(--amber-bg)}.st.r{background:var(--red-bg)}
#drawer:empty{display:none}
#drawer .grid{grid-template-columns:1fr 1fr}
.day.other{border-style:dashed;position:relative;cursor:pointer;color:var(--ink)}
.day.other small{color:var(--muted)}
.day.other input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0}
.datemsg{font-size:12.5px;margin-top:8px}
.datemsg:empty{display:none}
.confirm{border:1px solid var(--red);border-radius:8px;padding:12px;margin-top:12px;background:var(--red-bg)}
.orderrow{margin-top:14px;grid-template-columns:repeat(3,1fr)}
.orderrow input[readonly]{background:var(--soft);border-color:transparent;font-weight:600}
.pickso{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
textarea{resize:vertical;min-height:56px}
.dochead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:14px}
.dochead label{margin:0}
.dochead span{font-size:12px}
.docrows{margin-top:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dcat{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--line);min-height:46px;transition:background .12s}
.dcat:first-child{border-top:0}
.dcat .cn{font-size:13px;font-weight:600}
.dcat .cn small{display:block;font-weight:400;font-size:11px;color:var(--muted)}
.dcat .cn small.need{color:var(--amber)}
.dcat .zone{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:30px;border:1px dashed transparent;border-radius:8px;padding:2px 4px;cursor:pointer}
.dcat .empty{color:var(--muted);font-size:12.5px}
.dcat:hover .zone{border-color:var(--line)}
.dcat.over{background:var(--soft)}
.dcat.over .zone{border-color:var(--ink)}
.dcat.done .cn::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:1px}
.fchip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:4px 8px;font-size:12.5px;cursor:grab;max-width:100%}
.fchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip small{color:var(--muted)}
.fchip .x{background:none;border:0;color:var(--red);cursor:pointer;font:inherit;font-size:12px;padding:0}
.dundo{padding:8px 12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.pack{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--soft)}
.pack .ph{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pack .ph h4{margin:0;font-size:14px}
.pack ol{margin:8px 0 0;padding-left:20px;font-size:12.5px}
.pack li{padding:2px 0}
.pack .miss{color:var(--red)}
.pack .res{font-size:12.5px;margin-top:8px}
.hhmm{font-variant-numeric:tabular-nums;letter-spacing:.5px}
.hhmm.bad{border-color:var(--red);background:var(--red-bg)}
.winmsg{font-size:12.5px;margin-top:6px}
.winmsg:empty{display:none}
.pk .plsel{min-width:150px}
.pk td:last-child{white-space:nowrap}
#req.col .delonly,#req:not(.col) .colonly{display:none}
.modetag{display:inline-block;font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px;background:var(--ink);color:var(--card);margin-right:8px}
.totals{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;margin-top:8px}
.totals b{font-weight:600}
.deck{margin-top:6px}
.lorrymini{display:flex;align-items:center;gap:10px;margin:6px 0 2px}
.lorrymini svg{width:96px;height:auto;flex:none}

/* day plan */
.kpis{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 14px}
.kpi b{font-size:18px;display:block}
.banner{display:flex;align-items:center;gap:12px;background:var(--red-bg);border-radius:8px;padding:10px 14px;margin-bottom:12px;flex-wrap:wrap}
.banner.done{background:var(--green-bg)}
.plan{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
svg text{font-family:inherit}
.lane{margin-bottom:18px}
.lane-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:10px}
.lane-head svg{width:72px;height:auto;flex:none}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap;margin-top:6px}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--c)}
.decisions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.dcard{border-left:4px solid var(--red)}
.dcard.done{border-left-color:var(--green)}
.why{font-size:12.5px;color:var(--muted);margin:6px 0 10px;padding-left:16px}
.alt{font-size:12.5px;margin-top:10px}
.alt label{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:12.5px;margin:4px 0}
.alt input{width:auto}
.log{margin-top:16px;font-size:12.5px}
.log div{padding:6px 0;border-top:1px solid var(--line)}
.stoplist{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:10px}
.stoplist td,.stoplist th{padding:6px 8px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.stoplist th{color:var(--muted);font-weight:500}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}

/* week */
table.week{width:100%;border-collapse:collapse}
table.week th,table.week td{padding:10px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
table.week th{font-weight:500;color:var(--muted);font-size:12.5px}
.cellbar{font-size:12px}
.cellbar .bar{height:6px}

/* lorry */
.lorry{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.spec{width:100%;border-collapse:collapse;font-size:13px}
.spec td{padding:7px 8px;border-top:1px solid var(--line);vertical-align:top}
.spec td:first-child{color:var(--muted);width:42%}
.spec input{width:110px;padding:4px 6px}
.tbc{font-size:11px;color:var(--amber);margin-left:6px}

/* driver (phone first) */
.drv{max-width:520px;margin:0 auto;padding-bottom:96px}
.drv-top{display:flex;align-items:center;gap:10px}
.drv-day{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);text-decoration:none;font-size:22px}
.drv-date{flex:1;text-align:center;display:flex;flex-direction:column;font-size:16px}
.drv-date .muted{font-size:13px}
.drv-prog{height:6px;border-radius:99px;background:var(--soft);margin:10px 0 4px;overflow:hidden}
.drv-prog b{display:block;height:100%;background:var(--green)}
.drv-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:12px}
.drv-empty{text-align:center;padding:32px 16px}
.drv-row{display:flex;align-items:center;gap:8px}
.drv-sid{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 6px;border-radius:99px;background:var(--ink);color:var(--card);font-weight:700;font-size:14px}
.drv-sid.sm{min-width:30px;height:30px;font-size:12px}
.drv-tag{font-size:12px;padding:3px 10px;border-radius:99px;background:var(--soft)}
.drv-tag.a{background:var(--amber-bg);color:var(--amber)}
.drv-tag.g{background:var(--green-bg);color:var(--green);display:inline-block;margin-bottom:6px}
.drv-name{font-size:21px;font-weight:700;line-height:1.25;margin-top:10px}
.drv-addr{font-size:15px;margin-top:4px}
.drv-when{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:15px}
.drv-hard{color:var(--red);font-weight:600}
.drv-instr{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--amber-bg);font-size:15px}
.drv-acts{display:flex;gap:10px;margin-top:14px}
.drv-btn{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid var(--ink);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;width:100%}
.drv-more{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.drv-more summary,.drv-fail summary,.drv-load summary{cursor:pointer;font-size:15px;min-height:32px;display:flex;flex-direction:column;justify-content:center}
.drv-pk{padding-left:18px;margin:8px 0;font-size:14px}
.drv-pk small{display:block;color:var(--muted)}
.drv-loadlist{margin:10px 0;padding-left:22px;font-size:15px}
.drv-loadlist li{padding:6px 0;border-bottom:1px solid var(--line)}
.drv-loadlist small{display:block;color:var(--muted);font-size:13px}
.drv-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:72px;margin-top:12px;border:2px dashed var(--line);border-radius:14px;background:var(--card);font-size:16px;font-weight:600;cursor:pointer;padding:12px;text-align:center}
.drv-photo.ok{border-style:solid;border-color:var(--green);color:var(--green)}
.drv-photo img{max-width:100%;max-height:180px;border-radius:8px}
.drv-fail{margin-top:12px;color:var(--muted)}
.drv-fail form{display:flex;flex-direction:column;gap:6px;margin-top:8px;color:var(--ink)}
.drv-why{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:15px}
.drv-why input{width:auto}
.drv-bar-in{display:flex;gap:10px;max-width:520px;margin:0 auto;align-items:center}
.drv-prob{flex:0 0 auto;min-height:56px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.drv-nophoto{display:block;margin:8px auto 0;font-size:13px;color:var(--muted)}
.slide{position:relative;flex:1;height:56px;border-radius:14px;background:var(--ink);overflow:hidden;user-select:none;touch-action:none}
.slide.danger{background:var(--red)}
.slide.off{background:var(--soft)}
.slide.off .slide-txt{color:var(--muted)}
.slide.off .slide-knob{background:var(--line);cursor:not-allowed}
.slide-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 10px 0 56px;color:var(--card);font-size:17px;font-weight:700;white-space:nowrap;pointer-events:none}
.slide-txt::after{content:"  ›››";opacity:.45;letter-spacing:-2px;margin-left:6px}
.slide-knob{position:absolute;left:4px;top:4px;width:48px;height:48px;border:0;border-radius:11px;background:var(--card);color:var(--ink);font-size:26px;font-weight:700;cursor:grab;touch-action:none;transition:transform .2s}
.slide.drag .slide-knob{transition:none;cursor:grabbing}
.slide.sent{opacity:.7;pointer-events:none}
.drv-wait{margin-top:12px;padding:10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:15px}
.sheet{position:fixed;inset:0;z-index:2000}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.sheet-box{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;max-height:88vh;overflow:auto;background:var(--bg);border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:16px}
.sheet-step{display:flex;flex-direction:column;gap:8px}
.sheet-step[hidden],.sheet[hidden]{display:none}
.sheet-step .slide{flex:none}
.sheet-step .drv-why{flex-direction:column;align-items:flex-start;justify-content:center;width:100%;min-height:52px;text-align:left;font:inherit;font-size:16px;color:var(--ink);cursor:pointer}
.sheet-step .drv-why:disabled{color:var(--muted);cursor:not-allowed;background:var(--soft)}
.gate-note{font-size:12px;color:var(--amber)}
.gate-note:empty{display:none}
.drv-bar{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);z-index:1000}
.drv-go{display:block;width:100%;max-width:520px;margin:0 auto;min-height:56px;border:0;border-radius:14px;background:var(--ink);color:var(--card);font:inherit;font-size:18px;font-weight:700;cursor:pointer}
.drv-h{margin:22px 0 6px;font-size:15px}
.drv-list{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.drv-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line);min-height:52px}
.drv-item:first-child{border-top:0}
.drv-item.now{background:var(--soft)}
.drv-item.done{color:var(--muted)}
.tripline td{background:var(--soft);font-size:13px}
.drv-trip{margin:14px 0 4px;font-size:13px;color:var(--muted);font-weight:600}
a.drv-item{color:var(--ink);text-decoration:none}
a.drv-item:active{background:var(--soft)}
.drv-seq{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--amber-bg);color:var(--ink);font-size:14px}
.drv-seq a{display:inline-block;margin-top:6px;color:var(--ink);font-weight:600}
.drv-item.done .drv-sid{background:var(--green)}
.drv-item.skip{color:var(--muted)}
.drv-item.skip .drv-sid{background:var(--muted)}
.drv-iname{flex:1;font-size:15px;line-height:1.3}
.drv-iname small{display:block;font-size:12px;color:var(--muted)}
.drv-ieta{font-size:14px;font-weight:600;white-space:nowrap}
@media (max-width:640px){
  header{gap:8px 12px;padding:8px 12px}
  header img{height:24px!important}
  header h1{font-size:15px;padding-left:10px!important}
  header .who{margin-left:0;width:100%;font-size:12px}
  .srcbadge{display:none}
  header nav a{padding:6px 10px}
  main{padding:12px 12px 40px}
}
/* driver page on a phone: one slim top bar, edge-to-edge cards, text big enough not to need zoom */
body.drvmode{font-size:16px;-webkit-text-size-adjust:100%}
body.drvmode header{flex-wrap:nowrap;gap:10px;padding:6px 10px calc(6px) max(10px, env(safe-area-inset-left))}
body.drvmode header > img{display:none!important}
body.drvmode header h1{border-left:0!important;padding-left:0!important}
body.drvmode header h1 img{width:30px;height:30px}
body.drvmode header nav{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto}
body.drvmode header nav a{padding:8px 10px;white-space:nowrap;font-size:15px}
body.drvmode header .helplink{font-size:14px}
body.drvmode header .who{width:auto;margin-left:auto;font-size:0;white-space:nowrap}
body.drvmode header .who form,body.drvmode header .who select{font-size:14px;margin-left:0!important}
body.drvmode header .who select{max-width:96px}
body.drvmode main{max-width:none;padding:8px 8px 0}
.drvmode .drv{max-width:760px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.drvmode .drv-bar-in,.drvmode .drv-go{max-width:760px}
/* in the page, right under the current stop: pinned bars slide off screen when a phone is pinch-zoomed */
.drvmode .drv-bar{position:static;padding:0;margin-top:10px;background:none;border:0}
.drvmode .drv-card{padding:14px;margin-top:8px}
.drvmode .drv-date{font-size:18px}
.drvmode .drv-date .muted{font-size:14px}
.drvmode .drv-day{width:52px;height:52px;font-size:26px}
.drvmode .drv-sid{min-width:40px;height:40px;font-size:16px}
.drvmode .drv-sid.sm{min-width:34px;height:34px;font-size:14px}
.drvmode .drv-tag{font-size:14px}
.drvmode .drv-name{font-size:24px}
.drvmode .drv-addr,.drvmode .drv-when,.drvmode .drv-instr{font-size:17px}
.drvmode .drv-btn{min-height:58px;font-size:18px}
.drvmode .drv-more summary,.drvmode .drv-load summary,.drvmode .drv-loadlist{font-size:17px}
.drvmode .drv-loadlist small,.drvmode .drv-pk small{font-size:14px}
.drvmode .drv-pk{font-size:16px}
/* run list: double size, readable at arm's length in the cab */
.drvmode .drv-h{font-size:28px;margin-top:20px}
.drvmode .drv-h .muted{font-size:18px!important}
.drvmode .drv-item{min-height:84px;padding:14px 12px;gap:4px 12px;align-items:flex-start;flex-wrap:wrap}
.drvmode .drv-iname{flex:1 1 0}
.drvmode .drv-item .drv-ieta{flex-basis:100%;padding-left:60px}   /* time / Done under the name, so the name gets the full width */
.drvmode .drv-item .drv-sid.sm{min-width:48px;height:48px;font-size:20px;flex:none}
.drvmode .drv-iname{font-size:30px;line-height:1.2;min-width:0;overflow-wrap:anywhere}
.drvmode .drv-iname small{font-size:22px;margin-top:2px}
.drvmode .drv-ieta{font-size:24px}
.drvmode .drv-trip{font-size:22px;padding:0 4px}
.drvmode .drv-wait,.drvmode .drv-seq{font-size:16px}
/* action area: slide full width on top, Problem underneath; same text size as the run list */
.drvmode .drv-bar-in{flex-direction:column;align-items:stretch}
.drvmode .drv-bar-in .slide{order:1;flex:none}
.drvmode .drv-prob{order:2;width:100%;min-height:68px;padding:0 10px;font-size:28px;color:var(--red);border-color:var(--red)}
.drvmode .slide{height:auto;min-height:80px}
.drvmode .slide-knob{width:70px;height:70px;top:5px;left:5px;font-size:34px}
.drvmode .slide-txt{padding:0 10px 0 84px;font-size:30px;line-height:1.1;white-space:normal;text-align:center}
.drvmode .slide-txt::after{content:none}
/* Arrived = blue (on the way), Delivered / Collected = green (done), Report & skip = red (problem) */
.slide.arr{background:var(--blue)}
.slide.ok{background:var(--green-solid)}
.slide.arr .slide-txt,.slide.ok .slide-txt,.slide.danger .slide-txt{color:#fff}
.slide.arr .slide-knob{color:var(--blue)}
.slide.ok .slide-knob{color:var(--green-solid)}
.slide.danger .slide-knob{color:var(--red)}
.slide.arr .slide-knob,.slide.ok .slide-knob,.slide.danger .slide-knob{background:#fff}
.drvmode .sheet-box{max-width:760px}
.drvmode .sheet-step .drv-why{font-size:17px;min-height:58px}
/* whole driver page at the run-list size: main text 30px, secondary text 22px */
body.drvmode header nav a{font-size:20px}
body.drvmode header .helplink,body.drvmode header .who form{font-size:18px}
.drvmode .drv-date{font-size:30px;line-height:1.15}
.drvmode .drv .muted{font-size:22px!important}
.drvmode .drv-day{width:64px;height:64px;font-size:40px;font-weight:700;background:var(--blue);border-color:var(--blue);color:#fff}
.drvmode .drv-prog{height:10px}
.drvmode .drv-row{flex-wrap:wrap;gap:10px}
.drvmode .drv-sid{min-width:52px;height:52px;font-size:22px}
.drvmode .drv-tag{font-size:22px;padding:4px 14px}
.drvmode .drv-name{font-size:30px;line-height:1.2}
.drvmode .drv-addr,.drvmode .drv-when,.drvmode .drv-instr,.drvmode .drv-seq,.drvmode .drv-wait{font-size:30px;line-height:1.25}
.drvmode .drv-when{flex-direction:column;gap:2px}
.drvmode .drv-btn{min-height:72px;font-size:30px}
.drvmode .drv-more summary,.drvmode .drv-pk{font-size:22px}
.drvmode .drv-load summary,.drvmode .drv-loadlist{font-size:30px}
.drvmode .drv-loadlist small,.drvmode .drv-pk small{font-size:22px}
.drvmode .drv-photo{font-size:22px}
.drvmode .gate-note{font-size:22px}
.drvmode .sheet-h{font-size:30px;flex-wrap:wrap;gap:8px}
.drvmode .sheet-box .link,.drvmode .drv .link{font-size:22px}
.drvmode .sheet-step .drv-why{font-size:30px;min-height:76px}
.drvmode .sheet-box input{font-size:22px!important;min-height:60px!important}
.drvmode .drv-go{font-size:30px;min-height:76px}
/* old driver mock (kept for the phone frame elsewhere) */
.phone{width:360px;max-width:100%;margin:0 auto;border:1px solid var(--line);border-radius:28px;padding:18px 16px;background:var(--card)}
.next{border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0}
.next .big{font-size:17px;font-weight:600}
.pill{display:inline-block;font-size:12px;padding:2px 8px;border-radius:99px;background:var(--amber-bg)}
.phone .btn{width:100%;padding:12px;margin-top:8px;font-size:15px}
.rest div{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line);font-size:13px}

@media (max-width:900px){
  .dcat{grid-template-columns:1fr}
  .req,.plan,.decisions,.lorry,.mine{grid-template-columns:1fr}
  .span3{grid-column:span 2}
  .grid{grid-template-columns:1fr 1fr}
  .span4{grid-column:span 2}
  .check{position:static}
}

/* ---- app additions ---- */
a{color:inherit}
header .who select{font:inherit;font-size:13px;padding:4px 6px;width:auto}
nav a{display:inline-block;padding:8px 12px;border-radius:6px;color:var(--muted);text-decoration:none}
nav a.on{background:var(--soft);color:var(--ink);font-weight:600}
.flash{border-radius:8px;padding:10px 14px;margin-bottom:12px}
.flash.g{background:var(--green-bg)}.flash.r{background:var(--red-bg)}.flash.a{background:var(--amber-bg)}
.errs{margin:0;padding-left:18px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:8px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{color:var(--muted);font-weight:500;font-size:12.5px}
.inline{display:inline}
.inline select,.inline input{width:auto;display:inline-block;padding:4px 6px;font-size:12.5px}
.btn.sm{padding:4px 10px;font-size:12.5px}
.btn.danger{color:var(--red);border-color:var(--red)}
.lane-svg{width:100%;height:40px;display:block}
.srcbadge{font-size:11px;padding:1px 6px;border-radius:4px;border:1px solid var(--line);color:var(--muted)}
.lorrymini svg{width:96px;height:auto}
.lorrybig svg{width:100%;height:auto;max-width:640px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 12px;font-size:13px}
.kv dt{color:var(--muted)}.kv dd{margin:0}

.locpick{position:relative}
.loclist{position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:4px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:340px;overflow:auto}
.locitem{padding:8px 12px;cursor:pointer;border-top:1px solid var(--line);font-size:13px}
.locitem:first-child{border-top:0}
.locitem small{display:block;font-size:12px}
.locitem.on,.locitem[data-loc]:hover{background:var(--soft)}
.realmap{height:420px;border-radius:8px;border:1px solid var(--line);z-index:0}
.stopmark{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#fff;font:600 11px/1 "Segoe UI",system-ui,sans-serif;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.stopmark.col{border-radius:5px}
.arrowhead{width:0;height:0;border-left:10px solid #1d2228;border-top:5px solid transparent;border-bottom:5px solid transparent;transform-origin:100% 50%}
.stopmark.mine{outline:3px solid #1d2228;outline-offset:1px}
.stopmark.amber{color:#1d2228}
.stopmark.done{opacity:.85;text-decoration:line-through}
.stopmark.onsite{box-shadow:0 0 0 4px rgba(47,125,82,.35),0 1px 4px rgba(0,0,0,.35)}
.hop.hop-done summary{color:var(--muted)}
.hop.hop-done summary b{color:var(--muted)}
.hop .prog{font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;margin-left:6px;white-space:nowrap}
.hop .prog.done{background:var(--soft);color:var(--muted)}
.hop .prog.out{background:var(--green-bg);color:var(--green)}
.hop .prog.problem{background:var(--red-bg);color:var(--red)}
.stopmark.problem{box-shadow:0 0 0 4px rgba(180,50,42,.35),0 1px 4px rgba(0,0,0,.35)}
.depotmark{width:22px;height:22px;background:#1d2228;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.runsheet-box{margin:6px 0 6px}
.rs-top{margin-top:4px;border-top:0;padding-top:0}
.runsheet-box summary{cursor:pointer;font-size:13px;margin-bottom:6px;font-weight:600}
.runsheet{width:100%;border-collapse:collapse;font-size:12.5px}
.runsheet td{padding:5px 6px;border-top:1px solid var(--line);vertical-align:top}
.runsheet small{display:block;color:var(--muted);font-size:11.5px}
.rs-time{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted);width:92px}
.rs-min{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;width:56px}
.rs-drive td{color:var(--muted)}
.rs-accept td:nth-child(2){font-weight:600}
.rs-wait td,.rs-lunch td{color:var(--muted);font-style:italic}
.rs-late td{color:var(--red)}
.rs-total{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12.5px;margin-top:8px;padding-top:8px;border-top:2px solid var(--line)}
.hops{margin-top:10px;border-top:1px solid var(--line)}
.hop{border-bottom:1px solid var(--line)}
.hop summary,.hop-static{display:grid;grid-template-columns:92px minmax(0,1fr) 60px;gap:8px;align-items:start;padding:8px 4px;font-size:13px;list-style:none;cursor:pointer}
.hop summary::-webkit-details-marker{display:none}
.hop summary:hover{background:var(--soft)}
.hop[open] summary{background:var(--soft)}
.hop-static{cursor:default;color:var(--muted)}
.hop-ab small{display:block;color:var(--muted);font-size:11.5px}
.hop-late .hop-ab b,.hop-late .rs-min{color:var(--red)}
.hop .runsheet{margin:0 0 8px}
.hop .runsheet td:first-child{padding-left:12px}
.onrun{margin:8px 0 4px;font-size:12.5px}
.onrun summary{cursor:pointer}
.onrun .runsheet{margin-top:4px}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblwrap .tbl{min-width:760px}

input.bad{border-color:var(--red);background:var(--red-bg)}
.block-add{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}
.block-add label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.block-add label.grow{flex:1 1 220px}
.block-add input,.block-add select{width:auto;color:var(--ink)}
.block-add label.grow input{width:100%}

.helplink{margin-left:auto;color:var(--muted);font-size:13px;text-decoration:underline}
.helplink + .who{margin-left:12px}

.tbl.audit .old{text-decoration:line-through;color:var(--muted)}