/* dispatch.ireachright.com · the board · v4.0 · 07-10-2026 — courier cards + customer rows */
body.board{font-size:14px}
.bwrap{max-width:1440px;margin:0 auto;padding:18px 24px 120px}
#start{max-width:900px;margin:26px auto}
.day{display:flex;align-items:baseline;gap:8px 26px;flex-wrap:wrap;margin-bottom:14px}
.day h1{font-size:26px;font-weight:900;margin:0}
.day span{font-size:15px;color:var(--grey)} .day span b{color:var(--ink);font-size:17px}
.bar1{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:8px}
.bar1 .lbl{font-weight:800;color:var(--ink)} .bar1 .grow{flex:1}
.bar1 #narrowBox{display:inline-flex;align-items:center;gap:14px;margin-left:10px}
.bar1 .seg{margin-left:0}
.filebit{font-size:13px;color:var(--grey)}
.hint{font-size:14px;color:var(--grey);margin:0 0 14px}
.removed{font-size:13px;color:var(--grey);margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.removed .pillx{background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 6px 3px 12px;color:var(--ink);font-weight:700;display:inline-flex;gap:8px;align-items:center}
.places{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.place{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.place b{color:var(--grey);font-weight:700;margin-left:4px}
.place.sel{background:var(--edit);border-color:var(--ignite)}

/* ── By courier: cards ───────────────────────────────────────────────── */
.lanes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;align-items:start}
.lane{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 10px rgba(12,8,41,.04);min-height:150px}
.lane.none{background:#fdf7f1;border-style:dashed;border-color:#e6cdb6}
.lane.add{background:none;border:1.5px dashed #c3cadc;box-shadow:none;justify-content:center}
.lane.over{outline:3px solid var(--ignite);outline-offset:2px;background:var(--edit)}
.lhead{cursor:grab;position:relative;padding-right:28px}
.lhead h2{font-size:17px;font-weight:800;margin:0;line-height:1.2}
.rtag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:3px}
.rtag.own{color:var(--blue)}
.lane .x{position:absolute;right:-4px;top:-4px;border:0;background:none;font-size:22px;line-height:1;color:var(--grey);cursor:pointer;padding:4px 8px;border-radius:8px}
.lane .x:hover{background:var(--mist);color:var(--ink)}
.count{display:flex;align-items:baseline;gap:8px}
.count b{font-size:42px;font-weight:900;color:var(--ink);line-height:1}
.count span{font-size:15px;color:var(--grey);font-weight:700}
.collect{font-size:14px;color:var(--rust);font-weight:700}
.chips2{display:flex;flex-direction:column;gap:7px}
.pchip{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--mist);border:0;border-radius:12px;padding:9px 11px;font:inherit;text-align:left;cursor:grab;width:100%}
.pchip:hover{background:#eaeef8}
.pchip.dragging,.lhead.dragging{opacity:.35}
.pchip,.lhead{touch-action:none;user-select:none;-webkit-user-select:none}
.pchip:focus-visible{outline:2px solid var(--ignite)}
body.dragging-on,body.dragging-on *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.ghost{position:fixed;left:0;top:0;z-index:20;pointer-events:none;background:var(--ink);color:#fff;font-weight:800;font-size:14px;border-radius:12px;padding:8px 12px;box-shadow:0 10px 24px rgba(12,8,41,.35);white-space:nowrap}
.pchip .who b{display:block;color:var(--ink);font-size:14px;font-weight:800}
.pchip .who small{font-size:12.5px;color:var(--grey)}
.pchip .who em{font-style:normal;font-size:11px;font-weight:800;color:var(--blue);margin-left:6px}
.pchip .n{text-align:right;line-height:1.1;flex:none}
.pchip .n b{display:block;font-size:19px;font-weight:900;color:var(--green)}
.pchip .n small{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.pchip .n.none b{color:#b4b8c6}
.dropnote{font-size:13px;color:var(--grey);text-align:center;padding:14px 6px}
.lane .btn{width:100%}
.lane select,.rec select,.drawer select,.sticky select,.modal select{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:#fff}
.lane select{font-size:13px;color:var(--grey);border-width:1px}

/* ── By customer: rows ───────────────────────────────────────────────── */
.crow{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;display:grid;grid-template-columns:22px minmax(210px,1.1fr) minmax(290px,1.3fr) minmax(220px,1.1fr) minmax(200px,1fr) 190px;gap:18px;align-items:start;box-shadow:0 2px 8px rgba(12,8,41,.03)}
@media(max-width:700px){.crow{grid-template-columns:22px 1fr}.crow>*{grid-column:2!important}.crow>input{grid-column:1!important}}
.crow>input{width:18px;height:18px;accent-color:var(--ignite);margin-top:4px}
.who h3{font-size:19px;font-weight:900;margin:0}
.who p{font-size:13px;color:var(--grey);line-height:1.45;margin:2px 0 0}
.who .pay{color:var(--text);font-weight:700}
.sec{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ignite);margin:0 0 7px}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lvl{background:var(--mist);border-radius:12px;padding:8px 10px}
.lvl.on{background:var(--greenw)}
.lvl small{font-size:10.5px;font-weight:800;color:var(--grey);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.lvl b{display:block;font-size:26px;font-weight:900;color:var(--ink);line-height:1.1}
.lvl span{font-size:12px;color:var(--text)} .lvl em{font-style:normal;color:var(--rust);font-weight:800}
.bars{display:flex;flex-direction:column;gap:6px}
.bar{display:grid;grid-template-columns:minmax(80px,auto) 1fr 26px;align-items:center;gap:8px;font-size:13px;color:var(--ink);font-weight:700}
.bar .t{background:var(--mist);border-radius:6px} .bar i{display:block;height:10px;border-radius:6px;background:var(--ignite)}
.bar b{text-align:right;font-weight:900}
.small{font-size:11.5px;color:var(--grey);margin:5px 0 0}
body.board .facts{display:block;font-size:13px;line-height:1.6} body.board .facts b{display:inline;min-width:0;color:var(--ink);margin-right:4px}
.rec .sec{color:var(--green)} .rec.own .sec{color:var(--blue)}
.rec select{border-color:var(--green);background:var(--greenw);font-weight:800;font-size:15px}
.rec.own select{border-color:var(--blue);background:#E9F0F8}
.rec.none select{border-color:var(--line);background:#fff;font-weight:700}
.rec .why{font-size:11.5px;color:var(--grey);margin:5px 0 0;line-height:1.35}
.nohist{font-size:13px;color:var(--grey);background:#fdf7f1;border-radius:12px;padding:12px}

/* ── Bottom bar, drawer, dialog ──────────────────────────────────────── */
body.board .sticky{font-size:15px}
.sticky .acts{align-items:center}
.sticky select{width:auto;border:0;border-radius:24px;padding:10px 14px;font-weight:800}
.scrim{position:fixed;inset:0;background:rgba(12,8,41,.32);z-index:8}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(470px,100vw);background:#fff;z-index:9;box-shadow:-18px 0 50px rgba(12,8,41,.22);padding:24px 26px;overflow-y:auto}
.drawer .x,.modal .x{position:absolute;right:16px;top:14px;border:0;background:none;font-size:26px;color:var(--grey);cursor:pointer;padding:4px 10px}
.drawer .blk{margin-top:20px}
.drawer .lvl b{font-size:32px}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow-y:auto;background:#fff;border-radius:18px;padding:24px 26px;box-shadow:0 30px 80px rgba(12,8,41,.35)}
.modal h3{font-size:21px;font-weight:900;margin:0 34px 4px 0}
.modal .grp{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.modal .grp b{color:var(--ink);font-size:15px} .modal .grp small{display:block;color:var(--grey);font-size:13px}
.modal .grp .btn{padding:8px 16px}
.modal .row2 input{display:block;width:100%;margin-top:4px}

/* ── v2.0: hand-over dialog, sign-in ─────────────────────────────────── */
.tabs{display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;margin:14px 0 12px;background:#fff}
.tabs button{flex:1;border:0;background:none;padding:9px 8px;font:inherit;font-weight:800;color:var(--ink);cursor:pointer}
.tabs button.sel{background:var(--ink);color:#fff}
.modal .check{margin:10px 0}
.modal label.courier input{max-width:none}
.who b{color:var(--ink)}

/* ── v2.1: payment on every parcel ───────────────────────────────────── */
.pchip .who small.pay{display:block;font-weight:800;margin-top:1px}
.pay.cod{color:var(--rust)!important} .pay.pre{color:var(--green)!important}
.collect span{color:var(--green)}

/* ── v2.2: sign in with an emailed code ──────────────────────────────── */
.orline{display:flex;align-items:center;gap:12px;color:var(--grey);font-size:13px;margin:6px 0 12px;max-width:420px}
.orline:before,.orline:after{content:"";flex:1;border-top:1px solid var(--line)}
.codeform{max-width:420px;margin-bottom:14px}
.codeform label{font-size:14px;margin-bottom:6px}
.coderow{display:flex;gap:8px;margin-bottom:8px}
.coderow input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:#fff}
.coderow .btn{white-space:nowrap}
.coderow .btn:disabled{opacity:.55;cursor:default}
#cCode{letter-spacing:.3em;font-weight:800}

/* ── v2.3: place counts stand out; nothing in a row spills past its box ── */
.place b{color:#E87400;font-weight:900;font-size:1.05em;margin-left:6px}
.crow>*{min-width:0}
.rec select,.drawer select{max-width:100%;min-width:0;text-overflow:ellipsis}

/* ── v2.4: header with logo and store, notice, store chooser ─────────── */
body.board .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
body.board .top>:last-child{justify-self:end}
.brand .logo{height:26px;width:auto;display:block}
.brand .dot{color:var(--grey);font-weight:400;margin:0 -2px}
.store{justify-self:center;font-size:17px;color:var(--ink);text-align:center}
.store b{font-weight:800}
.store select{font:inherit;font-weight:800;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;background:#fff;max-width:46vw}
@media(max-width:760px){body.board .top{grid-template-columns:1fr auto}.store{grid-column:1/-1;grid-row:2;justify-self:start}}
.notice{background:var(--edit);border:1px solid #f3d7a8;color:var(--ink);border-radius:12px;padding:10px 14px;font-size:14px;margin:0 0 14px}
.notice.none{background:var(--rustw);border-color:#ecc9ad;color:var(--rust);font-weight:700}
.pickstore{background:#fff;border:1.5px solid var(--ignite);border-radius:16px;padding:16px 18px;margin-bottom:12px}
.pickstore b{display:block;color:var(--ink);font-size:17px;margin-bottom:10px}
.pickstore .places{margin:0}
.drop.wait{opacity:.45;pointer-events:none}

/* ── v2.6: row layout, stated once and last so nothing above overrides it ─
   Wide screens: six columns in one line. Up to 1180px: order + courier on the first line,
   the three blocks under them. Phones: one column. */
.crow>*{min-width:0}
.rec select,.drawer select{width:100%;max-width:100%;min-width:0;text-overflow:ellipsis}
.lvl.empty b{color:#b4b8c6}
@media(min-width:1181px){
  .crow{grid-template-columns:22px minmax(210px,1.1fr) minmax(290px,1.3fr) minmax(220px,1.1fr) minmax(200px,1fr) minmax(190px,220px)}
  .crow>.wide{grid-column:3/6}
}
@media(max-width:1180px){
  .crow{grid-template-columns:22px minmax(0,1fr) minmax(180px,240px)}
  .crow>.who{grid-column:2;grid-row:1}
  .crow>.rec{grid-column:3;grid-row:1}
  .crow>.b2,.crow>.b3,.crow>.b4,.crow>.wide{grid-column:2/-1}
}
@media(max-width:700px){
  .crow{grid-template-columns:22px minmax(0,1fr)}
  .crow>.who,.crow>.rec,.crow>.b2,.crow>.b3,.crow>.b4,.crow>.wide{grid-column:2;grid-row:auto}
}

/* v2.8: courier counts can run to five digits at city and state level */
.bar{grid-template-columns:minmax(80px,auto) 1fr minmax(26px,auto)}

/* ── v3.2: delivered and returned at equal weight; about this location; the owner's line ── */
.lvl .two{display:flex;gap:12px;margin-top:2px}
.lvl .two span{display:flex;flex-direction:column;font-size:11.5px;color:var(--grey);line-height:1.25}
.lvl .two b{font-size:24px;font-weight:900;line-height:1.1}
.lvl .two .dl b{color:var(--green)} .lvl .two .rt b{color:#b4b8c6} .lvl .two .rt.some b{color:var(--rust)}
.lvl.empty .two b{color:#b4b8c6}
.flag{display:inline-block;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:800;margin-bottom:8px}
.flag.first{background:#FFF1DD;color:#9a5b00;border:1px solid #f3d7a8}
.flag.ordered{background:var(--mist);color:var(--ink)}
.flag.delivered{background:var(--greenw);color:var(--green)}
.flag.returned{background:var(--rustw);color:var(--rust)}
.retline{color:var(--rust)!important;font-weight:700;margin:-2px 0 8px!important}
.about2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.about2 .lvl b{font-size:17px;white-space:nowrap}
.summary{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.sumb{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:8px 14px;font:inherit;color:var(--text);cursor:pointer}
.sumb b{color:var(--ink);font-size:17px;font-weight:900;margin-right:2px}
.sumb span{color:var(--rust);font-weight:700}
.sumb.first b{color:#9a5b00} .sumb.delivered b{color:var(--green)} .sumb.returned b{color:var(--rust)}
.sumb.sel{border-color:var(--ink);background:var(--ink);color:#fff} .sumb.sel b,.sumb.sel span{color:#fff}

/* v3.2 fit: in each tile the two figures sit on two lines, same size, so three tiles fit the column */
.lvl .two{display:block;margin-top:3px}
.lvl .two span{flex-direction:row;align-items:baseline;gap:5px;white-space:nowrap}
.lvl .two b{font-size:21px;min-width:1ch}
.levels .lvl{padding:8px 9px;min-width:0}
@media(min-width:1181px){
  .crow{grid-template-columns:22px minmax(200px,1fr) minmax(318px,1.25fr) minmax(210px,1fr) minmax(215px,1fr) minmax(180px,210px)}
}

/* v3.2 fit: the one-line row needs about 1320px; below that the blocks go under the order */
.lvl .two b{font-size:20px} .lvl .two span{font-size:10.5px;gap:4px}
@media(max-width:1320px){
  .crow{grid-template-columns:22px minmax(0,1fr) minmax(180px,240px)}
  .crow>.who{grid-column:2;grid-row:1}
  .crow>.rec{grid-column:3;grid-row:1}
  .crow>.b2,.crow>.b3,.crow>.b4,.crow>.wide{grid-column:2/-1}
}
@media(min-width:1181px) and (max-width:1320px){
  .crow{grid-template-columns:22px minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
  .crow>.who{grid-column:2/4;grid-row:1}
  .crow>.rec{grid-column:4;grid-row:1}
  .crow>.b2{grid-column:2;grid-row:2} .crow>.b3{grid-column:3;grid-row:2} .crow>.b4{grid-column:4;grid-row:2}
  .crow>.wide{grid-column:2/-1;grid-row:2}
}
@media(max-width:700px){
  .crow{grid-template-columns:22px minmax(0,1fr)}
  .crow>.who,.crow>.rec,.crow>.b2,.crow>.b3,.crow>.b4,.crow>.wide{grid-column:2;grid-row:auto}
}

/* ── v3.3: "This location" first, three cards; sort control; order date ── */
.bar1 #sortBox{display:inline-flex;align-items:center;gap:14px;margin-left:10px}
.who .odate{color:var(--ink);font-weight:700}
.about3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.about3 .lvl{padding:8px 9px;min-width:0}
.about3 .lvl b{font-size:24px;color:var(--ink)}
.about3 .lvl.good{background:var(--greenw)} .about3 .lvl.good b{color:var(--green)}
.about3 .lvl.bad{background:var(--rustw)} .about3 .lvl.bad b{color:var(--rust)}
.aline{margin:8px 0 0!important;color:var(--ink)!important;font-size:12.5px!important}
.about3+.aline+.retline{margin:3px 0 0!important}
.nest{margin:6px 0 0!important;font-size:11px!important;line-height:1.35}
/* block order on a row is now: order · this location · around it · couriers · courier */
@media(min-width:1321px){
  .crow{grid-template-columns:22px minmax(200px,1fr) minmax(225px,1fr) minmax(318px,1.25fr) minmax(200px,1fr) minmax(180px,210px)}
}
@media(min-width:1181px) and (max-width:1320px){
  .crow>.b4{grid-column:2;grid-row:2} .crow>.b2{grid-column:3;grid-row:2} .crow>.b3{grid-column:4;grid-row:2}
}

/* ── v3.4: a calmer row ──────────────────────────────────────────────────
   order · one location block · couriers · courier. Fewer figures, more air. */
.sortstrip{display:flex;align-items:center;gap:6px;margin:0 0 8px;padding-left:4px;font-size:13px}
.sortstrip .lbl{color:var(--grey);font-weight:700;margin-right:2px}
.sortb{border:0;background:none;font:inherit;font-weight:700;color:var(--grey);cursor:pointer;padding:4px 10px;border-radius:999px}
.sortb.sel{color:var(--ink);background:#fff;border:1px solid var(--line)}
.stabs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;margin-bottom:10px;max-width:100%}
.stabs button{border:0;background:none;padding:5px 11px;font:inherit;font-size:12.5px;font-weight:700;color:var(--grey);cursor:pointer;white-space:nowrap}
.stabs button.sel{background:var(--ink);color:#fff}
.about3 .lvl{padding:10px 12px}
.about3 .lvl small{font-size:11px}
.about3 .lvl b{font-size:28px;line-height:1.15}
.about3 .lvl.empty b{color:#b4b8c6}
.aline{margin:9px 0 0!important;font-size:13px!important;color:var(--text)!important}
.aline .retline{color:var(--rust);font-weight:700}
.crow{padding:18px 20px;gap:22px;margin-bottom:12px}
.who h3{font-size:20px}
.who p{line-height:1.5}
.bars{gap:9px}
@media(min-width:1101px){
  .crow{grid-template-columns:22px minmax(230px,1.15fr) minmax(340px,1.2fr) minmax(220px,1fr) minmax(180px,210px)}
  .crow>.who,.crow>.rec,.crow>.b2,.crow>.b3{grid-column:auto;grid-row:auto}
  .crow>.wide{grid-column:3/5;grid-row:auto}
}
@media(max-width:1100px){
  .crow{grid-template-columns:22px minmax(0,1fr) minmax(180px,240px)}
  .crow>.who{grid-column:2;grid-row:1} .crow>.rec{grid-column:3;grid-row:1}
  .crow>.b2,.crow>.b3,.crow>.wide{grid-column:2/-1;grid-row:auto}
}
@media(min-width:760px) and (max-width:1100px){
  .crow>.b2{grid-column:2;grid-row:2} .crow>.b3{grid-column:3;grid-row:2}
}
@media(max-width:700px){
  .crow{grid-template-columns:22px minmax(0,1fr)}
  .crow>.who,.crow>.rec,.crow>.b2,.crow>.b3,.crow>.wide{grid-column:2;grid-row:auto}
  .stabs button{padding:5px 8px}
}

.aline .okline{color:var(--green);font-weight:700}

/* ── v3.6: the recommendation column ─────────────────────────────────── */
.rec .sec{color:var(--ink)!important}
.adv{border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.45;color:var(--text);background:var(--mist);margin-bottom:10px;border-left:4px solid #c9cede}
.adv b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.adv.call{background:var(--rustw);border-left-color:var(--rust)} .adv.call b{color:var(--rust)}
.adv.again{background:#FFF1DD;border-left-color:var(--ignite)} .adv.again b{color:#9a5b00}
.adv.check{background:#FFF8EC;border-left-color:#e3b25a} .adv.check b{color:#8a5a00}
.adv.good{background:var(--greenw);border-left-color:var(--green)} .adv.good b{color:var(--green)}
.adv.new{background:#EEF3FA;border-left-color:var(--blue)} .adv.new b{color:var(--blue)}
.clbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin:0 0 4px}
.rec select{font-size:14px!important;padding:8px 10px!important}
@media(min-width:1101px){
  .crow{grid-template-columns:22px minmax(220px,1.1fr) minmax(330px,1.15fr) minmax(200px,.9fr) minmax(250px,1fr)}
}

/* ── v4.0: two pages — "To hand over" and "Handed over" ──────────────────
   Row layouts are written on .crow.p1 / .crow.p2 so none of the older .crow rules above
   can override them. Every column can shrink (minmax(0,…)), so nothing pushes the page wider
   than the screen. */
.pages{display:inline-flex;max-width:100%;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:4px;margin-bottom:18px}
.pages button{border:0;background:none;font:inherit;font-weight:800;font-size:16px;color:var(--grey);padding:10px 20px;border-radius:10px;cursor:pointer;white-space:nowrap}
.pages button b{font-weight:900;margin-left:6px;color:var(--ignite)}
.pages button.sel{background:var(--ink);color:#fff} .pages button.sel b{color:#FFB25C}
.alldone{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;font-size:15px;color:var(--ink)}
.quiet{font-size:13px;color:var(--grey);margin:0}
.sec.ink{color:var(--ink)}
.sumb.good b,.sumb.done b{color:var(--green)} .sumb.call b{color:var(--rust)} .sumb.again b,.sumb.check b{color:#9a5b00} .sumb.ordered b{color:var(--blue)}
.sumb.sel b{color:#fff}
/* location history: one line per attempt */
.att{font-size:15px;color:var(--ink);font-weight:800;margin:0 0 6px} .att span{font-weight:600;color:var(--grey);font-size:13px}
.ev{display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px;font-size:13px;padding:6px 0;border-top:1px solid var(--line);line-height:1.5}
.sec+.ev,.att+.ev{border-top:0;padding-top:0}
.ev time{color:var(--grey);font-weight:700;white-space:nowrap}
.ev b{color:var(--ink)}
.edot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.edot.dg{background:var(--green)} .edot.dr{background:var(--rust)} .edot.da{background:var(--ignite)} .edot.dn{background:#b4b8c6}
.epill{display:inline-block;font-size:11.5px;font-weight:800;border-radius:999px;padding:1px 8px;white-space:nowrap}
.epill.ok{background:var(--greenw);color:var(--green)} .epill.no{background:#FFF1DD;color:#9a5b00} .epill.un{background:var(--mist);color:var(--grey)}
/* handed over */
.hchips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.hchips .lbl{font-weight:800;color:var(--ink);margin-right:4px}
.hchip{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.hchip b{color:#E87400;font-weight:900;margin-left:5px}
.hchip.red b{color:var(--rust)} .hchip.grn b{color:var(--green)}
.hchip.sel{background:var(--edit);border-color:var(--ignite)}
.stp{display:inline-block;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:800;margin:4px 0 6px}
.stp.g{background:var(--greenw);color:var(--green)} .stp.a{background:#FFF1DD;color:#9a5b00} .stp.r{background:var(--rustw);color:var(--rust)} .stp.n{background:var(--mist);color:var(--ink)}
.cbig{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 4px;overflow-wrap:anywhere}
.kv{font-size:13px;line-height:1.7;margin:0;overflow-wrap:anywhere} .kv b{color:var(--ink)}
.hacts{font-size:12.5px;margin:8px 0 0;display:flex;gap:4px 14px;flex-wrap:wrap}
.modal #edVal{display:block;width:100%;margin:10px 0 0;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;font:inherit;color:var(--ink)}
.handover b{font-weight:900}
.who,.who p,.adv,.rec .why,.aline{overflow-wrap:anywhere}

/* To hand over: order · this location · location history · recommendation */
.crow.p1{grid-template-columns:22px minmax(0,1fr)}
.crow.p1>*{grid-column:2;grid-row:auto;min-width:0}
.crow.p1>input{grid-column:1;grid-row:1}
@media(min-width:860px){
  .crow.p1{grid-template-columns:22px minmax(0,1fr) minmax(0,1fr)}
  /* two lines, read in the same order: order · this location, then history · recommendation */
  .crow.p1>.who{grid-column:2;grid-row:1} .crow.p1>.b2,.crow.p1>.wide{grid-column:3;grid-row:1}
  .crow.p1>.b3{grid-column:2;grid-row:2} .crow.p1>.rec{grid-column:3;grid-row:2}
}
@media(min-width:1260px){
  .crow.p1{grid-template-columns:22px minmax(0,1fr) minmax(318px,1.1fr) minmax(0,1.05fr) minmax(0,1fr)}
  .crow.p1>.who,.crow.p1>.b2,.crow.p1>.b3,.crow.p1>.rec{grid-column:auto;grid-row:auto}
  .crow.p1>.wide{grid-column:3/5;grid-row:auto}
}
/* Handed over: order + status · with · what happened · next step */
.crow.p2{grid-template-columns:minmax(0,1fr)}
.crow.p2>*{grid-column:auto;grid-row:auto;min-width:0}
@media(max-width:700px){.crow.p2>*{grid-column:1!important}}
@media(min-width:701px){.crow.p2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.crow.p2{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.25fr) minmax(0,1.05fr)}}
/* small screens: less padding, and the tabs and page switch may wrap rather than push the page wide */
.stabs{flex-wrap:wrap;border-radius:14px}
@media(max-width:600px){
  .bwrap{padding-left:12px;padding-right:12px}
  .crow{padding:14px 12px;gap:14px}
  .pages{display:flex} .pages button{flex:1;padding:9px 8px;font-size:14px;white-space:normal}
  .stabs button{padding:5px 8px}
  .bar1 #narrowBox{margin-left:0;flex-wrap:wrap;gap:8px}
}
@media(max-width:380px){.about3{gap:6px}.about3 .lvl{padding:8px 6px}.about3 .lvl small{font-size:9.5px;letter-spacing:0}}
.adv.check{display:block}
.pay.got{color:var(--green)!important}
.epill{white-space:normal}

/* ── v5.0: the Couriers column is back — order · this location · location history · couriers · recommendation ── */
.crow.p1>.b4{grid-column:2;grid-row:auto}
@media(min-width:860px){
  .crow.p1{grid-template-columns:22px minmax(0,1fr) minmax(0,1fr)}
  .crow.p1>.who{grid-column:2;grid-row:1} .crow.p1>.b2,.crow.p1>.wide{grid-column:3;grid-row:1}
  .crow.p1>.b3{grid-column:2;grid-row:2} .crow.p1>.b4{grid-column:3;grid-row:2}
  .crow.p1>.rec{grid-column:2/-1;grid-row:3}
}
@media(min-width:1100px){
  .crow.p1{grid-template-columns:22px minmax(0,.9fr) minmax(318px,1.1fr) minmax(0,1.1fr)}
  .crow.p1>.who{grid-column:2;grid-row:1/3}
  .crow.p1>.b2{grid-column:3;grid-row:1} .crow.p1>.b3{grid-column:4;grid-row:1}
  .crow.p1>.b4{grid-column:3;grid-row:2} .crow.p1>.rec{grid-column:4;grid-row:2}
  .crow.p1>.wide{grid-column:3/5;grid-row:1}
}
@media(min-width:1400px){
  .crow.p1{grid-template-columns:22px minmax(0,1fr) minmax(318px,1.1fr) minmax(0,1.05fr) minmax(0,.8fr) minmax(0,1.05fr)}
  .crow.p1>.who,.crow.p1>.b2,.crow.p1>.b3,.crow.p1>.b4,.crow.p1>.rec{grid-column:auto;grid-row:auto}
  .crow.p1>.wide{grid-column:3/6;grid-row:auto}
}
.bar>span:first-child{overflow-wrap:anywhere}
.sumb.check{display:inline-block}

/* ── v5.2: rate the courier, update the status by hand ───────────────── */
.rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--grey)}
.rate span{flex:1 1 100%;font-weight:700;color:var(--ink)}
.rateb{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:800;color:var(--ink);cursor:pointer}
.rateb.good.sel{background:var(--greenw);border-color:var(--green);color:var(--green)}
.rateb.problem.sel{background:var(--rustw);border-color:var(--rust);color:var(--rust)}
.sec.sub{margin-top:12px;color:var(--grey)}
.rated{font-size:12.5px;color:var(--text);margin:0 0 3px;overflow-wrap:anywhere} .rated b{color:var(--ink)}
.modal .marks{display:flex;flex-direction:column;gap:2px;margin:12px 0 4px}
.modal .marks .check{margin:4px 0;font-size:15px;color:var(--ink);font-weight:700}
.modal #mkWhy{display:block;width:100%;max-width:none;margin-top:4px}

/* v5.4 */
.priorc{width:100%;max-width:240px;margin:6px 0 0;padding:7px 10px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:13px;color:var(--ink);background:#fff}
.who a.link{color:var(--blue)}
body.board .top>*{min-width:0}
.demo-tag{max-width:100%;overflow-wrap:anywhere}
@media(max-width:400px){.demo-tag{font-size:11.5px;padding:4px 9px}}
.priorhint{margin:6px 0 0;font-size:12px}

/* ── v6.0: the top of Dispatch Handover ──────────────────────────────── */
.day.v2{display:block;margin-bottom:18px}
.day.v2 h1{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
.day.v2 h1 b{font-weight:900;color:var(--ink)}
.dline{font-size:14.5px;color:var(--text);margin:0 0 2px;line-height:1.5}
.dline.quiet{font-size:13.5px;color:var(--grey)}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:12px;margin:0 0 20px}
.card3{border-radius:16px;padding:14px 16px 12px;display:flex;flex-direction:column;align-items:flex-start;min-width:0;border:2px solid transparent}
.card3 button{border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;padding:0;max-width:100%}
.card3 .chead{display:block;margin-bottom:8px}
.card3 .chead b{display:block;font-size:30px;font-weight:900;line-height:1.1}
.card3 .chead span{font-size:16px;font-weight:800}
.card3 .cline{font-size:13.5px;line-height:1.45;padding:3px 0;font-weight:600;overflow-wrap:anywhere}
.card3 .cline:hover,.card3 .cline.sel{text-decoration:underline}
.card3 .cline.sel{font-weight:800}
.card3 .cmoney{font-size:12.5px;font-weight:700;margin:8px 0 0}
.card3.ready{background:var(--greenw);color:var(--green)}
.card3.call{background:#FFF1DD;color:#8a5a00}
.card3.again{background:#EEF3FA;color:var(--blue)}
.card3.sel{border-color:currentColor}
.card3.empty{opacity:.55} .card3.empty .chead{cursor:default}
.cshow{grid-column:1/-1;margin:0;font-size:13.5px}
/* Narrow by: one colour per level, widest to tightest; the places below take the colour of the level in use */
#narrowSeg{border:0;background:none;overflow:visible;gap:6px;flex-wrap:wrap}
#narrowSeg button{border-radius:999px;border:1.5px solid transparent;padding:6px 14px}
#narrowSeg .lv-st,.places.lv-st .place{background:#EEEDFE;color:#3C3489}
#narrowSeg .lv-city,.places.lv-city .place{background:#E1F5EE;color:#085041}
#narrowSeg .lv-pin,.places.lv-pin .place{background:#FBEAF0;color:#72243E}
#narrowSeg .lv-loc,.places.lv-loc .place{background:#FAECE7;color:#712B13}
#narrowSeg button.sel,.places .place.sel{border-color:currentColor;font-weight:900}
.places .place{border-color:transparent}
.places .place b{color:inherit;opacity:.75}
#narrowSeg .lv-st.sel,.places.lv-st .place.sel{background:#CECBF6}
#narrowSeg .lv-city.sel,.places.lv-city .place.sel{background:#9FE1CB}
#narrowSeg .lv-pin.sel,.places.lv-pin .place.sel{background:#F4C0D1}
#narrowSeg .lv-loc.sel,.places.lv-loc .place.sel{background:#F5C4B3}
.bar1 #narrowBox{flex-wrap:wrap}

/* ── v6.2 ─────────────────────────────────────────────────────────────── */
.cards3.n1,.cards3.n2{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),440px))}
.secsub{color:var(--grey);font-weight:800}
.crr{padding:8px 0;border-top:1px solid var(--line)}
.sec+.crr{border-top:0;padding-top:0}
.crr1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.crr1 b{font-size:14px;font-weight:800;color:var(--ink);overflow-wrap:anywhere;min-width:0}
.crr1 span{font-size:12.5px;color:var(--grey);white-space:nowrap}
.crrbar{background:var(--mist);border-radius:4px;margin-top:5px} .crrbar i{display:block;height:5px;border-radius:4px;background:var(--ignite)}
.crrtags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ctag{font-size:11.5px;font-weight:800;border-radius:999px;padding:2px 9px;background:var(--mist);color:var(--text)}
.ctag.you{background:var(--greenw);color:var(--green)}
.ctag.others{background:#EEF3FA;color:var(--blue)}
.crr+.small{margin-top:8px}

/* v6.4 */
.allscope{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.allscope input{width:16px;height:16px;accent-color:var(--ignite)}
.sortstrip{flex-wrap:wrap}

/* ── v6.6: Delivery Status cards — their own three colours ───────────── */
.card3.way{background:#EEEDFE;color:#3C3489}
.card3.nd{background:#FBEAF0;color:#72243E}
.card3.dl{background:#E1F5EE;color:#085041}
#done .day.v2{margin-bottom:16px}

/* ── v6.8 ─────────────────────────────────────────────────────────────── */
.cap90{margin:4px 0 0!important;font-size:11.5px!important;color:var(--grey)!important}
.flag.noloc{background:var(--mist);color:var(--ink);border:1px solid var(--line)}
.crow.p1.back{border-left:5px solid #7F77DD}
.backtag{display:inline-block;margin:3px 0 2px;font-size:11.5px;font-weight:800;border-radius:999px;padding:2px 10px;background:#EEEDFE;color:#3C3489}
.pchip .who em.backem{color:#534AB7}
.unsaved{margin:8px 0 0;font-size:12.5px;font-weight:700;color:var(--rust);background:var(--rustw);border-radius:10px;padding:7px 10px}

/* ── v6.9 ─────────────────────────────────────────────────────────────── */
.toprow{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:18px}
.toprow .pages{margin-bottom:0}
.toprow .btn{padding:10px 18px}
button.lvl{border:0;font:inherit;text-align:left;cursor:pointer;display:block;width:100%}
button.lvl.pick{outline:2px solid var(--ink);outline-offset:-2px}
.lastline{margin:8px 0 0!important;font-size:12.5px!important;color:var(--ink)!important;font-weight:700}
.mcg{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:14px 0 4px}
.mcl{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 14px}
.mcl .check{margin:3px 0;font-size:14px;color:var(--ink)}
.mcl em{font-style:normal;font-size:11.5px;color:var(--green);font-weight:800}