:root{
  --ink:#0B1519; --bg:#E8EEEE; --surface:#FFFFFF; --surface2:#DDE6E5; --line:#BFCCCB;
  --rail:#0E3A44; --rail-ink:#D6E8EC; --rail-active:#15505D; --rail-line:#1B4C58;
  --muted:#4A585B; --faint:#667578;
  --brand:#14505C; --brand-ink:#FFFFFF;
  --sterile:#0A6C75; --soiled:#8F4416;
  --ok:#14653F; --warn:#7A5205; --crit:#94251D;
  --sterile-bg:#DCEFF1; --soiled-bg:#F6E5DA; --ok-bg:#DCEEE4; --warn-bg:#F7EDD5; --crit-bg:#F7E0DD;
  --proto-bg:#EDE9F7; --proto:#4B3C8F;
  --c1:#1391A0; --c2:#CF6410; --c3:#6D5AD6;
  --shadow:0 1px 2px rgba(11,21,25,.06),0 6px 20px rgba(11,21,25,.05);
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --ink:#E9F0EF; --bg:#080F12; --surface:#101C20; --surface2:#17252A; --line:#2A3D43;
  --rail:#061317; --rail-ink:#AFC6CB; --rail-active:#14323A; --rail-line:#1C2F35;
  --muted:#A3B4B8; --faint:#87999D;
  --brand:#5BBECB; --brand-ink:#04171B;
  --sterile:#46BCC7; --soiled:#E08F46;
  --ok:#5CCB90; --warn:#E0B44A; --crit:#EE8676;
  --sterile-bg:#0E3238; --soiled-bg:#35220F; --ok-bg:#0F3322; --warn-bg:#332A0D; --crit-bg:#361815;
  --proto-bg:#241E3D; --proto:#B3A6F0;
  --c1:#25A1B2; --c2:#D2732F; --c3:#8878DE;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#E9F0EF; --bg:#080F12; --surface:#101C20; --surface2:#17252A; --line:#2A3D43;
  --rail:#061317; --rail-ink:#AFC6CB; --rail-active:#14323A; --rail-line:#1C2F35;
  --muted:#A3B4B8; --faint:#87999D;
  --brand:#5BBECB; --brand-ink:#04171B;
  --sterile:#46BCC7; --soiled:#E08F46;
  --ok:#5CCB90; --warn:#E0B44A; --crit:#EE8676;
  --sterile-bg:#0E3238; --soiled-bg:#35220F; --ok-bg:#0F3322; --warn-bg:#332A0D; --crit-bg:#361815;
  --proto-bg:#241E3D; --proto:#B3A6F0;
  --c1:#25A1B2; --c2:#D2732F; --c3:#8878DE;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--cond);letter-spacing:-.01em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ----------  banner + chrome ---------- */
.protobar{background:var(--proto-bg);color:var(--proto);font-size:12.5px;font-weight:600;
  padding:8px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;
  justify-content:center;flex-wrap:wrap;text-align:center}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
.topwrap{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{margin-right:auto;line-height:1.05}
.brand b{font-family:var(--cond);font-weight:700;font-size:23px;letter-spacing:-.02em;display:block}
.brand span{font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:3px}
.tabs{display:flex;gap:2px;background:var(--surface2);padding:3px;border-radius:9px;flex-wrap:wrap}
.tabs button{font:inherit;font-size:13px;font-weight:600;border:0;background:transparent;color:var(--muted);
  padding:8px 13px;border-radius:6px;cursor:pointer;white-space:nowrap;min-height:38px}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.themebtn{font:inherit;font-size:12.5px;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:7px;padding:8px 12px;cursor:pointer;min-height:38px}
.rolepick{font:inherit;font-size:12.5px;border:1px solid var(--proto);background:var(--proto-bg);color:var(--proto);
  border-radius:7px;padding:7px 10px;min-height:38px}
main{max-width:1200px;margin:0 auto;padding:20px 16px 60px}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:17px}
.grid{display:grid;gap:14px}
.note{font-size:12.5px;color:var(--muted);margin-top:11px;line-height:1.5}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.sechead h3{font-size:16px}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 9px;
  border-radius:20px;letter-spacing:.02em;white-space:nowrap}
.p-ster{background:var(--sterile-bg);color:var(--sterile)}
.p-soil{background:var(--soiled-bg);color:var(--soiled)}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-crit{background:var(--crit-bg);color:var(--crit)}
.p-idle{background:var(--surface2);color:var(--muted)}
.p-proto{background:var(--proto-bg);color:var(--proto)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.ic{font-weight:700;font-size:12px;line-height:1}

/* ---------- DRIVER: large type, one screen ---------- */
.dwrap{max-width:480px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:640px}
@media(max-width:520px){.dwrap{border:0;border-radius:0;box-shadow:none;min-height:auto}
  main{padding:14px 12px 40px}}
.dhead{background:var(--brand);color:var(--brand-ink);padding:15px 17px}
.dhead .row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dhead h2{font-size:20px;font-weight:700}
.dhead .sub{font-size:14px;opacity:.9;margin-top:3px}
.dback{font:inherit;font-size:14px;font-weight:600;background:transparent;border:1px solid currentColor;
  color:inherit;border-radius:7px;padding:7px 11px;cursor:pointer;min-height:38px;opacity:.9}
.prog{margin-top:13px}
.progbar{height:7px;border-radius:4px;background:rgba(127,127,127,.35);overflow:hidden}
.progbar i{display:block;height:100%;background:currentColor;border-radius:4px}
.progtxt{display:flex;justify-content:space-between;font-size:13px;margin-top:6px;font-family:var(--mono)}
.dbody{padding:15px;display:flex;flex-direction:column;gap:13px;flex:1;font-size:16.5px}
.dbody p{margin:0;font-size:16px;line-height:1.55}
.dfoot{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);
  padding:12px 15px calc(12px + env(safe-area-inset-bottom,0px));display:grid;gap:9px;z-index:5}

.btn{font:inherit;font-size:16.5px;font-weight:700;border:0;border-radius:10px;padding:16px;cursor:pointer;
  background:var(--brand);color:var(--brand-ink);width:100%;min-height:54px;letter-spacing:.01em}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn.warnb{background:var(--warn-bg);color:var(--warn);border:1.5px solid var(--warn)}
.btn.critb{background:var(--crit-bg);color:var(--crit);border:1.5px solid var(--crit)}
.btn.sm{font-size:14.5px;padding:11px;min-height:46px}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:9px}

.fld{display:grid;gap:6px}
.fld label{font-size:13.5px;font-weight:700;color:var(--muted);letter-spacing:.03em}
.fld input,.fld select,.fld textarea{font-family:var(--sans);font-size:17px;padding:14px 13px;
  border:1.5px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);width:100%;min-height:52px}
.fld input.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.fld .hint{font-size:13px;color:var(--muted)}
.fld .unit{position:relative}
.fld .unit span{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-family:var(--mono);
  font-size:15px;color:var(--muted);pointer-events:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:11px}

.chk{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:600;cursor:pointer;
  border:1.5px solid var(--line);border-radius:10px;padding:14px 13px;background:var(--surface);min-height:54px}
.chk input{accent-color:var(--brand);width:22px;height:22px;flex:none}
.chk.on{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.checks{display:grid;gap:9px}

.panel{border:1.5px solid var(--line);border-radius:11px;padding:14px;background:var(--surface)}
.panel h4{font-size:16px;margin-bottom:4px}
.panel.acc{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.panel.warnp{border-color:var(--warn);background:var(--warn-bg)}
.panel.critp{border-color:var(--crit);background:var(--crit-bg)}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:6px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.kv b{font-weight:600;text-align:right}

/* stop list */
.stoplist{display:grid;gap:10px}
.stopcard{display:grid;grid-template-columns:38px 1fr;gap:12px;border:1.5px solid var(--line);
  border-radius:11px;padding:13px;background:var(--surface);text-align:left;font:inherit;cursor:pointer;width:100%;color:inherit}
.stopcard[disabled]{cursor:default;opacity:.75}
.stopcard .seq{width:34px;height:34px;border-radius:50%;background:var(--surface2);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:15px}
.stopcard.done{background:color-mix(in srgb,var(--ok) 6%,var(--surface));border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.stopcard.done .seq{background:var(--ok);color:var(--surface)}
.stopcard.cur{border-color:var(--brand);border-width:2.5px;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.stopcard.cur .seq{background:var(--brand);color:var(--brand-ink)}
.stopcard .nm{font-size:16.5px;font-weight:700;line-height:1.3}
.stopcard .ad{font-size:14px;color:var(--muted);margin-top:3px}
.stopcard .mt{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px;align-items:center}
.stopcard .win{font-family:var(--mono);font-size:14px;font-weight:600}

.addr{font-size:16.5px;line-height:1.45}
.addr b{display:block;font-size:17.5px;font-weight:700;margin-bottom:3px}
.roomrow{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15.5px}
.roomrow:last-child{border-bottom:0}
.roomrow .rm{font-family:var(--mono);font-weight:700;background:var(--surface2);border-radius:5px;
  padding:3px 8px;font-size:14px;flex:none}
.flagnote{font-size:14px;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn);
  border-radius:8px;padding:10px 12px;display:flex;gap:9px;align-items:flex-start}

.sigwrap{border:1.5px dashed var(--line);border-radius:10px;background:var(--surface);position:relative;overflow:hidden}
.sigwrap.has{border-style:solid;border-color:var(--ok)}
canvas.sig{display:block;width:100%;height:150px;touch-action:none;cursor:crosshair}
.sigph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:15px;pointer-events:none}
.syncbadge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:6px 11px;border-radius:20px;background:var(--surface2);color:var(--muted)}
.syncbadge.saved{background:var(--ok-bg);color:var(--ok)}
.syncbadge.wait{background:var(--warn-bg);color:var(--warn)}
.syncbadge.att{background:var(--crit-bg);color:var(--crit)}
.gpsline{font-family:var(--mono);font-size:13.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.avatar{width:58px;height:58px;border-radius:50%;background:var(--brand);color:var(--brand-ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:700;font-size:21px;flex:none}
.readyrow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.readyrow:last-child{border-bottom:0}
.readyrow .t{font-size:15.5px;font-weight:600}
.readyrow .s{font-size:13.5px;color:var(--muted);margin-top:2px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  font-size:14.5px;font-weight:600;padding:13px 19px;border-radius:10px;z-index:99;max-width:90vw;text-align:center}
/* ---------- dashboards ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:14px}
.tile .k{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tile .v{font-family:var(--mono);font-size:27px;font-weight:600;letter-spacing:-.03em;margin-top:6px;line-height:1}
.tile .s{font-size:12.5px;color:var(--muted);margin-top:6px}
.cols{display:grid;grid-template-columns:1.25fr .85fr;gap:14px;align-items:start}
@media(max-width:880px){.cols{grid-template-columns:1fr}}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:0 9px 8px 0;border-bottom:1.5px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 9px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl tr.tot td{border-top:2px solid var(--ink);border-bottom:0;padding-top:11px;font-size:14.5px}
.scroller{overflow-x:auto}
.submt{font-size:12px;color:var(--muted);margin-top:2px;font-weight:400}
.minibtn{font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--surface);
  color:var(--brand);border-radius:6px;padding:7px 12px;cursor:pointer;min-height:36px}
.ai{border-left:3px solid var(--brand);background:var(--surface2);border-radius:0 9px 9px 0;padding:12px 14px;font-size:13.5px}
.ai b{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:5px}
.ailist{display:grid;gap:10px}
.readonly{border-radius:10px;padding:12px 15px;font-size:13.5px;font-weight:500;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--sterile-bg);border:1px solid var(--sterile);color:var(--sterile)}
.readonly.danger{background:var(--crit-bg);border-color:var(--crit);color:var(--crit)}
.contracthdr{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.ch{border-left:2px solid var(--line);padding-left:12px}
.ch .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ch .v{font-family:var(--mono);font-size:14.5px;font-weight:500;margin-top:4px}
.hbars{display:grid;gap:10px}
.hbar{display:grid;grid-template-columns:118px 1fr 50px;gap:12px;align-items:center;font-size:13px}
.hbar span{color:var(--muted);font-family:var(--mono);font-size:12.5px}
.hbar b{font-family:var(--mono);font-size:13px;text-align:right}
.hbar .track{height:10px;border-radius:5px;background:var(--surface2);overflow:hidden}
.hbar .track i{display:block;height:100%;border-radius:5px;background:var(--c1)}
.hbar.warn .track i{background:var(--warn)} .hbar.warn b{color:var(--warn)}
.hbar.bad .track i{background:var(--crit)} .hbar.bad b{color:var(--crit)}
.risks{display:grid;gap:12px}
.risk{display:grid;grid-template-columns:34px 1fr;gap:13px;border:1px solid var(--line);
  border-left:3px solid var(--muted);border-radius:0 10px 10px 0;padding:14px 16px}
.risk.crit{border-left-color:var(--crit);background:color-mix(in srgb,var(--crit) 5%,var(--surface))}
.risk.warn{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 5%,var(--surface))}
.risk.okr{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok) 5%,var(--surface))}
.rnum{font-family:var(--cond);font-weight:700;font-size:22px;color:var(--muted);line-height:1}
.risk.crit .rnum{color:var(--crit)} .risk.warn .rnum{color:var(--warn)} .risk.okr .rnum{color:var(--ok)}
.risk h4{font-size:15px;margin-bottom:6px}
.risk p{margin:0;font-size:13.5px;color:var(--muted);max-width:82ch}
.rfix{margin-top:10px;font-size:13px;padding:9px 12px;background:var(--surface2);border-radius:7px;max-width:82ch}
.rfix b{color:var(--ink)}
.corridor{display:block;width:100%;height:auto}
.doclist{display:grid;gap:8px}
.docrow{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:8px;padding:11px 13px;font-size:13.5px}
.docrow .mt2{font-size:12px;color:var(--muted);margin-top:2px}
.invhead{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;
  padding:13px;background:var(--surface2);border-radius:9px}
.invhead span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.invhead b{display:block;font-size:13.5px;margin-top:4px}
.kpi3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px;padding:12px;
  background:var(--surface2);border-radius:8px}
.kpi3 span{display:block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kpi3 b{display:block;font-size:16px;margin-top:4px}
.kpi3 .okk{color:var(--ok)}
.flow{display:grid;grid-template-columns:1fr 40px 1fr 40px 1.5fr;gap:11px;align-items:stretch}
@media(max-width:920px){.flow{grid-template-columns:1fr}.farrow{display:none}}
.fcol{display:flex;flex-direction:column;gap:9px}
.ftitle{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.fbox{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--surface);flex:1}
.fbox b{display:block;font-family:var(--cond);font-weight:700;font-size:15.5px;margin-bottom:7px}
.fbox ul{margin:0;padding-left:17px;display:grid;gap:5px}
.fbox li{font-size:13px;color:var(--muted)}
.fbox p{margin:0;font-size:13px;color:var(--muted)}
.fbox.src{border-left:3px solid var(--c2)} .fbox.store{border-left:3px solid var(--brand)}
.fbox.out{border-left:3px solid var(--c1);padding:12px 14px}
.fbox.out b{font-size:14px;font-family:var(--sans);margin-bottom:4px}
.fbox.out span{font-size:12.5px;color:var(--muted);line-height:1.45}
.outs{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:560px){.outs{grid-template-columns:1fr}}
.farrow{display:flex;align-items:center}.farrow svg{width:100%;height:40px}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.tg{font-family:var(--mono);font-size:11.5px;background:var(--surface2);color:var(--muted);border-radius:5px;padding:4px 8px}
.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}

.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.phot{position:relative;aspect-ratio:4/3;border:1.5px dashed var(--line);border-radius:9px;background:var(--surface2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;
  font-family:var(--sans);color:var(--muted);overflow:hidden;padding:8px;text-align:center}
.phot:hover{border-color:var(--brand);color:var(--brand)}
.phot .ttl{font-size:13px;font-weight:600;line-height:1.25}
.phot .dt{font-size:11px;font-family:var(--mono)}
.phot.has{border-style:solid;border-color:var(--ok);padding:0}
.phot img{width:100%;height:100%;object-fit:cover}
.phot .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.68);color:#fff;
  font-size:11px;padding:5px 7px;text-align:left;line-height:1.3}

/* ---------- form factor rules ----------
   Driver is built for phone and tablet, portrait and landscape.
   Dashboards are for laptop, desktop and tablet. Not phone. */

/* Tablet landscape: route list and the working stop side by side */
@media (min-width: 900px) and (orientation: landscape) and (pointer: coarse){
  .dwrap{max-width:none;display:grid;grid-template-columns:380px 1fr;
    grid-template-areas:"head head" "list body";min-height:min(760px,calc(100vh - 160px))}
  .dhead{grid-area:head}
  .dbody{grid-area:body;overflow-y:auto}
  .dfoot{grid-area:list;align-self:end;position:static;border-top:0;border-right:1px solid var(--line)}
  .dwrap.single{display:flex;max-width:560px}
}
/* Phone landscape: keep one column, tighten the header so the form is reachable */
@media (max-height: 520px) and (orientation: landscape){
  .dhead{padding:9px 15px}
  .dhead h2{font-size:17px}
  .dhead .sub{font-size:12.5px}
  .prog{margin-top:8px}
  .dbody{padding:12px;gap:9px}
  .dfoot{padding:9px 15px calc(9px + env(safe-area-inset-bottom,0px))}
  .btn{min-height:48px;padding:13px;font-size:15.5px}
}
/* Larger tablets get larger driver type */
@media (min-width: 768px){
  .dbody{font-size:17.5px}
  .dbody p, .fld input, .fld select, .fld textarea{font-size:17.5px}
  .stopcard .nm{font-size:17.5px}
}
/* Dashboards refuse to squeeze onto a phone */
.smallscreen{display:none}
@media (max-width: 719px){
  #v-ops, #v-admin, #v-fleet, #v-int, #v-cor, #v-sys { display:none !important; }
  .smallscreen{display:block}
}
.smallscreen .card{text-align:center;padding:34px 20px}
.smallscreen h3{font-size:19px;margin-bottom:8px}
.smallscreen p{font-size:16px;color:var(--muted);max-width:40ch;margin:0 auto}

/* ===================== SHELL AND SIDE NAVIGATION ===================== */
.whoami{margin-left:auto;font-size:12.5px;color:var(--muted);text-align:right;line-height:1.35}
.whoami b{display:block;color:var(--ink);font-size:13.5px;font-weight:700}
.shell{max-width:1320px;margin:0 auto}
.sidenav button[hidden]{display:none !important}

@media (min-width: 900px){
  .shell{display:grid;grid-template-columns:232px minmax(0,1fr);align-items:start}
  .shell > main{max-width:none;margin:0;padding:22px 26px 70px}
  .sidenav{display:flex;flex-direction:column;gap:2px;position:sticky;top:62px;
    padding:18px 12px;border-right:1px solid var(--line);min-height:calc(100vh - 62px)}
  .sidenav button{font:inherit;text-align:left;border:0;background:transparent;color:var(--muted);
    padding:9px 12px;border-radius:8px;cursor:pointer;display:grid;gap:1px;min-height:46px}
  .sidenav button:hover{background:var(--surface2)}
  .sidenav button[aria-selected="true"]{background:var(--surface2)}
  .sidenav button[aria-selected="true"] .nvi{color:var(--ink)}
  .nvi{font-size:14px;font-weight:700}
  .nvs{font-size:11.5px;color:var(--muted)}
}

@media (max-width: 899px){
  .sidenav{display:flex;gap:3px;overflow-x:auto;padding:8px 12px;background:var(--surface);
    border-bottom:1px solid var(--line);position:sticky;top:56px;z-index:30}
  .sidenav button{font:inherit;border:0;background:var(--surface2);color:var(--muted);
    padding:8px 13px;border-radius:7px;white-space:nowrap;min-height:40px;cursor:pointer}
  .sidenav button[aria-selected="true"]{background:var(--ink);color:var(--surface)}
  .sidenav .nvs{display:none}
  .nvi{font-size:13px;font-weight:600}
}

/* A driver never sees the navigation. The route app is the whole screen. */
body.role-driver .sidenav{display:none !important}
body.role-driver .shell{display:block}
body.role-driver .shell > main{max-width:560px;margin:0 auto;padding:16px 12px 48px}

/* ===================== IN APP DIALOG ===================== */
.rrmodal{position:fixed;inset:0;z-index:200;background:rgba(15,23,32,.55);
  display:flex;align-items:center;justify-content:center;padding:18px}
.rrbox{background:var(--surface);border:1px solid var(--line);border-radius:13px;
  padding:19px;width:100%;max-width:430px;max-height:88vh;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.rrbox h4{margin:0 0 4px;font-size:17px}
.rrbox .rrsub{margin:0 0 14px;font-size:13.5px;color:var(--muted)}
.rrbox .fld{margin-bottom:13px}
.rrerr{background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit);
  border-radius:8px;padding:9px 11px;font-size:13.5px;margin-bottom:12px}
.rrfoot{display:flex;gap:9px;justify-content:flex-end}
.rrfoot .btn{width:auto;padding:11px 18px}

/* ===================== SUB NAVIGATION ===================== */
.subnav{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px;
  border-bottom:1px solid var(--line);padding-bottom:12px}
.subnav button{font:inherit;font-size:13.5px;font-weight:600;border:1px solid transparent;
  background:transparent;color:var(--muted);padding:9px 14px;border-radius:8px;cursor:pointer;min-height:40px}
.subnav button:hover{background:var(--surface2);color:var(--ink)}
.subnav button[aria-current="true"]{background:var(--surface2);border-color:var(--line);color:var(--ink)}
@media (max-width: 719px){
  .subnav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px}
  .subnav button{white-space:nowrap;padding:8px 12px;font-size:13px}
}

/* ===================== ACTIONABLE ROWS ===================== */
.rowbtn{font:inherit;text-align:left;width:100%;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;gap:12px}
.rowbtn:hover{background:var(--surface2)}
.rowbtn .chev{color:var(--muted);font-size:19px;line-height:1;margin-left:4px}
tr.rowlink{cursor:pointer}
tr.rowlink:hover td{background:var(--surface2)}


/* ===================== COLOURED RAIL ===================== */
.topbar{background:var(--rail);border-bottom:1px solid var(--rail-line)}
.topbar .brand b{color:#fff}
.topbar .brand span{color:var(--rail-ink);opacity:.8}
.whoami{color:var(--rail-ink)}
.whoami b{color:#fff}
.topbar .themebtn{background:transparent;border-color:var(--rail-line);color:var(--rail-ink)}
.topbar .themebtn:hover{background:var(--rail-active);color:#fff}

@media (min-width: 900px){
  .sidenav{background:var(--rail);border-right:1px solid var(--rail-line)}
  .sidenav button{color:var(--rail-ink)}
  .sidenav button .nvi{color:#EAF4F6}
  .sidenav button .nvs{color:var(--rail-ink);opacity:.65}
  .sidenav button:hover{background:var(--rail-active)}
  .sidenav button[aria-selected="true"]{background:var(--rail-active);box-shadow:inset 3px 0 0 var(--sterile)}
  .sidenav button[aria-selected="true"] .nvi{color:#fff}
  .sidenav button[aria-selected="true"] .nvs{opacity:.85}
}
@media (max-width: 899px){
  .sidenav{background:var(--rail);border-bottom:1px solid var(--rail-line)}
  .sidenav button{background:transparent;color:var(--rail-ink)}
  .sidenav button[aria-selected="true"]{background:var(--rail-active);color:#fff}
  .sidenav button[aria-selected="true"] .nvi{color:#fff}
}

/* The sub menu reads as part of the content, not the rail. */
.subnav{border-bottom:1px solid var(--line)}
.subnav button[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.subnav button[aria-current="true"]:hover{background:var(--brand);color:var(--brand-ink)}

/* ===================== WHAT THIS SCREEN IS FOR ===================== */
.purpose{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:9px;padding:13px 15px;margin-bottom:17px}
.purpose b{display:block;font-family:var(--cond);font-size:16px;margin-bottom:2px}
.purpose span{font-size:13.5px;color:var(--muted)}

/* ===================== TABLES THAT HOLD BUTTONS ===================== */
/* Action buttons were being cut off the right edge. The row wraps its
   controls instead, and the table never hides them. */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl td .btn.sm{width:auto;padding:8px 13px;min-height:38px;display:inline-block}
.tbl td.r{white-space:normal}
.rowacts{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.btn.critb{background:var(--crit-bg);color:var(--crit);border:1.5px solid var(--crit)}
@media (max-width: 900px){
  .tbl td .btn.sm{padding:8px 11px;font-size:13.5px}
}

/* The little i beside a number on the board. */
.iinfo{font:inherit;font-size:11px;font-weight:700;line-height:1;margin-left:6px;
  width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--surface2);color:var(--muted);cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.iinfo:hover{border-color:var(--brand);color:var(--brand)}
.rrbox .rrsub{font-size:14.5px;color:var(--ink);line-height:1.55}

/* hidden must mean hidden, whatever a layout rule says */
[hidden]{display:none !important}
.clearrow{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:12px}

/* ===================== CHARTS ===================== */
.vizcard{margin-top:14px}
.vizwrap{position:relative;margin-top:6px}
.viz{width:100%;height:auto;display:block;overflow:visible}
.vizempty{font-size:13.5px;color:var(--muted);margin:10px 0 2px;line-height:1.55}

/* validated: light surface #FFFFFF, dark surface #101C20 */
.viz{
  --v-series:#2a78d6;
  --v-early:#2a78d6;
  --v-late:#d03b3b;
  --v-zero:#C8D2D1;
  --v-grid:#E7ECEB;
  --v-ink:#4A585B;
  --v-ref:#7A5205;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .viz{
  --v-series:#3987e5; --v-early:#3987e5; --v-late:#d03b3b;
  --v-zero:#2A3D43; --v-grid:#1B2B30; --v-ink:#A3B4B8; --v-ref:#E0B44A;
}}
:root[data-theme="dark"] .viz{
  --v-series:#3987e5; --v-early:#3987e5; --v-late:#d03b3b;
  --v-zero:#2A3D43; --v-grid:#1B2B30; --v-ink:#A3B4B8; --v-ref:#E0B44A;
}

.vgrid{stroke:var(--v-grid);stroke-width:1}
.vzero{stroke:var(--v-zero);stroke-width:1.5}
.vaxis{fill:var(--v-ink);font-family:var(--sans);font-size:11.5px}
.vnone{fill:var(--v-ink);opacity:.6;font-family:var(--sans);font-size:11px}
.vval{fill:var(--v-ink);font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.vline{fill:none;stroke:var(--v-series);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.vdot{fill:var(--v-series);stroke:var(--surface);stroke-width:2}
.vbar.vmain{fill:var(--v-series)}
.vbar.vearly{fill:var(--v-early)}
.vbar.vlate{fill:var(--v-late)}
.vbar{stroke:var(--surface);stroke-width:2}
.vref{stroke:var(--v-ref);stroke-width:1.5;stroke-dasharray:5 4}
.vreflab{fill:var(--v-ref);font-family:var(--sans);font-size:11px}
.vhit{fill:transparent;cursor:crosshair}
.vbar,.vdot{cursor:pointer}

.vizlegend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.vizlegend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.vizlegend .sw.vearly{background:#2a78d6}
.vizlegend .sw.vlate{background:#d03b3b}
.vizunit{margin-left:auto;font-size:11.5px}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .vizlegend .sw.vearly{background:#3987e5} }
:root[data-theme="dark"] .vizlegend .sw.vearly{background:#3987e5}

.viztip{position:absolute;pointer-events:none;z-index:20;background:var(--ink);color:var(--bg);
  border-radius:7px;padding:8px 10px;font-size:12.5px;line-height:1.4;max-width:190px;box-shadow:var(--shadow)}
.viztip b{display:block;font-size:12.5px}
.viztip span{display:block;font-family:var(--mono);font-size:13px}
.viztip em{display:block;font-style:normal;opacity:.75;font-size:11.5px;margin-top:2px}

/* ===================== CALENDAR ===================== */
.calhead{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:6px}
.calhead div{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);text-align:center}
.calgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cday{font:inherit;text-align:left;border:1px solid var(--line);background:var(--surface);
  border-radius:9px;padding:9px 10px;min-height:76px;cursor:pointer;display:flex;
  flex-direction:column;gap:3px;color:var(--ink)}
.cday:hover{border-color:var(--brand)}
.cpadcell{border:0;background:transparent;cursor:default;min-height:0}
.cnum{font-family:var(--cond);font-weight:700;font-size:16px;line-height:1}
.cmark{font-size:13px;line-height:1}
.cnote{font-size:10.5px;color:var(--muted);line-height:1.3}
.ctoday{outline:2px solid var(--brand);outline-offset:-2px}

.cfull{background:var(--ok-bg);border-color:var(--ok)}
.cfull .cmark{color:var(--ok)}
.clate{background:var(--warn-bg);border-color:var(--warn)}
.clate .cmark{color:var(--warn)}
.cpart{background:var(--sterile-bg);border-color:var(--sterile)}
.cpart .cmark{color:var(--sterile)}
.chol{background:var(--surface2);border-style:dashed}
.cnone .cmark{color:var(--muted)}
.cfuture{opacity:.55}

.callegend{display:flex;gap:15px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--muted)}
.callegend .cdot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;
  vertical-align:-1px;border:1px solid var(--line)}
.callegend .cdot.cfull{background:var(--ok-bg);border-color:var(--ok)}
.callegend .cdot.cpart{background:var(--sterile-bg);border-color:var(--sterile)}
.callegend .cdot.clate{background:var(--warn-bg);border-color:var(--warn)}
.callegend .cdot.cnone{background:var(--surface)}
.callegend .cdot.chol{background:var(--surface2);border-style:dashed}
@media (max-width: 620px){ .cday{min-height:62px;padding:7px 8px} .cnote{display:none} }

/* Buttons in a section heading stay on one line. */
.sechead .rowacts{flex-wrap:nowrap;flex-shrink:0}
.sechead .rowacts .btn.sm{white-space:nowrap}
.sechead{align-items:center}
@media (max-width: 620px){ .sechead .rowacts{flex-wrap:wrap} }

/* ===================== WEATHER ===================== */
.wxrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.wxplace{border:1px solid var(--line);border-radius:10px;padding:12px 13px;background:var(--surface)}
.wxplace b{display:block;font-family:var(--cond);font-size:16px}
.wxsub{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.wxnow{display:flex;align-items:baseline;gap:9px;margin-top:9px}
.wxtemp{font-family:var(--cond);font-size:30px;font-weight:700;line-height:1}
.wxshort{font-size:13px;color:var(--ink);line-height:1.3}
.wxmeta{font-size:12px;color:var(--muted);margin-top:6px;font-family:var(--mono)}
.wxnext{font-size:12px;color:var(--muted);margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.wxerr{display:block;font-size:12.5px;color:var(--muted);margin-top:10px}
.wxsrc{font-size:11.5px;color:var(--muted);margin:11px 0 0}

.wxalert{border-radius:9px;padding:11px 13px;margin-bottom:10px;border:1px solid}
.wxalert b{display:block;font-size:14.5px}
.wxalert span{display:block;font-size:12.5px;margin-top:2px}
.wxalert em{display:block;font-style:normal;font-size:11.5px;margin-top:4px;opacity:.85;font-family:var(--mono)}
.wxsevere{background:var(--crit-bg);border-color:var(--crit);color:var(--crit)}
.wxwatch{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}

/* ===================== WEATHER ICONS ===================== */
.wxi{display:block;flex:0 0 auto;overflow:visible}
.wxi{
  --sun:#EDA100; --sun-ray:#EDA100;
  --moon:#8591A8; --star:#B8C2D1;
  --cloud:#CFD9D8; --cloud-dark:#AEBBBA;
  --rain:#2a78d6; --snow:#5BBECB; --bolt:#EDA100;
  --fogl:#AEBBBA; --gust:#8CA0A4;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wxi{
  --sun:#E0B44A; --sun-ray:#E0B44A; --moon:#A3B4B8; --star:#C7D3D6;
  --cloud:#5A6C70; --cloud-dark:#44565A; --rain:#3987e5; --snow:#46BCC7;
  --bolt:#E0B44A; --fogl:#6B7D81; --gust:#7E9196;
}}
:root[data-theme="dark"] .wxi{
  --sun:#E0B44A; --sun-ray:#E0B44A; --moon:#A3B4B8; --star:#C7D3D6;
  --cloud:#5A6C70; --cloud-dark:#44565A; --rain:#3987e5; --snow:#46BCC7;
  --bolt:#E0B44A; --fogl:#6B7D81; --gust:#7E9196;
}

.wxi .sund{fill:var(--sun)}
.wxi .ray{fill:var(--sun-ray)}
.wxi .moond{fill:var(--moon)}
.wxi .star{fill:var(--star)}
.wxi .cloudd{fill:var(--cloud)}
.wxi .cloudb{fill:var(--cloud-dark)}
.wxi .drop{stroke:var(--rain);stroke-width:2.6;stroke-linecap:round}
.wxi .flake path{stroke:var(--snow);stroke-width:1.8;stroke-linecap:round;fill:none}
.wxi .bolt{fill:var(--bolt)}
.wxi .fogl{stroke:var(--fogl);stroke-width:2.6;stroke-linecap:round}
.wxi .gust{stroke:var(--gust);stroke-width:2.4;stroke-linecap:round;fill:none}

@keyframes wxspin{to{transform:rotate(360deg)}}
@keyframes wxdrift{0%,100%{transform:translateX(0)}50%{transform:translateX(2.5px)}}
@keyframes wxfall{0%{transform:translateY(-5px);opacity:0}
  20%{opacity:1}80%{opacity:1}100%{transform:translateY(7px);opacity:0}}
@keyframes wxflake{0%{transform:translateY(-4px) rotate(0);opacity:0}
  25%{opacity:1}75%{opacity:1}100%{transform:translateY(6px) rotate(120deg);opacity:0}}
@keyframes wxflash{0%,88%,100%{opacity:.35}92%{opacity:1}96%{opacity:.5}}
@keyframes wxfogslide{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}

.wxi .wxspin{animation:wxspin 26s linear infinite}
.wxi .wxdrift{animation:wxdrift 7s ease-in-out infinite}
.wxi .drop{animation:wxfall 1.5s linear infinite}
.wxi .drop.d2{animation-delay:.35s}
.wxi .drop.d3{animation-delay:.7s}
.wxi .flake{animation:wxflake 3s linear infinite;transform-box:fill-box;transform-origin:center}
.wxi .flake.f2{animation-delay:1s}
.wxi .flake.f3{animation-delay:2s}
.wxi .bolt{animation:wxflash 3.2s ease-in-out infinite}
.wxi .fogl{animation:wxfogslide 6s ease-in-out infinite}
.wxi .fogl.g2{animation-delay:.8s}
.wxi .fogl.g3{animation-delay:1.6s}
.wxi .gust{animation:wxfogslide 5s ease-in-out infinite}
.wxi .gust.g2{animation-delay:.9s}

@media (prefers-reduced-motion:reduce){
  .wxi *{animation:none !important}
  .wxi .drop,.wxi .flake,.wxi .bolt{opacity:1 !important}
}

/* the forecast card, now with the icon beside the number */
.wxhead{display:flex;align-items:center;gap:11px;margin-top:8px}
.wxnow{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;margin-top:0}
.wxnext{display:flex;align-items:center;gap:8px}
.wxnext .wxi{width:26px;height:26px}

/* ===================== IMAGES ON A RECORD ===================== */
.upl{display:flex;gap:11px;align-items:flex-start;flex-wrap:wrap;margin-top:4px}
.uplprev{width:96px;height:96px;border:1.5px dashed var(--line);border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:var(--surface2);
  overflow:hidden;flex:0 0 auto}
.uplprev span{font-size:11.5px;color:var(--muted);text-align:center;padding:0 6px}
.uplprev.has{border-style:solid;border-color:var(--line);background:var(--surface)}
.uplprev img{width:100%;height:100%;object-fit:cover;display:block}
.uplbtns{display:flex;flex-direction:column;gap:7px}
.uplbtn{display:inline-flex;align-items:center;justify-content:center;width:auto;
  padding:9px 14px;cursor:pointer;min-height:40px}
.checksrow{display:flex;gap:9px;flex-wrap:wrap}
.checksrow .chk{flex:0 1 auto;min-height:44px;padding:10px 13px;font-size:14px}

/* ===================== THE DRIVER'S OWN FILE ===================== */
.avatarimg{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid var(--line)}
.pnote{font-size:13.5px;color:var(--muted);margin:5px 0 0;line-height:1.5}
.docitem{border-top:1px solid var(--line);padding:13px 0 2px}
.docitem:first-of-type{border-top:0}
.docitemhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.docitemhead b{font-size:15.5px;font-family:var(--cond)}
.docwhat{font-size:14px;margin:6px 0 0;line-height:1.5}
.docneed{font-size:13px;color:var(--muted);margin:5px 0 0;line-height:1.5}
.docneed b{color:var(--ink)}
.docacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.docacts .uplbtn{text-decoration:none}

/* ===================== CREDENTIAL QUEUE ===================== */
.credsub{display:flex;gap:13px;align-items:center;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.credsub:first-child{border-top:0}
.credthumb{width:72px;height:72px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface2);overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.credthumb img{width:100%;height:100%;object-fit:cover;display:block}
.credthumb span{font-size:11px;color:var(--muted)}
.credmeta{flex:1 1 220px;display:flex;flex-direction:column;gap:2px;min-width:0}
.credmeta b{font-size:15px;font-family:var(--cond)}
.credmeta span{font-size:12.5px;color:var(--muted)}

/* ===================== PAPERWORK ===================== */
.pwperson{border-top:1px solid var(--line);padding:14px 0 4px}
.pwperson:first-child{border-top:0;padding-top:4px}
.pwhead{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.pwhead b{font-family:var(--cond);font-size:16px}

/* The sync bar. The driver's only honest signal about whether the office
   has his work. Quiet when everything is through, loud when it is not. */
.syncbar{display:block;width:100%;margin-top:10px;padding:7px 11px;border-radius:8px;
  font-size:13.5px;font-weight:600;line-height:1.35;text-align:left;
  background:rgba(255,255,255,.16);color:var(--brand-ink);border:1px solid rgba(255,255,255,.22)}
.syncbar.ok{background:rgba(255,255,255,.12);font-weight:500;opacity:.85}
.syncbar.warn{background:var(--warn);color:#1a1200;border-color:transparent}
.syncbar.bad{background:var(--crit);color:#fff;border-color:transparent;cursor:pointer;font-weight:700}

/* A row that offers one action should not give that action half the page.
   The description takes the space, the button takes what it needs. */
.docrow > div:first-child{flex:1 1 auto;min-width:0}
.docrow > .btn,
.docrow > div:last-child{flex:0 0 auto;width:auto}
.docrow .btn{width:auto;min-width:86px}
#reportBox .btnrow{display:flex;gap:8px;flex-wrap:wrap}
#reportBox .btnrow .btn{width:auto;flex:0 0 auto}

/* ===================== THE FRONT DOOR =====================
   Shown when nobody is signed in, and when somebody is signed in who has
   no role yet. It covers the whole viewport, so nothing behind it can be
   seen or reached by a person who has no business there. */
.gate{position:fixed;inset:0;z-index:900;background:#14505C;color:#fff;
  display:flex;align-items:stretch;justify-content:center}
.gate[hidden]{display:none !important}
.gatefield{width:100%;max-width:430px;display:flex;flex-direction:column;
  padding:0 30px;position:relative;text-align:center}
.gatefield:after{content:"";position:fixed;left:0;right:0;bottom:0;height:5px;background:#009E95}
.gatetop{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding-bottom:18px}
.gatelock{width:255px;max-width:76%;display:block}
.gatemark{width:74px;display:block;opacity:.95}
.gateh{font-family:var(--cond);font-size:26px;font-weight:700;margin-top:26px;letter-spacing:-.01em}
.gatetag{margin-top:20px;font-size:15px;line-height:1.5;opacity:.82;max-width:280px}
.gatewho{margin-top:20px;display:inline-block;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.13);font-size:13px;font-family:var(--mono)}
.gatebottom{padding-bottom:max(40px, env(safe-area-inset-bottom))}
.gatebtn{display:block;width:100%;border:0;border-radius:12px;padding:17px 18px;
  font-family:var(--sans);font-size:17px;font-weight:600;cursor:pointer;
  background:#fff;color:#14505C;letter-spacing:-.01em}
.gatebtn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);
  padding:15px 18px;font-size:15.5px}
.gatesub{margin-top:14px;font-size:13.5px;line-height:1.5;opacity:.62}
.gatefoot{margin-top:26px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.42}

/* The mark beside the wordmark in the header. */
.brand{display:flex;align-items:center;gap:10px}
.brandmark{width:26px;height:26px;flex:0 0 auto}
@media (max-width:760px){ .brandmark{width:22px;height:22px} }

/* Nothing scrolls behind the front door. */
body.gated{overflow:hidden}

/* ===================== THE DRIVER'S SCREENS =====================
   One scrolling column of cards, an action pinned at the foot, and type
   big enough to read standing at a loading dock. */
.dwrap{max-width:430px;margin:0 auto;display:flex;flex-direction:column;min-height:100dvh}
.dwrap .dbody{flex:1;padding:16px 17px 8px;display:flex;flex-direction:column;gap:13px}

/* who he is, and the way through to his own file */
.dhello{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.dface{border-radius:50%;flex:0 0 auto;object-fit:cover;border:2px solid var(--card);
  box-shadow:0 1px 4px rgba(10,30,34,.16);background:#CFDADA}
.dface.noimg{display:flex;align-items:center;justify-content:center;color:#6E7E7E;
  font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:.02em}
.dface.noimg svg{width:56%;height:56%}
.dhellom{flex:1;min-width:0}
.dh1{display:block;font-family:var(--cond);font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.12}
.dh2{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.dchev{color:#A8B6B5;font-size:21px;flex:0 0 auto;line-height:1}

.dcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dch{display:flex;align-items:center;gap:8px;padding:12px 14px 0}
.dch h3{font-family:var(--cond);font-size:15px;font-weight:700;letter-spacing:.01em}
.deye{margin-left:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.deye.accent{color:var(--brand);font-weight:700}
.deyebtn{margin-left:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:0;font-family:var(--sans);cursor:pointer;padding:2px 0}
.dcb{padding:12px 14px 14px}

/* weather, three points, left to right the way he drives it */
.dwxrow{display:flex;gap:6px}
.dwxp{flex:1;text-align:center;padding:8px 4px;border-radius:10px;background:var(--soft,#F5F8F8)}
.dwxp svg{display:block;margin:0 auto 3px}
.dwxt{font-family:var(--cond);font-size:22px;font-weight:700;line-height:1}
.dwxl{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.3}
.dwxnote{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.45}
.dwxnote.bad{color:var(--crit);font-weight:600}
.dwxload{font-size:13px;color:var(--muted)}

/* the day */
.dst{display:flex;gap:11px;padding:9px 0;border-top:1px solid var(--line);align-items:flex-start}
.dst:first-child{border-top:0;padding-top:2px}
.dst.done{opacity:.55}
.dnum,.dtick{width:21px;height:21px;border-radius:6px;background:var(--soft,#F5F8F8);color:var(--muted);
  font-family:var(--mono);font-size:11.5px;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;margin-top:1px;font-weight:600}
.dnum.here{background:var(--brand);color:var(--brand-ink)}
.dtick{background:var(--ok-bg,#E3F2E9);color:var(--ok);font-size:13px}
.dstm{flex:1;min-width:0}
.dstp{font-size:14px;font-weight:600;line-height:1.3}
.dsts{font-size:12px;color:var(--muted);margin-top:2px}
.dstw{font-family:var(--mono);font-size:12.5px;text-align:right;white-space:nowrap;padding-top:1px}
.dstc{font-size:10.5px;color:var(--warn);font-family:var(--sans);margin-top:2px}
.dtag{display:inline-block;padding:1px 6px;border-radius:5px;font-size:10.5px;font-weight:600;
  margin-left:5px;vertical-align:1px}
.dtag.ster{background:#E4F1F0;color:#0A6460}
.dtag.soil{background:#F2EBE2;color:#7A5205}

/* from the office */
.dmsg{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--line);align-items:flex-start;
  width:100%;text-align:left;background:transparent;border-left:0;border-right:0;border-bottom:0;
  font:inherit;color:inherit;cursor:pointer}
.dmsg:first-child{border-top:0;padding-top:1px}
.ddot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto;margin-top:5px}
.ddot.warn{background:var(--warn)}
.ddot.crit{background:var(--crit)}
.dmsgm{flex:1;min-width:0}
.dmsgt{display:block;font-size:14px;font-weight:600;line-height:1.3}
.dmsgs{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.dempty{font-size:13.5px;color:var(--muted)}

/* the action, always within thumb reach */
.dwrap .dfoot{position:sticky;bottom:0;padding:13px 17px max(20px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(0,0,0,0),var(--bg) 30%);flex:0 0 auto}
.dquiet{display:flex;gap:9px;margin-top:9px}
.dquiet button{flex:1;border:1px solid var(--line);background:var(--card);border-radius:11px;
  padding:12px 8px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.btn.acc{background:#009E95;color:#fff}
.btn.plain{background:transparent;color:var(--muted);border:1px solid var(--line);
  padding:14px;font-size:15px}

/* his file */
.dme{display:flex;align-items:center;gap:14px}
.dmen{font-family:var(--cond);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.dmes{font-size:13px;color:var(--muted);margin-top:3px}
.dbtnsm{display:inline-block;margin-top:8px;border:1px solid var(--line);background:var(--card);
  border-radius:9px;padding:7px 11px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink)}
.dsec{font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:4px 0 -3px}
.drow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
  border-top:1px solid var(--line);font-size:14px;align-items:center}
.drow:first-child{border-top:0;padding-top:0}
.drow span{color:var(--muted)}
.drow b{font-weight:600;text-align:right}
.dpill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:600;
  background:#EAF0F0;color:var(--muted);margin-left:4px}
.dpill.ok{background:var(--ok-bg,#E3F2E9);color:var(--ok)}
.dpill.warn{background:var(--warn-bg,#FBF0DA);color:var(--warn)}
.dpill.crit{background:var(--crit-bg,#FAE6E4);color:var(--crit)}

/* forms */
.dfld{margin-top:12px}
.dfld:first-child{margin-top:0}
.dfld label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.dinp{width:100%;border:1px solid var(--line);border-radius:10px;padding:13px 12px;font-size:16px;
  font-family:var(--sans);background:var(--card);color:var(--ink)}
.dinp.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dtwo{display:flex;gap:9px;align-items:flex-start}
.dtwo>*{flex:1;min-width:0}
.dtwo .dfld{margin-top:12px}
.dtwo .wide{flex:2.1}
.dtwo .narrow{flex:.72}
.dunit{position:relative}
.dunit span{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--muted);pointer-events:none}
.dhint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.4}

/* an image he takes with the phone */
.dshots{display:flex;gap:9px;margin-top:9px}
.dshot{flex:1;min-height:84px;border:1.5px dashed #C3D0D0;border-radius:11px;
  background:var(--soft,#F5F8F8);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;font-size:11.5px;color:var(--muted);text-align:center;
  padding:8px;cursor:pointer;position:relative;overflow:hidden}
.dshot svg{width:21px;height:21px;opacity:.75}
.dshot.has{border:1px solid var(--line);padding:0}
.dshot.has img{width:100%;height:84px;object-fit:cover;display:block}
.dshot.has span{position:absolute;left:0;right:0;bottom:0;background:rgba(10,30,34,.72);
  color:#fff;font-size:10.5px;padding:4px 6px}

/* A driver's top bar carries the name of the thing and nothing else. His
   own face is on the screen below, and that is the way to his file. */
body.role-driver .topbar .whoami,
body.role-driver .topbar .themebtn,
body.role-driver .topbar .syncbadge{display:none !important}
body.role-driver .topbar{padding:0}
body.role-driver .topwrap{max-width:430px;margin:0 auto;padding:11px 17px}
.dsync{border-radius:11px;padding:11px 13px;font-size:13.5px;font-weight:600;
  background:var(--brand);color:var(--brand-ink);border:0;width:100%;text-align:left;
  font-family:var(--sans);line-height:1.4}
.dsync.warn{background:var(--warn);color:#1a1200}
.dsync.bad{background:var(--crit);color:#fff;cursor:pointer}

/* A document that is done. One line, no instructions. */
.docdone{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
.docdone:first-of-type{border-top:0}
.docdonen{font-size:14.5px;font-weight:600;flex:1;min-width:0}

/* An empty sync bar takes up no space at all. */
#syncBar:empty{display:none}

/* ---------- the walk-around ---------- */
.dreq{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--line);align-items:flex-start}
.dreq:first-child{border-top:0;padding-top:2px}
.dbox{width:28px;height:28px;border:2px solid #C3D0D0;border-radius:7px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;background:var(--card);cursor:pointer;
  color:#fff;font-family:var(--sans);font-weight:700;font-size:15px;padding:0}
.dbox.on{background:#009E95;border-color:#009E95}
.dbox.on svg{width:15px;height:15px}
.dbox.bad{background:var(--crit-bg,#FAE6E4);border-color:var(--crit);color:var(--crit)}
.dreqm{flex:1;min-width:0}
.dreqt{font-size:15px;font-weight:600;line-height:1.3}
.dreq.flagged .dreqt{color:var(--crit)}
.dreqs{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.dflag{margin-left:auto;border:1px solid var(--line);background:var(--card);border-radius:8px;
  padding:6px 10px;font-size:11.5px;font-weight:600;color:var(--crit);font-family:var(--sans);
  white-space:nowrap;align-self:center;cursor:pointer}

.dissue{border:1px solid var(--crit-bg,#FAE6E4);background:#FEF7F6;border-radius:11px;
  padding:12px;margin:0 0 10px}
.dissuet{font-size:13.5px;font-weight:700;color:var(--crit)}
.dthumbs{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.dthumb{width:62px;height:62px;border-radius:9px;object-fit:cover;border:1px solid var(--line);
  display:block}
.dbtnrow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* conditions, filled in rather than typed */
.dauto{display:flex;gap:9px}
.dautop{flex:1;background:var(--soft,#F5F8F8);border-radius:10px;padding:11px 10px}
.dautok{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dautov{font-family:var(--cond);font-size:23px;font-weight:700;line-height:1;margin-top:4px}

.dnotice{background:var(--warn-bg,#FBF0DA);color:var(--warn);border-radius:11px;padding:12px 13px;
  font-size:13px;font-weight:600;line-height:1.45}

/* The walk-around log on the Fleet screen. */
.ckrow td{background:var(--soft,#F5F8F8);padding:10px 12px}
.ckissue{margin-bottom:9px}
.ckissue:last-child{margin-bottom:0}
.ckissue b{font-size:13.5px}
.ckthumbs{display:flex;gap:7px;margin-top:6px;flex-wrap:wrap}
.ckthumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);
  display:block}

/* ---------- what moved ---------- */
.txit{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--line);align-items:flex-start}
.txit:first-child{border-top:0;padding-top:2px}
.txitm{flex:1;min-width:0}
.txitl{font-size:14.5px;font-weight:600;line-height:1.35}
.txitd{font-size:12.5px;color:var(--ink-3,#5B6A6A);margin-top:3px}
.txitc{display:flex;gap:8px;margin-top:8px}
.dinp.sm{padding:9px 10px;font-size:14px;width:auto;flex:1}
.dchk{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line);
  cursor:pointer;font-size:14.5px;font-weight:600}
.dchk:first-child{border-top:0}
.dchk input{width:24px;height:24px;flex:0 0 auto;accent-color:#009E95}
.dcard.warnp{border-color:var(--warn-bg,#FBF0DA);background:#FFFCF5}