/* page basics (the artifact host adds these itself; a normal server does not) */
html,body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}

/* Layout: sticky header (brand switch + role), tab strip, content column; the ops board goes full width with a left palette */
:root{
  --bg:#eef1f5; --surface:#ffffff; --sunk:#f5f7fa; --ink:#16202c; --muted:#5b6778; --line:#d9dfe8;
  --accent:#2c5a86; --accent-ink:#ffffff;
  --em-bg:#1b2a4a; --em-fg:#ffffff; --em-dot:#e0434d; --em-tint:#e9eef8;
  --df-bg:#1f6b45; --df-fg:#ffffff; --df-dot:#f08a2c; --df-tint:#e6f3ec;
  --hi:#fff1a0; --hi-ink:#4a3b00;
  --ok:#2f7d55; --ok-bg:#e3f3ea; --warn:#9a6208; --warn-bg:#fdf1dc; --crit:#b9282f; --crit-bg:#fbe6e6;
  --we:#f0f2f6;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:8px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e131a; --surface:#161d27; --sunk:#111821; --ink:#e5eaf1; --muted:#98a4b5; --line:#29333f;
  --accent:#78a6d6; --accent-ink:#0e131a;
  --em-bg:#2d4474; --em-fg:#ffffff; --em-dot:#ff6b73; --em-tint:#1c2840;
  --df-bg:#23794f; --df-fg:#ffffff; --df-dot:#ffa04f; --df-tint:#15301f;
  --hi:#4a4214; --hi-ink:#ffe98a;
  --ok:#6fcf97; --ok-bg:#15301f; --warn:#f2b64c; --warn-bg:#35280f; --crit:#ff7b7f; --crit-bg:#3a1719;
  --we:#131a23;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e131a; --surface:#161d27; --sunk:#111821; --ink:#e5eaf1; --muted:#98a4b5; --line:#29333f;
  --accent:#78a6d6; --accent-ink:#0e131a;
  --em-bg:#2d4474; --em-fg:#ffffff; --em-dot:#ff6b73; --em-tint:#1c2840;
  --df-bg:#23794f; --df-fg:#ffffff; --df-dot:#ffa04f; --df-tint:#15301f;
  --hi:#4a4214; --hi-ink:#ffe98a;
  --ok:#6fcf97; --ok-bg:#15301f; --warn:#f2b64c; --warn-bg:#35280f; --crit:#ff7b7f; --crit-bg:#3a1719;
  --we:#131a23;
  color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.2}
h2{font-size:1.25rem;font-weight:600}
h3{font-size:1rem;font-weight:600}
.mono{font-family:var(--mono);font-size:.86em}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.topin{padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto}
.wide .topin,.wide .tabsin{max-width:none}
.brand{display:flex;flex-direction:column;min-width:0}
.brand strong{font-size:1rem}
.brand span{font-size:.75rem;color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--sunk)}
.seg button{border:0;background:none;padding:4px 12px;border-radius:999px;cursor:pointer;font-size:.85rem;font-weight:500;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.role{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}
.role select{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:.85rem;max-width:230px}
nav.tabs{border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
.tabsin{max-width:1100px;margin:0 auto;padding:0 12px;display:flex;gap:2px}
.tabsin button{border:0;background:none;padding:10px 12px;cursor:pointer;white-space:nowrap;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;font-size:.9rem}
.tabsin button.on{color:var(--ink);border-bottom-color:var(--accent)}
.cnt{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:var(--crit);color:#fff;font-size:.7rem;line-height:18px;text-align:center}
main{max-width:1100px;margin:0 auto;padding-inline:16px;padding-block:18px 60px;display:flex;flex-direction:column;gap:16px}
main.wide{max-width:none}
.proto{font-size:.78rem;color:var(--muted);background:var(--sunk);border:1px dashed var(--line);border-radius:var(--r);padding:8px 12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.card>h3,.card>.hd{margin-bottom:10px}
.hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.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:var(--r);padding:12px 14px;cursor:pointer;text-align:left}
.kpi b{display:block;font-size:1.6rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:.8rem;color:var(--muted)}
.kpi.alert b{color:var(--crit)}
.b{display:inline-flex;align-items:center;gap:5px;padding:1px 8px 1px 6px;border-radius:4px;font-size:.72rem;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.b::before{content:"";width:6px;height:6px;border-radius:50%}
.b-EM{background:var(--em-bg);color:var(--em-fg)} .b-EM::before{background:var(--em-dot)}
.b-DF{background:var(--df-bg);color:var(--df-fg)} .b-DF::before{background:var(--df-dot)}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.74rem;font-weight:500;background:var(--sunk);border:1px solid var(--line);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.pill.crit{background:var(--crit-bg);color:var(--crit);border-color:transparent}
.pill.info{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 2px;border-top:1px solid var(--line);cursor:pointer;align-items:center}
.row:first-child{border-top:0}
.row:hover{background:var(--sunk)}
.row .t{font-weight:500;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.row .s{grid-column:1/-1;font-size:.82rem;color:var(--muted)}
.row .r{text-align:right;display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--surface);padding:7px 12px;border-radius:6px;cursor:pointer;font-weight:500;font-size:.88rem}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.go{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn.danger{color:var(--crit)}
.btn.sm{padding:3px 9px;font-size:.8rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.seg button:focus-visible,.tabsin button:focus-visible,.kpi:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.rc:focus-visible,.jc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 11px;font-size:.82rem;cursor:pointer}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
label.f{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:var(--muted);font-weight:500;min-width:0}
label.f input,label.f select,label.f textarea,.inp{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font-size:.9rem;width:100%}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:10px}
.back{border:0;background:none;color:var(--accent);cursor:pointer;padding:0;font-weight:500;font-size:.9rem;align-self:flex-start}
.pipe{display:flex;gap:3px;overflow-x:auto;padding-bottom:4px}
.pipe span{flex:1 0 auto;font-size:.68rem;padding:4px 6px;border-radius:3px;background:var(--sunk);color:var(--muted);white-space:nowrap;border:1px solid var(--line)}
.pipe span.done{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pipe span.cur{outline:2px solid var(--accent);outline-offset:1px;font-weight:600}
table{border-collapse:collapse;width:100%;font-size:.86rem}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}
.note{padding:10px 12px;border-radius:6px;font-size:.87rem;border:1px solid transparent}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.note.crit{background:var(--crit-bg);color:var(--crit)}
.note.ok{background:var(--ok-bg);color:var(--ok)}
.note.info{background:var(--sunk);border-color:var(--line)}
.note .inp{margin-top:6px;color:var(--ink)}
.totals{display:grid;grid-template-columns:1fr auto;gap:2px 16px;font-variant-numeric:tabular-nums;max-width:360px;margin-left:auto}
.totals .g{font-weight:700;font-size:1.05rem;border-top:1px solid var(--line);padding-top:4px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:.88rem}
.kv dt{color:var(--muted)} .kv dd{margin:0;min-width:0}
.src{font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ok);margin-left:4px}
/* booking form, laid out like the paper form */
.bform{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.bform>div{padding:7px 10px;border-bottom:1px solid var(--line);min-width:0}
.bform>div:nth-last-child(-n+2){border-bottom:0}
.bform .k{background:var(--sunk);font-size:.8rem;font-weight:600;color:var(--muted);display:flex;align-items:center}
.bform .v input,.bform .v select,.bform .v textarea{width:100%;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:4px}
.bform .v input:hover,.bform .v select:hover,.bform .v textarea:hover{border-color:var(--line)}
.bform .v textarea{resize:vertical}
.bform .v.hi textarea{background:var(--hi);color:var(--hi-ink)}
.dayrows{display:flex;flex-direction:column;gap:6px}
.dayrow{display:grid;grid-template-columns:70px 150px 90px minmax(0,1fr) 70px;gap:6px;align-items:center}
.dayrow input{padding:5px 7px;border:1px solid var(--line);border-radius:5px;background:var(--surface);width:100%}
@media (max-width:640px){.bform{grid-template-columns:minmax(0,1fr)}.bform .k{border-bottom:0;padding-bottom:0;background:none}.dayrow{grid-template-columns:1fr 1fr}}
/* ops board */
.bwrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;align-items:start}
.bwrap.ro{grid-template-columns:minmax(0,1fr)}
.side{position:sticky;top:112px;max-height:calc(100vh - 130px);overflow:auto;display:flex;flex-direction:column;gap:10px}
.side details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.side summary{cursor:pointer;font-weight:600;font-size:.9rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
.side summary::-webkit-details-marker{display:none}
.side .body{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.side .body.col{flex-direction:column;flex-wrap:nowrap}
.focus{font-size:.8rem;color:var(--muted);background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:7px 10px}
.focus b{color:var(--ink)}
.rc{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.82rem;cursor:grab;user-select:none;-webkit-user-select:none}
.rc .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.rc.busy .dot{background:var(--warn)}
.rc.away{opacity:.5;cursor:not-allowed}
.rc.away .nm{text-decoration:line-through}
.rc.picked{outline:2px solid var(--accent);outline-offset:1px;background:var(--sunk)}
.rc small{color:var(--muted);font-size:.7rem}
.tray-it{border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:var(--surface);cursor:grab;font-size:.8rem;line-height:1.35;user-select:none;-webkit-user-select:none;position:relative}
.tray-it.EM{background:var(--em-tint)} .tray-it.DF{background:var(--df-tint)}
.tray-it.picked{outline:2px solid var(--accent);outline-offset:1px}
.tray-it .new{position:absolute;top:6px;right:7px;font-size:.62rem;font-weight:700;letter-spacing:.06em;background:var(--crit);color:#fff;padding:0 5px;border-radius:3px}
.tray-drop{border:1px dashed var(--line);border-radius:6px;padding:8px;font-size:.75rem;color:var(--muted);text-align:center}
.bbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.bscroll{overflow:auto;max-height:calc(100vh - 170px);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.board{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.78rem}
.board th,.board td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:5px;vertical-align:top}
.board thead th{position:sticky;top:0;z-index:3;background:var(--sunk);text-transform:none;letter-spacing:0;font-size:.8rem;color:var(--ink);font-weight:600;cursor:pointer;min-width:184px;width:184px}
.board thead th.we{background:var(--we);color:var(--muted)}
.board thead th.today{box-shadow:inset 0 -3px 0 var(--accent)}
.board thead th.foc{background:var(--accent);color:var(--accent-ink)}
.board .lab{position:sticky;left:0;z-index:2;background:var(--surface);width:168px;min-width:168px;max-width:168px}
.board thead th.lab{z-index:4;cursor:default}
.board .lab b{display:block;font-size:.8rem}
.board .lab span{font-size:.7rem;color:var(--muted)}
.board tr.sec td{background:var(--sunk)}
.board tr.sec td.lab{background:var(--sunk)}
.board td.c{min-height:70px;height:74px}
.board td.c.we{background:var(--we)}
.board td.c.blk{background:repeating-linear-gradient(135deg,var(--sunk) 0 6px,transparent 6px 12px)}
.board td.drop{box-shadow:inset 0 0 0 2px var(--accent)}
.board td.c:hover{background:var(--sunk)}
.vn{font-size:.72rem;padding:2px 5px;border-radius:3px;background:var(--sunk);border:1px solid var(--line);margin-bottom:4px}
.vn.block{background:var(--crit-bg);color:var(--crit);border-color:transparent;font-weight:600}
.jc{display:block;width:100%;overflow:hidden;min-width:0;text-align:left;border:1px solid var(--line);border-radius:5px;padding:5px 6px;margin-bottom:4px;line-height:1.3;cursor:grab;color:var(--ink);font-size:.74rem;user-select:none;-webkit-user-select:none}
.jc.EM{background:var(--em-tint)} .jc.DF{background:var(--df-tint)}
.jc.dim{opacity:.35}
.jc.drop{outline:2px solid var(--accent);outline-offset:1px}
.jc .l1{display:flex;gap:5px;align-items:baseline;justify-content:space-between}
.jc .l1 b{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc .acct{font-family:var(--mono);font-size:.64rem;color:var(--muted);white-space:nowrap}
.jc .l2,.jc .l3{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc .l4{display:flex;justify-content:space-between;gap:4px;margin-top:2px}
.jc .crew{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc .crew .clash{color:var(--crit)}
.jc .need{font-variant-numeric:tabular-nums;font-weight:600}
.jc .need.short{color:var(--crit)}
.jc .ops{background:var(--hi);color:var(--hi-ink);padding:1px 4px;border-radius:3px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc .xv{font-size:.64rem;color:var(--muted)}
.fb{display:inline-block;background:var(--crit);color:#fff;font-weight:700;padding:1px 6px;border-radius:3px;font-size:.72rem}
.free{color:var(--ok);font-size:.72rem;line-height:1.35}
.wline{font-size:.72rem;padding:2px 0;border-bottom:1px dotted var(--line);overflow-wrap:anywhere}
.wline:last-child{border-bottom:0}
.hol{font-size:.72rem;color:var(--warn);font-weight:500}
.addn{font-size:.7rem;color:var(--muted);opacity:0;border:0;background:none;cursor:pointer;padding:0}
td:hover .addn{opacity:1}
.noteed{display:flex;flex-direction:column;gap:4px}
.noteed input[type=text]{font-size:.75rem;padding:4px 6px;border:1px solid var(--accent);border-radius:4px;background:var(--surface);width:100%}
.alertbar{position:sticky;top:112px;z-index:6}
.drawer-bg{position:fixed;inset:0;background:rgba(10,15,25,.35);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--surface);border-left:1px solid var(--line);z-index:41;overflow:auto;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;box-shadow:-8px 0 30px rgba(0,0,0,.18)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 9px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);font-size:.8rem}
.tag button{border:0;background:none;cursor:pointer;color:var(--muted);padding:0 4px;font-size:.9rem}
.tag.clash{border-color:var(--crit);color:var(--crit)}
.thumbs{display:flex;gap:6px;flex-wrap:wrap}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
canvas.sig{width:100%;max-width:420px;height:140px;border:1px dashed var(--muted);border-radius:6px;background:var(--sunk);touch-action:none;display:block}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:6px;font-size:.88rem;z-index:60;max-width:calc(100% - 32px)}
/* warehouse */
.wh{display:grid;gap:14px}
.lane{display:grid;grid-template-columns:44px repeat(4,minmax(0,1fr));gap:6px;align-items:stretch}
.lane .lb{font-family:var(--mono);font-size:.8rem;color:var(--muted);display:flex;align-items:center}
.slot{border:1px solid var(--line);border-radius:6px;padding:6px 7px;min-height:66px;cursor:pointer;background:var(--surface);display:flex;flex-direction:column;gap:3px;font-size:.74rem;text-align:left;min-width:0}
.slot.empty{border-style:dashed;background:transparent;color:var(--muted);justify-content:center;align-items:center}
.slot.sel{outline:2px solid var(--accent);outline-offset:1px}
.slot.dim{opacity:.3}
.slot .id{font-family:var(--mono);font-weight:500;font-size:.78rem;display:flex;justify-content:space-between;gap:4px}
.slot .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.fill{height:5px;background:var(--sunk);border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.fill i{display:block;height:100%}
.fill i.EM{background:var(--em-dot)} .fill i.DF{background:var(--df-dot)}
.flag{color:var(--crit);font-weight:700}
@media (max-width:900px){
  .bwrap{grid-template-columns:minmax(0,1fr)}
  .side{position:static;max-height:none}
  .bscroll{max-height:75vh}
  .alertbar{top:100px}
}
@media (max-width:560px){.lane{grid-template-columns:30px repeat(4,minmax(0,1fr));gap:4px}.slot{padding:5px;min-height:58px}.slot .nm{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* v3 additions: tray strip, mini-jobs, labels, capacity warnings, modals, checkbox lists, fleet and staff views */
.tray{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.tray-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem}
.tray-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;align-items:stretch}
.tray-row .tray-it{flex:0 0 230px}
.tray-it.mini-tpl{flex:0 0 150px;border-style:dashed;background:var(--sunk);display:flex;flex-direction:column;justify-content:center;text-align:center;color:var(--muted)}
.tray-it.mini-tpl b{color:var(--ink)}
.tray-row .tray-drop{flex:0 0 150px;display:flex;align-items:center;justify-content:center}
.tray.drop,.tray-drop.drop{outline:2px dashed var(--accent);outline-offset:-2px}
.side h4{margin:6px 0 2px;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;width:100%}
.rc.sub .dot{background:var(--accent)}
.rc.sub.busy .dot{background:var(--warn)}
.rc.sub.away .dot{background:var(--muted)}
/* labels on the board */
.vn{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.vn.lbl{cursor:pointer}
.vn.lbl.drop{outline:2px solid var(--accent);outline-offset:1px}
.vn .vt{font-size:.62rem;color:var(--muted);font-weight:500}
.vn.due{background:var(--warn-bg);color:var(--warn);border-color:transparent;font-weight:600}
.vn.block .vt{color:var(--crit)}
.vwarn{display:block;margin-top:3px;font-size:.66rem;font-weight:600;color:var(--warn)}
.vwarn.crit{color:var(--crit)}
/* capacity */
.jc.over{border:2px solid var(--crit)}
.capw{display:flex;align-items:center;gap:4px;margin-top:3px;background:var(--crit);color:#fff;font-weight:700;font-size:.68rem;padding:2px 5px;border-radius:3px;cursor:help}
.capw::before{content:"!";display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;background:#fff;color:var(--crit);font-size:.62rem;flex:none}
.capok{font-size:.64rem;color:var(--muted)}
/* mini-jobs */
.mj{display:flex;gap:5px;align-items:center;width:100%;text-align:left;border:1px dashed var(--line);border-radius:4px;padding:2px 5px;margin-bottom:3px;font-size:.68rem;line-height:1.25;background:var(--surface);cursor:grab;color:var(--ink);overflow:hidden;user-select:none;-webkit-user-select:none}
.mj .k{flex:none;font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:0 4px;border-radius:3px;color:#fff}
.mj.EM .k{background:var(--em-bg)} .mj.DF .k{background:var(--df-bg)}
.mj .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.mj .m{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.mj.done{opacity:.6}
.mj.done .t{text-decoration:line-through}
.mj.drop{outline:2px solid var(--accent);outline-offset:1px}
.cmenu{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.cmenu .btn{font-size:.7rem;padding:2px 7px}
.hol.ot{color:var(--ok)}
.hol button{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(10,15,25,.4);z-index:50}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 24px));max-height:calc(100% - 40px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;z-index:51;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.seg.types button{padding:6px 14px}
.seg.types button.on.Holiday{background:var(--warn-bg);color:var(--warn)}
.seg.types button.on.Sick{background:var(--crit-bg);color:var(--crit)}
.seg.types button.on.Overtime{background:var(--ok-bg);color:var(--ok)}
/* checkbox lists */
.cbl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 10px}
.cbl h5{grid-column:1/-1;margin:6px 0 0;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.cb{display:flex;align-items:center;gap:7px;font-size:.84rem;padding:4px 6px;border-radius:5px;border:1px solid transparent;cursor:pointer}
.cb:hover{background:var(--sunk)}
.cb input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.cb small{color:var(--muted);font-size:.7rem;margin-left:auto;white-space:nowrap}
.cb small.busy{color:var(--warn)}
.cb.off{opacity:.5;cursor:not-allowed}
.cb.on{border-color:var(--accent);background:var(--sunk)}
/* arrival time */
.tw{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tw input[type=time],.bform .v .tw input[type=time]{width:auto}
.bform .v input[type=checkbox],.bform .v input[type=radio]{width:auto;padding:0}
.tw label{display:flex;gap:5px;align-items:center;font-size:.8rem;color:var(--muted);white-space:nowrap}
.tw .win{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dayrow{grid-template-columns:62px 140px 200px minmax(0,1fr) 64px}
/* fleet and staff */
.due{font-variant-numeric:tabular-nums;white-space:nowrap}
.due.soon{color:var(--warn);font-weight:600}
.due.over{color:var(--crit);font-weight:700}
.ckt td{vertical-align:middle}
.ckt .rg{display:flex;gap:4px}
.ckt .rg label{display:flex;align-items:center;gap:3px;font-size:.78rem;padding:2px 7px;border:1px solid var(--line);border-radius:999px;cursor:pointer}
.ckt .rg input{accent-color:var(--accent)}
.res-pass{color:var(--ok);font-weight:600} .res-fail{color:var(--crit);font-weight:700} .res-na{color:var(--muted)}
.prof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--accent);color:var(--accent-ink);flex:none}
.stcard{display:flex;gap:10px;align-items:flex-start}
.tags{display:flex;gap:4px;flex-wrap:wrap}
.tags span{font-size:.72rem;padding:1px 7px;border-radius:999px;background:var(--sunk);border:1px solid var(--line)}
@media (max-width:640px){.dayrow{grid-template-columns:1fr 1fr}.tray-row .tray-it{flex-basis:200px}}

.drawer>*,.modal>*{flex-shrink:0}
.freepill{display:inline-block;background:var(--ok);color:var(--surface);font-weight:700;font-size:.74rem;padding:1px 8px;border-radius:999px;margin-right:4px;font-variant-numeric:tabular-nums}
.btn.big{padding:11px 20px;font-size:1rem;font-weight:600}
.crw{margin-top:3px;background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit);font-weight:700;font-size:.66rem;line-height:1.25;padding:2px 5px;border-radius:3px;white-space:normal}
.av-img{object-fit:cover;display:inline-block;padding:0}
.tag .avatar{margin-right:5px;vertical-align:middle}
.tag small{font-size:.68rem;margin-left:3px}
.tagcbs{display:flex;flex-wrap:wrap;gap:6px}
.tagcb{position:relative;display:inline-flex;cursor:pointer}
.tagcb input{position:absolute;opacity:0;width:1px;height:1px}
.tagcb span{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.84rem;user-select:none}
.tagcb input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.tagcb input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.accrow{display:flex;flex-direction:column;gap:6px}
.accrow label{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;cursor:pointer}
.accrow input{width:17px;height:17px;margin-top:2px;accent-color:var(--accent);flex:none}
.accrow small{display:block;color:var(--muted);font-size:.78rem}
.chkline{display:flex;gap:8px;align-items:center;font-weight:500;cursor:pointer}
.chkline input{width:17px;height:17px;accent-color:var(--accent)}
.rball{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--crit);flex:none}
.rball.off{background:var(--line)}
.meter{height:8px;border-radius:4px;background:var(--sunk);border:1px solid var(--line);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--accent);border-radius:4px}
.bellw{position:relative}
.bellp{position:absolute;right:0;top:calc(100% + 6px);width:min(360px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:45;max-height:60vh;overflow:auto;padding:6px}
.bi{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:.85rem;color:var(--ink)}
.bi .rball{margin-top:5px}
.bi:hover{background:var(--sunk)}
.bi b{font-weight:500}
.bi small{display:block;color:var(--muted);font-size:.72rem}
.svp{background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:flex;gap:6px 18px;flex-wrap:wrap;align-items:baseline;justify-content:space-between;font-size:.88rem;font-variant-numeric:tabular-nums}
.svp b{font-size:1.15rem}
/* v8: integrated survey files */
#hs-host{position:fixed;inset:0;z-index:80}
#hs-host[hidden]{display:none}
a.btn{text-decoration:none;display:inline-flex;align-items:center}
.sboard{display:grid;grid-template-columns:repeat(6,minmax(200px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px;align-items:start;margin-bottom:14px}
.scol{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.scol-h{display:flex;justify-content:space-between;align-items:center;gap:6px}
.cnt2{display:inline-block;min-width:22px;text-align:center;padding:0 6px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.78rem;font-variant-numeric:tabular-nums}
.scol-d{margin:-4px 0 2px;font-size:.74rem;color:var(--muted);line-height:1.35}
.scard{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:9px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.scard-h{display:flex;gap:6px;align-items:center;min-width:0}
.scard-h{align-items:flex-start}
.scard-h b{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.scard-o{font-size:.78rem;line-height:1.35}
.scard-m{font-size:.76rem;color:var(--muted);overflow-wrap:anywhere;line-height:1.35}
.svchip{display:block;width:100%;text-align:left;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface);border-radius:4px;padding:3px 6px;margin-bottom:3px;font:inherit;font-size:.72rem;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svchip:hover{border-color:var(--accent)}
.itin{display:grid;grid-template-columns:84px 1fr;gap:14px}
.itin-t{display:flex;flex-direction:column;align-items:flex-start;border-right:2px solid var(--line);padding-right:10px}
.itin-t b{font-size:1.2rem}
.itin-t span{font-size:.75rem;color:var(--muted)}
.itin-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.sfstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px;margin:12px 0}
.sfstat{border:1px solid var(--line);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sfstat span{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sfstat b{font-size:1rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sfstat small{font-size:.74rem;color:var(--muted)}
.sfnote{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sfnote>span{flex:1;min-width:180px}
@media (max-width:640px){
  .sboard{grid-template-columns:repeat(6,minmax(236px,80vw));scroll-snap-type:x mandatory}
  .scol{scroll-snap-align:start}
  .itin{grid-template-columns:1fr;gap:8px}
  .itin-t{flex-direction:row;gap:8px;align-items:baseline;border-right:0;border-bottom:1px solid var(--line);padding:0 0 6px}
}

/* ---------- v9: loading states for the async api ---------- */
.sk{background:linear-gradient(90deg,var(--sunk) 0%,var(--line) 50%,var(--sunk) 100%);background-size:200% 100%;animation:skshine 1.3s ease-in-out infinite;border-radius:6px}
@keyframes skshine{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-title{height:26px;width:min(320px,60%);margin:2px 0 4px}
.sk-sub{height:14px;width:min(520px,85%)}
.sk-line{height:14px;margin:10px 0}
.sk-line:nth-child(3n){width:70%}
.sk-line:nth-child(3n+1){width:92%}
.sk-card{height:118px}
.sk-kpi{height:74px;border-radius:var(--r)}
.sk-slot{display:inline-block;width:calc(25% - 6px);height:52px;margin:3px;vertical-align:top}
.sk-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:4px;max-height:430px;overflow:hidden;margin-top:12px}
.sk-cell{height:46px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* a thin bar at the top while requests are in flight; the screen behind dims slightly */
#netbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;overflow:hidden;pointer-events:none}
#netbar[hidden]{display:none}
#netbar::before{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:var(--accent);animation:netbar 1s ease-in-out infinite}
@keyframes netbar{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){#netbar::before{animation:none;width:100%;opacity:.7}}
#app main{transition:opacity .15s}
#app.stale main{opacity:.72}
button[aria-busy="true"]{cursor:progress;opacity:.7}

/* messages and errors */
.toast[hidden]{display:none}
.errcard{border-color:var(--crit)}
.errcard h3{color:var(--crit);margin-bottom:6px}
.errcard p{margin:0 0 12px}

/* ---------- v10: sign-in, signed-in person, conflicts ---------- */
.who{display:flex;align-items:center;gap:10px;font-size:.85rem}
.who>span{display:flex;flex-direction:column;line-height:1.2;text-align:right}
.who small{color:var(--muted);font-size:.74rem}
main.login{min-height:100vh;display:grid;place-items:center;padding-block:32px}
.logincard{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 36px rgba(16,24,40,.08)}
.logincard h1{font-size:1.5rem;margin:0;text-wrap:balance}
.logincard>p.muted{margin:-8px 0 0;font-size:.88rem}
.loginbrands{display:flex;flex-wrap:wrap;gap:6px}
.loginbrands .b{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.loginbrands .b::before{content:"";width:7px;height:7px;border-radius:50%}
.loginbrands .EM{background:var(--em-bg);color:var(--em-fg)}.loginbrands .EM::before{background:var(--em-dot)}
.loginbrands .DF{background:var(--df-bg);color:var(--df-fg)}.loginbrands .DF::before{background:var(--df-dot)}
.logincard label.f input{font-size:1rem;padding:10px 11px}
.logincard .btn.big{width:100%;justify-content:center}
.logincard .proto{margin:0}
.pw{display:flex;gap:6px;align-items:stretch}
.pw input{flex:1;min-width:0}
.btn:focus-visible,.logincard input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#conflict{position:fixed;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top,0px));z-index:75;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  width:max-content;max-width:calc(100% - 32px);background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit);border-radius:8px;padding:10px 12px;font-size:.9rem;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.18)}
#conflict[hidden]{display:none}

/* ---------- v11: CEO workflow ---------- */
/* money by stage on the dashboard */
.buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px}
.bucket{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.bucket .bl{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bucket b{font-size:1.45rem;font-variant-numeric:tabular-nums;line-height:1.15}
.bucket .bn{font-size:.82rem}
.bucket small{font-size:.74rem;color:var(--muted)}
.bucket.pending{border-top:3px solid var(--warn)}.bucket.confirmed{border-top:3px solid var(--accent)}.bucket.booked{border-top:3px solid var(--ok)}.bucket.declined{border-top:3px solid var(--muted)}
.waitq{border-color:var(--crit);box-shadow:0 0 0 1px var(--crit) inset}
.subh{margin:14px 0 6px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
table.sitecost input{width:84px;padding:4px 6px;text-align:right}
td.neg{color:var(--crit)}
/* board: quality checks, availability and demand */
.svchip.qcchip{border-left-color:var(--ok)}
.svchip.qcchip.wait{border-left-color:var(--warn);background:var(--warn-bg)}
.svchip .qcst{font-size:.66rem;font-weight:600;color:var(--muted);margin-left:4px}
.svchip.qcchip.wait .qcst{color:var(--warn)}
tr.grp td{background:var(--surface);border-top:2px solid var(--ink);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding-top:10px}
tr.demand td.heat{vertical-align:top}
td.heat.h1{background:color-mix(in srgb,var(--warn-bg) 55%,var(--surface))}
td.heat.h2{background:var(--warn-bg)}
td.heat.h3{background:color-mix(in srgb,var(--warn) 22%,var(--warn-bg))}
td.heat.h4{background:color-mix(in srgb,var(--warn) 38%,var(--warn-bg))}
.heatn{font-size:.72rem;margin-bottom:3px;font-variant-numeric:tabular-nums}
.ptag{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;font-size:.68rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:1px 7px;margin:0 3px 3px 0}
button.ptag{cursor:pointer}
.ptag.EM{border-color:var(--em-bg)}.ptag.DF{border-color:var(--df-bg)}
/* staff */
.pill.team{background:var(--sunk)}
.pf1{color:var(--muted);font-size:.8rem}
ul.pf{margin:10px 0 0;padding-left:20px;font-size:.88rem;display:grid;gap:3px}
/* clients search */
form.search{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1 1 320px;max-width:520px}
form.search input{flex:1 1 200px;min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* notifications that wait for an action */
.btn.due{border-color:var(--crit);color:var(--crit)}
.bellsec{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:6px 8px 2px}
.bi.act b{color:var(--crit)}
#nag{position:fixed;inset:0;z-index:90;background:rgba(10,15,25,.55);display:grid;place-items:center;padding:16px}
#nag[hidden]{display:none}
.nagcard{width:min(440px,100%);background:var(--surface);color:var(--ink);border:2px solid var(--warn);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.nagcard h2{margin:0;font-size:1.3rem}
.nagcard p{margin:0}
.nagcard .nagwhen{font-size:1.05rem}
#remind{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:76;width:min(340px,calc(100% - 32px));background:var(--surface);border:2px solid var(--crit);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 14px 40px rgba(0,0,0,.25);font-size:.88rem}
#remind[hidden]{display:none}
#remind b{color:var(--crit)}

/* ---------- v12: board layout, requests, crew portal, calendar ---------- */
/* vans that are off road: one continuous red block across the days */
.board td.c.blk{background:color-mix(in srgb,var(--crit) 16%,var(--surface));box-shadow:inset 0 3px 0 var(--crit),inset 0 -3px 0 var(--crit)}
.board td.c.blk:not(.blk-l){box-shadow:inset 3px 0 0 var(--crit),inset 0 3px 0 var(--crit),inset 0 -3px 0 var(--crit)}
.board td.c.blk:not(.blk-r){box-shadow:inset -3px 0 0 var(--crit),inset 0 3px 0 var(--crit),inset 0 -3px 0 var(--crit)}
.board td.c.blk:not(.blk-l):not(.blk-r){box-shadow:inset 0 0 0 3px var(--crit)}
.board td.c.blk.blk-l{border-left-color:transparent}
.board td.c.blk:hover{background:color-mix(in srgb,var(--crit) 22%,var(--surface))}
.offroad{font-size:.7rem;font-weight:700;color:var(--crit);letter-spacing:.02em;min-height:1em;margin-bottom:3px}
/* a time-off request that is not approved yet: shown, but it does not block */
.hol.pend{color:var(--muted);font-style:italic;border-left:2px dashed var(--warn);padding-left:4px}
/* meetings in the office row */
.svchip.meetchip{border-left-color:var(--muted);background:var(--sunk)}
/* schedule requests in Sam's tray */
.tray-it.req{border-width:2px}
.tray-it.req.pending{border-color:var(--warn);background:var(--warn-bg)}
.tray-it.req.pending .new{background:var(--warn)}
.tray-it.req.accepted{border-color:var(--ok);background:var(--ok-bg)}
.tray-it.req.accepted .new{background:var(--ok)}
.tray-it.req.proposed{border-style:dashed;background:var(--sunk);cursor:default;color:var(--muted)}
.tray-it.req.proposed .new{background:var(--muted)}
.tray-it.req .btn{margin-top:4px}
.reqopt{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.reqopt h3{margin:0;font-size:.95rem}
.reqopt p{margin:0;font-size:.84rem}
/* who covers Edward or Sam */
.coverchip{font-size:.74rem;background:var(--warn-bg);color:var(--warn);border-radius:999px;padding:3px 10px;font-weight:600;max-width:100%}
/* the crew's today screen */
.card.today{border-left:4px solid var(--accent)}
.card.today h3{font-size:1.1rem}
.card.today .acts .btn{min-height:44px}
.maplink{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.team{display:flex;flex-wrap:wrap;gap:4px}
.team .tag{padding-right:9px}
.opsnote{background:var(--hi);color:var(--hi-ink);padding:6px 8px;border-radius:4px;font-size:.88rem;margin:8px 0 0}
.seg.mins{display:flex;flex-wrap:wrap;border-radius:10px;gap:2px}
.seg.mins label{position:relative;cursor:pointer}
.seg.mins input{position:absolute;opacity:0;width:1px;height:1px}
.seg.mins span{display:block;padding:8px 14px;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--muted)}
.seg.mins input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg.mins input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.signedat{margin:6px 0 0;font-size:.9rem}
.waitnote{border-left:4px solid var(--warn)}
/* employee calendar */
.calm{min-width:9.5em;text-align:center;font-size:.95rem}
.cal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.calh,.calg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.calh span{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:6px;text-align:center;border-bottom:1px solid var(--line)}
.cald{all:unset;box-sizing:border-box;min-height:84px;padding:4px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0;font-size:.72rem}
.cald:nth-child(7n){border-right:0}
.cald:hover{background:var(--sunk)}
.cald:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cald.out{color:var(--muted);background:color-mix(in srgb,var(--sunk) 50%,transparent)}
.cald.past .cn{color:var(--muted)}
.cald.today .cn{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 6px}
.cald.sel{box-shadow:inset 0 0 0 2px var(--accent)}
.cn{font-weight:700;font-variant-numeric:tabular-nums;align-self:flex-start}
.ci{display:block;border-radius:3px;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--sunk);border-left:3px solid var(--accent)}
.ci.mini{border-left-color:var(--muted)}
.ci.off{background:var(--warn-bg);color:var(--warn);border-left-color:var(--warn);font-weight:600}
.ci.off.pend{background:transparent;border:1px dashed var(--warn);font-style:italic}
.ci.more{background:none;border:0;color:var(--muted)}
@media (max-width:560px){.cald{min-height:58px;font-size:.62rem;padding:3px}.ci{padding:0 2px;border-left-width:2px}.ci.more{display:none}}

/* ---------- v13: logistics & requirements ---------- */
.lgbox .lgrow{margin:0;padding:3px 0;font-size:.9rem}
.lgbox .lgsub{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.lgbox .lgalert{margin-top:6px;font-weight:600}
.lgbox.lgin{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-top:10px}
.lgbox.lgin h3{font-size:.95rem}

/* ---------- v14: month board, daily tasks, schedule confirmation ---------- */
.bbar h2{margin:0}
.side summary .sdate{font-weight:500;color:var(--muted);font-size:.8rem;margin-left:4px}
.btn.orange{background:var(--warn);border-color:var(--warn);color:#fff}
.btn.orange:hover{filter:brightness(1.08)}
.btn.go[disabled]{opacity:.45;cursor:not-allowed}
.schedacts{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.schedacts .btn{min-height:40px;font-weight:600}
.card.tasks{padding:12px}
.card.tasks .hd{margin-bottom:4px}
.tday{border-top:1px solid var(--line);padding:8px 0;display:flex;flex-direction:column;gap:6px}
.tday:first-of-type{border-top:0}
.tday.cur{background:color-mix(in srgb,var(--accent) 7%,transparent);margin:0 -12px;padding:8px 12px}
.tdh{font-size:.84rem}
.tday .tagcbs{gap:4px}
.tday .tagcb span{padding:3px 9px;font-size:.76rem}
.tday .tnote{font-size:.84rem;padding:5px 8px}
.tplan{font-size:.88rem}
.tsv{font-size:.74rem;color:var(--muted)}
.card.propose{border-color:var(--warn)}
.card.propose h3{margin:0}
/* board cards: confirmed days show a tick, proposed ones a dashed edge */
.jc.locked{box-shadow:inset 3px 0 0 var(--ok)}
.jc .lk{display:inline-block;color:var(--ok);font-weight:800;margin-right:3px}
.jc.prop{outline:2px dashed var(--warn);outline-offset:-2px}

/* ---------- v15: today's column in green; days outside the month muted ---------- */
.board thead th.today{background:#b7e1cd;color:#1d3b2a;box-shadow:inset 0 -3px 0 #2e8b57}
.board td.tcol:not(.blk){background:color-mix(in srgb,#34a853 10%,var(--surface))}
.board td.tcol.we:not(.blk){background:color-mix(in srgb,#34a853 13%,var(--we))}
.board td.lab.tcol{background:var(--surface)}
.board thead th.om:not(.today){color:var(--muted);font-weight:500}
@media (prefers-color-scheme:dark){.board thead th.today{background:#1f4d36;color:#e3f5ea}.board td.tcol:not(.blk){background:color-mix(in srgb,#34a853 16%,var(--surface))}}

/* ---------- v16: day plans in each van cell, typed UK dates, crew day plan ---------- */
/* date boxes: DD/MM/YYYY plus a small calendar button */
.dfield{position:relative;display:flex;align-items:stretch;gap:0;min-width:0}
.dfield input[data-date]{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0}
.dfield .dbtn{border:1px solid var(--line);border-left:0;background:var(--sunk);color:var(--muted);padding:0 9px;border-radius:0 6px 6px 0;cursor:pointer;display:flex;align-items:center}
.dfield .dbtn:hover{color:var(--ink)}
.dfield .dpick{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
/* a van's day: the team on top, then each job or task as one short line */
.board td.c{vertical-align:top;cursor:pointer}
.board td.c:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cteam{font-size:.7rem;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;gap:6px;margin-bottom:3px;line-height:1.3}
.cteam .cn{color:var(--muted);font-weight:500;white-space:nowrap}
.dl{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:4px;padding:3px 5px;margin-bottom:3px;background:var(--surface);font-size:.7rem;line-height:1.3;overflow:hidden;cursor:grab}
.dl.EM{border-left-color:var(--em-bg,#1b2a4a)}.dl.DF{border-left-color:var(--df-bg,#1f6b4a)}
.dl .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .s{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .s.x{color:var(--ink)}
.dl .s.w{color:var(--crit);font-weight:600}
.dl.warn{border-color:var(--crit)}
.dl.mini{border-style:dashed;border-left-style:solid}
.dl.mini .k{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--sunk);border-radius:3px;padding:0 4px}
.dl.done{opacity:.55}
.dl.dim{opacity:.45}
.dl.drop{outline:2px dashed var(--accent);outline-offset:1px}
.dl .ops{background:var(--hi);color:var(--hi-ink);padding:1px 4px;border-radius:3px;margin-top:2px;white-space:normal}
.dl.locked{box-shadow:inset 3px 0 0 var(--ok)}
.dl .lk{color:var(--ok);font-weight:800;margin-right:3px}
.dl.prop{outline:2px dashed var(--warn);outline-offset:-2px}
/* the hover summary */
#tip{position:fixed;z-index:80;width:min(320px,calc(100vw - 16px));max-height:min(70vh,520px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.22);padding:10px 12px;font-size:.78rem;line-height:1.4;pointer-events:none}
#tip[hidden]{display:none}
#tip .tiph{font-size:.86rem;margin-bottom:2px}
#tip .tipt{color:var(--muted);margin-bottom:4px}
#tip .tipl{color:var(--warn);font-weight:600}
#tip .tipl.blk{color:var(--crit)}
#tip .tipi{border-top:1px solid var(--line);padding-top:5px;margin-top:5px}
#tip .tipn{font-weight:600}
#tip .tipo{background:var(--hi);color:var(--hi-ink);padding:2px 5px;border-radius:3px;margin-top:2px}
/* the day plan window */
.modal:has(.dplan){width:min(860px,calc(100vw - 24px))}
.dplan{display:flex;flex-direction:column;gap:12px}
.dplabels{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dplabels .noteed{flex-basis:100%}
.dpteam,.dpitems{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.dpteam h3,.dpitems h3{margin:0 0 6px;font-size:.95rem}
.dpi{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:10px;border-top:1px solid var(--line);padding:9px 0}
.dpi:first-of-type{border-top:0}
.dpi.locked{box-shadow:inset 3px 0 0 var(--ok);padding-left:8px}
.dpb{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.9rem}
.dpb .acts{margin-top:4px}
.dptimes{display:flex;align-items:center;gap:4px}
.dptimes input{width:122px;padding:4px 6px}
.dpadd{border:1px dashed var(--line);border-radius:var(--r);padding:10px 12px}
.dpadd summary{cursor:pointer;font-weight:600}
.dpadd .form{margin-top:8px}
@media (max-width:560px){.dpi{grid-template-columns:1fr}}
/* the crew's day plan */
.vanday h3{margin:0}
ol.crewplan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ol.crewplan li{display:grid;grid-template-columns:112px 1fr;gap:10px;border-top:1px solid var(--line);padding:10px 0}
ol.crewplan li:first-child{border-top:0}
ol.crewplan li.notmine{opacity:.8}
.cpt{font-size:.92rem;white-space:nowrap}
.cpb{display:flex;flex-direction:column;gap:3px;min-width:0}
.cpa{font-size:.86rem}
@media (max-width:420px){ol.crewplan li{grid-template-columns:1fr}}
/* survey notes for the crew */
details.svprev summary{cursor:pointer}
.svprev h4{margin:12px 0 4px;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.svside h4{margin-top:4px}
.svroom{font-size:.88rem;margin-bottom:6px}
.svroom ul{margin:2px 0 0;padding-left:18px}
.svph{margin:0;display:inline-flex;flex-direction:column;gap:2px;max-width:120px}
.svph img{width:120px;height:90px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.svph figcaption{font-size:.68rem;color:var(--muted)}

/* ---------- v17: van teams with a driver, day plan window ---------- */
/* the driver on the board: white on a dark label */
.drv{display:inline-block;background:#1d2733;color:#fff;border-radius:3px;padding:0 5px;font-weight:700;letter-spacing:.01em}
.drv.bad{background:#7a1f1f}
.drv.clash{color:#ffd2d2}
.nodrv{display:inline-block;border:1px dashed var(--warn);color:var(--warn);border-radius:3px;padding:0 4px;font-weight:600;font-size:.95em}
.cteam .tn{min-width:0}
/* crew on a job, all its vans */
.dl .t{display:flex;gap:4px;align-items:baseline}
.dl .t>b{flex:none}
.dl .t .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dl .cc{margin-left:auto;flex:none;font-weight:700;font-size:.92em;color:var(--muted);font-variant-numeric:tabular-nums}
.dl .cc.w{color:var(--crit)}
/* the day plan window: darker board behind, light grey window with white sections */
.modal-bg:has(+ .modal .dplan){background:rgba(8,12,20,.66)}
.modal:has(.dplan){background:#e9edf2;border-color:#c9d1dc}
.dplan>section{background:var(--surface)}
.dpteam,.dpitems,.dpadd{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.dpadd{border-style:solid}
.dpadd h3{margin:0 0 8px;font-size:.95rem}
.dpadd .form{margin-top:0;margin-bottom:8px}
.dpadd>.f,.dpadd>.dpto{margin-bottom:8px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .modal:has(.dplan){background:#0b1017;border-color:#29333f}}
:root[data-theme="dark"] .modal:has(.dplan){background:#0b1017;border-color:#29333f}
/* team chips in the day plan */
.tag.drvtag{background:#1d2733;color:#fff;border-color:#1d2733}
.tag.drvtag small{color:#c9d3df;font-weight:600}
.tag.drvtag button{color:#c9d3df}
.tag .mkdrv{font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:2px;color:var(--ink);background:var(--surface)}
.tag .mkdrv:hover{border-color:var(--accent);color:var(--accent)}
.tag .mkdrv.bad{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,var(--line))}
.dpwarn{margin-top:8px;font-size:.84rem;padding:6px 9px;border-radius:6px;background:var(--warn-bg);color:var(--warn);font-weight:600}
.dpwarn.crit{background:color-mix(in srgb,var(--crit) 12%,var(--surface));color:var(--crit)}
.dpcrew{font-size:.84rem;font-weight:600}
.dpcrew.crit{color:var(--crit)}
.dpcrew .here{text-decoration:underline;text-underline-offset:2px}
/* delivery address: a small window on top */
.dpto{position:relative;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.dptolbl{font-size:.88rem}
.linkb{all:unset;cursor:pointer;color:var(--accent);font-weight:600}
.linkb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dtpop{position:absolute;left:0;top:calc(100% + 4px);z-index:5;width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.22);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.dtpop[hidden]{display:none}
/* the job drawer: crew per van */
.vteams{display:flex;flex-direction:column;gap:6px}
.vt{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:.85rem;border-top:1px solid var(--line);padding-top:6px}
.vt:first-child{border-top:0;padding-top:0}
@media (max-width:560px){.vt{grid-template-columns:1fr}}
/* dark theme: keep the driver label dark but lift it off the dark board */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .drv,:root:not([data-theme="light"]) .tag.drvtag{background:#3a4d66;border-color:#7d93ad;box-shadow:0 0 0 1px #7d93ad}}
:root[data-theme="dark"] .drv,:root[data-theme="dark"] .tag.drvtag{background:#3a4d66;border-color:#7d93ad;box-shadow:0 0 0 1px #7d93ad}

/* ---------- v18: crew app on every phone and tablet; delays, addresses, sign-off ---------- */
.top .ico{flex:none;display:none}
.whoami{display:none}
/* a delay that has been reported: stays at the top of My day */
.latenote{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);color:var(--ink);border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));border-left:5px solid var(--warn);border-radius:var(--r);padding:10px 12px;font-size:.92rem;line-height:1.4}
.latenote .ic{font-size:1.3rem;line-height:1.1}
.latenote>div>b:first-child{display:block;color:var(--warn);font-size:1rem}
.latenote .lr{margin-top:3px;font-style:italic}
.btn.lated{border-color:var(--warn);color:var(--warn);background:var(--warn-bg);font-weight:600}
/* main address and delivery address on the crew's day */
.addrs{display:flex;flex-direction:column;gap:2px}
.addrs>div{display:grid;grid-template-columns:5.6em 1fr;gap:6px;align-items:baseline}
.addrs .al{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.sigimg{display:block;max-width:min(100%,420px);margin-top:6px;border:1px solid var(--line);border-radius:6px;background:#fff}
canvas.sig{height:auto;aspect-ratio:3/1}

/* ---------- the crew app: touch-first, same on iPhone, Android, iPad and tablets ---------- */
body.crewapp{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.crewapp main{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
.crewapp .topin{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
/* fingers, not mouse pointers: 44px targets, 16px text in fields so iPhones do not zoom in */
.crewapp main .btn,.crewapp .modal .btn{min-height:44px;font-size:.95rem;padding:9px 14px;justify-content:center}
.crewapp .top .btn{min-height:40px}
.crewapp input:not([type=checkbox]):not([type=radio]),.crewapp select,.crewapp textarea{font-size:16px}
.crewapp input:not([type=checkbox]):not([type=radio]):not([type=file]),.crewapp select{min-height:44px}
.crewapp .back{min-height:44px;font-size:1rem;display:inline-flex;align-items:center}
.crewapp .seg.mins span{padding:11px 14px;font-size:1rem}
.crewapp .maplink{display:inline-block;padding:3px 0;-webkit-tap-highlight-color:color-mix(in srgb,var(--accent) 20%,transparent)}
.crewapp canvas.sig{max-width:640px}
.crewapp .chkline input{width:22px;height:22px}
.crewapp button,.crewapp a{touch-action:manipulation}

/* phones (portrait and landscape): compact top bar, tabs at the bottom like an app */
@media (max-width:767px){
  .crewapp .brand span:not(.whoami){display:none}
  .crewapp .whoami{display:block;font-size:.78rem;color:var(--muted)}
  .crewapp .topin{flex-wrap:nowrap;gap:8px;padding-block:8px}
  .crewapp .brand{flex:1 1 auto}
  .crewapp .brand strong{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crewapp .who>span{display:none}
  .crewapp .who{gap:6px}
  .crewapp .top .ico{display:block}
  .crewapp .bellw .lbl,.crewapp [data-a="sound"] .lbl{display:none}
  .crewapp .bellw .btn,.crewapp [data-a="sound"]{min-width:44px;min-height:44px;justify-content:center;gap:4px;padding:6px 8px}
  .crewapp [data-a="logout"]{min-height:44px}
  .crewapp .coverchip{display:none}
  .crewapp nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.08);padding-bottom:env(safe-area-inset-bottom,0px);overflow:visible}
  .crewapp nav.tabs .tabsin{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding:0 env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
  .crewapp nav.tabs button{min-height:58px;padding:6px 2px;font-size:.82rem;line-height:1.15;border-bottom:0;border-top:3px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;white-space:normal;text-align:center}
  .crewapp nav.tabs button.on{border-top-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
  .crewapp nav.tabs .cnt{position:static;margin:2px 0 0}
  .crewapp .bellw .btn{flex-direction:row;flex-wrap:nowrap;white-space:nowrap;display:inline-flex}
  .crewapp .bellw .btn{align-items:center}
  .crewapp .bellw .cnt{margin:0;align-self:center;height:auto;line-height:1.35}
  .crewapp main .hd>[data-a="go"][data-v="cal"]{display:none}
  .crewapp main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .crewapp .toast{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .crewapp .bellp{position:fixed;left:8px;right:8px;top:calc(64px + env(safe-area-inset-top,0px));width:auto;max-height:calc(100dvh - 160px);overflow:auto}
  /* action rows: buttons share the width and are easy to hit */
  .crewapp main .acts>.btn{flex:1 1 auto}
  .crewapp main .hd>.btn{flex:none}
  /* windows open as a sheet from the bottom, above the tab bar */
  .crewapp .modal{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-width:none;max-height:calc(100dvh - 40px);border-radius:16px 16px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:51}
  .crewapp .modal .acts>.btn{flex:1 1 auto}
  .crewapp .card.today{padding-inline:14px}
}
@media (max-width:359px){
  .crewapp main{padding-inline:12px}
  .crewapp .topin{padding-inline:12px}
  .crewapp nav.tabs button{font-size:.74rem}
  .crewapp [data-a="logout"]{padding-inline:8px;font-size:.82rem}
  .crewapp .addrs>div{grid-template-columns:1fr;gap:0}
}
/* tablets: roomier, two columns for the job details where there is space */
@media (min-width:768px){
  .crewapp main{max-width:900px}
  .crewapp nav.tabs button{min-height:48px;font-size:.95rem;padding-inline:16px}
  .crewapp ol.crewplan>li{grid-template-columns:150px 1fr}
}
.crewapp input:not([type=checkbox]):not([type=radio]),.crewapp select,.crewapp textarea{font-size:16px!important}
.crewapp main .chip{min-height:44px}
.crewapp .top .btn{margin-top:0}

/* ---------- v19: seats, the people picker, the whole team on each job ---------- */
.seats{font-size:.74rem;font-weight:600;color:var(--muted);background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:2px;font-variant-numeric:tabular-nums}
.seats.full{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:var(--warn-bg)}
.seats.over{color:#fff;background:var(--crit);border-color:var(--crit)}
.dpteam .chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tpw{position:relative;margin-left:auto;display:flex}
.tpw>.btn{min-width:96px}
.tpick{position:absolute;right:0;top:calc(100% + 6px);z-index:6;width:min(440px,calc(100vw - 48px));background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;max-height:min(420px,60vh)}
.tph{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.tph b{flex:1}
.tph .muted{font-size:.8rem}
.tpl{overflow:auto;padding:4px}
.tpr{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:.86rem}
.tpr:hover,.tpr:focus-visible{background:var(--sunk);outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.tpr.off{opacity:.5;cursor:not-allowed}
.tpn{display:flex;align-items:center;gap:6px;min-width:0}
.tps{font-size:.75rem;font-weight:600;color:var(--muted);white-space:nowrap}
.tps.ok{color:var(--ok)}
.tps.warn{color:var(--warn)}
.tpd{font-size:.72rem;color:var(--muted);white-space:nowrap;min-width:5.5em;text-align:right}
.vjump{all:unset;cursor:pointer;color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-weight:700}
.vjump:hover{color:var(--ink)}
.vjump:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.dpcrew.over{color:var(--warn)}
ul.jteams{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:.84rem}
ul.jteams li{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.jtv{font-weight:700;font-size:.74rem;letter-spacing:.02em;color:var(--muted);min-width:6.4em}
ul.jteams li.here .jtv{color:var(--ink)}
.jtp{background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:0 8px}
.jtp.d{background:#1d2733;color:#fff;border-color:#1d2733}
.jtp.d small{color:#c9d3df}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .jtp.d{background:#3a4d66;border-color:#7d93ad}}
:root[data-theme="dark"] .jtp.d{background:#3a4d66;border-color:#7d93ad}
@media (max-width:560px){.tpr{grid-template-columns:1fr auto}.tpd{display:none}.tpick{right:auto;left:0}}

/* ---------- v20: numbered jobs in the day plan, quick add tucked behind a button ---------- */
.dpitems{display:flex;flex-direction:column;gap:10px}
.dpitems>h3{margin:0}
.dpi{display:block;border:1px solid var(--line);border-left:5px solid var(--em-bg);border-radius:8px;padding:0;background:var(--surface);box-shadow:none;overflow:hidden}
.dpi.DF{border-left-color:var(--df-bg)}
.dpi:first-of-type{border-top:1px solid var(--line)}
.dpi.locked{box-shadow:none;padding-left:0}
.dpi.mini .dph{background:color-mix(in srgb,var(--sunk) 60%,var(--surface))}
.dph{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:7px 12px;background:var(--sunk);border-bottom:1px solid var(--line)}
.dph .jn{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--surface);border-radius:4px;padding:2px 7px}
.dph .jcn{font-size:1rem}
.dph .pill{margin:0}
.dpr{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:12px;padding:10px 12px}
.dpitems>.acts{margin-top:2px}
@media (max-width:560px){.dpr{grid-template-columns:1fr}}
/* "+ Add a collection, delivery or task": one quiet button until it is needed */
.dpaddbtn{align-self:flex-start;border-style:dashed;font-weight:600;gap:6px;color:var(--accent)}
.dpaddbtn span{font-size:1.15rem;line-height:1}
.dpadd>.hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dpadd>.hd h3{margin:0}

/* ---------- v21: the day summary stays open and can be scrolled ---------- */
#tip{pointer-events:auto;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);width:min(340px,calc(100vw - 16px));overscroll-behavior:contain;cursor:pointer}
#tip .tipf{position:sticky;bottom:-10px;margin:8px -12px -10px;padding:6px 12px;background:var(--sunk);border-top:1px solid var(--line);color:var(--muted);font-size:.72rem;text-align:center}
#tip a,#tip button{cursor:pointer}

/* ---------- v24: quick register, client review, in-app date picker ---------- */
.qrbtn{white-space:nowrap;gap:5px}
.qrbtn span{font-size:1.1rem;line-height:1}
.qrnote{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.qrnote>div{flex:1 1 320px}
.row.newreg{box-shadow:inset 4px 0 0 var(--warn)}
fieldset.qrco{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px}
fieldset.qrco legend{padding:0;margin-bottom:4px;font-size:.78rem;font-weight:500;color:var(--muted)}
.modal textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);resize:vertical}
/* the date picker */
#dpop{position:fixed;z-index:90;width:260px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.25);padding:8px}
#dpop[hidden]{display:none}
#dpop button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:6px}
#dpop button:disabled{opacity:.3;cursor:default}
#dpop .dph2{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
#dpop .dph2 b{font-size:.9rem}
#dpop .dph2 button{width:34px;height:34px;font-size:1.2rem}
#dpop .dph2 button:hover,#dpop .dd:not(:disabled):hover,#dpop .dpf button:not(:disabled):hover{background:var(--sunk)}
#dpop .dpg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
#dpop .dw{font-size:.68rem;font-weight:600;color:var(--muted);text-align:center;padding:2px 0}
#dpop .dd{height:32px;font-size:.85rem;font-variant-numeric:tabular-nums}
#dpop .dd.tdy{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent);font-weight:700}
#dpop .dd.sel{background:var(--accent);color:var(--accent-ink);font-weight:700}
#dpop .dpf{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
#dpop .dpf button{padding:6px 10px;font-size:.82rem;color:var(--accent);font-weight:600}
#dpop button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.crewapp #dpop .dd{height:40px}

/* ---------- v25: client portfolio ---------- */
.qrhint{margin:-4px 0 0;font-size:.78rem}
.pf-head{display:flex;flex-direction:column;gap:12px}
.pf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pf-id{display:flex;flex-direction:column;gap:4px;min-width:0}
.pf-name{margin:0;font-size:1.5rem}
.pf-biz{font-size:1.5rem;font-weight:700;line-height:1.2}
.pf-contact{font-size:1rem;color:var(--muted)}
.pf-contact b{color:var(--ink)}
.pf-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:.8rem}
.pf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);padding-top:10px;gap:8px}
.pf-stats div{display:flex;flex-direction:column}
.pf-stats b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.pf-stats span{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pf-head.editing{border-left:4px solid var(--accent)}
.pf-edhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pf-edhead h2{margin:0}
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pf-wide{grid-column:1/-1}
.pf-card{display:flex;flex-direction:column;gap:8px;min-width:0}
.pf-card h3{margin:0;display:flex;align-items:baseline;gap:8px}
.pf-n{font-size:.75rem;font-weight:600;color:var(--muted);background:var(--sunk);border-radius:999px;padding:1px 8px}
.pf-blank{margin:0;color:var(--muted);font-size:.85rem}
.pf-dash{color:var(--muted)}
.pf-notes{border-top:1px solid var(--line);padding-top:8px}
.pf-notes p{margin:2px 0 0;white-space:pre-wrap;font-size:.9rem}
.pf-lab{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.pf-t{width:100%;font-size:.86rem}
.pf-t tbody tr[data-a]{cursor:pointer}
.pf-t tbody tr[data-a]:hover{background:var(--sunk)}
.pf-files,.pf-claims{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pf-files li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.pf-files li>div{display:flex;flex-direction:column;min-width:0}
.pf-files small{font-size:.74rem}
.pf-fic{font-size:.66rem;font-weight:800;letter-spacing:.04em;background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:6px 5px;min-width:34px;text-align:center}
.pf-files .linkb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-claims li{border:1px solid var(--line);border-radius:6px;padding:7px 9px;font-size:.86rem;display:flex;flex-direction:column;gap:2px}
.pf-cl1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pf-cl1 .muted{margin-left:auto;font-size:.78rem}
.pf-clr{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.pf-clr input{flex:1 1 160px}
.pf-add{border-top:1px dashed var(--line);padding-top:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.pf-addcl{flex-direction:column;align-items:stretch}
.pf-up{cursor:pointer}
.pf-sum{display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem;align-items:baseline}
.pf-savebar{justify-content:flex-end}
@media (max-width:760px){.pf-grid{grid-template-columns:1fr}.pf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pf-addcl{display:block}
.pf-addcl .form{margin-top:6px;align-content:start}
.pf-card dd a{color:var(--accent);font-weight:600}
.pf-grid{align-items:start}

/* ---------- v26: access, deletion requests, invoices, survey requests ---------- */
.acctab td,.acctab th{text-align:center}
.acctab td:first-child,.acctab th:first-child{text-align:left}
.svask{border-top:1px dashed var(--line);margin-top:12px;padding-top:10px}
.svask p{margin:2px 0 8px;font-size:.84rem}
.svreqs .svreq{border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:8px;padding:10px 12px;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.pf-sum .ok{color:var(--ok)}
.pf-sum .crit{color:var(--crit)}

/* ---------- v27: the client dashboard and the Add New Job page ---------- */
:root{--hero:#1f3f86;--hero2:#2c5a86;--blk:#111827;--blk-ink:#fff;--tint-v:#e8eefc;--tint-v-ink:#2f55c4;--tint-e:#e0f2fb;--tint-e-ink:#0f7bab;--tint-c:#eef0f3;--tint-c-ink:#5b6778;--tint-d:#fde7e7;--tint-d-ink:#c0262f;--yel:#fff3d6;--yel-ink:#b67a00;--blu:#e6eeff;--blu-ink:#2f55c4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hero:#24407a;--hero2:#2d5a8a;--blk:#e5eaf1;--blk-ink:#0e131a;--tint-v:#1d2a47;--tint-v-ink:#9db7ff;--tint-e:#14303d;--tint-e-ink:#7cc8eb;--tint-c:#1f2833;--tint-c-ink:#a3afbf;--tint-d:#3a1719;--tint-d-ink:#ff8a8f;--yel:#3a2e10;--yel-ink:#f2c35c;--blu:#1d2a47;--blu-ink:#9db7ff}}
:root[data-theme="dark"]{--hero:#24407a;--hero2:#2d5a8a;--blk:#e5eaf1;--blk-ink:#0e131a;--tint-v:#1d2a47;--tint-v-ink:#9db7ff;--tint-e:#14303d;--tint-e-ink:#7cc8eb;--tint-c:#1f2833;--tint-c-ink:#a3afbf;--tint-d:#3a1719;--tint-d-ink:#ff8a8f;--yel:#3a2e10;--yel-ink:#f2c35c;--blu:#1d2a47;--blu-ink:#9db7ff}
main:has(.cd){max-width:1480px}
main:has(.nj){max-width:1000px}
.btn svg{vertical-align:-3px}
.btn.blk{background:var(--blk);color:var(--blk-ink);border-color:var(--blk);font-weight:600}
.btn.blk:hover{filter:brightness(1.15)}
.req{color:var(--crit);font-weight:700}
/* layout: profile on the left, everything else on the right */
.cd{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;align-items:start}
.cd-side{position:sticky;top:112px;display:flex;flex-direction:column;padding:0;overflow:hidden;max-height:calc(100vh - 128px)}
.cd-backrow{padding:12px 14px;border-bottom:1px solid var(--line)}
.cd-backrow .btn{display:inline-flex;align-items:center;gap:6px}
.cd-hero{background:linear-gradient(150deg,var(--hero),var(--hero2));color:#fff;padding:22px 16px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.cd-av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.35rem;letter-spacing:.03em;background:rgba(255,255,255,.14);color:#fff;border:2px solid rgba(255,255,255,.75);flex:none}
.cd-name{font-size:1.2rem;color:#fff;word-break:break-word;margin-top:4px}
.cd-sub{font-size:.88rem;opacity:.85}
.cd-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:.76rem;margin-top:2px}
.cd-type{background:rgba(255,255,255,.16);border-radius:999px;padding:1px 9px}
.cd-hero .pill.warn{background:#fff3d6;color:#7a5200}
.cd-id{opacity:.75;font-size:.74rem}
.cd-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1}
.cd-sech{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:6px}
.cd-sech svg{color:var(--accent)}
.cd-contact{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.cd-contact li{display:flex;gap:10px;align-items:flex-start;min-width:0}
.cd-contact svg{flex:none;margin-top:3px;color:var(--muted)}
.cd-contact div{display:flex;flex-direction:column;min-width:0;font-size:.9rem}
.cd-contact span{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.cd-contact a{color:var(--ink);word-break:break-all;text-decoration:none}
.cd-contact a:hover{color:var(--accent);text-decoration:underline}
.cd-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cd-stats div{background:var(--sunk);border-radius:var(--r);padding:8px 10px;display:flex;flex-direction:column}
.cd-stats b{font-size:1rem;font-variant-numeric:tabular-nums}
.cd-stats b.crit{color:var(--crit)}
.cd-stats span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.cd-notes p{margin:0;font-size:.86rem;white-space:pre-wrap}
.cd-call{margin-top:6px!important;color:var(--muted)}
.cd-sidefoot{display:flex;gap:8px;border-top:1px solid var(--line);padding:12px 14px;background:var(--sunk);flex-wrap:wrap;align-items:center}
.cd-sidefoot .btn{flex:1;justify-content:center;display:inline-flex;align-items:center;gap:6px;font-size:.84rem;white-space:nowrap}
.cd-edit{background:var(--tint-v);color:var(--tint-v-ink);border-color:transparent}
.cd-side.editing .cd-hero{padding-block:14px}
.cd-form{display:flex;flex-direction:column;gap:10px}
.cd-main{display:flex;flex-direction:column;gap:16px;min-width:0}
/* jobs list */
.cd-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:-2px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cd-bar h2{display:flex;align-items:center;gap:8px;font-size:1.08rem}
.cd-bar h2 svg{color:var(--accent)}
.cd-bar .acts{display:flex;gap:8px;flex-wrap:wrap}
.cd-bar .btn{display:inline-flex;align-items:center;gap:6px}
.jgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.jcard{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px 12px 10px;display:flex;flex-direction:column;gap:8px;min-width:0;transition:box-shadow .15s,border-color .15s}
.jcard:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 4px 16px rgba(20,35,60,.08)}
.jcard.jc-off{opacity:.72}
.jc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.jc-ref{display:flex;align-items:center;gap:4px;font-size:.74rem;color:var(--muted)}
.jc-name{all:unset;cursor:pointer;font-weight:650;font-size:.98rem;line-height:1.3;word-break:break-word;padding-bottom:6px;border-bottom:1px solid var(--line)}
.jc-name:hover{color:var(--accent)}
.jc-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.jc-type{font-size:.76rem;color:var(--muted);margin-top:-4px}
.jc-quick{font-size:.74rem;color:var(--warn);background:var(--warn-bg);border-radius:6px;padding:2px 8px;align-self:flex-start}
.jc-route{display:flex;flex-direction:column;gap:6px}
.jc-route>div{display:flex;gap:6px;align-items:flex-start}
.jc-route svg{flex:none;margin-top:2px;color:var(--muted)}
.jc-route dl{margin:0;display:flex;flex-direction:column;min-width:0}
.jc-route dt{font-size:.64rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.jc-route dd{margin:0;font-size:.83rem;line-height:1.35;word-break:break-word}
.jc-pt{font-size:.68rem;background:var(--sunk);border-radius:4px;padding:0 5px;color:var(--muted);white-space:nowrap}
.jc-date{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.jc-date.none{font-style:italic}
.jc-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:auto;padding-top:4px}
.ib{border:0;height:32px;border-radius:6px;display:grid;place-items:center;cursor:pointer;transition:filter .12s}
.ib-v{background:var(--tint-v);color:var(--tint-v-ink)}
.ib-e{background:var(--tint-e);color:var(--tint-e-ink)}
.ib-c{background:var(--tint-c);color:var(--tint-c-ink)}
.ib-d{background:var(--tint-d);color:var(--tint-d-ink)}
.ib:hover:not(:disabled){filter:brightness(.94) saturate(1.2)}
.ib:disabled{opacity:.38;cursor:not-allowed}
.ib:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.jc-confirm{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px;font-size:.84rem;font-weight:600;color:var(--crit)}
.jc-confirm span{margin-right:auto}
/* status badges: one colour per stage, the same everywhere */
.sb{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap}
.sb-enq{background:#e6e9ee;color:#475365}
.sb-sv{background:#efe7fb;color:#5b2d9a}
.sb-qc{background:#fde4e4;color:#a3222a}
.sb-qs{background:#fff0dd;color:#9a5300}
.sb-wait{background:#fdf3cf;color:#7a5e00}
.sb-go{background:#dcf3ee;color:#0d6b5f}
.sb-sch{background:#e0ecfd;color:#1d5aa3}
.sb-prog{background:#e5e6fc;color:#3a3db0}
.sb-done{background:#22a35a;color:#fff}
.sb-rti{background:#eef4dc;color:#56651b}
.sb-inv{background:#d9efec;color:#1d5f58}
.sb-paid{background:#176b3a;color:#fff}
.sb-can{background:#eceef1;color:#6b7280;text-decoration:line-through}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sb:not(.sb-done):not(.sb-paid){filter:brightness(.85) contrast(1.1)}}
:root[data-theme="dark"] .sb:not(.sb-done):not(.sb-paid){filter:brightness(.85) contrast(1.1)}
/* panels under the jobs */
.cd-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.cd-panel{padding:0}
.cd-panel>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;flex-wrap:wrap;min-height:56px}
.cd-panel[open]>summary{border-bottom:1px solid var(--line)}
.cd-panel>summary::-webkit-details-marker{display:none}
.cd-ptitle{display:flex;align-items:center;gap:8px}
.cd-ptitle>svg:not(.chev){color:var(--accent)}
.cd-ptitle h3{margin:0;font-size:.98rem}
.chev{transition:transform .15s;color:var(--muted)}
.cd-panel[open] .chev{transform:rotate(90deg)}
.cd-pbtns{display:flex;gap:8px;align-items:center}
.cd-pbtns .btn{display:inline-flex;align-items:center;gap:5px}
.cd-pbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.cd-emp{border:1px solid var(--line);border-radius:var(--r);padding:22px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);text-align:center}
.cd-emp svg{opacity:.45}
.cd-emp p{margin:0;font-size:.84rem;max-width:46ch}
.cd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cd-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);cursor:pointer}
.cd-list li:first-child{border-top:0}
.cd-list li div{display:flex;flex-direction:column}
.cd-list small{color:var(--muted);font-size:.78rem}
.ba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.ba{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:.85rem;display:flex;flex-direction:column;gap:2px}
.ba-h{display:flex;gap:6px;align-items:center;margin-bottom:2px}
.ba-rm{align-self:flex-start;margin-top:4px;font-size:.78rem;color:var(--crit)}
.cd-sw{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;cursor:pointer;font-size:.82rem;color:var(--muted);padding:4px 12px 4px 6px}
.cd-sw i{width:32px;height:18px;border-radius:999px;background:var(--line);position:relative;transition:background .15s}
.cd-sw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.cd-sw[aria-checked="true"]{color:var(--ink)}
.cd-sw[aria-checked="true"] i{background:var(--accent)}
.cd-sw[aria-checked="true"] i::after{left:16px}
.cd-up{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.pf-up{display:inline-flex;align-items:center;gap:6px}
.cd-mails{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cd-mails li{border-top:1px solid var(--line)}
.cd-mails li:first-child{border-top:0}
.cd-mails summary{cursor:pointer;padding:8px 0;display:flex;flex-direction:column}
.cd-mails small{font-size:.76rem}
.cd-mbody p{margin:6px 0 10px;font-size:.88rem}
/* modals */
.mhd{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px}
.mhd h2{font-size:1.1rem;color:var(--accent)}
.mhd>div{flex:1;min-width:0}
.msub{font-size:.8rem}
.mico{width:36px;height:36px;border-radius:9px;background:var(--tint-v);color:var(--tint-v-ink);display:grid;place-items:center;flex:none}
.mx{border:1px solid var(--line);background:var(--surface);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.mx:hover{color:var(--ink)}
.mfoot{justify-content:flex-end;border-top:1px solid var(--line);padding-top:12px}
.mfoot .btn{display:inline-flex;align-items:center;gap:6px}
.iwrap{position:relative;display:block}
.iwrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)}
.iwrap input{padding-left:34px!important;width:100%}
.f input.ro{background:var(--sunk)}
.st-pre{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.st-or{font-size:.8rem;border-left:1px solid var(--line);padding-left:10px;margin-left:4px}
.st-cust{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.st-cust .f{flex:1;min-width:150px}
.st-cust .btn{display:inline-flex;align-items:center;gap:6px}
.st-arr{color:var(--muted);padding-bottom:9px}
.st-head{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.st-scroll{max-height:40vh}
.st-none{text-align:center;padding:14px}
/* the Add New Job page */
.nj-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,var(--hero),var(--hero2));color:#fff;border-radius:12px;padding:20px 22px;position:relative;overflow:hidden}
.nj-banner::after{content:"";position:absolute;right:-60px;top:-50px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07)}
.nj-banner h1{font-size:1.45rem;color:#fff}
.nj-banner p{margin:2px 0 0;font-size:.86rem;opacity:.85}
.nj-bico{width:50px;height:50px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.nj-back{margin-left:auto;background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5);display:inline-flex;align-items:center;gap:6px;position:relative;z-index:1}
.nj-back:hover{background:rgba(255,255,255,.2)}
.nj{display:flex;flex-direction:column;gap:16px}
.nj-sec{padding:0}
.nj-sh{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:linear-gradient(var(--sunk),var(--surface))}
.nj-sh h3{color:var(--accent);font-size:1rem}
.nj-sh p{margin:1px 0 0;font-size:.78rem;color:var(--muted)}
.nj-sh>div{flex:1;min-width:0}
.nj-ico{width:34px;height:34px;border-radius:8px;background:var(--tint-c);color:var(--tint-c-ink);display:grid;place-items:center;flex:none}
.nj-ico.yel{background:var(--yel);color:var(--yel-ink)}
.nj-ico.blu{background:var(--blu);color:var(--blu-ink)}
.nj-hbtn{display:inline-flex;align-items:center;gap:5px}
.nj-sb{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.nj-sec input:not([type=checkbox]):not([type=radio]),.nj-sec select,.nj-sec textarea{background:var(--sunk)}
.flab{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.84rem}
.nj-dl{justify-content:space-between}
.nj-clr{font-size:.76rem;font-weight:400;display:inline-flex;align-items:center;gap:3px;color:var(--muted)}
.nj-csearch{position:relative;display:flex;flex-direction:column;gap:6px}
.cbox{position:relative}
.cbox input{width:100%;padding-right:36px!important}
.cbx{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);cursor:pointer;width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
.cbx:hover{background:var(--line);color:var(--ink)}
.nj-picked{display:flex;gap:10px;align-items:flex-start;background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ink);border-radius:var(--r);padding:9px 12px;font-size:.86rem}
.nj-picked>svg{color:var(--ok);flex:none;margin-top:2px}
.nj-picked b{color:var(--ok)}
.nj-picked.rv{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.nj-picked div{display:flex;flex-direction:column;gap:2px;min-width:0}
.nj-picked small{color:var(--muted);font-size:.78rem}
.nj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.ro-box{padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--sunk);color:var(--muted)}
.nj-addrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.nj-search{position:relative}
.nj-search input{width:100%;padding-left:32px!important;background:var(--sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%237b8797' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5 14 14' stroke='%237b8797' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat 10px center!important}
.nj-find{width:100%}
.asug{position:absolute;left:0;right:0;top:100%;z-index:25;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 28px rgba(0,0,0,.16);margin-top:3px;max-height:300px;overflow:auto}
.asug button{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;background:none;padding:8px 12px;text-align:left;cursor:pointer;border-top:1px solid var(--line);font-size:.88rem}
.asug button:first-child{border-top:0}
.asug button:hover,.asug button:focus-visible{background:var(--sunk);outline:none}
.asug small{color:var(--muted);font-size:.74rem}
.asug-none{padding:10px 12px;font-size:.84rem;color:var(--muted)}
.nj-af{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.nj-af input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px}
.nj-wide{grid-column:1/-1}
.nj-pt{border-top:1px dashed var(--line);padding-top:12px}
.nj-pt .f{max-width:260px}
.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pkg{border:1.5px solid var(--line);border-radius:10px;padding:18px 12px 16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;position:relative;transition:border-color .15s,background .15s}
.pkg:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.pkg input{position:absolute;opacity:0;pointer-events:none}
.pkg-i{color:var(--ink);margin-bottom:4px}
.pkg b{font-size:.92rem}
.pkg small{color:var(--muted);font-size:.78rem}
.pkg.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.pkg.on .pkg-i{color:var(--accent)}
.pkg:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.nj-cta{display:flex;justify-content:center;padding:18px}
.btn.lg{padding:11px 26px;font-size:.98rem;display:inline-flex;align-items:center;gap:8px}
@media (max-width:1000px){
  .cd{grid-template-columns:1fr}
  .cd-side{position:static;max-height:none}
  .cd-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .cd-two,.nj-addrs,.nj-grid,.pkgs{grid-template-columns:1fr}
  .nj-af{grid-template-columns:1fr 1fr}
  .cd-stats{grid-template-columns:1fr 1fr}
  .jgrid{grid-template-columns:1fr}
  .cd-bar .acts{width:100%}
  .cd-bar .acts .btn{flex:1;justify-content:center}
  .nj-banner{flex-wrap:wrap;padding:16px}
  .nj-back{margin-left:0}
  .nj-sh{flex-wrap:wrap}
  .pkg{padding:12px}
}
/* v27 form polish: every box on the Add New Job page looks the same */
.nj label.f,.nj .f{font-weight:600;font-size:.84rem;color:var(--ink)}
.nj .flab{font-size:inherit}
.nj input:not([type=checkbox]):not([type=radio]):not(.dpick),.nj select,.nj textarea{padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--sunk);color:var(--ink);font-size:.9rem;font-weight:400;width:100%}
.nj input:focus,.nj select:focus,.nj textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:0;border-color:var(--accent)}
.nj .dfield input[data-date]{border-radius:7px 0 0 7px}
.nj .dfield .dbtn{border-radius:0 7px 7px 0}
.nj .nj-search input{padding-left:32px}
.nj-picked small .b{vertical-align:1px}
.cd-contact .pf-dash{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:400}

/* ---------- v28: ops board without the left panel; day plan times, vehicles and notes ---------- */
.bwrap.nos{grid-template-columns:minmax(0,1fr)}
.bscroll{overscroll-behavior:contain}
.board thead th{box-shadow:0 1px 0 var(--line)}
.dpih{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.dpih .muted{font-size:.76rem}
.dph{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dph-r{margin-left:auto;display:flex;align-items:center}
.dph-r .dptimes{display:inline-flex;align-items:center;gap:6px}
.dph-r .dptimes input{width:auto;min-width:104px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font-size:.88rem}
.dpsv{font-size:.72rem;color:var(--ok);min-width:44px}
.dpr{display:block}
.dpveh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;font-size:.82rem}
.dpvl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:2px}
.vchip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 10px;background:var(--surface);font-weight:600}
.vchip.here{background:var(--sunk);padding-right:10px}
.vchip small{font-weight:400;color:var(--muted)}
.vchip button{border:0;background:none;cursor:pointer;color:var(--muted);width:20px;height:20px;border-radius:50%;line-height:1}
.vchip button:hover{background:var(--crit-bg);color:var(--crit)}
.dpveh .tpw{position:relative}
.vpick{min-width:300px}
.rte{margin-top:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.rte:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.rte-bar{display:flex;align-items:center;gap:4px;padding:4px 6px;border-bottom:1px solid var(--line);background:var(--sunk)}
.rte-l{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:auto}
.rte-bar button{border:1px solid transparent;background:none;border-radius:5px;padding:2px 8px;cursor:pointer;font-size:.8rem;color:var(--ink);min-height:26px}
.rte-bar button:hover{background:var(--surface);border-color:var(--line)}
.rte-st{font-size:.72rem;color:var(--ok);min-width:44px;text-align:right}
.rte-ed{min-height:70px;height:80px;max-height:60vh;overflow:auto;resize:vertical;padding:8px 10px;font-size:.88rem;line-height:1.45;outline:none;white-space:normal}
.rte-ed:empty::before{content:attr(data-ph);color:var(--muted)}
.rich ul,.rich ol,.rte-ed ul,.rte-ed ol{margin:4px 0;padding-left:22px}
.rich li,.rte-ed li{margin:1px 0}
.rich p,.rte-ed p{margin:0 0 4px}
.dpnotes{margin-top:8px;font-size:.86rem;background:var(--sunk);border-radius:6px;padding:6px 10px}
.daynotes{margin-top:8px;font-size:.9rem;background:var(--hi);color:var(--hi-ink);border-radius:6px;padding:8px 10px}
.daynotes b:first-child{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
@media (max-width:640px){.dph-r{margin-left:0;width:100%}.dph-r .dptimes input{min-width:0;flex:1}}
.rte-l{white-space:nowrap}.rte-bar{flex-wrap:wrap}

/* ---------- v29: brand colours from the logos, logos on the client file, mini-job pickers ---------- */
:root{--em-bg:#171c35;--em-dot:#af2f3e;--df-bg:#02432b;--df-dot:#9fd6bd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--em-bg:#2c3566;--em-dot:#e0566a;--df-bg:#0b6a47;--df-dot:#a6e3c6}}
:root[data-theme="dark"]{--em-bg:#2c3566;--em-dot:#e0566a;--df-bg:#0b6a47;--df-dot:#a6e3c6}
.b-EM{box-shadow:inset 0 0 0 1px var(--em-dot)}
.cd-hero.h-EM{background:linear-gradient(150deg,#171c35,#2a3260)}
.cd-hero.h-DF{background:linear-gradient(150deg,#02432b,#0d5e40)}
.cd-logos{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;background:#fff;border-radius:10px;padding:10px 12px;width:100%;margin-bottom:6px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.cd-logos img{height:34px;width:auto;max-width:100%;display:block}
.cd-logos img.lg-DF{height:30px}
.mjtimes{display:grid;grid-template-columns:1fr 1fr auto;gap:8px 12px;align-items:end}
.mjtimes .win{grid-column:1/-1;font-size:.78rem;color:var(--muted)}
.mjstrict{padding-bottom:8px;white-space:nowrap}
.mjsec{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.mjh{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.mjh h3{margin:0;display:flex;align-items:center;gap:8px}
.mjh .tpw{position:relative}
.mjchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mjchips .tag{display:inline-flex;align-items:center;gap:5px}
.mjchips .tag button,.mjchips .vchip button{border:0;background:none;cursor:pointer;color:var(--muted);width:20px;height:20px;border-radius:50%;line-height:1}
.mjchips .tag button:hover{background:var(--crit-bg);color:var(--crit)}
.vchip.bad{border-color:var(--crit);color:var(--crit)}
@media (max-width:560px){.mjtimes{grid-template-columns:1fr 1fr}.mjstrict{grid-column:1/-1;padding-bottom:0}}

/* ---------- v30: the client profile, white and quiet ----------
   One white surface. Logo, then the name under it, then rows people act on.
   No coloured header, no initials, no boxes inside the panel, no badge row. */
.cd{grid-template-columns:320px minmax(0,1fr);gap:24px}
.cd-side{position:sticky;top:112px;max-height:calc(100vh - 128px);overflow-y:auto;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:none;padding:18px 24px 0}
.cd-side>*{margin-inline:0}
.cd-side::before{content:none;display:none}
.cp-back{all:unset;box-sizing:border-box;cursor:pointer;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-size:.84rem;color:var(--muted);padding:4px 6px 4px 0;border-radius:6px}
.cp-back:hover{color:var(--ink)}
.cp-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the header: the logo, the name under it */
.cp-hd{padding:26px 0 24px;border-bottom:1px solid var(--line)}
.cp-logos{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:20px}
.cp-logos img{display:block;height:34px;width:auto;max-width:100%}
.cp-logos img.lg-DF{height:30px}
.cp-logos.two img{height:26px}
.cp-logos.two img.lg-DF{height:23px}
.cp-nobrand{margin:0 0 14px;font-size:.8rem;color:var(--muted)}
.cd-side .cd-name{margin:0;font-size:1.55rem;line-height:1.2;font-weight:650;letter-spacing:-.012em;color:var(--ink);overflow-wrap:anywhere;text-wrap:balance}
.cd-side .cd-name.ph{color:var(--muted);font-weight:500}
.cd-side .cd-sub{margin:6px 0 0;font-size:.95rem;line-height:1.4;color:var(--muted)}

/* sections: separated by space and one hairline, never by boxes */
.cp-sec{padding:16px 0;border-bottom:1px solid var(--line)}
.cp-h{margin:0 0 4px;font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:0;text-transform:none}
.cp-rows{display:flex;flex-direction:column;margin:0 -12px}
.cp-row{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k a" "v a";
  align-items:center;column-gap:16px;row-gap:1px;min-height:54px;padding:9px 12px;border-radius:9px;color:var(--ink)}
a.cp-row,button.cp-row{cursor:pointer;transition:background .12s}
a.cp-row:hover,button.cp-row:hover{background:var(--sunk)}
.cp-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cp-k{grid-area:k;font-size:.76rem;line-height:1.2;color:var(--muted)}
.cp-v{grid-area:v;font-size:.98rem;line-height:1.35;overflow-wrap:break-word;min-width:0}
.cp-act{grid-area:a;font-size:.84rem;font-weight:600;color:var(--accent)}
.cp-row.empty{min-height:0;padding-block:7px}
.cp-row.empty .cp-v{color:var(--muted);font-size:.9rem}
.cp-crit .cp-v{color:var(--crit);font-weight:650;font-variant-numeric:tabular-nums}
.cp-warn .cp-v{color:var(--warn);font-weight:650}
.cp-note{margin:0;font-size:.93rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}

/* the reference, quiet, at the end of the details */
.cp-meta{margin:0;padding:16px 0;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:.8rem;color:var(--muted)}
.cp-meta div{display:flex;gap:8px;align-items:baseline}
.cp-meta dt,.cp-meta dd{margin:0}
.cp-meta dd{color:var(--ink)}

/* actions: one clear button, the destructive one quiet and apart */
.cd-side .cp-foot{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:16px 0 20px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface)}
.cd-side .cp-foot.row{flex-direction:row}
.cd-side .cp-foot.row .btn{flex:1;justify-content:center}
.cp-edit{justify-content:center;min-height:42px;font-weight:600;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.cp-edit:hover{background:var(--sunk)}
.cp-del{all:unset;box-sizing:border-box;cursor:pointer;align-self:center;font-size:.82rem;color:var(--crit);padding:6px 10px;border-radius:6px}
.cp-del:hover{background:var(--crit-bg)}
.cp-del:focus-visible{outline:2px solid var(--crit);outline-offset:2px}
.cp-delnote{margin:0;text-align:center;font-size:.8rem;color:var(--muted)}
.cd-side .cd-body{padding:18px 0;overflow:visible;flex:none}
details.cd-panel{scroll-margin-top:124px}

/* dark: the D&F wordmark turns light; the EM logo carries its own navy panel */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cp-logos img.lg-DF{filter:brightness(0) invert(.93)}}
:root[data-theme="dark"] .cp-logos img.lg-DF{filter:brightness(0) invert(.93)}

/* tablet: the profile runs across the top, the three contact rows side by side */
@media (max-width:1000px){
  .cd{grid-template-columns:1fr}
  .cd-side{position:static;max-height:none}
  .cd-side .cp-foot{position:static}
  .cp-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
@media (max-width:640px){
  .cd-side{padding:14px 18px 0;border-radius:12px}
  .cp-hd{padding:20px 0 20px}
  .cd-side .cd-name{font-size:1.4rem}
  .cp-rows{display:flex}
}

/* ---------- v31: a new caller typed straight into the job form ---------- */
.nj-new{display:flex;flex-direction:column;gap:10px}
.nj-newh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.nj-newh b{font-size:.95rem}
.nj-newh .linkb{font-size:.84rem;color:var(--muted)}
.nj-ncf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.nj-nchint{margin:0;font-size:.8rem;color:var(--muted)}
.nj-dup{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--warn-bg);border-radius:8px;padding:9px 12px;font-size:.88rem}
.nj-dup .btn{white-space:nowrap}
.asug .asug-new{color:var(--accent);font-weight:600;border-top:1px solid var(--line)}
.asug button.act{background:var(--sunk);outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:-2px}
@media (max-width:760px){.nj-ncf{grid-template-columns:1fr}}

/* ---------- v31: the job form in the CRM's own quiet style ---------- */
.nj-top{display:flex;flex-direction:column;gap:2px;padding:2px 0 6px}
.nj-tt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.nj-top h1{margin:0;font-size:1.6rem;line-height:1.2;font-weight:650;letter-spacing:-.012em;color:var(--ink)}
.nj-top p{margin:4px 0 0;color:var(--muted);font-size:.92rem}
.nj-sh{background:none;padding:16px 20px 12px}
.nj-sh h3{color:var(--ink);font-size:1.02rem}
.nj-auto{margin:12px 0 0;font-size:.8rem;color:var(--muted)}
.nj-ad{display:flex;flex-direction:column;gap:12px}
.nj-ad .f{max-width:none}
.nj-ad select{max-width:280px}
.nj-cta{display:flex;justify-content:flex-end;gap:10px;padding:6px 0 0;position:static;background:none}
.nj-cta .btn{min-width:120px;justify-content:center}
.jrn{font-size:.84rem;font-weight:500;margin-left:6px;vertical-align:middle}
.jrbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.jrbox input{flex:1;min-width:220px;max-width:420px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit}
.jrbox small{flex-basis:100%}
@media (max-width:640px){.nj-cta .btn{flex:1;min-width:0}}

/* one control style across the form: every box the same height, the same fill */
.nj label.f select,.nj select,.nj label.f textarea,.nj textarea{padding:9px 11px;border:1px solid var(--line);border-radius:7px;background-color:var(--sunk);color:var(--ink);font-size:.9rem}
.nj label.f select,.nj select{min-height:42px}
.nj label.f textarea,.nj textarea{line-height:1.5}
.nj .nj-clr{padding:0 2px;margin:-4px 0;line-height:1}   /* the Clear link must not make its label taller */
.nj div.f{display:flex;flex-direction:column;gap:3px;min-width:0}   /* the date box sits like every other box under its label */

/* ---------- v31: more than one delivery address ---------- */
.nj-drop{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.nj-droph{display:flex;justify-content:space-between;align-items:center;gap:10px}
.nj-droph b{font-size:.84rem;font-weight:600;color:var(--ink)}
.nj-droph .linkb{font-size:.82rem;color:var(--muted);padding:10px 6px;margin:-10px -6px;border-radius:6px}   /* a finger-sized target */
.nj-droph .linkb:hover{color:var(--crit)}
.nj-drop select{max-width:280px}
.nj-addrow{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:12px 2px;border-radius:6px;font-size:.86rem;font-weight:600;color:var(--accent)}
.nj-addrow:hover{text-decoration:underline}
.nj-addrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nj-addrow svg{width:14px;height:14px;flex:none}

/* ---------- v31: the client's addresses ---------- */
.adr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.adr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:start;padding:11px 0;border-top:1px solid var(--line)}
.adr:first-child{border-top:0;padding-top:2px}
.adr>svg{margin-top:4px;color:var(--muted)}
.adr-s{font-size:.92rem;line-height:1.4;overflow-wrap:anywhere}
.adr-m{margin-top:2px;font-size:.78rem;line-height:1.45;color:var(--muted)}
.adr-m .linkb{font-weight:500;font-size:inherit}
.adr-home{color:var(--accent);font-weight:650}
.adr-rm{font-size:.8rem;font-weight:500;color:var(--muted);padding:8px 6px;margin:-6px -6px 0 0;border-radius:6px}
.adr-rm:hover{color:var(--crit)}
.adr-rm:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- v31: "Use a saved address" ---------- */
.nj-alr{display:flex;justify-content:space-between;align-items:center;gap:4px 12px;flex-wrap:wrap}
.nj-sv{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:500;color:var(--muted);cursor:pointer;padding:8px 0;margin:-8px 0;user-select:none}
.nj-sv:hover{color:var(--ink)}
.nj-sv input{width:15px;height:15px;margin:0;accent-color:var(--accent);cursor:pointer}
.nj-dropr{display:inline-flex;align-items:center;gap:6px 16px;flex-wrap:wrap;justify-content:flex-end}
.nj-droph{flex-wrap:wrap}
.nj .nj-svsel{width:100%;max-width:none}   /* the whole address shows, unlike the short property-type list */

/* ---------- v31: "has moved, update their home address?" ---------- */
.homeask{display:flex;flex-direction:column;gap:8px}
.homeask .ha-now{margin:0;font-size:.86rem;color:var(--muted)}
.homeask .ha-opts{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.homeask .ha-opts .chkline{font-size:.92rem;align-items:center;gap:8px}
.homeask .acts{margin-top:2px}

/* ---------- v31: extra deliveries in the booking form (changed on the job's Edit page) ---------- */
.bform .bf-ro{padding:12px 17px;font-size:.95rem}

/* ---------- v31: Edward's check, the move address by address ---------- */
.mba .mba-plan{margin:0 0 10px;font-size:.9rem}
.mba-t{width:100%;border-collapse:collapse;font-size:.88rem}
.mba-t th{text-align:left;font-size:.74rem;font-weight:600;color:var(--muted);padding:6px 10px 6px 0;border-bottom:1px solid var(--line)}
.mba-t td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.mba-t tr:last-child td{border-bottom:0}
.mba-t td small{display:block;color:var(--muted);font-size:.78rem;margin-top:1px}
.mba .note{margin:0 0 8px}

/* ---------- v31: provisional bookings and deposits ---------- */
.sb-prov{background:var(--surface);color:#0d6b5f;box-shadow:inset 0 0 0 1px #0d6b5f}
.dl.held,.jc.held{outline:2px dashed #0d6b5f;outline-offset:-2px}
.depform{margin-top:10px;box-shadow:none}
.depform h3{font-size:.95rem}

/* ---------- v31: optional extras and the Xero description ---------- */
.opt-list{list-style:none;margin:0;padding:0}
.opt-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.opt-list li:first-child{border-top:0;padding-top:2px}
.opt-list li div{display:flex;flex-direction:column}
.opt-list small{color:var(--muted);font-size:.8rem}
.opt-list li>span,.opt-list li>button{flex:none}
.opt-on{font-size:.8rem;font-weight:600;color:#0d6b5f;margin-left:auto}
.opt-list .linkb{font-size:.8rem;color:var(--muted);font-weight:500;padding:6px 4px}
.opt-tot{margin:10px 0 0;font-size:.9rem}
.xero textarea{width:100%;font:inherit;font-size:.88rem;line-height:1.5;border:1px solid var(--line);border-radius:7px;padding:10px 12px;background:var(--sunk);color:var(--ink);resize:vertical}
/* v31 step 6 · parking suspensions */
.susp .sp-list{list-style:none;margin:0;padding:0}
.susp .sp-list>li{padding:12px 0;border-top:1px solid var(--line)}
.susp .sp-list>li:first-child{border-top:0;padding-top:2px}
.sp-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.sp-h .muted{font-size:.84rem}
.sp-h .pill{margin-left:auto}
.sp-done{margin:6px 0 0;font-size:.86rem}
.sp-done .linkb{font-size:.86rem;padding:2px 0}
.susp .note{margin:8px 0 0}
.sp-form{display:grid;grid-template-columns:minmax(160px,220px) minmax(200px,1fr) auto;gap:10px 14px;align-items:end;margin-top:10px}
.sp-form .f{margin:0}
.sp-form input[type=file]{font-size:.84rem;padding:6px 0;border:0;background:none}
.sp-form .acts{margin:0;align-items:center}
.sp-file{display:flex;align-items:center;gap:10px;min-height:38px;font-size:.88rem}
.sp-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
@media (max-width:720px){.sp-form{grid-template-columns:1fr}.sp-h .pill{margin-left:0}}
.bi.act.amber .rball{background:var(--warn)}
.bi.act.red b{color:var(--crit)}
.sp-form div.f{display:flex;flex-direction:column;gap:3px;min-width:0}
.sp-form .flab{font-size:.78rem;color:var(--muted);font-weight:500}
.sp-form input[type=file]::file-selector-button{margin-right:10px;padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:500 .84rem inherit;cursor:pointer}
.sp-form input[type=file]::file-selector-button:hover{border-color:var(--accent)}
.sp-form .acts .linkb{font-size:.84rem;color:var(--muted);font-weight:500;padding:6px 4px}
.sp-form .acts .linkb:hover{color:var(--ink)}
/* v31 step 6b · parking tags on the board's job card */
.pk{margin-top:4px;display:flex;flex-direction:column;gap:2px}
.pkr{display:flex;flex-wrap:wrap;align-items:center;gap:3px;font-size:.66rem;line-height:1.3}
.pkw{color:var(--muted);font-weight:600;min-width:34px}
.pkt{padding:0 5px;border-radius:4px;background:var(--sunk);color:var(--ink);white-space:nowrap}
.pkt.ok{background:var(--ok-bg);color:var(--ok)}
.pkt.due{background:var(--surface);border:1px dashed var(--warn);color:var(--ink)}
.pkt.amber{background:var(--warn-bg);color:var(--ink)}
.pkt.red{background:var(--crit-bg);color:var(--crit);font-weight:600}
/* v31 step 7 · stops in order */
.stops .st-list{list-style:none;margin:0;padding:0}
.stops .st-list>li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.stops .st-list>li:first-child{border-top:0;padding-top:2px}
.st-n{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--surface);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700}
.stops li.crit .st-n{background:var(--crit)}
.st-b{min-width:0;display:flex;flex-direction:column;gap:3px}
.st-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.st-what{color:var(--muted);font-size:.84rem}
.st-a{font-size:.88rem}
.st-l{display:grid;grid-template-columns:64px 1fr;gap:8px;font-size:.86rem;align-items:baseline}
.st-k{color:var(--muted);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.st-tags{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.st-tags .pkt{font-size:.76rem;padding:1px 6px}
.st-ref{font-size:.8rem;font-weight:600}
.st-load{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.st-load h4{margin:0;font-size:.92rem}
.st-load p{margin:2px 0 8px;font-size:.82rem}
.st-load ol{margin:0;padding-left:20px;font-size:.86rem;display:flex;flex-direction:column;gap:4px}
.drawer .stops{margin:10px 0}
.dl.nopark{border-color:var(--crit);box-shadow:inset 3px 0 0 var(--crit)}
@media (max-width:520px){.st-l{grid-template-columns:1fr;gap:1px}}
/* v31 · access: office screens on the staff page */
.acc-h{margin:16px 0 8px;font-size:.9rem}
.acc-h .muted{font-weight:400;font-size:.8rem}
/* v31 · To do: team requests */
.td-h{margin:22px 0 10px;font-size:1rem;display:flex;align-items:center;gap:8px}
.td-h .cnt{background:var(--crit);color:#fff;border-radius:10px;padding:0 7px;font-size:.75rem}
.td-none{margin:0 0 6px;font-size:.88rem}
.card.ask{margin-bottom:12px}
.card.ask.closed{opacity:.75}
.ask-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ask-t{display:block;font-size:1rem}
.ask-m{font-size:.8rem}
.ask-d{margin:6px 0 0;font-size:.88rem}
.pg{list-style:none;margin:14px 0 4px;padding:0;display:flex;gap:0;overflow-x:auto}
.pg-s{flex:1 1 0;min-width:130px;position:relative;padding:0 10px 0 0;display:flex;flex-direction:column;gap:2px;font-size:.82rem}
.pg-s::before{content:"";position:absolute;top:13px;left:28px;right:0;height:2px;background:var(--line)}
.pg-s:last-child::before{display:none}
.pg-s.done::before{background:var(--ok)}
.pg-dot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;background:var(--surface);border:2px solid var(--line);color:var(--muted);margin-bottom:4px}
.pg-s.done .pg-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.pg-s.wait .pg-dot{border-color:var(--warn);color:var(--ink);background:var(--warn-bg)}
.pg-s.late .pg-dot{border-color:var(--crit);background:var(--crit);color:#fff}
.pg-s.ready .pg-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.pg-s.drop .pg-dot{border-style:dashed}
.pg-q{color:var(--muted)}
.pg-a{font-weight:500}
.pg-a .late{color:var(--crit);font-weight:600}
.ask-ans{margin-top:12px;padding:12px;border-radius:8px;background:var(--warn-bg)}
.ask-ans .form{margin-top:8px}
.ask-ans .ask-txt{grid-column:span 2}
.ask-ans .acts{margin-top:8px}
.ask-close{margin-top:10px;align-items:center}
.ask-close .linkb{font-size:.84rem;color:var(--muted)}
.askf{margin-bottom:12px}
.askf .askf-t{grid-column:1/-1}
.askf-h{margin:14px 0 6px;font-size:.9rem}
.askf-row{display:grid;grid-template-columns:200px 220px 1fr auto;gap:10px;align-items:end;padding:8px 0;border-top:1px solid var(--line)}
.askf-row .f{margin:0}
.askf-rm{font-size:.8rem;color:var(--muted);padding:8px 4px}
.td-done summary{cursor:pointer;margin:18px 0 10px;font-weight:600}
@media (max-width:720px){.askf-row{grid-template-columns:1fr}.pg{flex-direction:column;gap:10px}.pg-s{min-width:0;padding:0 0 0 38px}.pg-s::before{display:none}.pg-dot{position:absolute;left:0;top:0}.ask-ans .ask-txt{grid-column:auto}}
/* v31 · reminders for team requests */
.pg-ch{display:block;font-size:.76rem}
.pg-rm{font-size:.78rem;padding:2px 0;text-align:left}
.asknag{border-color:var(--accent)}
/* v31 · waiting on someone else */
.pg-s.hold .pg-dot{border-color:var(--accent);background:var(--surface);color:var(--accent)}
.pg-hold{color:var(--accent);font-weight:600}
.hold-f{display:grid;grid-template-columns:1fr 180px 160px auto;gap:10px;align-items:end;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.hold-f .f{margin:0}.hold-f .acts{margin:0}
.nag-hold .hold-f{grid-template-columns:1fr}
@media (max-width:720px){.hold-f{grid-template-columns:1fr}}
/* v31 · the Today list */
.td-add{padding:12px 14px;margin-bottom:14px}
.td-addrow{display:grid;grid-template-columns:1fr 170px auto auto;gap:10px;align-items:end}
.td-addrow #td-new{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:.98rem;background:var(--surface);color:var(--ink);width:100%}
.td-addrow .f{margin:0}
.td-askchk{white-space:nowrap;padding-bottom:9px}
.td-add .askf{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.td-add .askf .acts{gap:16px;margin-top:6px}
.td-list{list-style:none;margin:0 0 10px;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.td-row{border-top:1px solid var(--line)}
.td-row:first-child{border-top:0}
.td-line{display:flex;align-items:center;gap:10px;padding:0 0 0 14px}
.td-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:none;border:0;padding:12px 14px 12px 0;text-align:left;color:var(--ink);font:inherit;cursor:pointer}
div.td-main{cursor:default}
.td-main:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.td-dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--line)}
.td-dot.red{background:var(--crit)}.td-dot.amber{background:var(--warn)}.td-dot.grey{background:var(--muted);opacity:.45}
.td-chk{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);background:var(--surface);flex:none;cursor:pointer;padding:0}
.td-chk.red{border-color:var(--crit)}
.td-chk:hover{background:var(--ok-bg);border-color:var(--ok)}
.td-tick{color:var(--ok);font-weight:700;flex:none;width:20px;text-align:center}
.td-type{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);min-width:64px}
.td-title{font-weight:600}
.td-note{color:var(--muted);font-size:.85rem}
.lvl-red .td-note{color:var(--crit)}
.td-chev{margin-left:auto;color:var(--muted)}
.td-row.open{background:var(--sunk)}
.td-body{padding:0 16px 14px 44px}
.td-body .pg{margin-top:8px}
.td-body .ask-ans{background:var(--surface)}
.td-task{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.td-task .f{margin:0}.td-task .muted{font-size:.8rem}
.td-donel .td-title{color:var(--muted);text-decoration:line-through;font-weight:500}
.td-fold{display:block;background:none;border:0;padding:8px 2px;font:600 .9rem inherit;color:var(--ink);cursor:pointer}
.td-undo{margin:0 0 10px;padding:8px 12px;border-radius:8px;background:var(--ink);color:var(--surface);display:flex;gap:12px;align-items:center;font-size:.88rem;width:max-content;max-width:100%}
.td-undo .linkb{color:#9cc3ff}
.td-none{margin:6px 2px 14px}
@media (max-width:720px){.td-addrow{grid-template-columns:1fr 1fr}.td-addrow #td-new{grid-column:1/-1}.td-body{padding-left:16px}.td-type{min-width:0}}
/* v31 · Today list alignment */
.td-line>.td-dot,.td-line>.td-chk,.td-line>.td-tick{margin:0 4px}
.td-line>.td-dot{margin:0 8px}
.td-type{width:78px;min-width:78px;flex:none}
.td-fold{width:100%;text-align:left}
.pg-rm{display:block}
@media (max-width:720px){.td-type{width:auto;min-width:0}}
/* v31 · Today list: office work */
.lvl-taken .td-title,.lvl-taken .td-note{color:var(--muted)}
.td-dot.taken{background:transparent;border:2px solid var(--line)}
.td-take{margin:8px 0;align-items:center;gap:12px}
.td-take .linkb{font-size:.86rem}
.td-p{margin:6px 0;font-size:.86rem}
.td-form{margin:10px 0}
.td-form .td-wide{grid-column:span 2}
.cpy-t{width:100%;border-collapse:collapse;margin:8px 0;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:.88rem}
.cpy-t th,.cpy-t td{padding:7px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.cpy-t tr:first-child th,.cpy-t tr:first-child td{border-top:0}
.cpy-t tbody th{width:120px;color:var(--muted);font-weight:600;font-size:.8rem}
.cpy-t td:last-child{width:70px;text-align:right}
.xp-lines thead th{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;background:var(--sunk)}
.xp-lines td:last-child{width:auto;text-align:left}
.xp-lines .linkb{font-size:.78rem;margin-left:6px}
.xp{margin:8px 0}
.xp-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.xp-h .muted{font-size:.8rem}
.xp-tot{margin:4px 0 10px;font-size:.86rem}
@media (max-width:720px){.cpy-t tbody th{width:auto}.td-form .td-wide{grid-column:auto}.xp-lines{display:block;overflow-x:auto}}
/* v31 · To do step 3: role rows, Edward's Team view */
.td-kv{margin:6px 0 10px}
.td-seg{align-self:center}
.td-dot.clear{background:var(--surface);border:2px solid var(--ok)}
.tm .td-note{font-size:.82rem}
.tm-l{list-style:none;margin:6px 0 0;padding:0}
.tm-it{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px dashed var(--line);flex-wrap:wrap}
.tm-it:first-child{border-top:0}
.tm-it .td-dot{width:9px;height:9px;align-self:center}
.tm-t{flex:1;min-width:0;font-size:.9rem}
.tm-it .linkb{font-size:.85rem}
/* v36 · ops board: not yet checked by Sam (faded red), team files, crew tasks */
.dl.unconf{border-color:rgba(200,45,45,.42);border-left-color:rgba(200,45,45,.7);background:linear-gradient(0deg,rgba(200,45,45,.045),rgba(200,45,45,.045)),var(--surface)}
.tipa{font-weight:700;color:var(--ink)}
.ctasks{display:inline-flex;gap:10px;align-items:center;margin-right:10px}
.ctasks.ro{display:flex;gap:6px;margin:6px 0}
.ctk{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.ctk input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.pill.ctask{background:#e8f0fb;color:#1f4f8a;border-color:#c9daf2}
.dpfiles{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:.82rem}
.dpf-l{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:4px}
.dpf{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:1px 4px 1px 10px;background:var(--surface)}
.dpf-x{border:0;background:none;cursor:pointer;color:var(--muted);font-size:1rem;line-height:1;padding:2px 6px}
.dpf-add{cursor:pointer}
.dpacts{flex-wrap:wrap}
.dpsch{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:auto}
@media (max-width:640px){.rte-bar{flex-wrap:wrap}.ctasks{order:5;width:100%;margin:4px 0 0}.dpsch{margin-left:0}}
/* v36 · crew My day: who is off, files from Sam, other teams */
.offtoday{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-4px 0 12px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:.84rem}
.ot-l{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:4px}
.offp{display:inline-flex;gap:4px;align-items:baseline;padding:3px 10px;border-radius:999px;background:#eef3fa;color:#1f3b63}
.offp.sick{background:#fdecec;color:#8a1f1f}
.offp small{color:inherit;opacity:.8}
.crewfiles{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 0;font-size:.84rem}
.crewfiles b{margin-right:4px}
.otherteams h3{margin:0 0 4px}
.ot-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.ot-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 10px;cursor:pointer;font:inherit;text-align:left;min-width:120px}
.ot-tab span{font-size:.76rem;color:var(--muted)}
.ot-tab.on{border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.ot-tab.late{border-color:#e2a33c}
.ot-late{font-style:normal;font-size:.7rem;font-weight:700;color:#8a5a00;background:#fff3d6;border-radius:999px;padding:0 6px;margin-top:2px}
.ot-team{font-size:.86rem;margin-bottom:8px}
.ot-item{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:.88rem}
.ot-item:first-of-type{border-top:0}
.ot-a{font-size:.84rem}
.ot-a .al{display:inline-block;min-width:76px;color:var(--muted);font-size:.78rem}
.ot-lt{margin-top:4px;font-size:.82rem;color:#8a5a00;background:#fff7e6;border-radius:6px;padding:4px 8px}
@media (max-width:640px){.ot-item{grid-template-columns:1fr;gap:2px}}
/* v36 · packing list: thumb-sized controls for phone and iPad */
.pl-top{margin-bottom:8px}
.pl-hd h2{margin:0}
.pl-det summary{cursor:pointer;list-style:none;padding:2px 0;font-size:.95rem}
.pl-det summary::-webkit-details-marker{display:none}
.pl-det .kv{margin-top:10px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:8px 16px;font:inherit;cursor:pointer;min-height:40px}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--accent);color:#fff;font-weight:600}
.seg button:disabled{cursor:default}
.seg button:disabled:not(.on){color:var(--muted)}
.pl-grid{display:grid;grid-template-columns:1fr;gap:12px}
.pl-grid{grid-template-areas:"a" "b" "c"}.pl-ga{grid-area:a}.pl-gb{grid-area:b}.pl-gc{grid-area:c}
.pl-ga:empty{display:none}
@media (min-width:900px){.pl-grid{grid-template-columns:minmax(360px,5fr) 6fr;grid-template-areas:"a b" "c b";align-items:start}.pl-gb{align-self:start}}
.pl-ga>.card,.pl-gb>.card,.pl-gc>.card{margin-bottom:12px}
.pl-add .f{display:block;margin-bottom:12px}
.pl-add input,.pl-add select,.pl-it select,.pl-it input{width:100%;min-height:46px;font-size:1rem;box-sizing:border-box}
.pl-addh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.pl-no{font-size:1.05rem}
.pl-no b{font-size:2rem;line-height:1;margin-left:4px;font-variant-numeric:tabular-nums}
.pl-recent{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font:inherit;font-size:.86rem;cursor:pointer;min-height:36px}
.chip.on{border-color:var(--accent);background:#e8f0fb;color:#1f4f8a;font-weight:600}
.pl-packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:4px}
.pl-pk{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:10px 8px;font:inherit;font-size:.86rem;cursor:pointer;text-align:left;min-height:46px;line-height:1.2}
.pl-pk.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#e8f0fb;font-weight:600}
.pl-dmg{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.pl-photo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.pl-photo .btn{min-height:46px}
.pl-ths{display:flex;gap:6px;flex-wrap:wrap}
.pl-th{position:relative;display:inline-block}
.pl-th img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
.pl-th button{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;line-height:1;padding:0}
.btn.big{min-height:52px;font-size:1.05rem;width:100%}
.pl-lh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.pl-lh h3{margin:0}
.pl-cnt{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.8rem;color:var(--muted);margin:6px 0 8px}
.pl-it{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.pl-n{width:48px;height:48px;border-radius:10px;background:var(--sunk);display:grid;place-items:center;font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums;border:1px solid var(--line)}
.pl-n.tick{cursor:pointer;font:inherit;font-weight:700;font-size:1.15rem;background:var(--surface);border:2px solid var(--line)}
.pl-it.dlv .pl-n{background:#e3f4ea;border-color:#2e8b57;color:#1e6b42}
.pl-it.void{opacity:.55}
.pl-it.void .pl-d b{text-decoration:line-through}
.pl-m{font-size:.84rem}
.pl-note{font-size:.86rem;color:#8a1f1f;margin-top:2px}
.pl-acts{display:flex;gap:14px;margin-top:4px}
.pl-it.edit .pl-b>*{margin-bottom:8px}
.pl-sigs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pl-sigs img{width:100%;border:1px solid var(--line);border-radius:6px;background:#fff;margin-top:4px}
.pl-padw{margin-bottom:10px}
.pl-padw canvas{width:100%;height:auto;aspect-ratio:840/240;border:1px solid var(--line);border-radius:8px;background:#fff;touch-action:none;display:block;margin:4px 0}
.pl-sig .f{display:block;margin-bottom:8px}
.pl-sig input{width:100%;min-height:44px;box-sizing:border-box}
.pl-office details summary{cursor:pointer;color:var(--accent);font-weight:600}
.pl-office .pl-grid{margin-top:10px}
.pl-office .pl-hd{display:none}
@media (max-width:640px){.pl-sigs{grid-template-columns:1fr}.pl-packs{grid-template-columns:1fr 1fr}}
/* v36b · packing list on the iPad: one list, the next line ready, big tap targets */
.pl-page .pl-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pl-sync{font-size:.82rem;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.pl-sync.ok span{color:#2e8b57}.pl-sync.wait span{color:#c58a00}.pl-sync.off{background:#fff7e6;border-color:#f0d39a;color:#7a4f00}.pl-sync.off span{color:#c0392b}
.pl-sim{margin-left:auto;font-size:.8rem}
.pl-modebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 8px}
.pl-mode button{min-height:46px;padding:8px 20px;font-size:.95rem}
.pl-lock{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;background:#e8f0fb;color:#1f4f8a;font-size:.92rem}
.pl-range{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.84rem;margin:0 0 8px}
.pl-skip{margin:0 0 10px}
.pl-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pl-types{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.pl-types.sub{margin-top:-2px}
.pl-tk{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 14px;font:inherit;font-size:.95rem;cursor:pointer;min-height:48px;line-height:1.2}
.pl-tk.sm{min-height:40px;padding:6px 12px;font-size:.88rem}
.pl-tk.big{min-height:56px;font-size:1.05rem;padding:10px 20px}
.pl-tk.ghost{border-style:dashed}
.pl-tk.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#e8f0fb;color:#1f4f8a;font-weight:600}
.pl-lbl{display:block;font-size:.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:10px 0 2px}
.pl-roomsel{min-height:48px;font-size:.95rem;border-radius:10px;max-width:220px}
.pl-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.pl-row.ghost{opacity:.5}
.pl-row.ghost .pl-n{background:transparent;border-style:dashed}
.pl-rb{display:flex;flex-direction:column;gap:2px;text-align:left;border:0;background:none;font:inherit;padding:6px 0;cursor:default;min-height:44px;justify-content:center;color:inherit}
button.pl-rb{cursor:pointer}
button.pl-rb:hover .pl-d b{text-decoration:underline}
.pl-d{font-size:.98rem}
.pl-m{font-size:.84rem;color:var(--muted)}
.pl-rth{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.pl-row.void{opacity:.55}.pl-row.void .pl-d b{text-decoration:line-through}
.pl-row.dlv .pl-n{background:#e3f4ea;border-color:#2e8b57;color:#1e6b42}
.pl-row.dup .pl-n{border-color:#c0392b;color:#c0392b}
.pl-local{font-size:.7rem;font-weight:600;color:#7a4f00;background:#fff3d6;border-radius:999px;padding:1px 7px;vertical-align:middle}
.pl-line{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:12px 0 6px;border-top:2px solid var(--accent)}
.pl-n.big{width:48px;height:48px;font-size:1.3rem;background:var(--accent);color:#fff;border-color:var(--accent)}
.pl-line input,.pl-popc input{width:100%;min-height:50px;font-size:1.05rem;box-sizing:border-box}
.pl-sug{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;min-height:4px}
.pl-go{display:flex;gap:8px;align-items:center;margin-top:12px}
.pl-go .btn.big{flex:1;width:auto}
.pl-go input{flex:1}
.pl-pop{position:fixed;inset:0;z-index:80;background:rgba(10,15,25,.45);display:grid;place-items:center;padding:16px;overflow:auto}
.pl-popc{width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;margin:0}
.pl-popc h3{margin:0 0 6px}
.pl-roompick h3{margin:0 0 6px}
@media (max-width:640px){.pl-row{grid-template-columns:44px minmax(0,1fr) auto}.pl-line{grid-template-columns:1fr}.pl-n.big{width:auto;height:40px}}
.pl-more{display:block;width:100%;text-align:left;border:1px dashed var(--line);background:var(--sunk);border-radius:8px;padding:10px 12px;margin:6px 0;font:inherit;cursor:pointer;min-height:44px}
/* v36 step 4 · containers, search, taking items back out */
.pl-search{margin:0 0 10px}
.pl-search input{width:100%;min-height:50px;font-size:1.05rem;box-sizing:border-box;border-radius:10px}
.pl-res{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.pl-hit{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:12px 14px;font:inherit;cursor:pointer;min-height:52px}
.pl-hit span{font-size:.95rem}
.pl-loc{display:inline-block;background:#e3f4ea;color:#1e6b42;border:1px solid #b9e0c8;border-radius:8px;padding:4px 10px;font-weight:700}
.pill.ctp{background:#e3f4ea;color:#1e6b42;border-color:#b9e0c8}
.pl-where{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--sunk);margin-bottom:10px}
.pl-where b{font-size:1.3rem}
.pl-ldh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:1rem}
.pl-ctcur{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;padding:14px;border-radius:12px;border:2px solid #2e8b57;background:#f1faf4}
.pl-ctcur .btn.big{width:auto;min-width:220px}
.pl-ctid{font-size:1.6rem;font-weight:800;letter-spacing:.02em}
.pl-ctnew{margin-top:10px;padding:14px;border-radius:12px;border:2px dashed var(--accent);background:#f3f7fd}
.pl-ctnew input{flex:1;min-height:52px;font-size:1.3rem;font-weight:700;text-transform:uppercase;border-radius:10px;box-sizing:border-box}
.pl-chk{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;padding:8px 0;font:inherit;cursor:pointer;min-height:60px;color:inherit}
.pl-chk.in .pl-n{background:#2e8b57;border-color:#2e8b57;color:#fff}
.pl-chk.in{background:#f1faf4}
.pl-chk.shut{opacity:.5}
.pl-cttag{font-weight:700;color:#1e6b42;padding-right:6px}
.pl-ctrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.pl-ctrow .btn{margin-left:auto}
/* v36 · the client's Storage card: one card per container */
.sto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.sto-c{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.sto-c.past{opacity:.7}
.sto-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sto-id{font-weight:800;font-size:1.05rem;letter-spacing:.01em}
.sto-lbl{font-size:.95rem}
.sto-lbl-ed{display:flex;gap:6px;flex-wrap:wrap}.sto-lbl-ed input{flex:1;min-width:160px}
.sto-kv{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:2px 0 0;font-size:.84rem}
.sto-kv dt{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.sto-kv dd{margin:0}
.sto-prev{margin:0;font-size:.82rem;color:var(--muted)}
.sto-c .acts{margin-top:auto}
.cbl:has(.sto-pick){display:grid;grid-template-columns:1fr;gap:8px}
.cb.sto-pick{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:start;width:auto;max-width:none;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.cb.sto-pick.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#f3f7fd}
.cb.sto-pick input{grid-row:span 2;width:20px;height:20px;margin:2px 0 0}
.cb.sto-pick small{grid-column:2;text-align:left;justify-self:start;margin:0}
.crewsto{margin:8px 0 0;padding:8px 10px;border:1px solid #b9e0c8;background:#f1faf4;border-radius:8px;font-size:.86rem}
.crewsto-r{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0}
.crewsto-r small{display:block;color:var(--muted)}
.pl-ctf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin:6px 0;border-radius:10px;border:2px solid #2e8b57;background:#f1faf4}
/* v36 · job progress and finished buttons */
.prog{padding:7px 12px 8px;margin:0;background:var(--surface)}
.card>.prog,.cpb>.prog,.today>.prog{padding:6px 0 4px}
.dpi>.prog{border-bottom:1px solid var(--line)}
.psegs{display:flex;gap:3px;height:6px}
.pseg{flex:1;position:relative;border-radius:2px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.pseg.nd{margin-left:5px}
.pseg.ok{background:#2b6cb0;box-shadow:none}
.prog.all .pseg.ok{background:#2e8b57}
.pseg i{position:absolute;left:0;top:0;bottom:0;background:#e0a33a}
.prog-l{display:flex;justify-content:space-between;align-items:center;gap:6px 10px;flex-wrap:wrap;margin-top:5px;font-size:.78rem;color:var(--muted)}
.prog-l b{color:var(--ink);font-weight:600}
.prog-l .pok{color:#1e6b42;font-weight:600}
.prog-l .btn.sm{padding:4px 10px;font-size:.8rem}
.btn.done{opacity:.55;filter:saturate(.35)}
.btn .bbadge{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.25);font-size:.78rem;font-weight:600}
.bprog{height:4px;border-radius:999px;background:var(--sunk);overflow:hidden;margin-top:3px}
.bprog span{display:block;height:100%;background:#2b6cb0}
.bprog.all span{background:#2e8b57}
.dl .s.ok{color:#1e6b42;font-weight:700}
/* v36 · rooms: type any room, suggestions, custom rooms */
.pl-roomf{position:relative;display:flex;align-items:center}
.pl-roomf input{width:100%;min-height:50px;font-size:1.05rem;box-sizing:border-box;padding-right:44px}
.pl-x{position:absolute;right:6px;border:0;background:none;font-size:1.4rem;cursor:pointer;color:var(--muted);width:36px;height:36px}
.pl-newhint{font-size:.82rem;align-self:center}
.pl-addroom{min-height:52px;font-size:1rem;margin-bottom:12px}
.pl-newroom{margin-bottom:12px}
.pl-newroom input{flex:1;min-height:52px;font-size:1.05rem;box-sizing:border-box}
.pl-tk.mine{border-color:var(--accent);color:#1f4f8a}
/* v38 · practice mode bar */
.trialbar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:7px 16px;background:#fff4e5;border-bottom:1px solid #f0c98b;color:#6b3d00;font-size:.84rem}
.trialtag{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;background:#c86a00;color:#fff;border-radius:4px;padding:2px 8px}
.trialtxt{flex:1 1 280px}
.trialacts{display:flex;gap:6px;flex-wrap:wrap}
header.top.trial{border-bottom-color:#f0c98b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .trialbar{background:#3a2610;border-color:#6b4a1d;color:#ffd9a8}}
/* v38 · the ? menu */
.helpw{position:relative}
.helpb{min-width:34px;font-weight:800;font-size:.95rem;border-radius:999px}
.helpb.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.helpp{position:absolute;right:0;top:calc(100% + 6px);width:min(340px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:46;max-height:72vh;overflow:auto;padding:6px}
.helpsec{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.helpp .hi{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:8px 10px;cursor:pointer;color:var(--ink);font:inherit}
.helpp .hi:hover,.helpp .hi:focus-visible{background:var(--sunk)}
.helpp .hi b{font-size:.9rem;font-weight:600;display:flex;gap:6px;align-items:center}
.helpp .hi small{font-size:.78rem;color:var(--muted)}
.helpp .hi .pill{font-size:.66rem;padding:0 6px;margin:0}
.helpp-p{margin:2px 10px 6px;font-size:.8rem;color:var(--muted);line-height:1.4}
/* v38 · reminder about the browser's Back button */
.backtip{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:0 0 14px;padding:8px 12px;border:1px solid var(--line);border-left:4px solid #2b6cb0;border-radius:8px;background:var(--surface);font-size:.84rem;line-height:1.4;color:var(--ink)}
.backtip.warn{border-left-color:#c0392b;background:var(--crit-bg);color:var(--crit)}
.backtip .btn{flex:0 0 auto}
/* v38 · guided tour */
#tour{position:fixed;inset:0;z-index:60;pointer-events:none}
#tour[hidden]{display:none}
.tour-hole{position:fixed;border-radius:8px;box-shadow:0 0 0 9999px rgba(15,23,42,.45);outline:2px solid #fff;transition:all .18s ease}
.tour-dim{position:fixed;inset:0;background:rgba(15,23,42,.45)}
.tour-pop{position:fixed;width:min(360px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.28);padding:14px 16px 12px;pointer-events:auto}
.tour-pop[data-center]{left:50%;top:50%;transform:translate(-50%,-50%)}
.tour-k{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tour-pop h3{margin:4px 0 6px;font-size:1.05rem}
.tour-pop p{margin:0 0 10px;font-size:.9rem;line-height:1.45}
.tour-dots{display:flex;gap:4px;margin:0 0 10px}
.tour-dots span{width:18px;height:4px;border-radius:2px;background:var(--line)}
.tour-dots span.d{background:#9fb8d6}.tour-dots span.on{background:#2b6cb0}
.tour-acts{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tour-acts span{display:flex;gap:6px}
/* v38 · request progress (To do) */
.abar{margin:2px 0 12px}
.abar-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:.88rem;margin-bottom:6px}
.abar-l{color:#b42318;font-weight:600}
.abar-ok{color:#1e6b42;font-weight:600}
.xl{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#c0392b;color:#fff;font-size:.72rem;font-weight:800;vertical-align:-2px}
.asegs{display:flex;gap:3px}
.asegs.big{height:10px}
.aseg{flex:1;border-radius:3px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line);position:relative;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;color:#fff;line-height:1}
.aseg.ok{background:#2e8b57;box-shadow:none}
.aseg.wait{background:var(--warn-bg);box-shadow:inset 0 0 0 1px #e0a33a}
.aseg.hold{background:repeating-linear-gradient(45deg,var(--sunk) 0 4px,var(--line) 4px 6px)}
.aseg.late{background:#c0392b;box-shadow:none}
.aseg.drop{opacity:.35}
.asegs.big .aseg.late{animation:latepulse 1.6s ease-in-out infinite}
@keyframes latepulse{50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.asegs.big .aseg.late{animation:none}}
.abar.mini{display:inline-flex;align-items:center;gap:6px;margin:0}
.abar.mini .asegs{width:64px;height:6px}
.abar.mini .aseg{font-size:0}
.abar-n{font-size:.74rem;font-weight:700;color:var(--muted)}
.abar-late{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#c0392b;color:#fff;font-size:.68rem;font-weight:800}
.td-abar{display:inline-flex;align-self:center}
.askban{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin:0 0 12px;font-size:.88rem;border:1px solid}
.askban.red{background:var(--crit-bg);border-color:color-mix(in srgb,var(--crit) 35%,transparent);color:var(--crit)}
.askban.amber{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn)}
.askban-i{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-weight:800;background:#c0392b;color:#fff}
.askban.amber .askban-i{background:#e0a33a}
.askban-t{flex:1;line-height:1.4}
/* v38 · Import & export */
.modal:has(.dx-tabs){width:min(980px,calc(100% - 24px))}
.dx-tabs{align-self:flex-start}
.dx-p{margin:2px 0 8px;font-size:.85rem}
.dx-note{font-size:.8rem;margin:0}
.dx-checks{display:grid;gap:8px}
.dx-chk{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer}
.dx-chk input{margin-top:3px}
.dx-chk span{display:flex;flex-direction:column}
.dx-chk small{color:var(--muted);font-size:.8rem}
.dx-acts{flex-wrap:wrap;align-items:center}
.dx-step{display:flex;gap:12px;align-items:flex-start;border-top:1px solid var(--line);padding-top:12px}
.dx-step>div{flex:1;min-width:0}
.dx-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--surface);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.dx-kind{margin-top:6px}
.dx-file{cursor:pointer}
.dx-fname{font-size:.85rem;color:var(--muted)}
.dx-err{margin-top:8px}
.dx-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px 14px;margin:4px 0 10px}
.dx-mrow{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;font-size:.85rem}
.dx-src{display:flex;flex-direction:column;min-width:0}
.dx-src b,.dx-src small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-src small{color:var(--muted);font-size:.75rem}
.dx-mrow select{width:100%}
.dx-sum{margin:2px 0 6px;display:flex;gap:6px;flex-wrap:wrap}
.dx-tw{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
.dx-t{width:100%;border-collapse:collapse;font-size:.84rem}
.dx-t th{position:sticky;top:0;background:var(--sunk);text-align:left;font-weight:600;padding:6px 8px;z-index:1}
.dx-t td{padding:6px 8px;border-top:1px solid var(--line);vertical-align:top}
.dx-t td small{display:block;color:var(--muted);font-size:.75rem}
.dx-t tr.skip td{color:var(--muted)}
.dx-t tr.off td{opacity:.5}
.dx-t select{max-width:260px;font-size:.82rem}
.dx-t select.dx-unsure{border-color:#e0a33a;background:var(--warn-bg)}
.dxcard{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.dxcard h3{margin:0 0 4px}.dxcard p{margin:0;font-size:.86rem}
@media (max-width:600px){.dx-mrow{grid-template-columns:1fr}.dx-mrow>span[aria-hidden]{display:none}}
/* v39 · the Heathrow warehouse rows on the board */
.whbadge{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;font:inherit;font-size:.72rem;line-height:1.3;margin:0 0 4px;padding:4px 6px;border:1px solid var(--line);border-left:3px solid #2b6cb0;border-radius:5px;background:var(--surface);color:var(--ink);cursor:pointer}
div.whbadge{cursor:default}
.whbadge.whout{border-left-color:#7b4bb7}
.whbadge .whb-t{font-weight:600}
.whbadge .whb-s{color:var(--warn)}
.whbadge.ok .whb-s{color:#1e6b42;font-weight:600}
.whbadge.done{opacity:.6}
/* Simon's tasks */
.whpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:4px 0 10px}
.whp{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;cursor:pointer;background:var(--surface)}
.whp:has(input:checked){border-color:#2b6cb0;background:color-mix(in srgb,#2b6cb0 8%,var(--surface))}
.whp small{display:block;color:var(--muted);font-size:.72rem}
.whp b{margin-right:auto}
.whstack{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin:4px 0}
/* the Loading Bay card */
.whbay .whb-r{display:grid;grid-template-columns:auto auto 1fr auto;gap:4px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:.86rem}
.whbay .whb-r:first-of-type{border-top:0}
.whb-id{font-family:ui-monospace,Menlo,monospace;font-weight:700}
.whb-w{color:var(--muted);min-width:0}
.whb-a{display:flex;gap:6px;justify-content:flex-end}
.whwait{font-size:.78rem}
.lifep{font-size:.72rem;font-weight:600;border-radius:999px;padding:2px 8px;border:1px solid var(--line);background:var(--sunk);white-space:nowrap}
.lifep.lf-hold{background:var(--crit-bg);color:var(--crit);border-color:transparent}
.lifep.lf-sealed{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.lifep.lf-loading{background:color-mix(in srgb,#2b6cb0 12%,var(--surface));color:#2b6cb0;border-color:transparent}
.lifep.lf-staged{background:var(--ok-bg);color:#1e6b42;border-color:transparent}
.whdns{grid-column:1/-1;background:var(--crit);color:#fff;font-weight:800;letter-spacing:.02em;border-radius:6px;padding:6px 10px;font-size:.84rem}
.whadd{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.whadd summary{cursor:pointer;font-weight:600;font-size:.86rem}
.whadd-r{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:6px}
.whplacing{position:sticky;top:120px;z-index:5}
.slot.fleet{border-style:dashed;background:var(--sunk)}
.slot.fleet .nm{color:var(--muted)}
.slot.put{border:2px dashed #2b6cb0;color:#2b6cb0;font-weight:600}
/* the crew's container buttons */
.pl-ctbtns{display:flex;flex-direction:column;gap:8px;min-width:240px}
.pl-staged{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.pl-heldn{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:600px){.whbay .whb-r{grid-template-columns:auto 1fr}.whb-w,.whb-a{grid-column:1/-1;justify-content:flex-start}.pl-ctbtns{min-width:0;width:100%}}
/* v40 · emergency divert to storage */
.btn.divb{border-color:#c86a00;color:#8a4a00}
.btn.divb:hover{background:#fff4e5}
.modal:has(.dvm){width:min(760px,calc(100% - 24px))}
.dv-p{margin:0 0 10px;font-size:.88rem}
.dvf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 12px}
.dvf small{font-size:.72rem}
.dv-hide{display:none!important}
.dvt{width:100%;border-collapse:collapse;font-size:.88rem;margin:12px 0 6px}
.dvt th{text-align:left;font-weight:600;padding:6px 8px;white-space:nowrap}
.dvt td{padding:6px 8px;color:var(--muted)}
.dvt td.n{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dvt tr{border-top:1px solid var(--line)}
.dvt tr.tot th,.dvt tr.tot td.n{font-weight:700}
.dvt tr.big td.n{font-size:1.05rem}
.dvt tr.ov td.n{color:#8a4a00;font-weight:700}
.dv-md{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
.dv-long{align-self:end;padding-bottom:8px}
.crcard .form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.dv-note{font-size:.8rem;margin:0 0 8px}
.dv-what{font-size:.84rem;margin:4px 0 8px}.dv-what summary{cursor:pointer;font-weight:600}
.dv-what ul{margin:6px 0 0 18px;padding:0}
.dv-acts{justify-content:flex-end;flex-wrap:wrap}
.divnote{margin:6px 0;padding:8px 10px;border-radius:8px;background:#fff4e5;border:1px solid #f0c98b;color:#6b3d00;font-size:.88rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .divnote{background:#3a2610;border-color:#6b4a1d;color:#ffd9a8}:root:not([data-theme="light"]) .btn.divb{color:#ffc27a}:root:not([data-theme="light"]) .btn.divb:hover{background:#3a2610}}
.dvt.ed td.ag{width:150px;padding:4px 6px}
.dvt td.ag input{width:100%;box-sizing:border-box;text-align:right;font:inherit;font-size:.86rem;padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.dvt thead th{font-size:.7rem;color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0;padding:2px 8px}
.dvt tr.agreed td.n{text-decoration:line-through;color:var(--muted)}
.dvt tr.agreed td.ag input{border-color:#c86a00;background:#fff4e5;font-weight:700}
@media (max-width:600px){.dvt.ed td.ag{width:110px}.dvt td:nth-child(2){display:none}}
.sto-basis{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 10px;margin:0 0 10px;border:1px solid var(--line);border-radius:8px;background:var(--sunk);font-size:.86rem}
.sto-bsel select{font:inherit;font-size:.85rem}
.acctab th.accgh{text-align:center;border-bottom:1px solid var(--line);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.acctab td input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent)}
.acc-g{margin:6px 0 10px}.acc-g>b{display:block;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
/* v41 · the access table fits a laptop screen: narrow columns, small headings, a line between the groups */
.acctab thead tr:last-child th{font-size:.68rem;text-transform:none;letter-spacing:0;font-weight:600;padding:6px 5px;line-height:1.25;width:1%;white-space:normal;vertical-align:bottom;hyphens:auto}
.acctab .pill.ok{font-size:.66rem;padding:1px 6px}
.acctab td{padding:8px 4px}
.acctab td:first-child{padding-right:10px;white-space:nowrap}
.acctab td:first-child .muted{display:block;font-size:.78rem}
.acctab .accgs{border-left:1px solid var(--line)}
/* v42 · undo on the toast */
.toast{display:flex;align-items:center;gap:12px}
.toast[hidden]{display:none}
.toast-undo{flex:0 0 auto;background:transparent;color:inherit;border:1px solid currentColor;border-radius:6px;padding:3px 10px;font:inherit;font-weight:600;cursor:pointer;opacity:.95}
.toast-undo:hover,.toast-undo:focus-visible{background:rgba(255,255,255,.14)}
/* v42 · Recent changes */
.chgbtn{min-width:34px;padding-left:8px;padding-right:8px;justify-content:center}
.top .chgbtn .ico{display:block}   /* icon only: the header has no room for another word */
.honag .ho-copy{max-height:42vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:0 10px}
.honag .ho-copy .cpy-t{border:0}
.chg-p{font-size:.86rem;margin:0 0 10px}
.chg-seg{margin:0 0 10px}
.chg-l{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.chg-r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;border-top:1px solid var(--line)}
.chg-r:first-child{border-top:0}
.chg-r.done{opacity:.6}
.chg-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0;font-size:.9rem}
.chg-when{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.82rem;min-width:44px}
.chg-who{font-weight:600}
.chg-lbl{flex:1 1 260px;min-width:0}
.chg-refs{font-size:.76rem;color:var(--muted)}
.chg-a{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.chg-a small{font-size:.74rem}
/* v42 · "your turn": the finisher picks who, the recipient copies into Xero */
.homodal{width:min(560px,calc(100% - 24px))}
.ho-offers{list-style:none;margin:0 0 12px;padding:0;border:1px solid var(--line);border-radius:10px}
.ho-offers li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--line)}
.ho-offers li:first-child{border-top:0}
.ho-offers li span{display:flex;flex-direction:column}
.ho-offers small{color:var(--muted);font-size:.8rem;font-weight:400}
.ho-offers .num{text-align:right;font-weight:600;white-space:nowrap}
.ho-ppl{border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px 18px}
.ho-ppl legend{font-size:.78rem;font-weight:600;color:var(--muted);padding:0 4px}
.ho-p{font-size:.84rem;margin:8px 0 10px}
.nagcard.honag{width:min(780px,100%);max-height:calc(100vh - 32px);overflow:auto;border-color:var(--accent)}
.ho-top{display:flex;align-items:center;gap:10px;font-size:.82rem}
.ho-who{margin:0;font-size:.95rem}
.ho-amt{display:flex;align-items:baseline;gap:10px;background:var(--sunk);border-radius:10px;padding:10px 14px}
.ho-amt span{font-size:.8rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ho-amt b{font-size:1.6rem;font-variant-numeric:tabular-nums}
.ho-amt small{color:var(--muted)}
.ho-amt .btn{margin-left:auto}
.ho-note{margin:0;padding:8px 12px;border-left:3px solid var(--warn);background:var(--warn-bg);border-radius:6px;font-size:.9rem}
.ho-steps{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:.86rem}
.ho-steps ol{margin:0;padding-left:20px}
.ho-steps .btn{white-space:nowrap;flex:0 0 auto}
.ho-steps li{margin:1px 0}
.ho-copy .xp{margin:0}
.ho-inv th,.ho-inv td.num,.ho-inv td.mono{white-space:nowrap}
.ho-inv td{vertical-align:top}
.ho-inv td:not(.num) .cpy{display:block;padding:0;margin-top:2px;font-size:.8rem}
.td-body .ho-amt b{font-size:1.25rem}
/* v42 · backups and the warehouse app link */
.bk-p{font-size:.85rem;margin:0 0 10px}
.bk-t{width:100%;margin-top:10px;font-size:.86rem}
.bk-a{text-align:right;white-space:nowrap}
.bk-ask{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;white-space:normal;text-align:left;font-size:.82rem}
.bk-up{cursor:pointer}
.bk-conf{margin-top:10px}
/* v42 · storage contracts on the client page */
.ct-src{font-size:.82rem;margin:0 0 8px}
.ct-c{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 10px;background:var(--surface)}
.ct-c.ended{opacity:.75}
.ct-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ct-name{font-weight:700;font-size:1rem}
.ct-id{font-size:.8rem;color:var(--muted)}
.ct-terms{margin:6px 0 2px;font-size:.88rem}
.ct-sum{margin:0 0 6px;font-size:.88rem}
.ct-notes{margin:0 0 6px;font-size:.82rem}
.ct-t{width:100%;font-size:.86rem}
.ct-t td,.ct-t th{vertical-align:middle}
.ct-acts{margin-top:10px;flex-wrap:wrap;align-items:center}
.ct-endq{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.ct-endq .f{margin:0}
.ct-form .form{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.ct-wide{grid-column:1/-1}
.ct-link{margin-top:10px}
.ct-sg{border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin:8px 0;display:flex;flex-direction:column;gap:4px}
.ct-sg legend{font-size:.78rem;font-weight:600;color:var(--muted)}
.ct-sugg{font-size:.84rem;margin:4px 0 10px;padding:8px 12px;border-radius:8px;background:var(--warn-bg)}
.ct-ended summary{cursor:pointer;color:var(--muted);font-size:.85rem;margin:4px 0 8px}
/* v42 · the Warehouse tab: the warehouse app */
.whlive .hd .acts{gap:8px;align-items:center}
.whf{margin:0 0 10px}
.chip.warnchip{border-color:var(--warn)}
.chip.warnchip.on{background:var(--warn);color:#fff}
.whq{display:flex;gap:8px;align-items:center;margin:0 0 10px}
.whq input{flex:1;min-width:0}
.wh-t{width:100%;font-size:.86rem}
.wh-t td small{display:block;font-size:.76rem}
.wh-t tr.wh-none td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.wh-t tr.wh-dim td{color:var(--muted)}
.whl-l{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.whl-l li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.whpanel1{margin-top:14px}
.whnone{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:600px){
  .chg-r{flex-direction:column;align-items:stretch}
  .chg-a{align-items:flex-start}
  .ho-steps{flex-direction:column}
  .ho-amt b{font-size:1.3rem}
}
/* v42 · practice mode: switch person */
.trialacts .helpw{display:inline-flex}
.trialbar .twho{z-index:70;color:var(--ink);font-size:.9rem}
.trialbar .twho .hi.mine{background:var(--sunk)}
/* v42 · "NEW" on a card in Jobs to place no longer covers a long client name */
.tray-it .new{position:static;float:right;margin:1px 0 2px 6px}
/* v43 · Jobs to place: hide / one row / show all, big jobs, jobs over several days, "+ Van", the provisional card */
.tray-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.tray-t .trsum{font-size:.78rem;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tray-shut{padding:7px 12px}
.trmode{flex:0 0 auto}
.trmode button{font-size:.75rem;padding:3px 10px}
.tray-row.wrap{flex-wrap:wrap;overflow-x:visible}
.tray-row.wrap .tray-it{flex:0 0 220px}
.trbigpill{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;color:#fff;background:var(--crit);border-radius:999px;padding:2px 10px}
.tray-it.big{border:2px solid var(--crit);box-shadow:0 0 0 3px var(--crit-bg)}
.trbigw{margin:-2px 0 4px;font-size:.72rem;font-weight:700;color:var(--crit);background:var(--crit-bg);border-radius:4px;padding:2px 6px;display:inline-block}
.tray-it.multi{border-left:4px solid var(--accent)}
.tray-it.multi.big{border-left-width:4px}
.trspan{margin:3px 0 2px;font-size:.72rem;font-weight:600;color:var(--accent)}
.tracts{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.tray-it .tracts .btn{margin-top:0}
.trplus{font-weight:700}
/* the van list opens inside the card so it is never cut off by the scrolling row */
.tray-it:has(.tvpop){flex-basis:270px!important;cursor:default}
.tvpop{margin-top:8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:8px;cursor:default;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.tvh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tvh .muted{flex:1;font-size:.75rem}
.tvall{font-size:.75rem;margin:0 0 6px}
.tvl{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow-y:auto}
.tvv{display:grid;grid-template-columns:auto 1fr;column-gap:8px;text-align:left;font:inherit;font-size:.75rem;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);padding:5px 8px;cursor:pointer}
.tvv:hover,.tvv:focus-visible{border-color:var(--accent);background:var(--sunk)}
.tvv span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tvv small{grid-column:1/-1;color:var(--ok)}
.tvv.busy small{color:var(--warn)}
.tvv.off{opacity:.55;cursor:not-allowed}
.tvv.off small{color:var(--crit)}
/* the dates of a job over several days, lit up across the board */
.board thead th.spanhl{background:var(--hi);color:var(--hi-ink);box-shadow:inset 0 -3px 0 var(--accent)}
.board td.spanhl,.board td.c.spanhl{background:color-mix(in srgb,var(--hi) 55%,transparent)}
.board td.spanhl:first-child{background:inherit}
/* office bookings waiting for a van, in the Provisional jobs row */
.ptag.req{border-style:dashed;border-color:var(--warn);background:var(--warn-bg)}
.ptag.req::before{content:"Req · ";font-weight:700;color:var(--warn)}
/* the details card after 2 seconds */
#pvtip{position:fixed;z-index:60;width:300px;max-width:calc(100vw - 16px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:10px 12px;font-size:.8rem;line-height:1.4;pointer-events:none}
#pvtip .pvh{display:flex;align-items:center;gap:6px;font-size:.88rem}
#pvtip .pvs{color:var(--muted);font-size:.74rem;margin:2px 0 6px}
#pvtip dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0}
#pvtip dt{color:var(--muted);white-space:nowrap}
#pvtip dd{margin:0;overflow-wrap:anywhere;white-space:pre-line}
/* the request form */
.reqmark{color:var(--crit);font-weight:700}
.dpreqn{margin:6px 0 0;font-size:.8rem}
.dpadd.dpreq{border-color:var(--warn)}
.mjcrew{font-size:.78rem;color:var(--muted)}
.tray-it.req.pending,.tray-it.req.accepted{color:var(--ink)}
.tray-it.req .muted{color:var(--muted)}
/* v44 · amount to invoice, who booked it, the client's "To invoice" box */
.form .chg-svc{grid-column:1/-1}
.mjwho{margin:0;font-size:.84rem;color:var(--muted);line-height:1.5}
.mjwho b{color:var(--ink)}
.dpby{font-size:.8rem;color:var(--muted)}
.dpby b{color:var(--ink);font-weight:600}
.chg-box{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--surface)}
.chg-box h3{margin:0 0 6px;font-size:.92rem}
.chg-box .acts{align-items:center}
.chg-n{font-size:.78rem}
.toinv-sum{margin:0 0 8px;font-size:.88rem}
.toinv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.toinv li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface)}
.toinv li.due{border-color:var(--crit);background:var(--crit-bg)}
.ti-m{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.ti-m small{font-size:.76rem}
.ti-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ti-r .num small{color:var(--muted);font-size:.72rem}
.ho-mini{margin:6px 0 0;font-size:.78rem}
/* v45 · your own password */
.who .whob{display:flex;flex-direction:column;align-items:flex-end;background:none;border:0;padding:2px 4px;border-radius:6px;font:inherit;color:inherit;cursor:pointer;line-height:1.15}
.who .whob:hover,.who .whob:focus-visible{background:var(--sunk)}
.who .whob small{color:var(--muted)}
.mypw{grid-template-columns:1fr}
.mypw-p{margin:0 0 4px;font-size:.88rem}
.mypwm{max-width:440px}
@media (max-width:767px){.who .whob small{display:none}.who .whob b{font-size:.8rem;font-weight:600}}