/* Soldier Trucking - portal theme (SPEC_portal_theme.md v0.1; dark theme 2.34).
   Black, white, charcoal camo. Color means STATUS and nothing else.
   Every color is a token here; templates only name tokens (a status row's
   color_token, e.g. st-dock -> var(--st-dock) / var(--st-dock-bg)).
   2.34: two themes on <html data-theme>: light (:root, the paper look) and dark (the HUD console - the
   [data-theme="dark"] block near the end overrides tokens, nothing else). "device" = dark under
   prefers-color-scheme: dark. Both dark blocks are screen-only, so print is always light. The header band, the
   sign-in HUD (--hud-*) and the customer site never change with the theme. */

@font-face { font-family: "Oswald"; src: url("/static/fonts/oswald-latin-wght-normal.woff2") format("woff2");
             font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/barlow-latin-400-normal.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/barlow-latin-500-normal.woff2") format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/barlow-latin-600-normal.woff2") format("woff2");
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("/static/fonts/share-tech-mono-latin-400-normal.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }   /* SIL OFL, fonts/OFL-ShareTechMono.txt */

:root {
  --ink:#141311; --camo1:#1a1917; --camo2:#2d2b2c; --steel:#5c5b5d; --smoke:#8d8b89;
  --paper:#f3f2ef; --card:#fff; --line:#d9d7d3; --text:#1b1a18; --muted:#6a6866; --white:#fff;
  color-scheme: light;
  /* 2.34 roles (light = what these places always were): the strong fill and the text on it, buttons,
     the accent (the pricing console's highlight - ink on paper, --hud-accent in dark) */
  --on-ink:#fff; --ink-hover:#2d2b2c;
  --primary:#141311; --on-primary:#fff; --primary-hover:#2d2b2c;
  --accent:#141311; --on-accent:#fff; --accent-soft:#e7e5e1;
  --field:#fff; --field-line:#bdbab5; --on-status:#fff;
  --st-mix:62%;                 /* status text = the status color mixed toward --text, so it reads (>= 4.5:1) */
  --label-font:var(--display); --ground-image:none; --logo-filter:none;
  /* the pricing console's D83 split (light: monochrome - color means status) */
  --partner:#5c5b5d; --on-partner:#fff; --efs-seg:#d9d7d3; --on-efs-seg:#1b1a18; --ladder:#d9d7d3;
  --check:#c53030; --check-bg:#f9dcdc; --check-text:#1b1a18; --hot:#141311;
  /* the header band is the same in both themes */
  --hdr-text:#fff; --hdr-dim:#8d8b89; --hdr-line:#5c5b5d; --hdr-rule:#141311; --hdr-field:#fff; --hdr-field-text:#1b1a18;
  /* status = the only color on the page */
  --st-picked:#4b5563;  --st-picked-bg:#e8eaee;   /* Picked up, to dock */
  --st-inbound:#7c5e2a; --st-inbound-bg:#f3ead9;  /* Inbound from partner */
  --st-dock:#b7791f;    --st-dock-bg:#fbefd4;     /* On the dock */
  --st-out:#2b6cb0;     --st-out-bg:#dfeaf7;      /* Out for delivery */
  --st-deliv:#2f855a;   --st-deliv-bg:#dcf1e4;    /* Delivered */
  --st-exc:#c53030;     --st-exc-bg:#f9dcdc;      /* Exception */
  --display:"Oswald","Arial Narrow",Impact,sans-serif;
  --body:"Barlow","Segoe UI",Arial,sans-serif;
  --mono:"Share Tech Mono",Consolas,"Courier New",monospace;
  /* the sign-in HUD (2.30) - its accent is the one non-status color, here only */
  --hud-accent:#5CFF9D; --hud-on-accent:#06110a;
  --hud-black:#070908; --hud-card:rgba(6,8,7,.82); --hud-bar:rgba(0,0,0,.62); --hud-shade:rgba(0,0,0,.72);
  --hud-text:#eef2ef; --hud-grey:#c3cac5; --hud-muted:#a3aca6; --hud-dim:#7d8780;
  --hud-ring:rgba(205,225,212,.30); --hud-cross:rgba(205,225,212,.13); --hud-bracket:rgba(255,255,255,.75);
  --hud-scanline:rgba(255,255,255,.028);
  --hud-input:#0a0d0b; --hud-input-line:#2c3d33;
  --hud-red:#ff7b7b; --hud-red-bg:rgba(255,92,92,.10);
  --efs-charcoal:#15181D; --efs-red:#C5383A; --efs-on-red:#ffffff; --efs-red-text:#EE7A7C; --efs-white:#ffffff;
  --efs-card:rgba(21,24,29,.92); --efs-input:#0e1014; --efs-line:#3a3f48; --efs-ring:rgba(255,255,255,.22);
  --efs-cross:rgba(255,255,255,.10);
}

/* ── the dark theme (2.34): the HUD console palette. Screen only - print stays light. The two blocks are the
   same list (a test keeps them equal): [data-theme="dark"], and "device" when the device prefers dark. ─── */
@media screen {
  :root[data-theme="dark"] {
  color-scheme: dark;
  --ink:#e7efe9; --on-ink:#0a0c0b; --ink-hover:#c9d3cc; --camo2:#1b2620; --steel:#3a4a40; --smoke:#6f8178;
  --paper:#0a0c0b; --card:#070a08; --line:#1d2a22; --text:#e7efe9; --muted:#8fa197;
  --primary:#5CFF9D; --on-primary:#04140a; --primary-hover:#8dffbb;
  --accent:#5CFF9D; --on-accent:#04140a; --accent-soft:#0f2a1b;
  --field:#050706; --field-line:#2b3a31; --on-status:#0a0c0b; --st-mix:85%;
  --st-picked:#aab4c3;  --st-picked-bg:#1a1f27;
  --st-inbound:#d7b57a; --st-inbound-bg:#2a2214;
  --st-dock:#f2c14e;    --st-dock-bg:#2d2410;
  --st-out:#7ab8f5;     --st-out-bg:#0f2133;
  --st-deliv:#5fd394;   --st-deliv-bg:#0f2a1b;
  --st-exc:#ff7b7b;     --st-exc-bg:#2e1414;
  --label-font:var(--mono); --logo-filter:invert(1);
  --ground-image:linear-gradient(rgba(140,255,190,.035) 1px, transparent 1px),
                 linear-gradient(90deg, rgba(140,255,190,.035) 1px, transparent 1px);
  --partner:#4FB3FF; --on-partner:#03111f; --efs-seg:#e7efe9; --on-efs-seg:#0a0c0b; --ladder:#2a3b31;
  --check:#F2C14E; --check-bg:#281c06; --check-text:#f3e6c4; --hot:#F2C14E;
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root[data-theme="device"] {
  color-scheme: dark;
  --ink:#e7efe9; --on-ink:#0a0c0b; --ink-hover:#c9d3cc; --camo2:#1b2620; --steel:#3a4a40; --smoke:#6f8178;
  --paper:#0a0c0b; --card:#070a08; --line:#1d2a22; --text:#e7efe9; --muted:#8fa197;
  --primary:#5CFF9D; --on-primary:#04140a; --primary-hover:#8dffbb;
  --accent:#5CFF9D; --on-accent:#04140a; --accent-soft:#0f2a1b;
  --field:#050706; --field-line:#2b3a31; --on-status:#0a0c0b; --st-mix:85%;
  --st-picked:#aab4c3;  --st-picked-bg:#1a1f27;
  --st-inbound:#d7b57a; --st-inbound-bg:#2a2214;
  --st-dock:#f2c14e;    --st-dock-bg:#2d2410;
  --st-out:#7ab8f5;     --st-out-bg:#0f2133;
  --st-deliv:#5fd394;   --st-deliv-bg:#0f2a1b;
  --st-exc:#ff7b7b;     --st-exc-bg:#2e1414;
  --label-font:var(--mono); --logo-filter:invert(1);
  --ground-image:linear-gradient(rgba(140,255,190,.035) 1px, transparent 1px),
                 linear-gradient(90deg, rgba(140,255,190,.035) 1px, transparent 1px);
  --partner:#4FB3FF; --on-partner:#03111f; --efs-seg:#e7efe9; --on-efs-seg:#0a0c0b; --ladder:#2a3b31;
  --check:#F2C14E; --check-bg:#281c06; --check-text:#f3e6c4; --hot:#F2C14E;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.45 var(--body); color: var(--text); background-color: var(--paper); background-image: var(--ground-image);
       background-size: 40px 40px; }
a { color: var(--text); }
a:hover { color: var(--ink); }
.muted, .dim { color: var(--muted); font-weight: 400; }
.num, td.n, th.n { font-variant-numeric: tabular-nums; text-align: right; }
.disp, h1, h2, h3, th, .btn, button, .pill, .pro, .kv th, nav a, .tile .label, .tag {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; }

/* ── header: camo band, 64 px, 3 px black rule ─────────────────────────── */
.hdr { display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 20px;
       background: var(--camo1) url("/static/brand/camo_tile.png") repeat; color: var(--hdr-text);
       border-bottom: 3px solid var(--hdr-rule); }
.hdr .brand { display: flex; align-items: center; gap: 10px; color: var(--hdr-text); text-decoration: none; }
.hdr .brand img { width: 44px; height: 44px; }
.hdr .wordmark { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .08em; line-height: 1; }
.hdr .wordmark small { display: block; font-weight: 500; font-size: 11px; letter-spacing: .22em; color: var(--hdr-dim); margin-top: 3px; }
.hdr nav { flex: 1; display: flex; justify-content: center; gap: 26px; }
.hdr nav a { color: var(--hdr-text); text-decoration: none; font-weight: 500; font-size: 14px; padding: 20px 0 17px;
             border-bottom: 3px solid transparent; }
.hdr nav a.on, .hdr nav a:hover { border-bottom-color: var(--hdr-text); }
.hdr nav .soon { color: var(--hdr-dim); cursor: default; font-family: var(--display); text-transform: uppercase;
                 letter-spacing: .04em; font-weight: 500; font-size: 14px; padding: 20px 0 17px; border-bottom: 3px solid transparent; }
.hdr nav .soon small { font-size: 10px; letter-spacing: .1em; margin-left: 4px; }
.hdr .right { display: flex; align-items: center; gap: 12px; }
@media (max-width: 1100px) {      /* 2.34: a tablet - the nav scrolls inside the band; the page never scrolls sideways */
  .hdr { gap: 14px; padding: 0 12px; }
  .hdr .wordmark { display: none; }
  .hdr nav { min-width: 0; overflow-x: auto; justify-content: flex-start; gap: 18px; scrollbar-width: none; }
  .hdr nav a { white-space: nowrap; }
  .hdr input { width: 90px; }
  .hdr .who { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
}
.hdr input { width: 130px; padding: 6px 8px; border: 0; border-radius: 2px; font: 14px var(--body);
             background: var(--hdr-field); color: var(--hdr-field-text); }
.hdr .who { color: var(--hdr-dim); font-size: 13px; }
.hdr button { background: transparent; color: var(--hdr-text); border: 1px solid var(--hdr-line); padding: 5px 10px; }
.hdr button:hover { background: transparent; color: var(--hdr-text); border-color: var(--hdr-text); }

/* ── layout ─────────────────────────────────────────────────────────────── */
main { margin: 0 auto; padding: 18px 16px 30px; }                /* full desktop width (2.18) */
@media (max-width: 760px) { main { padding: 18px 20px 30px; } }    /* phone: as before */
h1 { font-size: 24px; font-weight: 600; margin: 4px 0 8px; }
h2 { font-size: 14px; font-weight: 600; letter-spacing: .08em; margin: 0 0 10px; }
.sub { color: var(--muted); margin: 0 0 14px; }
.card { background: var(--card); border: 1px solid var(--line); padding: 14px 16px; margin: 0 0 14px; }
.cols { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; align-items: start; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1000px) { .cols, .cols2 { grid-template-columns: 1fr; } }

/* ── buttons, inputs, tags ─────────────────────────────────────────────── */
button, .btn { display: inline-block; background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary);
               padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { background: var(--primary-hover); color: var(--on-primary); }
button.ghost, .btn.ghost { background: var(--card); color: var(--ink); }
button.ghost:hover, .btn.ghost:hover { background: var(--paper); color: var(--ink); }
button.danger, .btn.danger { background: var(--card); color: var(--st-exc); border-color: var(--st-exc); }
button.danger:hover { background: var(--st-exc-bg); }
button:disabled, .btn.disabled { background: var(--paper); color: var(--smoke); border-color: var(--line); cursor: default; }
input, select, textarea { font: 14px var(--body); color: var(--text); padding: 5px 7px; border: 1px solid var(--line);
                          border-radius: 2px; background: var(--field); accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
label { font-size: 13px; color: var(--muted); }
.tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 1px 6px; background: var(--ink); color: var(--on-ink); }
.tag.light { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.tag.exc { background: var(--st-exc); }
.msg { padding: 8px 12px; border: 1px solid var(--line); background: var(--card); margin-bottom: 12px; }
.msg.err { border-color: var(--st-exc); color: var(--st-exc); }

/* ── status pill: color comes from the status row's token ─────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 2px 8px;
        color: color-mix(in srgb, var(--c, var(--st-picked)) var(--st-mix), var(--text));
        background: var(--cb, var(--st-picked-bg)); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--st-picked)); }
.pill.prov { --c: var(--smoke); --cb: var(--paper); border: 1px dashed var(--line); }   /* provisional: grey, not a status color */

/* ── board: bucket tiles ───────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 6px 0 14px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { display: block; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--c);
        padding: 10px 14px 12px; text-decoration: none; color: var(--text); }
.tile:hover { border-color: var(--steel); border-top-color: var(--c); }
.tile.on { outline: 2px solid var(--ink); outline-offset: -1px; }
.tile .label { font-size: 13px; font-weight: 500; color: var(--muted); font-family: var(--label-font); }
.tile .count { font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .detail { font-size: 13px; color: var(--muted); }
.tile .act { margin-top: 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 12px;
        padding: 4px 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; }
.chip.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.toolbar input[type=search] { width: 320px; }
.toolbar .spacer { flex: 1; }

/* ── tables ─────────────────────────────────────────────────────────────── */
table.grid { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); }
table.grid th, table.grid td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.grid th { font-size: 12px; font-weight: 500; color: var(--muted); background: var(--paper); font-family: var(--label-font); }
table.grid td.n, table.grid th.n { text-align: right; }
table.grid tr:hover td { background: var(--paper); }
table.grid .pro a { font-family: var(--display); font-size: 16px; font-weight: 600; text-decoration: none; }
.two { display: block; font-size: 12px; color: var(--muted); font-family: var(--body); text-transform: none;
        letter-spacing: 0; font-weight: 400; }
.late { color: var(--st-exc); font-weight: 600; }
td.empty { text-align: center; color: var(--muted); padding: 26px; }
table.kv { border-collapse: collapse; width: 100%; }
table.kv th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 4px 14px 4px 0; white-space: nowrap; vertical-align: top; width: 38%; }
table.kv td { padding: 4px 0; text-align: left; }

/* ── shipment: head, status band, route, progress track ────────────────── */
.shead h1 { font-size: 30px; margin: 0 0 8px; }
.band { display: flex; align-items: baseline; gap: 14px; padding: 12px 16px; background: var(--c); color: var(--on-status); }
.band .what { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 22px; font-weight: 600; }
.facts { display: flex; gap: 22px; flex-wrap: wrap; padding: 8px 2px 0; color: var(--muted); font-size: 14px; }
.facts b { color: var(--text); font-weight: 600; }
.badges { display: flex; gap: 6px; margin: 8px 0 0; flex-wrap: wrap; }
.route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.route .party .role { font-size: 12px; color: var(--muted); font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; }
.route .party .name { font-family: var(--display); text-transform: uppercase; font-size: 20px; font-weight: 600; letter-spacing: .03em; }
.route .arrow { font-family: var(--display); font-size: 28px; color: var(--smoke); }
.track { display: flex; margin: 6px 0 2px; }
.step { flex: 1; text-align: center; position: relative; padding-top: 30px; }
.step::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 3px; background: var(--line); }
.step:first-child::before { display: none; }
.step.done::before, .step.implied::before, .step.current::before { background: var(--ink); }
.step .dot { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px;
             border-radius: 50%; background: var(--line); border: 3px solid var(--line); }
.step.done .dot { background: var(--ink); border-color: var(--ink); }
.step.implied .dot { background: var(--card); border-color: var(--ink); }
.step.current .dot { background: var(--st-deliv); border-color: var(--st-deliv); box-shadow: 0 0 0 5px var(--st-deliv-bg); }
.step .name { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; font-weight: 500; color: var(--muted); }
.step.done .name, .step.implied .name { color: var(--text); }
.step.current .name { color: color-mix(in srgb, var(--st-deliv) var(--st-mix), var(--text)); font-weight: 600; }
.step .when { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.closed-note { margin-top: 10px; color: var(--muted); font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }

/* ── history, documents, exceptions ────────────────────────────────────── */
table.hist td.ev { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-weight: 500; white-space: nowrap; }
table.hist tr.note td { color: var(--muted); }
.docs { display: flex; flex-wrap: wrap; gap: 12px; }
.docs figure { margin: 0; width: 180px; position: relative; }
.docs img, .docs .file { display: block; width: 180px; height: 135px; object-fit: cover; border: 1px solid var(--line); background: var(--paper); }
.docs .file { line-height: 135px; text-align: center; color: var(--muted); text-decoration: none; }
.docs .tag { position: absolute; top: 6px; left: 6px; }
.docs figcaption { font-size: 12px; color: var(--muted); padding-top: 3px; }
.exc { padding: 8px 0; border-bottom: 1px solid var(--line); }
.exc:last-child { border-bottom: 0; }
.exc.resolved { color: var(--muted); }
.exc-group h2 { display: flex; gap: 8px; align-items: center; }
form.inline { display: inline-flex; gap: 6px; align-items: center; }
form.resolve input { width: 260px; }
.footnote { border-left: 3px solid var(--ink); padding: 8px 12px; background: var(--card); color: var(--muted); font-size: 13px; }

/* ── forms (Add inbound, clean up, party mapping) ──────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
.form-grid label { display: flex; flex-direction: column; gap: 3px; }
.form-grid .wide { grid-column: span 2; }
/* Undeliver / Move this POD (2.25): the dock-or-truck choice, the side-by-side preview */
fieldset.where { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
fieldset.where legend { padding: 0; margin-bottom: 3px; }
.form-grid fieldset.where label { flex-direction: row; align-items: center; gap: 6px; }
table.compare th:first-child { width: 9em; }
.mapform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }


/* ── users / account (portal 2.12) ─────────────────────────────────────── */
.hdr a.who { text-decoration: none; }
.hdr a.who:hover { color: var(--hdr-text); }
table.users td.acts { white-space: nowrap; }
table.users td.acts form.inline + form.inline { margin-left: 4px; }
.temp-pw { border: 2px solid var(--ink); }
.temp-pw .pw { font-family: ui-monospace, Consolas, monospace; font-size: 26px; letter-spacing: .08em;
               user-select: all; margin: 4px 0 10px; }
.add-user { margin-top: 14px; }
.add-user form.inline { flex-wrap: wrap; gap: 12px; }
.account-form { max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.account-form label { display: flex; flex-direction: column; gap: 3px; }
.account-form input { padding: 8px; }
table.audit { margin-bottom: 14px; }

/* ── return to dock (portal 2.13) ──────────────────────────────────────── */
tr.struck td { color: var(--muted); }
tr.struck td:not(.why), tr.struck td:not(.why) a { text-decoration: line-through; }
.card.return form.inline { flex-wrap: wrap; }

/* ── system page (portal 2.14) ─────────────────────────────────────────── */
pre.log { font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all;
          background: var(--paper); border: 1px solid var(--line); padding: 8px 10px; max-height: 520px; overflow: auto; }

/* ── load plans calendar (portal 2.15) - square cells, no radius ──────────── */
.plans-head { display: flex; align-items: center; gap: 12px; position: relative; }
.plans-head h1 { display: flex; align-items: center; gap: 8px; margin: 0; }
.plans-head .daynav { text-decoration: none; color: var(--ink); padding: 0 4px; }
.cal-toggle { font: inherit; letter-spacing: inherit; text-transform: inherit; background: var(--card); color: var(--ink);
              border: 1px solid var(--line); padding: 2px 10px; }
.cal-toggle:hover, .cal-toggle[aria-expanded="true"] { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.cal-toggle .caret { font-size: .6em; vertical-align: middle; }
.plan-filter { display: flex; align-items: center; gap: 6px; }
.cal-pop { position: absolute; z-index: 20; margin-top: 4px; background: var(--card); border: 1px solid var(--ink);
           padding: 10px 12px; }
.cal-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cal-title { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 16px; min-width: 150px; text-align: center; }
.cal-grid { border-collapse: collapse; }
.cal-grid th { font-family: var(--display); font-size: 12px; font-weight: 500; color: var(--muted); padding: 2px 0; }
.cal-grid td { padding: 2px; }
.cal-day { position: relative; width: 44px; height: 44px; aspect-ratio: 1; border-radius: 0; padding: 3px;
           background: var(--card); color: var(--ink); border: 1px solid var(--line);
           display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
           font-family: var(--body); text-transform: none; letter-spacing: 0; }
.cal-day:hover, .cal-day:focus { background: var(--paper); color: var(--ink); outline: 2px solid var(--ink); outline-offset: -2px; }
.cal-day .dn { font-size: 13px; line-height: 1; }
.cal-day .cnt { align-self: flex-end; font-family: var(--display); font-size: 13px; font-weight: 600; line-height: 1; }
.cal-day.other { color: var(--smoke); }
.cal-day.today { border: 2px solid var(--ink); }
.cal-day.selected { outline: 2px solid var(--st-out); outline-offset: -2px; }
.cal-day.went-out { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cal-day.went-out:hover, .cal-day.went-out:focus { background: var(--ink-hover); color: var(--on-ink); }
.cal-day.planned { border: 2px solid var(--st-out); color: var(--st-out); }
.cal-day.planned .cnt { color: var(--st-out); }
.cal-day.not-out::after, .cal-key .k.not-out::after { content: ""; position: absolute; top: 0; right: 0;
           border-top: 12px solid var(--st-exc); border-left: 12px solid transparent; }
.cal-day[data-tip]:hover::before, .cal-day[data-tip]:focus::before, .cal-day.tip-on::before {
           content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
           white-space: nowrap; background: var(--ink); color: var(--on-ink); font-size: 12px; padding: 3px 7px; z-index: 30; }
.cal-key { font-size: 12px; color: var(--muted); margin: 6px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cal-key .k { position: relative; display: inline-block; width: 12px; height: 12px; border: 1px solid var(--line); background: var(--card); }
.cal-key .k.went-out { background: var(--ink); border-color: var(--ink); }
.cal-key .k.planned { border: 2px solid var(--st-out); }
.cal-key .k.today { border: 2px solid var(--ink); }
.cal-key .k.not-out::after { border-top-width: 7px; border-left-width: 7px; }
.upcoming { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.upcoming .up-label { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--muted); }
.upcoming .chip.up { text-decoration: none; }
.plan-sum { margin: -4px 0 8px; font-size: 14px; color: var(--muted); }
.plan-sum b { color: var(--text); }
.partner-routes { margin-top: 14px; }

/* ── dock check-in (portal 2.19) ───────────────────────────────────────── */
.arrival tr.done td { color: var(--muted); }
.card.arrival.dismissed { opacity: .55; }
.who-is-this form.inline { flex-wrap: wrap; }
.band .cust-sees { margin-left: auto; font-size: 13px; opacity: .85; }

/* ── footer ────────────────────────────────────────────────────────────── */
footer { text-align: center; color: var(--muted); font-size: 12px; padding: 18px 20px 26px; }
footer .stars { letter-spacing: .6em; color: var(--steel); font-size: 12px; }
footer img { height: 26px; opacity: .7; display: block; margin: 8px auto 0; filter: var(--logo-filter); }

/* ── sign-in "Tactical HUD" (2.30): login, temp password, the customer site ─────────
   The ONE place outside status where color is decoration (Marcus 10/2); change the accent in
   --hud-accent. Motion is CSS only and stops under prefers-reduced-motion (bottom of this block). */
body.hud { min-height: 100vh; display: flex; flex-direction: column; background: var(--hud-black);
           color: var(--hud-text); font-family: var(--body); }
.hud-bg { position: fixed; inset: 0; z-index: -3; background: var(--hud-black) url("/static/brand/camo_field.png") repeat;
          background-size: 1920px 1200px; image-rendering: pixelated; filter: brightness(.8) contrast(1.15); }
.hud-vignette { position: fixed; inset: 0; z-index: -2;
                background: radial-gradient(ellipse 75% 85% at 33% 50%, transparent 0 35%, var(--hud-shade) 100%); }
.hud-scan { position: fixed; inset: 0; z-index: 50; pointer-events: none;
            background: repeating-linear-gradient(to bottom, var(--hud-scanline) 0 1px, transparent 1px 3px); }
/* thin white brackets at the viewport's four corners */
.hud-frame { position: fixed; inset: 12px; z-index: 40; pointer-events: none; --b: var(--hud-bracket); --l: 22px; --w: 1px;
  background:
    linear-gradient(var(--b), var(--b)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / var(--w) var(--l) no-repeat; }

/* the bars */
.hud-top, .hud-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 0 34px; background: var(--hud-bar); font: 12px/1 var(--mono); letter-spacing: .16em; color: var(--hud-grey); }
.hud-top { height: 44px; }
.hud-bottom { height: 40px; font-size: 11px; }
.hud-left, .hud-right { display: flex; align-items: center; gap: 22px; white-space: nowrap; }
.hud-online { color: var(--hud-accent); }
.hud-dot { animation: hud-blink 1.6s steps(1) infinite; }
.hud-time { color: var(--hud-text); }
.hud-colon { animation: hud-blink 2s steps(1) infinite; }

/* the radar (left, centred at ~33% x) and the card (right) */
.hud-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(460px, 34%); align-items: center;
            padding: 28px 34px; gap: 24px; }
.hud-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hud-radar { position: relative; width: 520px; height: 520px; max-width: 100%; aspect-ratio: 1; }
.hud-radar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hud-radar .ring { fill: none; stroke: var(--hud-ring); stroke-width: 1.2; }
.hud-radar .ring.dash { stroke-dasharray: 4 6; }
.hud-radar .cross { stroke: var(--hud-cross); stroke-width: 1; }
.hud-radar .ticks line { stroke: var(--hud-ring); stroke-width: 1.2; }
.hud-radar .blip { fill: var(--hud-accent); opacity: 0; animation: hud-blip 4.5s ease-in-out infinite; }
.hud-radar .blip.b2 { animation-delay: 1.5s; }
.hud-radar .blip.b3 { animation-delay: 3s; }
.hud-radar .lbl { font: 11px var(--mono); letter-spacing: .14em; fill: var(--hud-grey); }
.hud-radar .lbl.dim { fill: var(--hud-dim); font-size: 10px; }
.hud-sweep { position: absolute; inset: 3.8%; border-radius: 50%;    /* r 250 of 260 */
  background: conic-gradient(from 0deg, transparent 0 295deg,
              color-mix(in srgb, var(--hud-accent) 4%, transparent) 300deg,
              color-mix(in srgb, var(--hud-accent) 30%, transparent) 360deg);
  animation: hud-sweep 6s linear infinite; }
.hud-sweep::after { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 50%;
                    background: linear-gradient(to top, transparent, var(--hud-accent)); transform: translateX(-50%); }
.hud-emblem { position: absolute; left: 50%; top: 50%; width: 150px; transform: translate(-50%, -50%); }
.hud-title { font: 700 44px/1 var(--display); letter-spacing: .12em; color: var(--hud-text); margin-top: 6px; }
.hud-motto { font: 13px var(--mono); letter-spacing: .18em; color: var(--hud-grey); }

.hud-card { width: 420px; max-width: 100%; justify-self: start; padding: 34px 34px 28px; display: flex; flex-direction: column;
  gap: 14px; color: var(--hud-text); --b: var(--hud-accent); --l: 18px; --w: 2px;
  background:
    linear-gradient(var(--b), var(--b)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / var(--w) var(--l) no-repeat,
    var(--hud-card); }
.hud-kicker { font: 12px var(--mono); letter-spacing: .16em; color: var(--hud-accent); overflow-wrap: anywhere; }
.hud-card h1 { font: 600 26px/1.1 var(--display); letter-spacing: .08em; margin: 0 0 4px; color: var(--hud-text); }
.hud-card a { color: var(--hud-accent); }
.hud-or { font: 12px var(--mono); letter-spacing: .16em; color: var(--hud-muted); text-align: center; }
.hud-req, .hud-note, .hud-soon { font-size: 14px; color: var(--hud-muted); margin: 0; }
.hud-soon { font-size: 16px; color: var(--hud-text); line-height: 1.5; }
.hud-err { margin: 0; padding: 10px 12px; font-size: 14px; color: var(--hud-red); background: var(--hud-red-bg);
           border-left: 3px solid var(--hud-red); }
.hud-hint { display: block; font-size: 11px; color: var(--hud-muted); letter-spacing: .08em; margin-top: 2px; }
.hud-card .login-form { display: flex; flex-direction: column; gap: 14px; }
.hud-card label { display: block; font: 12px var(--mono); letter-spacing: .16em; color: var(--hud-grey); }
.hud-card input { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 12px; font: 16px var(--body);
                  color: var(--hud-text); background: var(--hud-input); border: 1px solid var(--hud-input-line); border-radius: 0; }
.hud-card input:hover { border-color: var(--hud-grey); }
.hud-card button, .hud-google { min-height: 44px; border-radius: 0; font: 600 15px var(--display); letter-spacing: .14em;
                                text-transform: uppercase; cursor: pointer; }
.hud-card .login-form button { background: var(--hud-accent); color: var(--hud-on-accent); border: 0; padding: 10px; margin-top: 4px; }
.hud-card .login-form button:hover { filter: brightness(1.08); }
.hud-google { display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 10px;
              border: 1px solid var(--hud-accent); color: var(--hud-accent); background: transparent; }
.hud-card a.hud-google { color: var(--hud-accent); }
.hud-google:hover { background: color-mix(in srgb, var(--hud-accent) 10%, transparent); }
.hud-card details.pw-login summary { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; list-style: none; font: 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hud-muted); }
.hud-card details.pw-login summary::-webkit-details-marker { display: none; }
.hud-card details.pw-login summary::before { content: "— "; }
.hud-card details.pw-login summary::after { content: " ▸ —"; }
.hud-card details.pw-login[open] summary::after { content: " ▾ —"; }
.hud-card details.pw-login[open] summary { margin-bottom: 8px; }
.hud-logout { margin: 0; }
.hud-card .hud-logout button { width: 100%; background: transparent; color: var(--hud-muted); border: 1px solid var(--hud-input-line); }
/* focus: always visible, in the accent */
.hud a:focus-visible, .hud button:focus-visible, .hud input:focus-visible, .hud summary:focus-visible {
  outline: 2px solid var(--hud-accent); outline-offset: 2px; }
.hud input:focus { border-color: var(--hud-accent); }

@keyframes hud-sweep { to { transform: rotate(360deg); } }
@keyframes hud-blip { 0%, 100% { opacity: 0; } 20%, 45% { opacity: .95; } 70% { opacity: 0; } }
@keyframes hud-blink { 50% { opacity: .25; } }

/* under ~1100 px: the radar shrinks and sits above the card */
@media (max-width: 1100px) {
  .hud-main { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; padding: 22px 24px 30px; }
  .hud-card { justify-self: center; }
  .hud-radar { width: 320px; height: 320px; }
  .hud-emblem { width: 96px; }
  .hud-title { font-size: 34px; }
}
/* phone / dock tablet: full-width card, the radar a small header mark, the bar = online + clock */
@media (max-width: 760px) {
  .hud-top, .hud-bottom { padding: 0 16px; }
  .hud-opt { display: none; }
  .hud-main { padding: 16px 16px 24px; gap: 16px; align-content: start; }
  .hud-mark { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
  .hud-radar { width: 96px; height: 96px; }
  .hud-radar .lbl, .hud-radar .ticks { display: none; }
  .hud-emblem { width: 40px; }
  .hud-title { font-size: 26px; margin: 0; }
  .hud-motto { flex-basis: 100%; text-align: center; font-size: 11px; }
  .hud-card { width: 100%; padding: 26px 20px 22px; }
  .hud-frame { inset: 6px; --l: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-sweep, .hud-dot, .hud-colon, .hud-radar .blip { animation: none !important; }
  .hud-radar .blip { opacity: .85; }
  .hud-sweep { transform: rotate(40deg); }
}

/* Pickup requests (2.28): the form - quick on a laptop and on a tablet - and the type-ahead */
.pickup-form fieldset.card { border: 0; margin: 0 0 12px; }
.pickup-form legend { font-family: var(--display); letter-spacing: .06em; padding: 0 0 6px; }
.pickup-form textarea { width: 100%; }
.pickup-form .date-quick { display: flex; gap: 8px; align-items: end; }
.pickup-form .form-actions button { padding: 10px 26px; font-size: 15px; }
.suggest-wrap { position: relative; }
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 2px 0 0; padding: 0; list-style: none;
           background: var(--card); border: 1px solid var(--line); max-height: 260px; overflow-y: auto; }
.suggest li { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.suggest li:hover { background: var(--st-picked-bg); }
form.suggestion { display: block; margin: 6px 0; }
@media (max-width: 800px) { .pickup-form .form-grid { grid-template-columns: 1fr 1fr; } }
.date-note { display: block; font-size: 12px; color: var(--muted); }
.date-note[hidden] { display: none; }             /* 2.37.1: display:block would beat [hidden] */
.date-note.warn { color: var(--st-exc); font-weight: 600; }
.bol-consignee { margin-top: 4px; font-size: 13px; }
/* Board (2.29): the status chips, the Pickups section */
.status-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.status-chips .status-chip { border-left: 4px solid var(--c); }
.status-chips .status-chip.on { background: var(--cb); }
.status-chips .status-chip.zero { opacity: .55; }
.chip.clear { color: var(--st-exc); }
.board-pickups h2 .toggle { text-decoration: none; }
.board-pickups h2 .small { font-size: 13px; margin-left: 10px; }
.board-pickups-table tbody tr[data-href] { cursor: pointer; }
.unassigned { color: var(--st-exc); font-weight: 600; }

/* Edit details (2.31): one form, a card per group; the driver's value beside each box */
.edit-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; align-items: start; }
.edit-details fieldset.card { border: 0; margin: 0; display: grid; gap: 10px; }
.edit-details fieldset.reason { grid-column: 1 / -1; }
.edit-details legend { font-family: var(--display); letter-spacing: .06em; padding: 0 0 6px; }
.edit-details label { display: grid; gap: 4px; }
.edit-details input, .edit-details select, .edit-details textarea { max-width: 520px; width: 100%; }
.edit-details .row3 { display: grid; grid-template-columns: 2fr 70px 130px; gap: 10px; max-width: 520px; }
.edit-details .edit-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.edit-details .edit-meta-row { margin: 0; }
.edit-details .reason { max-width: 560px; }
@media (max-width: 700px) { .edit-details { grid-template-columns: minmax(0, 1fr); } .edit-details .row3 { grid-template-columns: 1fr 70px; } }

/* ── special instructions (portal 2.32): the exception token - attention, not a status ── */
details.si { display: inline-block; position: relative; vertical-align: middle; }
details.si > summary { list-style: none; cursor: pointer; white-space: nowrap; }
details.si > summary::-webkit-details-marker { display: none; }
details.si > summary:focus-visible { outline: 2px solid var(--st-exc); outline-offset: 1px; }
details.si .si-text { position: absolute; z-index: 30; left: 0; top: 100%; margin-top: 4px; width: max-content;
  max-width: min(440px, 86vw); padding: 8px 10px; background: var(--card); color: var(--text);
  border: 2px solid var(--st-exc); white-space: pre-line; font: 500 14px/1.4 var(--body); text-transform: none;
  letter-spacing: 0; }
.si-block { border: 2px solid var(--st-exc); background: var(--st-exc-bg); padding: 8px 12px; margin: 8px 0 0; }
.si-block h3 { margin: 0 0 4px; font-size: 14px; color: color-mix(in srgb, var(--st-exc) var(--st-mix), var(--text)); }
.si-block .si-text { white-space: pre-line; font-weight: 600; }
.si-block .si-src { font-size: 12px; }

/* ── pricing (portal 2.33): plain, tokens only; a warning uses the exception token ── */
.pricing-tabs { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.pricing-tabs .tabs { display: flex; gap: 14px; flex-wrap: wrap; }
.pricing-tabs .tabs a { text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.pricing-tabs .tabs a.on { border-bottom-color: var(--ink); font-weight: 600; }
.pricing-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.pricing-form fieldset.where { margin-top: 10px; }
.pricing-lines tr.headline td { font-family: var(--display); font-size: 26px; font-weight: 600; }
.pricing-lines tr.warn th, .pricing-lines tr.warn td { color: var(--st-exc); font-weight: 600; }
.save-quote { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-top: 10px; }
.save-quote label { display: flex; flex-direction: column; gap: 3px; }
.pricing-params { max-width: 860px; }
.pricing-result .small, .pricing-form .small, .pricing-params .small, .card .muted.small { font-size: 12px; }

/* ── account menu (2.34): Account, the theme, in the header ─────────────── */
details.acct-menu { position: relative; }
details.acct-menu > summary { list-style: none; cursor: pointer; }
details.acct-menu > summary::-webkit-details-marker { display: none; }
details.acct-menu > summary::after { content: " \25BE"; font-size: 10px; }
details.acct-menu > summary:hover, details.acct-menu[open] > summary { color: var(--hdr-text); }
.acct-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 230px; padding: 10px 12px;
            display: flex; flex-direction: column; gap: 8px; background: var(--card); color: var(--text);
            border: 1px solid var(--ink); font-size: 14px; }
.acct-pop a { color: var(--text); }
.acct-pop .acct-label { font-family: var(--label-font); text-transform: uppercase; letter-spacing: .1em; font-size: 11px;
                        color: var(--muted); }
.theme-pick { display: flex; flex-direction: column; gap: 4px; }
.acct-pop .theme-pick button { text-align: left; background: var(--card); color: var(--text); border: 1px solid var(--line);
                          padding: 6px 10px; }
.acct-pop .theme-pick button:hover { background: var(--paper); color: var(--text); border-color: var(--ink); }
.acct-pop .theme-pick button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ── pricing console (2.34, the PricingLtl / PricingD83 mockups): the same layout in both themes ─────────── */
.console { display: flex; flex-direction: column; gap: 18px; }
.console-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.console-tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--field-line); }
.console-tabs a { padding: 12px 20px; color: var(--text); text-decoration: none; font: 500 14px var(--display);
                  letter-spacing: .14em; text-transform: uppercase; }
.console-tabs a:hover { background: var(--accent-soft); color: var(--text); }
.console-tabs a.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.console-tabs a.data { border-left: 1px solid var(--field-line); }
.console-status { display: flex; gap: 20px; flex-wrap: wrap; font: 12px var(--mono); letter-spacing: .16em;
                  text-transform: uppercase; color: var(--muted); }
.console-status .live, .live-note .live { color: var(--accent); }
.console-note { margin: -8px 0 0; font-size: 13px; color: var(--muted); }
.console-grid { display: grid; grid-template-columns: minmax(340px, 480px) minmax(0, 1fr); gap: 18px; align-items: start; }
.console-grid.d83 > form { display: contents; }          /* the lane + terms form; the results panel sits beside it */
.console-grid .lane-panel { grid-column: 1 / -1; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.console .panel { background: var(--card); border: 1px solid var(--line); padding: 24px 26px; display: flex;
                  flex-direction: column; gap: 16px; min-width: 0; }
.console .kicker { font: 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.console .mono, .console .lbl { font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.console .lbl { font-size: 11px; color: var(--muted); }
.console label.zfield, .console label.mfield { display: flex; flex-direction: column; gap: 8px; font: 12px var(--mono);
                  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.console input.zin { width: 100%; min-height: 64px; padding: 10px 16px; font: 400 40px/1 var(--mono); letter-spacing: .12em;
                     color: var(--text); background: var(--field); border: 1px solid var(--field-line); border-radius: 2px; }
.console input.zin::placeholder { color: var(--line); }
.console input.zin:focus { outline: none; border-color: var(--ink); }
.zgroup:has(.zip-tag.ok) input.zin { border-color: var(--accent);
                  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent); }
.zgroup:has(.zip-tag.partner) input.zin { border-color: var(--partner);
                  box-shadow: 0 0 0 1px color-mix(in srgb, var(--partner) 25%, transparent), 0 0 18px color-mix(in srgb, var(--partner) 12%, transparent); }
.zgroup:has(.zip-tag.bad) input.zin { border-color: var(--st-exc); }
.zgroup { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.zip-tag { min-height: 20px; font: 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.zip-tag .ok-mark { color: var(--accent); }
.zip-tag .dim { color: var(--muted); }
.zip-tag .net { color: var(--partner); }
.zip-tag.bad { color: color-mix(in srgb, var(--st-exc) var(--st-mix), var(--text)); }
.chevrons { display: flex; align-items: center; gap: 10px; font: 600 18px/1 var(--display); letter-spacing: .3em; color: var(--accent); }
.chevrons::before, .chevrons::after { content: ""; flex: 1; height: 1px; }
.chevrons::before { background: linear-gradient(90deg, transparent, var(--accent)); }
.chevrons::after { background: linear-gradient(90deg, var(--accent), transparent); }
.chevrons.partner { color: var(--partner); }
fieldset.seg { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.seg legend { padding: 0; margin-bottom: 10px; }
.seg-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.seg-row input, .seg-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-row label { display: flex; align-items: center; justify-content: center; min-height: 56px; cursor: pointer;
                 font: 500 22px var(--display); color: var(--text); background: var(--field); border: 1px solid var(--field-line); }
.seg-row label:hover { border-color: var(--ink); }
.seg-row input:checked + label { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
.seg-row input:focus-visible + label, .seg-tabs input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.seg-tabs { display: inline-flex; align-self: flex-start; border: 1px solid var(--field-line); }
.seg-tabs label { display: flex; align-items: center; min-height: 40px; padding: 0 16px; cursor: pointer; color: var(--muted);
                  font: 500 13px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.seg-tabs input:checked + label { background: var(--accent-soft); color: var(--text); }
.console .small { font-size: 13px; color: var(--muted); }
.live-note { margin-top: auto; font: 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.console input.min { min-height: 48px; padding: 8px 12px; font: 22px var(--mono); color: var(--text); background: var(--field);
                     border: 1px solid var(--field-line); border-radius: 2px; width: 100%; }
.console input.min:focus { outline: none; border-color: var(--accent); }
.console .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.console .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line);
                       padding-top: 14px; }
.console .toggle-row label.chk { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); }
.console .toggle-row input[type=checkbox] { width: 20px; height: 20px; }
.console .toggle-row input.min { width: 150px; }
.console .toggle-row:not(:has(input[type=checkbox]:checked)) input.min { opacity: .45; }
@supports selector(:has(a)) {              /* the box for the chosen revenue mode (both, where :has is missing) */
  .console .rev-fields.flat { display: none; }
  .console form:has(#mode-flat:checked) .rev-fields.pieces { display: none; }
  .console form:has(#mode-flat:checked) .rev-fields.flat { display: grid; }
}
.console .rev-line { font: 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; border-top: 1px solid var(--line);
                     padding-top: 14px; min-height: 20px; }
.console .rev-line b { color: var(--accent); font-weight: 400; }
.lane-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr); align-items: start; }
.lane-row .chev { padding-top: 40px; text-align: center; font: 600 18px var(--display); letter-spacing: .2em; color: var(--accent); }
.lane-row .chev.partner { color: var(--partner); }
.lane-row input.zin { font-size: 32px; min-height: 58px; }
.lane-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dir-ctl { display: flex; gap: 8px; align-items: center; }
.console button.dir { min-height: 36px; padding: 0 14px; background: transparent; color: var(--accent); border: 1px solid var(--accent);
                      font: 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.console button.dir:hover { background: var(--accent-soft); color: var(--accent); }
.console button.dir.auto { color: var(--muted); border-color: var(--field-line); }
.share { display: flex; flex-direction: column; gap: 8px; }
.share .bar { display: flex; height: 14px; background: var(--line); }
.share .bar span { width: var(--w); }
.share .bar .s { background: var(--accent); }
.share .bar .p { background: var(--partner); }
.share .legend { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 12px var(--mono);
                 letter-spacing: .12em; text-transform: uppercase; }
.share .legend .s { color: var(--accent); }
.share .legend .p { color: var(--partner); }
/* results */
#pricing-result { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.console .msg { margin: 0; }
.rate-card { flex-direction: row !important; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; }
.rate-big { font: 700 88px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums;
            text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 22%, transparent); }
.rate-big.contact { font-size: 56px; }
.rate-sub { margin-top: 8px; font: 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rate-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.rate-tags .tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ctag { padding: 6px 12px; border: 1px solid var(--field-line); color: var(--text); font: 12px var(--mono); letter-spacing: .14em;
        text-transform: uppercase; }
.ctag.hot { border-color: var(--hot); color: var(--hot); }            /* outside metro +15% - a markup, not a warning */
.tiles3, .tiles4 { display: grid; gap: 16px; }
.tiles3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ctile { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--k, var(--ink)); padding: 16px 18px; min-width: 0; }
.tiles4 .ctile { background: transparent; border: 0; border-top: 3px solid var(--k, var(--ink)); padding: 10px 0 0; }
.ctile .v { font: 600 36px/1.15 var(--display); font-variant-numeric: tabular-nums; color: var(--ink); }
.ctile.accent { --k: var(--accent); }
.ctile.accent .v { color: var(--accent); }
.ctile.partner { --k: var(--partner); }
.ctile.partner .v { color: var(--partner); }
.ctile .d { font-size: 13px; color: var(--muted); }
.ends { display: grid; grid-template-columns: 150px repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: 15px; }
.ends .h { font: 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px;
           border-bottom: 1px solid var(--line); }
.ends .k { color: var(--muted); }
.ends .n { font-variant-numeric: tabular-nums; }
.ends-foot { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.ends-foot b { color: var(--text); font-weight: 600; }
.ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 130px; }
.ladder .rung { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.ladder .amt { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ladder .barv { height: var(--h); min-height: 3px; background: var(--ladder); }
.ladder .n { font: 11px var(--mono); letter-spacing: .1em; color: var(--muted); }
.ladder .rung.on .amt { color: var(--ink); font-weight: 600; }
.ladder .rung.on .barv { background: var(--accent); }
.splitbar { display: flex; height: 44px; font: 600 15px var(--display); letter-spacing: .08em; text-transform: uppercase; overflow: hidden; }
.splitbar span { width: var(--w); display: flex; align-items: center; padding-left: 10px; white-space: nowrap; overflow: hidden; }
.splitbar .p { background: var(--partner); color: var(--on-partner); }
.splitbar .s { background: var(--accent); color: var(--on-accent); }
.splitbar .e { background: var(--efs-seg); color: var(--on-efs-seg); }
.check { display: flex; gap: 12px; align-items: baseline; padding: 12px 16px; background: var(--check-bg); border: 1px solid var(--check); }
.check b { font: 600 14px var(--display); letter-spacing: .14em; text-transform: uppercase;
           color: color-mix(in srgb, var(--check) var(--st-mix), var(--text)); }
.check span { font-size: 14px; color: var(--check-text); }
.console-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; align-items: flex-end; }
.console-actions .save-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-right: auto; }
.console-actions .save-meta label { display: flex; flex-direction: column; gap: 3px; font: 11px var(--mono); letter-spacing: .14em;
                                    text-transform: uppercase; color: var(--muted); }
.console-actions .save-meta input { min-height: 40px; }
.console .btn-c { min-height: 48px; padding: 0 22px; font: 500 14px var(--display); letter-spacing: .16em; text-transform: uppercase;
                  display: inline-flex; align-items: center; }
.console .btn-c.ghost { background: transparent; color: var(--text); border: 1px solid var(--field-line); }
.console .btn-c.outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.console .btn-c.ghost:hover, .console .btn-c.outline:hover { background: var(--accent-soft); }
.console .btn-c.go { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); font-weight: 600; }
.console .btn-c.go:hover { background: var(--primary-hover); color: var(--on-primary); }
details.lines.panel { display: block; padding: 14px 26px; }
details.lines summary { cursor: pointer; font: 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
details.lines table { margin-top: 8px; }
@media (max-width: 1100px) {
  .console-grid { grid-template-columns: minmax(0, 1fr); }
  .tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lane-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lane-row .chev { padding: 4px 0; transform: rotate(90deg); }
  .tiles3 { grid-template-columns: minmax(0, 1fr); }
  .rate-big { font-size: 64px; }
  .ends { grid-template-columns: 110px repeat(2, minmax(0, 1fr)); font-size: 14px; }
  .seg-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── print (2.34): always the light paper look, the result without the controls ─────────────── */
@media print {
  .no-print, .hdr, footer, .console-tabs, .console-status, .console-actions, .live-note, details.lines summary { display: none !important; }
  .console-grid { grid-template-columns: minmax(0, 1fr); }
  .rate-big { text-shadow: none; }
}

/* ── quote -> customer -> pickup (portal 2.36) ─────────────────────────── */
.quote-status { vertical-align: middle; }
.rates-changed { border-color: var(--ink); }
table.quote-compare, table.quote-ladder { width: auto; min-width: 420px; margin: 8px 0 12px; }
.apply-quote { margin-top: 12px; }
.quote-panel h2 a { text-decoration: none; }
.quoted-text { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0 0; }
.from-quote { border-color: var(--ink); }
.customer-quote { max-width: 860px; padding: 26px 30px; }
.customer-quote .cq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 14px; }
.customer-quote .cq-head img { width: 150px; height: auto; filter: var(--logo-filter); }
.customer-quote .cq-head img.logo-efs { width: auto; height: auto; max-width: min(420px, 50%); max-height: 185px;
  filter: none; background: var(--white); padding: 4px 6px; }       /* its own red / black - never inverted */
.customer-quote .cq-title { font: 600 26px var(--display); letter-spacing: .06em; }
.customer-quote .cq-brand { font: 500 14px var(--display); letter-spacing: .12em; }
.customer-quote table.kv { max-width: 460px; margin-bottom: 14px; }
.customer-quote .cq-lane { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin: 10px 0 16px; }
.customer-quote .cq-lane .role, .customer-quote .cq-rate .role { font: 500 12px var(--display); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.customer-quote .cq-lane .name { font: 600 20px var(--display); letter-spacing: .03em; text-transform: uppercase; }
.customer-quote .cq-lane .arrow { font: 28px var(--display); color: var(--smoke); }
.customer-quote .cq-rate { display: flex; justify-content: space-between; align-items: baseline; border: 2px solid var(--ink);
  padding: 10px 16px; margin: 0 0 14px; }
.customer-quote .cq-rate b { font: 700 34px var(--display); font-variant-numeric: tabular-nums; }
.customer-quote .cq-contact { font-size: 14px; border-top: 1px solid var(--line); padding-top: 10px; }

/* ── board: tick boxes, shipments and pickups alike (2.37: tablet-sized) ─────── */
table.grid td > input[type=checkbox], table.grid th.pick > input[type=checkbox] { width: 20px; height: 20px; margin: 0; cursor: pointer; }
table.grid td.pick, table.grid th.pick { width: 34px; text-align: center; }
.pickup-assign { margin: 10px 0 0; }

/* ── the customer site (portal 2.38): its own plain header - the camo band is Soldier's, and an EFS customer
   sees nothing of Soldier's. Tokens only, so Light / Dark as staff have. ───────────────────────────────── */
.chdr { display: flex; align-items: center; gap: 22px; min-height: 64px; padding: 8px 20px; background: var(--card);
        border-bottom: 3px solid var(--ink); flex-wrap: wrap; }
.chdr .cbrand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.chdr .cbrand img { height: 40px; width: auto; }
.chdr .cbrand img.logo-soldier { filter: var(--logo-filter); }
.chdr .cbrand img.logo-efs { background: var(--white); padding: 3px 5px; }
.chdr .cname { font: 600 18px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.chdr .cname small { display: block; font: 500 11px var(--display); letter-spacing: .2em; color: var(--muted); }
.chdr nav { flex: 1; display: flex; gap: 22px; }
.chdr nav a { color: var(--text); text-decoration: none; font: 500 14px var(--display); letter-spacing: .06em; text-transform: uppercase;
              padding: 6px 0; border-bottom: 3px solid transparent; }
.chdr nav a.on, .chdr nav a:hover { border-bottom-color: var(--ink); }
.chdr .acct-menu summary { cursor: pointer; color: var(--muted); }
.cfoot { text-align: center; color: var(--muted); font-size: 12px; padding: 18px 20px 26px; }
/* 2.40: the EFS customer host's pre-login pages - the EFS palette (charcoal ground, EFS red accent, white text) as
   --hud-* overrides; the white EFS logo on the dark ground. */
body.hud-efs { --hud-accent: var(--efs-red); --hud-on-accent: var(--efs-on-red); --hud-black: var(--efs-charcoal);
  --hud-text: var(--efs-white); --hud-link: var(--efs-red-text); --hud-card: var(--efs-card); --hud-input: var(--efs-input);
  --hud-input-line: var(--efs-line); --hud-ring: var(--efs-ring); --hud-cross: var(--efs-cross); }
.hud-efs .hud-bg { background-image: none; }
.hud-efs .hud-card a, .hud-efs .hud-kicker, .hud-efs .hud-online { color: var(--hud-link); }
.hud-emblem-efs { width: 300px; }