/* Product mockups. Loaded on every page; the markup that uses it is per page.
   Everything here is scoped under .mk so it cannot reach the rest of the site. */

.mk{--ok:#2E9E44;--warn:#D9770A;--surface:#fff;
 /* The product's own palette, read off the map view screenshot on the home
    page. Delivery work is blue, pickup work is amber, a swap is violet, closed
    work is green, anything wrong is red, and the panel bars are the charcoal
    the application puts above every panel. Every figure below that is a picture
    of a screen is tinted from these six, so the drawings and the capture read
    as the same software rather than as a marketing illustration of it. */
 --pblue:#1B7FD6;--pblued:#12599A;--pbluet:#E9F2FC;--pbluel:#BFD9F4;
 --pamb:#E2740C;--pambd:#9C4F09;--pambt:#FDF1E3;--pambl:#F2D2AB;
 --pvio:#7A3FB8;--pviod:#5A2C88;--pviot:#F2EAFB;--pviol:#DBC6EF;
 --pgrn:#2E9E44;--pgrnd:#1E7130;--pgrnt:#E9F6EC;--pgrnl:#BADFC2;
 --pred:#D93A32;--predd:#A22A24;--predt:#FBEBEA;--predl:#F1C3C0;
 --chrome:#2E3438;--chrome2:#4A5359;--field:#EFF1F2;
 margin:26px 0 4px;padding:0;border:1px solid var(--line);border-radius:10px;
 background:var(--paper);overflow:hidden}
.mk *{box-sizing:border-box}
/* Figure prose is not page prose. The page measure is set for a paragraph
   running across the shell; inside a panel that already fixes the column it
   would strand a caption at a third of the box, so the figure sets its own. */
.mk p{max-width:none}
/* Several rules below set display, which would otherwise beat the [hidden] default. */
.mk [hidden]{display:none}
/* The application puts a charcoal bar over every panel with the panel's name on
   the left and whatever acts on it on the right. A figure that is a picture of a
   panel takes the same bar. */
.mk-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
 padding:11px 16px;background:var(--chrome)}
.mk-title{font-size:13px;font-weight:650;color:#fff;letter-spacing:-.01em;margin-right:auto}
.mk-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mk-cap{font-size:13.5px;line-height:1.6;color:var(--body);opacity:.82;
 padding:13px 18px;border-top:1px solid var(--line);background:#fff;margin:0}
.mk-note{font-size:13.5px;line-height:1.6;color:var(--body);margin:0;padding:13px 18px 17px;
 border-top:1px dashed var(--line);max-width:96ch}
.mk-note a{color:var(--teald)}
/* ---- a diagram, not a screen ------------------------------------------- */
/* Most figures here are pictures of the product and keep the panel chrome that
   says exactly that. The loop is an argument about how the product is put
   together, so it gives the chrome up: the paper ground, a dashed hand, a plate
   label where the toolbar would be, and a control drawn as an outline. */
.mk-dia{border-style:dashed;background:var(--paper)}
.mk-dia .mk-head{background:none;border-bottom:1px dashed var(--line)}
.mk-dia .mk-title{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
 color:var(--teald)}
.mk-dia .mk-cap{background:none;border-top:1px dashed var(--line)}
.mk-dia .mk-head .mk-play{background:none;border-color:var(--teal);color:var(--teald)}
.mk-dia .mk-head .mk-play:hover{background:var(--tint);border-color:var(--teal);color:var(--teald)}
.mk-dia .mk-head .mk-reset,.mk-dia .mk-head .mk-seg button{border:1px solid var(--line);
 border-radius:5px;background:#fff;color:var(--body);letter-spacing:0;text-transform:none;
 font-size:12.5px;font-weight:600;padding:8px 12px}
.mk-dia .mk-head .mk-legend{color:var(--body)}
.mk-dia .mk-head :focus-visible{outline-color:var(--ink)}
/* A heading inside a panel, set the way the application sets one: small caps
   over a hairline, with the glyph in the delivery blue. */
.mk h4{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--chrome);
 font-weight:800;margin:0 0 11px;padding-bottom:8px;border-bottom:1px solid var(--line);
 display:flex;align-items:center;gap:6px}
.mk h4 .ico{color:var(--pblue)}

/* ---- controls ---------------------------------------------------------- */
.mk-play,.mk-reset,.mk-seg button{font:600 12.5px/1 'Inter',sans-serif;cursor:pointer;
 border:1px solid var(--line);background:#fff;color:var(--body);border-radius:5px;
 padding:8px 12px;display:inline-flex;align-items:center;gap:7px}
.mk-play{background:var(--teal);border-color:var(--teal);color:#fff}
.mk-play:hover{background:var(--teald);border-color:var(--teald)}
.mk-reset:hover,.mk-seg button:hover{border-color:var(--teal);color:var(--teald)}
.mk-seg{display:inline-flex;gap:4px;flex-wrap:wrap}
.mk-seg button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.mk-play:focus-visible,.mk-reset:focus-visible,.mk-seg button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* The same controls sitting on the charcoal bar. Scoped to .mk-head, because the
   savings figure puts a segmented control on a white panel where the light
   treatment above is the right one. */
.mk-head .mk-play{background:var(--pblue);border-color:var(--pblue);color:#fff}
.mk-head .mk-play:hover{background:var(--pblued);border-color:var(--pblued)}
.mk-head .mk-reset{background:transparent;border-color:rgba(255,255,255,.3);color:#DCE2E5}
.mk-head .mk-reset:hover{background:rgba(255,255,255,.09);border-color:#fff;color:#fff}
/* The view switch is the application's tab strip: no fill, no border, and the
   selected view carried on a green underline. */
.mk-head .mk-seg{gap:0}
.mk-head .mk-seg button{background:none;border:0;border-bottom:2px solid transparent;
 border-radius:0;padding:7px 11px;font-size:11px;font-weight:800;letter-spacing:.09em;
 text-transform:uppercase;color:#A9B4BA}
.mk-head .mk-seg button:hover{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.mk-head .mk-seg button[aria-pressed=true]{background:none;color:#fff;border-bottom-color:var(--pgrn)}
.mk-head .mk-legend{color:#C4CCD1}
.mk-head :focus-visible{outline-color:#fff}
.mk-play-i{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;
 border-bottom:5px solid transparent;flex:none}
.mk-play[data-running] .mk-play-i{width:8px;height:9px;border:0;background:currentColor;
 -webkit-mask:linear-gradient(#000 0 0) 0/3px 9px no-repeat,linear-gradient(#000 0 0) 5px/3px 9px no-repeat;
 mask:linear-gradient(#000 0 0) 0/3px 9px no-repeat,linear-gradient(#000 0 0) 5px/3px 9px no-repeat}
.mk-legend{font-size:11.5px;color:var(--body);display:inline-flex;align-items:center;gap:6px}
.mk-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-left:6px}
.lg-off{background:#C7CDD0}.lg-sh{background:#93C0EB}.lg-pk{background:var(--pblue)}
/* Ready, out and complete, in the application's own three states. */
.pill{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
 padding:3px 7px;border-radius:20px;background:var(--field);color:var(--chrome2)}
.pill[data-s=out]{background:var(--pbluet);color:var(--pblued)}
.pill[data-s=done]{background:var(--pgrnt);color:var(--pgrnd)}

/* ---- panel furniture --------------------------------------------------- */
/* Three shapes the application uses on every operational screen, so the figures
   below can use them too: a completion strip, the count tiles under it, and the
   outlined chip that carries one number beside an icon. */
.mk-bar{padding:13px 16px;background:#fff;border-bottom:1px solid var(--line);display:grid;gap:11px}
.mk-done{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:var(--ink)}
.mk-done .ico{color:var(--pgrn);flex:none}
.mk-done b{font-variant-numeric:tabular-nums}
.mk-done em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;
 color:var(--body);font-variant-numeric:tabular-nums}
.mk-prog{display:block;height:4px;border-radius:3px;background:var(--field);overflow:hidden;margin-top:8px}
.mk-prog i{display:block;height:100%;width:0;background:var(--pgrn);border-radius:3px;
 transition:width .5s ease}
.mk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:8px}
.mk-tile{border:1px solid var(--pbluel);border-left-width:3px;border-radius:6px;
 background:var(--pbluet);padding:8px 10px;min-width:0}
.mk-tile span{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;
 letter-spacing:.1em;text-transform:uppercase;color:var(--pblued)}
.mk-tile b{display:block;margin-top:5px;font:600 17px/1.15 'IBM Plex Mono',ui-monospace,monospace;
 letter-spacing:-.02em;color:var(--pblued);font-variant-numeric:tabular-nums}
.mk-tile[data-c=amber]{border-color:var(--pambl);background:var(--pambt)}
.mk-tile[data-c=amber] span,.mk-tile[data-c=amber] b{color:var(--pambd)}
.mk-tile[data-c=violet]{border-color:var(--pviol);background:var(--pviot)}
.mk-tile[data-c=violet] span,.mk-tile[data-c=violet] b{color:var(--pviod)}
.mk-tile[data-c=green]{border-color:var(--pgrnl);background:var(--pgrnt)}
.mk-tile[data-c=green] span,.mk-tile[data-c=green] b{color:var(--pgrnd)}
.mk-tile[data-c=red]{border-color:var(--predl);background:var(--predt)}
.mk-tile[data-c=red] span,.mk-tile[data-c=red] b{color:var(--predd)}
.mk-chips{display:flex;flex-wrap:wrap;gap:5px}
.mk-chip{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
 border:1px solid var(--pbluel);border-radius:20px;background:#fff;padding:3px 9px;
 font:600 10.5px/1.55 'Inter',sans-serif;color:var(--pblued);font-variant-numeric:tabular-nums}
.mk-chip .ico{color:var(--pblue);flex:none}
.mk-chip[data-c=amber]{border-color:var(--pambl);color:var(--pambd)}
.mk-chip[data-c=amber] .ico{color:var(--pamb)}
.mk-chip[data-c=violet]{border-color:var(--pviol);color:var(--pviod)}
.mk-chip[data-c=violet] .ico{color:var(--pvio)}
.mk-chip[data-c=green]{border-color:var(--pgrnl);color:var(--pgrnd)}
.mk-chip[data-c=green] .ico{color:var(--pgrn)}
.mk-chip[data-c=red]{border-color:var(--predl);color:var(--predd)}
.mk-chip[data-c=red] .ico{color:var(--pred)}
.mk-chip[data-c=grey]{border-color:var(--line);color:var(--body)}
.mk-chip[data-c=grey] .ico{color:var(--body);opacity:.7}

/* ============================ THE LOOP ================================= */
/* The one figure on this site that is a diagram rather than a screen. Nine
   stages down a dashed spine, each naming the field it writes, with the record
   they all write beside them. Nothing here is given a card, a fill or a border
   radius that would read as a control, because the claim being made is the data
   claim rather than a view the operator would recognise from the product. */
.os{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;padding:26px 22px}
@media(min-width:900px){
 .os{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:30px 26px;align-items:start}
}
.os-vis{min-width:0}
.os-note{display:none}

/* ---- the spine --------------------------------------------------------- */
.os-led-l{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0;position:relative}
.os-led-l li{position:relative;display:grid;grid-template-columns:13px minmax(0,1fr) auto;
 gap:12px;align-items:center;padding:3px 0}
/* The node on the spine: hollow until the stage has written, inked after. */
.os-led-d{position:relative;z-index:2;width:13px;height:13px;border-radius:50%;
 background:var(--paper);border:1.5px solid var(--line);
 transition:background .3s ease,border-color .3s ease}
.os-led-d[data-on]{background:var(--teal);border-color:var(--teal)}
/* Drawn dot to dot and dashed, so the line reads as a hand rather than as a
   progress bar. :has() colours it from the dot's own state, since the flag
   lives on the dot rather than on the row. */
.os-led-l li:not(:last-child)::before{content:'';position:absolute;left:6.5px;
 top:calc(50% + 9px);bottom:calc(9px - 50%);width:0;margin-left:-.75px;
 border-left:1.5px dashed var(--line);transition:border-color .3s ease}
.os-led-l li:not(:last-child):has(.os-led-d[data-on])::before{border-color:var(--teal)}

/* ---- a stage ----------------------------------------------------------- */
/* Ink on paper. The glyph in a tinted disc is the only shape in the row, and
   the number rides it the way a callout number sits on a drawing. */
.os-b{position:relative;width:100%;display:flex;align-items:center;gap:10px;cursor:pointer;
 background:none;border:0;border-radius:0;box-shadow:none;padding:6px 0;text-align:left;
 font:650 13px/1.25 'Inter',sans-serif;color:var(--ink);transition:none}
.os-b .ico{box-sizing:content-box;flex:none;width:15px;height:15px;padding:8px;border-radius:50%;
 background:var(--tint);color:var(--teald);transition:background .25s ease,color .25s ease}
.os-b:hover .ico{background:#CBE9EE}
.os-b[aria-pressed=true] .ico{background:var(--teal);color:#fff}
.os-b[aria-pressed=true] b{color:var(--teald)}
.os-b b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-b:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.os-num{position:absolute;left:19px;top:-1px;z-index:2;width:17px;height:17px;border-radius:50%;
 background:var(--paper);color:var(--teald);box-shadow:0 0 0 1px var(--line);
 font:700 10px/17px 'Inter',sans-serif;font-style:normal;text-align:center}
.os-b[aria-pressed=true] .os-num{background:var(--teald);color:#fff;box-shadow:none}
/* The field a stage writes, set in the record's own face, so the name in the
   node and the line it lands on read as the same token. */
.os-led-w{margin-left:auto;padding-left:12px;font-family:'IBM Plex Mono',ui-monospace,monospace;
 font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
 color:var(--body);opacity:.6;white-space:nowrap}
.os-led-w b{font-weight:600;color:var(--teald);opacity:1}
.os-b[aria-pressed=true] .os-led-w{opacity:1}
.os-vp-f{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.6;
 color:var(--body);opacity:.85;margin:18px 0 0;max-width:96ch}
.os-vp-f .ico{color:var(--teal);flex:none;margin-top:2px}

/* The record is a drawing of a row, not the row as the product shows it. A white
   panel with solid rules, a status column and a filled tick reads as a screen
   somebody could click, which is a promise the figure should not make. So: a
   dashed field note on the paper ground, values set in the mono face the way
   data gets written in a diagram, and a pen tick instead of a control. */
/* Held short of the panel edge rather than let out to it: a nine row table
   running the full width of the figure is the thing this is trying not to look
   like, and the gap on the right reads as the margin of a document. */
.os-rec{min-width:0;max-width:960px}
.os-rh{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.13em;
 text-transform:uppercase;color:var(--teald);margin:0 0 10px}
.os-rh .ico{opacity:.8}
/* The rule runs on from the label, so the whole thing reads as a callout on a
   drawing rather than as a panel heading. */
.os-rh::after{content:'';flex:1 1 auto;height:0;border-top:1px dashed var(--line)}
.os-rl{list-style:none;margin:0;padding:4px 16px;border:1px dashed var(--line);border-radius:10px;
 background:transparent}
.os-rl li{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr) 15px;gap:12px;
 align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--line);
 transition:opacity .3s ease}
.os-rl li:last-child{border-bottom:0}
.os-rn{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
 color:var(--body);opacity:.62;white-space:nowrap}
.os-rv{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;font-weight:500;
 letter-spacing:-.01em;color:var(--ink);min-width:0;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
/* Unwritten is a pencil dash; written is a tick drawn over it. No disc, no fill,
   nothing that looks like a checkbox waiting to be clicked. */
.os-rt{position:relative;width:15px;height:11px;align-self:center}
.os-rt::before{content:'';position:absolute;left:1px;top:5px;width:11px;height:1.5px;
 border-radius:1px;background:var(--line);transition:opacity .3s ease}
.js .os-rl li:not([data-on]){opacity:.34}
.os-rl li[data-on] .os-rt::before{opacity:0}
.os-rl li[data-on] .os-rt::after{content:'';position:absolute;left:4px;top:0;width:4px;height:9px;
 border:solid var(--teal);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
/* The stage being written is marked in the margin, the way a reader marks a
   line, rather than by highlighting the row like a selected list item. */
.os-rl li[data-now]::before{content:'';position:absolute;left:-11px;top:50%;width:5px;height:5px;
 margin-top:-2.5px;border-radius:50%;background:var(--teal)}
.os-rl li[data-now] .os-rn{opacity:1;color:var(--teald)}
.os-rf{font-size:13.5px;line-height:1.6;color:var(--body);opacity:.85;margin:12px 0 0;max-width:96ch}
.os-uh{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
 color:var(--teald);margin:18px 0 8px}
.os-u{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.os-u li{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
 color:var(--body);background:var(--tint);border-radius:14px;padding:5px 11px}
.os-u .ico{color:var(--teal)}

/* ============================ DISPATCH ================================= */
.disp{display:grid;grid-template-columns:1.35fr 1fr 1.05fr;gap:1px;background:var(--line)}
.disp-col{background:#fff;padding:16px 16px 18px;min-width:0}
.runs{display:grid;gap:8px}
/* A trip card, drawn the way the application draws one: a coloured title bar
   with the vehicle on it, the operational numbers as chips underneath, and the
   stops in the sequence they will be driven. The selected trip takes the solid
   delivery blue; the others sit quiet until they are picked. */
.run{display:block;width:100%;text-align:left;cursor:pointer;background:#fff;overflow:hidden;
 border:1px solid var(--line);border-radius:7px;padding:0;font-family:'Inter',sans-serif}
.run:hover{border-color:var(--pblue)}
.run[aria-selected=true]{border-color:var(--pblue);box-shadow:0 0 0 3px rgba(27,127,214,.14)}
.run:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.run-h{display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--field);
 font-size:12.5px;font-weight:700;color:var(--ink);transition:background .18s ease}
.run[aria-selected=true] .run-h{background:var(--pblue);color:#fff}
.run-h .ico{color:var(--pblue);flex:none}
.run[aria-selected=true] .run-h .ico{color:#fff}
.run[aria-selected=true] .run-h .pill{background:rgba(255,255,255,.9);color:var(--pblued)}
.run[aria-selected=true] .run-h .pill[data-s=done]{background:var(--pgrnt);color:var(--pgrnd)}
.run-h .pill{margin-left:auto}
.run-b{display:block;padding:9px 10px 10px}
.run-m{display:block;font-size:11px;color:var(--body);opacity:.75;margin:0 0 7px}
.run .mk-chips{margin:0 0 8px}
.run-stops{list-style:none;margin:0;padding:0}
.run-stops li{display:flex;gap:8px;font-size:11.5px;color:var(--body);line-height:1.65;
 padding-left:12px;position:relative}
/* A delivery stop is a square and a pickup a diamond on the map, so the mark
   beside the stop in the list is the same shape at list size. */
.run-stops li::before{content:"";position:absolute;left:1px;top:7px;width:7px;height:7px;
 border-radius:1.5px;background:#fff;border:1.5px solid var(--pblue)}
.run-stops li[data-kind=pickup]::before{border-radius:1px;border-color:var(--pamb);
 transform:rotate(45deg)}
.run-stops li[data-kind=swap]::before{border-radius:50%;border-color:var(--pvio)}
.run-stops li[data-done]::before{background:var(--pgrn);border-color:var(--pgrn)}
.run-stops li em{font-style:normal;font-variant-numeric:tabular-nums;opacity:.7;flex:none}
.run-stops li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.load{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.load li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--body);
 background:var(--paper);border:1px solid transparent;border-radius:6px;padding:6px 8px}
.load li .ico{color:var(--pblue);flex:none}
.load li .sku{font-family:ui-monospace,monospace;font-size:11px;color:var(--ink);flex:none}
.load li .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.75}
.load li .bars{margin-left:auto;flex:none;width:26px;height:14px;
 background:repeating-linear-gradient(90deg,var(--body) 0 1px,transparent 1px 3px,var(--body) 3px 5px,transparent 5px 7px);
 opacity:.45}
.load li .box{flex:none;width:15px;height:15px;border:1.5px solid var(--line);border-radius:3px;
 background:#fff;position:relative}
.load li[data-scan]{border-color:var(--pblue);background:var(--pbluet)}
.load li[data-done] .box{background:var(--pgrn);border-color:var(--pgrn)}
.load-f{font-size:11.5px;color:var(--body);margin:10px 0 0}
.load-f b{color:var(--ink);font-variant-numeric:tabular-nums}

.tstop{border:1px solid var(--line);border-radius:7px;padding:9px 10px;margin:0 0 8px;background:#fff}
.tstop[data-done]{border-color:var(--pgrnl);background:var(--pgrnt)}
.tstop-h{display:flex;align-items:center;gap:8px}
.tstop-h .av{font-size:10.5px;font-weight:700;color:var(--pblued);background:var(--pbluet);
 border-radius:4px;padding:3px 6px;flex:none;font-variant-numeric:tabular-nums}
.tstop-h b{font-size:12px;color:var(--ink);font-weight:600;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.tstop-h .tick{margin-left:auto;flex:none;width:16px;height:16px;border-radius:4px;
 border:1.5px solid var(--line);position:relative}
.tstop[data-done] .tick{background:var(--pgrn);border-color:var(--pgrn)}
.tstop-i{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px}
.tstop-i li{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--body)}
.tstop-i .ico{color:var(--pblue)}
.tstop-n{display:block;font-size:11px;color:var(--body);opacity:.65;margin-top:6px}

/* One tick, shared by the loading list, the driver's stops and the document list. */
.load li[data-done] .box::after,.tstop[data-done] .tick::after,.doc-l li[data-done] .box::after{
 content:"";position:absolute;left:50%;top:46%;width:4px;height:8px;margin:-5px 0 0 -2px;
 border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* ============================ UNIT BOARD =============================== */
.uview{padding:18px}
.ucount{display:flex;align-items:center;gap:16px}
.ucount-v{font-size:56px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1}
.ucount-k{font-size:13px;color:var(--body);line-height:1.4}
.uslots{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
.uslot{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);
 border-radius:6px;color:var(--pblue);background:#fff}
.uslot[data-gone]{opacity:.25;background:var(--paper)}
.uwarn{margin:14px 0 0;font-size:12.5px;color:var(--predd);border-left:3px solid var(--pred);
 padding-left:12px;line-height:1.55}
.urows{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.urow{display:grid;grid-template-columns:20px 62px 1fr auto;align-items:center;gap:10px;
 background:#fff;border:1px solid var(--line);border-radius:6px;padding:9px 11px;font-size:12px}
.urow .ico{color:var(--pblue)}
.usku{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--ink)}
.uloc{color:var(--body);opacity:.75}
/* Every state the board can be in takes the colour the application gives it:
   free is green, out on hire is blue, in for service is red, turnaround is
   violet, and the unit this booking just took is outlined in blue. */
.ust{font-size:11.5px;font-weight:600;color:var(--pgrnd);text-align:right}
.urow[data-state=out] .ust{color:var(--pblued)}
.urow[data-state=svc] .ust{color:var(--predd)}
.urow[data-state=clean] .ust{color:var(--pviod)}
.urow[data-state=out] .ico{color:var(--pblue)}
.urow[data-state=svc] .ico{color:var(--pred)}
.urow[data-state=clean] .ico{color:var(--pvio)}
.urow[data-state=held]{border-color:var(--pblue);background:var(--pbluet);box-shadow:0 0 0 3px rgba(27,127,214,.12)}
.urow[data-state=held] .ust{color:var(--pblued)}
.urow[data-state=out] .ico,.urow[data-state=svc] .ico{opacity:.55}

/* ============================ ROUTE MAP ================================ */
.rt{display:grid;grid-template-columns:1.25fr 1fr;gap:1px;background:var(--line)}
.rt-map{background:#fff;display:block;width:100%;height:auto;padding:12px}
/* The map ground, taken from the capture: grey land, pale water, white roads,
   and the trip drawn on top in the colour that trip was given. */
.rt-bg{fill:#E9ECED}
.rt-water{fill:#D6E6F2}
.rt-road{stroke:#fff;stroke-width:6;fill:none;stroke-linecap:round}
.rt-line{fill:none;stroke:#B6BFC3;stroke-width:2;stroke-dasharray:5 6}
.rt-done{fill:none;stroke:var(--pblue);stroke-width:3.4;stroke-linecap:round;
 stroke-dasharray:1 9999;stroke-dashoffset:0}
.rt-depot{fill:var(--chrome)}
.rt-depotl{font:600 10px 'Inter',sans-serif;fill:var(--chrome2)}
/* A delivery is a rounded square on the map. Every stop on this run is one, so
   the same mark the key on the home page explains is the mark drawn here. */
.rt-pin{fill:#fff;stroke:var(--pblue);stroke-width:2}
.rt-halo{fill:var(--pblue);opacity:0}
.rt-num{font:700 10px 'Inter',sans-serif;fill:var(--pblued)}
.rt-stop[data-done] .rt-pin{fill:var(--pgrn);stroke:var(--pgrn)}
.rt-stop[data-done] .rt-num{fill:#fff}
.rt-stop[data-now] .rt-halo{opacity:.2}
.rt-van circle{fill:var(--pblued)}
.rt-van .vanico{color:#fff;stroke:#fff}
.rt-list{list-style:none;margin:0;padding:16px;background:#fff;display:grid;gap:6px;align-content:start}
.rt-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:6px;
 padding:8px 10px;background:#fff}
.rt-item[data-done]{border-color:var(--pgrnl);background:var(--pgrnt)}
.rt-i{flex:none;width:20px;height:20px;border-radius:4px;background:var(--pbluet);color:var(--pblued);
 font:700 11px/20px 'Inter',sans-serif;text-align:center}
.rt-item[data-done] .rt-i{background:var(--pgrn);color:#fff}
.rt-a{min-width:0;flex:1}
.rt-a b{display:block;font-size:12px;color:var(--ink);font-weight:600;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.rt-a em{font-style:normal;font-size:11px;color:var(--body);opacity:.72}
.rt-s{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
 color:var(--body);opacity:.6}
.rt-item[data-done] .rt-s{color:var(--pgrnd);opacity:1}

/* ============================ PROOF AND THREAD ========================= */
.comms{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.comms-one{grid-template-columns:1fr}
.proof{background:#fff;padding:18px}
/* A closed stop is a completed state, so the mark takes the same green the route
   list gives a stop once the photo has gone. */
.proof-k{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
 letter-spacing:.12em;text-transform:uppercase;color:var(--pgrnd);background:var(--pgrnt);
 border-radius:4px;padding:5px 9px}
.proof-h{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:12px 0 6px}
.proof-p{font-size:13px;color:var(--body);margin:0 0 12px;line-height:1.55}
.shot{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.shotimg{display:block;width:100%;height:auto}
.stamp{position:absolute;left:8px;bottom:8px;font:600 10.5px/1 ui-monospace,monospace;color:#fff;
 background:rgba(10,32,36,.72);border-radius:4px;padding:5px 7px;letter-spacing:.02em}
.proof-meta{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.proof-meta li{flex:1 1 90px;background:var(--paper);border-radius:6px;padding:8px 10px}
.proof-meta span{display:block;font-size:10.5px;color:var(--body);opacity:.7}
.proof-meta b{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}

.thread{background:var(--paper);display:flex;flex-direction:column;min-width:0}
/* The thread header is a panel sub-head rather than a second figure header, so
   it takes the application's field grey under the charcoal bar above it. */
.thread-h{display:flex;align-items:center;gap:9px;padding:12px 16px;background:var(--field);
 border-bottom:1px solid var(--line)}
.thread-av{width:26px;height:26px;border-radius:50%;background:var(--pblue);color:#fff;flex:none;
 font:700 12px/26px 'Inter',sans-serif;text-align:center}
.thread-h b{display:block;font-size:12.5px;color:var(--ink)}
.thread-h em{font-style:normal;font-size:10.5px;color:var(--body);opacity:.75}
.msgs{list-style:none;margin:0;padding:14px 16px;display:flex;flex-direction:column;gap:8px;
 flex:1;overflow:hidden}
.msg{max-width:86%;font-size:12px;line-height:1.5;border-radius:10px;padding:9px 11px}
.msg span{display:block}
.msg-out{align-self:flex-end;background:var(--pbluet);color:var(--pblued);border:1px solid var(--pbluel);
 border-bottom-right-radius:3px}
.msg-in{align-self:flex-start;background:#fff;color:var(--body);border:1px solid var(--line);
 border-bottom-left-radius:3px}
.msg-typing{align-self:flex-end;display:flex;gap:4px;padding:11px}
.msg-typing i{width:5px;height:5px;border-radius:50%;background:var(--pblue);opacity:.4;
 animation:typ 1.1s ease-in-out infinite}
.msg-typing i:nth-child(2){animation-delay:.16s}.msg-typing i:nth-child(3){animation-delay:.32s}
@keyframes typ{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:.9;transform:translateY(-3px)}}
.js .mk-comms[data-thread] .msg[data-step]{opacity:0;transform:translateY(6px);
 transition:opacity .35s ease,transform .35s ease}
.js .mk-comms[data-thread] .msg[data-step][data-shown]{opacity:1;transform:none}
.quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 14px}
.quick button{font:600 11.5px/1 'Inter',sans-serif;color:var(--pblued);background:#fff;
 border:1px solid var(--line);border-radius:20px;padding:8px 12px;cursor:pointer}
.quick button:hover{border-color:var(--pblue);background:var(--pbluet)}
.quick button:disabled{opacity:.4;cursor:default}
.quick button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ============================ EXPERIENCE DECK ========================== */
/* The three cards share one grid cell rather than being taken out of flow, so
   the panel is as tall as the tallest card instead of as tall as a number typed
   in advance. A card grows by a line or four when its note appears after a
   booking, and under absolute positioning that growth ran out of the panel and
   over the note and the caption below it. */
.deck{position:relative;padding:20px 18px 24px;display:grid;
 grid-template-columns:min(300px,84%);justify-content:center;align-items:start}
/* The two cards behind fan to the right, so centring the front card alone leaves
   the group sitting right of the panel's middle. The extra right padding is the
   fan's width, which puts the mass of the deck back in the centre. */
@media(min-width:820px){.deck{padding-right:74px}}
.dcard{grid-area:1/1;width:100%;background:#fff;border:1px solid var(--line);
 border-radius:12px;overflow:hidden;box-shadow:0 14px 34px -18px rgba(0,32,50,.4);
 transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .38s ease;
 transform:translateX(26px) rotate(4deg) scale(.94);opacity:.55;z-index:1;pointer-events:none}
.dcard[data-front]{transform:none;opacity:1;z-index:3;pointer-events:auto}
.dcard[data-back]{transform:translateX(52px) rotate(7deg) scale(.9);opacity:.35;z-index:0}
.dcard-i{position:relative;line-height:0}
.dscene{display:block;width:100%;height:auto}
.dcard-p{position:absolute;right:10px;top:10px;background:#fff;color:var(--teald);
 font:700 12.5px/1 'Inter',sans-serif;border-radius:20px;padding:6px 10px;
 box-shadow:0 2px 8px rgba(0,32,50,.16)}
.dcard-b{padding:14px 16px 16px}
.dcard-b b{display:block;font-size:17px;font-weight:750;color:var(--teald);letter-spacing:-.02em}
.dcard-r{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--body);margin:4px 0 0}
.dcard-r .ico{color:var(--amber)}
.dcard-r em{font-style:normal;opacity:.65}
.dcard-b p{font-size:12px;color:var(--body);line-height:1.55;margin:8px 0 12px}
.slots{display:flex;gap:5px;margin:0 0 12px}
.slot{flex:1;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:6px;
 padding:7px 4px;font-family:'Inter',sans-serif;text-align:center}
.slot b{display:block;font-size:11.5px;color:var(--ink)}
.slot em{font-style:normal;font-size:10px;color:var(--body);opacity:.7}
.slot[aria-pressed=true]{background:var(--tint);border-color:var(--teal)}
.slot[aria-pressed=true] b{color:var(--teald)}
.slot:disabled{opacity:.42;cursor:default}
.slot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dbook{width:100%;cursor:pointer;background:var(--teal);color:#fff;border:0;border-radius:6px;
 padding:11px;font:700 13px/1 'Inter',sans-serif}
.dbook:hover{background:var(--teald)}
.dbook:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dnote{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--teald);
 background:var(--tint);border-radius:6px;padding:9px 10px}

/* ============================ SEASONAL RATES =========================== */
.rates{padding:18px}
.rate-set{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 16px}
.rate-f{display:flex;align-items:center;gap:8px}
.rate-f label{font-size:11.5px;font-weight:600;color:var(--ink)}
.rate-i{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);
 border-radius:5px;background:#fff;padding:0 8px}
.rate-i em{font-style:normal;font-size:12px;color:var(--body);opacity:.7}
.rate-i input{width:52px;border:0;background:none;font:650 13px/1 'Inter',sans-serif;color:var(--ink);
 padding:8px 2px;-moz-appearance:textfield}
.rate-i input::-webkit-outer-spin-button,.rate-i input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rate-i input:focus-visible{outline:2px solid var(--pblue);outline-offset:3px}
.rate-weeks{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.week{cursor:pointer;border:1px solid var(--line);border-radius:5px;background:#fff;padding:8px 2px;
 font-family:'Inter',sans-serif;text-align:center;transition:background .16s ease}
.week-l{display:block;font-size:9.5px;color:var(--body);opacity:.7;white-space:nowrap}
.week-v{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-top:4px;
 font-variant-numeric:tabular-nums}
/* Off, shoulder and peak as one ramp of the delivery blue, the way the
   application bands a rate calendar. */
.week[data-band=off]{background:var(--field)}
.week[data-band=sh]{background:var(--pbluet);border-color:var(--pbluel)}
.week[data-band=pk]{background:var(--pblue);border-color:var(--pblue)}
.week[data-band=pk] .week-l{color:#DEEBF8;opacity:.95}
.week[data-band=pk] .week-v{color:#fff}
.week:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rate-out{margin:16px 0 0;font-size:13px;color:var(--body)}
.rate-out b{color:var(--ink);font-size:17px;font-weight:750;font-variant-numeric:tabular-nums}
.rate-out span{margin-left:8px;font-size:12px;font-weight:600;color:var(--pgrnd)}
.rate-out span[data-down]{color:var(--predd)}

/* ============================ DOCUMENTS =============================== */
.docs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.doc{background:#fff;padding:16px}
.doc-h{display:flex;align-items:center;gap:9px;margin:0 0 12px}
.doc-h .av{width:28px;height:28px;border-radius:50%;background:var(--pbluet);color:var(--pblued);
 font:700 13px/28px 'Inter',sans-serif;text-align:center;flex:none}
.doc-h b{display:block;font-size:13px;color:var(--ink)}
.doc-h em{font-style:normal;font-size:11px;color:var(--body);opacity:.7}
.doc-h .pill{margin-left:auto;background:var(--pambt);color:var(--pambd)}
.doc-h .pill[data-s=done]{background:var(--pgrnt);color:var(--pgrnd)}
.doc-l{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.doc-l li{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--body);
 background:var(--paper);border-radius:6px;padding:8px 10px}
.doc-l li em{margin-left:auto;font-style:normal;font-size:10.5px;opacity:.7;font-variant-numeric:tabular-nums}
.doc-l .box{flex:none;width:15px;height:15px;border:1.5px solid var(--line);border-radius:3px;
 background:#fff;position:relative}
.doc-l li[data-done]{color:var(--ink)}
.doc-l li[data-done] .box{background:var(--pgrn);border-color:var(--pgrn)}
.doc-gate{grid-column:1/-1;background:#fff;padding:14px 16px;display:grid;
 grid-template-columns:22px 1fr;gap:2px 12px;border-top:1px solid var(--line)}
/* Held is red and released is green, which is the only two states the counter
   cares about. */
.doc-gate{border-left:3px solid var(--pred)}
.doc-gate[data-open]{border-left-color:var(--pgrn)}
.doc-gate .ico{color:var(--pred);grid-row:span 2;margin-top:2px}
.doc-gate[data-open] .ico{color:var(--pgrn)}
.doc-gate b{font-size:13px;color:var(--ink);display:block}
.doc-gate span{font-size:12px;color:var(--body);line-height:1.5}

/* ============================ RETURN LANES ============================ */
.lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
/* Four lanes, each one the colour of the state it holds: out on hire is blue,
   back on the yard amber, in inspection red, and fit to go out green. The count
   in the lane heading is the chip the application puts there. */
.lane{background:#fff;padding:14px 12px 16px;min-height:150px}
.lane h4{justify-content:space-between;border-bottom-color:var(--pbluel)}
.lane h4 b{font-size:11px;font-weight:700;color:var(--pblued);opacity:1;
 background:var(--pbluet);border-radius:20px;padding:1px 8px;font-variant-numeric:tabular-nums}
.lane[data-lane="0"] .ico{color:var(--pblue)}
.lane[data-lane="1"] h4{border-bottom-color:var(--pambl);color:var(--pambd)}
.lane[data-lane="1"] h4 b{color:var(--pambd);background:var(--pambt)}
.lane[data-lane="2"] h4{border-bottom-color:var(--predl);color:var(--predd)}
.lane[data-lane="2"] h4 b{color:var(--predd);background:var(--predt)}
.lane[data-lane="3"] h4{border-bottom-color:var(--pgrnl);color:var(--pgrnd)}
.lane[data-lane="3"] h4 b{color:var(--pgrnd);background:var(--pgrnt)}
.lane-c{display:grid;gap:6px;align-content:start}
.lcard{display:grid;grid-template-columns:18px 1fr;gap:3px 8px;background:var(--paper);
 border:1px solid var(--line);border-radius:6px;padding:8px 9px;
 transition:transform .3s ease,opacity .3s ease}
.lcard .ico{color:var(--pblue);grid-row:span 2}
.lcard b{font-size:11.5px;font-family:ui-monospace,monospace;color:var(--ink)}
.lcard em{font-style:normal;font-size:10.5px;color:var(--body);opacity:.75;grid-column:2}
.lane[data-lane="1"] .lcard{border-color:var(--pambl);background:var(--pambt)}
.lane[data-lane="1"] .lcard .ico{color:var(--pamb)}
.lane[data-lane="2"] .lcard{border-color:var(--predl);background:var(--predt)}
.lane[data-lane="2"] .lcard .ico{color:var(--pred)}
.lane[data-lane="3"] .lcard{border-color:var(--pgrnl);background:var(--pgrnt)}
.lane[data-lane="3"] .lcard .ico{color:var(--pgrn)}
.lcard[data-new]{animation:lin .38s ease}
@keyframes lin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ============================ CHECKOUT ================================ */
.chk{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.chk-r{background:#fff;padding:18px}
.chk-op{background:var(--tint)}
.chk-l{list-style:none;margin:0;padding:0}
.chk-l li{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:var(--body);
 padding:8px 0;border-bottom:1px solid var(--line)}
.chk-l li b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
.chk-fee b{color:var(--teald)}
.chk-t{display:flex;justify-content:space-between;gap:14px;margin:12px 0 0;font-size:13px;color:var(--body)}
.chk-t b{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
 font-variant-numeric:tabular-nums;line-height:1}
.chk-add{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.chk-add button{font:600 11.5px/1 'Inter',sans-serif;color:var(--teald);background:#fff;
 border:1px solid var(--line);border-radius:20px;padding:8px 12px;cursor:pointer}
.chk-add button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.chk-add button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.chk-n{font-size:11.5px;line-height:1.55;color:var(--body);margin:12px 0 0}
.chk-op .chk-l li{border-bottom-color:#C6E0E4}

/* ============================ MIGRATION =============================== */
.tl{padding:18px}
.tl-counts{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 18px}
.tl-c{flex:1 1 120px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px}
.tl-c b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
 font-variant-numeric:tabular-nums;line-height:1.1}
.tl-c span{font-size:11.5px;color:var(--body);opacity:.75}
.tl-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.tl-s{display:grid;grid-template-columns:22px 1fr;gap:4px 10px;background:#fff;
 border:1px solid var(--line);border-radius:6px;padding:11px 12px}
.tl-d{grid-row:span 3;width:16px;height:16px;border-radius:50%;border:2px solid var(--line);
 background:#fff;margin-top:2px}
.tl-s[data-done] .tl-d{background:var(--teal);border-color:var(--teal)}
.tl-s[data-now] .tl-d{border-color:var(--teal);box-shadow:0 0 0 4px rgba(8,144,160,.16)}
.tl-s b{font-size:13px;color:var(--ink)}
.tl-s em{font-style:normal;font-size:11px;color:var(--teald);font-weight:600}
.tl-x{font-size:11.5px;color:var(--body);opacity:.75;line-height:1.5}
.tl-bar{height:4px;border-radius:2px;background:var(--line);margin:16px 0 0;overflow:hidden}
.tl-bar span{display:block;height:100%;width:0;background:var(--teal);transition:width .5s ease}

/* ============================ EFFECTIVE TAKE ========================== */
.tk{padding:18px}
.tk-row{display:grid;grid-template-columns:96px 1fr 48px;align-items:center;gap:12px;margin:0 0 12px}
.tk-n{font-size:12px;color:var(--body);text-align:right;overflow:hidden;text-overflow:ellipsis}
.tk-bar{display:flex;height:30px;border-radius:0 4px 4px 0;overflow:hidden;background:var(--paper)}
.tk-s{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;
 transition:width .5s cubic-bezier(.22,.61,.36,1)}
.js .mk-take .tk-s{width:0 !important}
.js .mk-take[data-shown] .tk-s{width:var(--w) !important}
.tk-s em{font-style:normal;font-size:11px;font-weight:700;color:#fff;white-space:nowrap}
.tk-s i{position:absolute;bottom:-15px;left:0;font-style:normal;font-size:9.5px;color:var(--body);
 opacity:.7;white-space:nowrap;display:none}
.tk-fee{background:#E0A85C}.tk-res{background:#D98A2B}.tk-mod{background:#B96F1D}.tk-prc{background:#A46118}.tk-mon{background:#8F5413}
.tk-bod{background:var(--teal)}
.tk-t{font-size:13px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}

/* ============================ MINI SAVINGS QUIZ ======================= */
.sv{display:grid;grid-template-columns:1fr 1.1fr;gap:1px;background:var(--line)}
.sv-in{background:#fff;padding:18px}
.sv-h3{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--teald);
 font-weight:700;margin:0 0 14px}
.sv-f{margin:0 0 16px}
.sv-f label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin:0 0 2px}
.sv-h{display:block;font-size:11.5px;color:var(--body);opacity:.72;margin:0 0 8px}
.sv-r{display:flex;align-items:center;gap:9px}
.sv-u{font-size:13px;color:var(--body);opacity:.7;flex:none}
.sv-r input[type=number]{width:88px;flex:none;font:650 14px/1 'Inter',sans-serif;color:var(--ink);
 background:#fff;border:1px solid var(--line);border-radius:5px;padding:9px 10px;-moz-appearance:textfield}
.sv-r input[type=number]::-webkit-outer-spin-button,
.sv-r input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sv-r input[type=number]:focus-visible{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.sv-r input[type=range]{flex:1 1 auto;min-width:0;-webkit-appearance:none;appearance:none;
 background:transparent;height:22px;margin:0}
.sv-r input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line)}
.sv-r input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
.sv-r input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;
 border-radius:50%;background:var(--teal);border:2px solid #fff;box-shadow:0 0 0 1px var(--teal);
 margin-top:-7px;cursor:pointer}
.sv-r input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--teal);
 border:2px solid #fff;box-shadow:0 0 0 1px var(--teal);cursor:pointer}
.sv-out{background:var(--tint);padding:20px 18px}
.sv-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
 color:var(--teald);margin:0 0 8px}
.sv-v{display:block;font-size:clamp(38px,6vw,54px);font-weight:800;letter-spacing:-.04em;
 color:var(--ink);line-height:1}
.sv-s{display:block;font-size:13px;color:var(--body);line-height:1.55;margin:10px 0 18px;max-width:46ch}
.sv-bars{display:grid;gap:6px;margin:0 0 16px}
.sv-b{display:grid;grid-template-columns:88px 1fr 46px;align-items:center;gap:10px}
.sv-bn{font-size:11.5px;color:var(--body);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-bt{height:16px;background:#fff;border-radius:0 3px 3px 0;overflow:hidden}
.sv-bt i{display:block;height:100%;background:var(--teal);transition:width .3s ease}
.sv-bt i.sv-c{background:var(--amber)}
.sv-b b{font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sv-t{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:2px}
.sv-t li{background:#fff;border-radius:6px;padding:10px 12px}
.sv-t b{font-size:17px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:8px}
.sv-t span{font-size:11.5px;color:var(--body)}
.sv-why{font-size:11.5px;line-height:1.55;color:var(--body);opacity:.85;margin:14px 0 0;
 padding:10px 12px;background:var(--tint);border-radius:7px}
.sv-cta{margin:0}
.sv-cta .btn{font-size:13px;padding:11px 20px}

/* ---- the way out ------------------------------------------------------ */
/* Every node links to its capability page. A chevron and the page name, set as
   ink at rest, because the disc beside it is the node and nothing next to it
   should compete for the click. */
.os-go{flex:none;display:inline-flex;align-items:center;gap:4px;text-decoration:none;
 color:var(--teald);background:none;border:0;border-radius:0;padding:5px 2px;line-height:0;
 opacity:.5;transition:opacity .16s ease}
.os-go:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.os-go:focus-visible{outline:2px solid var(--ink);outline-offset:2px;opacity:1}
.os-go-t{font:600 11px/1 'Inter',sans-serif;padding-left:5px}

/* ============================ TRACKING ================================= */
/* The office view of a run that is still moving, and the same drawing again
   with a boundary around it. One set of styles, because the hardware and the
   integration are the same in both. */
.tr{display:grid;grid-template-columns:1.25fr 1fr;gap:1px;background:var(--line)}
/* The side panel is the taller column, so the map is centred in its cell
   rather than left stranded above a block of white. */
.tr-map{background:#fff;display:flex;align-items:center;width:100%;padding:12px}
.tr-map svg{display:block;width:100%;height:auto}
.tr-bg{fill:#E9ECED}
.tr-water{fill:#D6E6F2}
.tr-road{stroke:#fff;stroke-width:6;fill:none;stroke-linecap:round}
.tr-line{fill:none;stroke:#B6BFC3;stroke-width:2;stroke-dasharray:5 6}
.tr-trail{fill:none;stroke:#B6BFC3;stroke-width:2;stroke-dasharray:5 6}
.tr-depot{fill:var(--chrome)}
.tr-depotl{font:600 10px 'Inter',sans-serif;fill:var(--chrome2)}
.tr-zone{fill:rgba(27,127,214,.07);stroke:var(--pblue);stroke-width:2;stroke-dasharray:7 6}
.tr-zonel{font:700 10px 'Inter',sans-serif;fill:var(--pblued);letter-spacing:.08em;
 text-transform:uppercase}
/* Square for a delivery in blue, diamond for a pickup in amber. The same two
   marks the key beside the screenshot on the home page names. */
.tr-mk{fill:#fff;stroke:var(--pblue);stroke-width:2;stroke-linejoin:round}
.tr-di{stroke:var(--pamb)}
.tr-halo{fill:var(--pblue);opacity:0}
.tr-num{font:700 10px 'Inter',sans-serif;fill:var(--pblued)}
/* A closed stop leaves the map. That is the whole audit: what is left on the
   screen is the work that is left to do. */
.tr-stop{transition:opacity .4s ease,transform .4s ease}
.tr-stop[data-done]{opacity:0;transform-box:fill-box;transform-origin:center}
.tr-stop[data-miss] .tr-mk{stroke:var(--pred);stroke-width:2.6}
.tr-stop[data-miss] .tr-halo{fill:var(--pred);opacity:.2}
.tr-stop[data-miss] .tr-num{fill:var(--predd)}
/* The order that arrives mid-run. Collapsed rather than transparent in the
   list, so with JS off the panel is six stops and no blank row under them. */
.tr-add{opacity:0;transition:opacity .4s ease}
.tr-add[data-on]{opacity:1}
.tr-new{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-width:0 1px;
 overflow:hidden;transition:opacity .4s ease,max-height .4s ease,padding .4s ease}
.tr-new[data-on]{opacity:1;max-height:80px;padding-top:8px;padding-bottom:8px;border-width:1px}
.tr-van circle{fill:var(--pblued)}
.tr-van .vanico{color:#fff;stroke:#fff}
.tr-van{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.tr-dot circle{fill:#fff;stroke:var(--pblue);stroke-width:2}
.tr-dot .vanico{color:var(--pblue);stroke:var(--pblue)}
.mk-track[data-cross] .tr-roam circle{fill:var(--pred)}
.mk-track[data-cross] .tr-zone{stroke:var(--pred);fill:rgba(217,58,50,.06)}
.mk-track[data-cross] .tr-zonel{fill:var(--predd)}

.tr-side{background:#fff;padding:16px;display:grid;gap:8px;align-content:start}
.tr-h{display:flex;align-items:center;gap:6px;margin:0;font-size:10px;font-weight:800;
 letter-spacing:.11em;text-transform:uppercase;color:var(--chrome);
 padding-bottom:8px;border-bottom:1px solid var(--line)}
.tr-h b{margin-left:auto;font-size:11px;letter-spacing:0;color:var(--pblued);
 font-variant-numeric:tabular-nums}
.tr-h .ico{color:var(--pblue)}
.tr-stops,.tr-alerts{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:6px}
.tr-st{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:6px;
 padding:8px 10px;background:#fff;transition:opacity .4s ease,border-color .3s ease,background .3s ease}
.tr-st[data-done]{opacity:.28;border-style:dashed}
.tr-st[data-miss]{border-color:var(--predl);background:var(--predt)}
.tr-i{flex:none;width:20px;height:20px;border-radius:4px;background:var(--pbluet);color:var(--pblued);
 font:700 11px/20px 'Inter',sans-serif;text-align:center}
/* The list index carries the stop's own kind, so a pickup reads as a pickup
   without having to look back at the map. */
.tr-st[data-kind=pickup] .tr-i{border-radius:3px;background:var(--pambt);color:var(--pambd)}
.tr-st[data-kind=both] .tr-i{background:var(--pviot);color:var(--pviod)}
.tr-i .ico{vertical-align:-3px}
.tr-a{min-width:0;flex:1}
.tr-a b{display:block;font-size:12px;color:var(--ink);font-weight:600;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.tr-a em{font-style:normal;font-size:11px;color:var(--body);opacity:.72}
.tr-s{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
 color:var(--body);opacity:.6}
.tr-st[data-miss] .tr-s{color:var(--predd);opacity:1}
/* An alert that has not fired takes no room, so the panel does not open with a
   block of reserved space under a heading. */
.tr-al{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line);border-radius:6px;
 padding:0 10px;background:var(--pambt);opacity:0;max-height:0;border-width:0 1px;
 transform:translateY(-3px);overflow:hidden;
 transition:opacity .35s ease,transform .35s ease,max-height .35s ease,padding .35s ease}
.tr-al[data-on]{opacity:1;transform:none;max-height:120px;padding:8px 10px;border-width:1px}
.tr-none{display:none;font-size:11.5px;color:var(--body);opacity:.6;padding:2px 0}
.tr-alerts:not(:has(.tr-al[data-on])) .tr-none{display:block}
.tr-al .ico{flex:none;color:var(--pamb);margin-top:1px}
.tr-al b{display:block;font-size:12px;font-weight:700;color:var(--pambd)}
.tr-al em{font-style:normal;font-size:11px;line-height:1.45;color:var(--body);opacity:.85}
/* An out-of-zone alert is the one the application draws in red. */
.tr-al[data-sev=out]{background:var(--predt);border-color:var(--predl)}
.tr-al[data-sev=out] .ico{color:var(--pred)}
.tr-al[data-sev=out] b{color:var(--predd)}

/* ============================ RESPONSIVE ============================== */
@media(max-width:900px){
 .disp{grid-template-columns:1fr 1fr}
 .disp-sched{grid-column:1/-1}
 .rt,.comms,.docs,.chk,.sv{grid-template-columns:1fr}
 .lanes{grid-template-columns:1fr 1fr}
 .rate-weeks{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(max-width:900px){
 .tr{grid-template-columns:1fr}
}
@media(max-width:760px){
 .os{padding:16px}
 .tr-side{padding:14px}
 /* The value takes the whole width under its own label rather than being cut
    off in a 90px column: a truncated record makes the opposite point to the
    one the figure is making. */
 .os-rl{padding:4px 13px}
 .os-rl li{grid-template-columns:minmax(0,1fr) 15px;gap:3px 10px;padding:10px 0}
 .os-rv{grid-column:1;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.55}
 .os-rt{grid-column:2;grid-row:1/span 2;align-self:start;margin-top:2px}
 /* The field token drops under the stage it belongs to rather than being
    squeezed against it, and lines up with the label above it. */
 .os-b{flex-wrap:wrap;row-gap:2px}
 .os-led-w{margin-left:0;padding-left:41px;flex-basis:100%;white-space:normal}
 .disp{grid-template-columns:1fr}
 .mk-head{padding:11px 14px}
 .mk-bar{padding:12px 14px}
 .mk-tiles{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
 .uview,.rt-list,.proof,.rates,.tl,.tk,.sv-in,.sv-out,.doc,.disp-col{padding:14px}
 .urow{grid-template-columns:18px 56px 1fr;gap:8px}
 .urow .ust{grid-column:1/-1;text-align:left}
 .tk-row{grid-template-columns:80px 1fr 44px;gap:8px}
 .ucount-v{font-size:44px}
 .deck{min-height:396px}
 .deck{grid-template-columns:min(300px,88%)}
}
@media(prefers-reduced-motion:reduce){
 .mk *,.mk *::before,.mk *::after{animation:none !important;transition:none !important}
 .js .mk-take .tk-s{width:var(--w) !important}
}