/* ══════════════════════════════════════════════════════════════════════════
   TALLY — theme bridge  (loads AFTER style.css)

   style.css was written dark-first for "Contento's Database" and drives ~640
   colour decisions through its own variables (--bg, --surface, --primary, …).
   Rather than rewrite 4,800 lines at once, this layer re-points those variables
   at the brand tokens in batsford-tokens.css. Everything already using a
   variable comes across for free; the ~185 hardcoded hex values and ~319 rgba()
   literals still in style.css do not, and are Phase 2.

   Light is now the default, per BRAND.md — the dark block below keeps the old
   theme working for anyone who prefers it, in brand colours rather than red.

   Structure:
     1. Legacy variable bridge (light + dark)
     2. Base — background, type
     3. Shell — icon rail, mobile header
     4. Dashboard
     5. Shared components touched by the above
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Legacy variable bridge ─────────────────────────────────────────── */
:root,
html[data-theme="light"] {
  --bg:               var(--bf-bg);
  --surface:          var(--bf-surface);
  --surface-solid:    var(--bf-surface);
  --surface-raised:   var(--bf-surface-alt);
  --surface-sunk:     var(--bf-surface-sunk);
  --surface-overlay:  var(--bf-surface);
  --border:           var(--bf-border);
  --border-subtle:    var(--bf-border);
  --border-red:       var(--bf-coral-tint);
  --text:             var(--bf-text);
  --text-secondary:   var(--bf-text-muted);
  --text-muted:       var(--bf-text-muted);

  --primary:          var(--bf-accent);
  --primary-hover:    var(--bf-accent-fill-hover);  /* also used as link/active-tab text: 5:1 */
  --primary-glow:     rgba(224, 100, 75, 0.20);
  --primary-subtle:   var(--bf-coral-tint);

  --danger:           var(--bf-danger);
  --danger-hover:     #D95740;
  --danger-subtle:    var(--bf-danger-tint);
  --success:          var(--bf-success);
  --success-subtle:   var(--bf-success-tint);
  --warning:          var(--bf-warning);
  --warning-subtle:   var(--bf-warning-tint);

  --radius:           var(--bf-radius);
  --radius-lg:        var(--bf-radius-lg);
  --radius-sm:        var(--bf-radius-sm);
  --shadow:           var(--bf-shadow);
  --shadow-md:        var(--bf-shadow);
  --shadow-lg:        var(--bf-shadow-soft);

  --font-sans:        var(--bf-font-body);
  --font-mono:        var(--bf-font-mono);

  /* The rail is a branded ink surface in both themes — same as the brand's
     reference dashboard, and the reason the mark ships in a paper glyph. */
  --rail-bg:          var(--bf-ink);
  --rail-surface:     #24262E;
  --rail-text:        #C9C4B8;
  --rail-text-strong: var(--bf-paper);
  --rail-divider:     rgba(244, 241, 234, 0.10);
}

html[data-theme="dark"] {
  --bg:               var(--bf-bg);
  --surface:          var(--bf-surface);
  --surface-solid:    var(--bf-surface);
  --surface-raised:   var(--bf-surface-alt);
  --surface-sunk:     var(--bf-surface-sunk);
  --surface-overlay:  var(--bf-surface);
  --border:           var(--bf-border);
  --border-subtle:    var(--bf-border);
  --text:             var(--bf-text);
  --text-secondary:   var(--bf-text-muted);
  --text-muted:       var(--bf-text-muted);
  --primary:          var(--bf-accent);
  --primary-hover:    #F0836B;
  --primary-subtle:   var(--bf-coral-tint);
  --rail-bg:          var(--bf-surface-sunk);
  --rail-surface:     var(--bf-surface-alt);
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
/* The old sheet painted eight radial gradients of red "marble" onto the body.
   Nothing subtle survives on top of that, so it goes — replaced by the paper
   grain: a fixed dark speckle tiled behind all content (see --bf-grain). */
body {
  background-color: var(--bf-bg);
  background-image: var(--bf-grain, none);
  color: var(--bf-text);
  font-family: var(--bf-font-body);
}

/* Headings and anything numeric move to DM Mono — the mono + tabular figures
   are the identity, and this app is mostly weights, counts and dollars. */
h1, h2, h3,
.dashboard-header h2,
.dash-chart-card h3 {
  font-family: var(--bf-font-mono);
  font-weight: 500;
  letter-spacing: -0.3px;
}

/* ── 3. Shell: the icon rail ───────────────────────────────────────────── */
.sidebar,
.sidebar.rail {
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-divider);
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.rail-brand { padding: 8px 0 14px; }
.rail-mark {
  display: block;
  width: 40px;
  height: auto;
  /* BRAND.md: clear space of at least one beam-height on every side. */
  padding: 3px 2px;
}

.rail-item {
  color: var(--rail-text);
  border-radius: var(--bf-radius-sm);
  font-family: var(--bf-font-mono);
}
.rail-item:hover {
  background: var(--rail-surface);
  color: var(--rail-text-strong);
}
/* Active state is the signature square, not a red wash. */
.rail-item.rail-active {
  background: var(--rail-surface);
  color: var(--rail-text-strong);
  box-shadow: none;
}
.rail-item.rail-active::before {
  content: "";
  position: absolute;
  /* The rail is 64px and the button 42px, so this sits in the 11px gutter —
     any further left and it touches the edge. */
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--bf-accent-2);
}
.rail-div { background: var(--rail-divider); }
.rail-badge {
  background: var(--bf-accent-fill);  /* white count: 4.9:1 */
  font-family: var(--bf-font-mono);
  font-weight: 500;
}
.rail-item[data-tip]::after {
  background: var(--rail-surface);
  border-color: var(--rail-divider);
  font-family: var(--bf-font-mono);
  font-size: 12px;
  font-weight: 400;
  box-shadow: var(--bf-shadow);
}
.rail-version {
  font-family: var(--bf-font-mono);
  color: var(--rail-text);
  opacity: 0.55;
}

/* Flyouts share the rail's ink surface in both themes. */
html[data-theme="light"] .rail-flyout,
.rail-flyout { background: var(--rail-bg); border-right-color: var(--rail-divider); }
.rail-flyout-head {
  font-family: var(--bf-font-mono);
  font-weight: 500;
  color: var(--rail-text-strong);
  border-bottom-color: var(--rail-divider);
}
.rail-flyout .table-list li { color: var(--rail-text); }
.rail-flyout .table-list li:hover { background: var(--rail-surface); color: var(--rail-text-strong); }
.rail-flyout .table-list li.active {
  background: var(--rail-surface);
  color: var(--rail-text-strong);
  box-shadow: inset 3px 0 0 var(--bf-accent-2);
}

/* Mobile header carries the mark too. */
.mobile-header { background: var(--rail-bg); border-bottom: 1px solid var(--rail-divider); }
.mobile-header .hamburger { color: var(--rail-text-strong); }
.rail-mark-sm { display: block; width: 30px; height: auto; }

/* ── 4. Dashboard ──────────────────────────────────────────────────────── */
.dashboard-header h2 { font-size: var(--bf-fs-display); }

/* Eyebrow above the page title — uppercase, tracked, coral (BRAND.md §3). */
.bf-eyebrow {
  font-family: var(--bf-font-mono);
  font-size: var(--bf-fs-label);
  letter-spacing: var(--bf-track-label);
  text-transform: uppercase;
  color: var(--bf-accent-text);
  font-weight: 500;
  margin-bottom: 4px;
}

/* KPI cards become the brand's soft tinted cards. The old sheet drove their
   accent through an inline --stat colour; that's now the tint itself. */
.dash-stat-card {
  background: var(--stat-tint, var(--bf-teal-tint));
  border: none;
  border-radius: var(--bf-radius-lg);
  padding: 18px 18px 16px;
  box-shadow: none;
}
.dash-stat-card::before,
.dash-stat-card::after { display: none; }

/* Six cards never orphan: 6 across, then 3, then 2. The old sheet hardcoded
   five columns above 1400px, which left the sixth card stranded on its own row. */
.dash-summary { grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 700px)  { .dash-summary { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .dash-summary { grid-template-columns: repeat(6, 1fr); gap: 16px; } }

.dash-stat-value {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.5px;
  /* The old value was a red gradient clipped to the text; -webkit-text-fill-color
     beats `color`, so both have to be unwound before ink will show. */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--bf-text);
}
@media (min-width: 1400px) { .dash-stat-value { font-size: 30px; } }
@media (min-width: 1800px) { .dash-stat-value { font-size: 34px; } }
.dash-stat-unit { font-size: 15px; color: var(--bf-text-muted); margin-left: 1px; }
.dash-stat-label {
  font-family: var(--bf-font-mono);
  font-size: var(--bf-fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-text-muted);
  font-weight: 400;
}
.dash-stat-flag {
  font-family: var(--bf-font-mono);
  font-size: 11px;
  background: var(--bf-danger-tint);
  color: var(--bf-danger-text);
  border-radius: var(--bf-radius-pill);
  padding: 3px 9px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Panels — warm white, hairline, soft shadow. */
.dash-chart-card {
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow);
}
/* Section headers carry the signature square. */
.dash-chart-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--bf-fs-h3);
  color: var(--bf-text);
}
.dash-chart-card h3::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--bf-accent-2);
  flex: none;
}
.dash-pill-warn {
  font-family: var(--bf-font-mono);
  font-size: 11px;
  font-weight: 400;
  background: var(--bf-warning-tint);
  color: var(--bf-warning-text);
  border-radius: var(--bf-radius-pill);
  padding: 3px 10px;
}

/* Upcoming pickups list */
.dash-activity-row { border-bottom: 1px solid var(--bf-border); }
.dash-activity-row:hover { background: var(--bf-surface-alt); }
.dash-activity-source { font-family: var(--bf-font-body); font-weight: 500; color: var(--bf-text); }
.dash-activity-detail { color: var(--bf-text-muted); }
.dash-activity-date {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--bf-text-muted);
}
.dash-date-overdue, .dash-row-overdue .dash-activity-date { color: var(--bf-danger-text); }

/* ── 5. Shared components in reach of the dashboard ────────────────────── */
.btn {
  font-family: var(--bf-font-mono);
  font-weight: 400;
  border-radius: var(--bf-radius-pill);
}

.btn-primary { background: var(--bf-accent-fill); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--bf-accent-fill-hover); }
.btn-ghost { color: var(--bf-text-muted); }
.btn-ghost:hover { background: var(--bf-surface-alt); color: var(--bf-text); }

/* Data tables — clarity first. Warm sunk header, tabular numerics, no red. */
.data-table th {
  font-family: var(--bf-font-mono);
  font-size: var(--bf-fs-label);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bf-surface-sunk);
  color: var(--bf-text-muted);
}
html[data-theme="light"] .main .data-table th { color: var(--bf-text-muted); }
.data-table td { border-bottom-color: var(--bf-border); }

input, textarea, select {
  font-family: var(--bf-font-body);
  border-radius: var(--bf-radius-sm);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--bf-focus);
  outline-offset: 1px;
  border-color: transparent;
}

/* Permit reports: a neutral sibling to .nys-review. Material that's catalogued but
   isn't hauler-permit waste is correctly excluded — showing it in warning amber
   taught people to dismiss the banner that does need acting on. */
.nys-note {
  border: 1px solid var(--bf-border); background: var(--bf-surface-alt); color: var(--bf-text-muted);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 13px; line-height: 1.5;
}
.nys-note strong { color: var(--bf-text); font-weight: 500; }
.nys-note ul { margin: 6px 0 4px 18px; }

.toast { font-family: var(--bf-font-body); border-radius: var(--bf-radius); }

/* ══════════════════════════════════════════════════════════════════════════
   TIMELINE DISPATCH BOARD
   Unassigned pool on the left, driver columns against a clock on the right.
   ══════════════════════════════════════════════════════════════════════════ */

.dp-viewtoggle {
  display: inline-flex; background: var(--bf-surface-sunk);
  border-radius: var(--bf-radius-pill); padding: 2px; gap: 2px;
}
.dp-viewbtn {
  font-family: var(--bf-font-mono); font-size: 12px; padding: 6px 13px;
  border: 0; border-radius: var(--bf-radius-pill); background: transparent;
  color: var(--bf-text-muted); cursor: pointer; line-height: 1;
}
.dp-viewbtn.active { background: var(--bf-surface); color: var(--bf-text); box-shadow: var(--bf-shadow); }

.dp-tl { display: grid; grid-template-columns: clamp(180px, 17vw, 250px) 1fr; gap: 14px; align-items: start; }

/* ── Unassigned pool ──────────────────────────────────────────────────── */
.dp-tl-pool {
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: 78vh; max-height: 78dvh;
}
.dp-tl-poolhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; background: var(--bf-surface-sunk);
  font-family: var(--bf-font-mono); font-size: var(--bf-fs-label);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-text-muted);
}
.dp-tl-poolcount {
  background: var(--bf-coral-tint); color: var(--bf-accent-text);
  border-radius: var(--bf-radius-pill); padding: 1px 9px; font-size: 11px;
}
.dp-tl-poolbody { padding: 9px; overflow-y: auto; flex: 1; min-height: 120px; display: grid; gap: 7px; align-content: start; }
.dp-tl-poolfoot { padding: 9px; border-top: 1px solid var(--bf-border); display: flex; gap: 6px; }
.dp-tl-poolfoot .dp-add-input { flex: 1; min-width: 0; font-size: 13px; }

/* ── Board ────────────────────────────────────────────────────────────── */
.dp-tl-boardwrap { overflow-x: auto; padding-bottom: 6px; }
.dp-tl-board { display: flex; align-items: stretch; gap: 0; min-width: min-content; }
.dp-tl-gutter { flex: none; width: 58px; position: sticky; left: 0; z-index: 3; background: var(--bf-bg); }
.dp-tl-hourlabel {
  font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted);
  text-align: right; padding-right: 7px; border-top: 1px solid var(--bf-border);
  box-sizing: border-box; padding-top: 2px;
}
.dp-tl-col {
  /* Narrow enough that four drivers fit a laptop, wide enough for a customer
     name. Below the floor the board scrolls rather than squeezing text away. */
  flex: 1 0 clamp(150px, 15vw, 215px);
  min-width: clamp(150px, 15vw, 215px);
  border-left: 1px solid var(--bf-border);
}
.dp-tl-colhead {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px;
  border-bottom: 1px solid var(--bf-border); background: var(--bf-surface-sunk);
  height: 42px; box-sizing: border-box;
}
.dp-tl-gutterhead { background: transparent; border-bottom-color: transparent; }
.dp-tl-name { font-family: var(--bf-font-mono); font-size: 13px; color: var(--bf-text); }
.dp-tl-load {
  margin-left: auto; font-family: var(--bf-font-mono); font-size: 10px;
  color: var(--bf-text-muted); white-space: nowrap;
}

/* Assigned but not timed — parked above the clock so nothing goes missing. */
/* Fixed height, not min-height: a driver with more untimed work than the others
   would otherwise make their column taller and knock every clock grid out of
   alignment with its neighbours. Overflow scrolls inside the strip instead. */
.dp-tl-untimed {
  height: 58px; overflow-y: auto; padding: 5px; display: grid; gap: 5px;
  align-content: start; background: var(--bf-surface-alt);
  border-bottom: 1px dashed var(--bf-border); box-sizing: border-box;
}
.dp-tl-gutteruntimed {
  background: transparent; border-bottom-color: transparent; overflow: visible;
  font-family: var(--bf-font-mono); font-size: 9px; color: var(--bf-text-muted);
  text-align: right; padding-right: 7px; align-content: center;
}
.dp-tl-untimed-empty {
  font-family: var(--bf-font-mono); font-size: 10px; color: var(--bf-text-muted);
  opacity: .7; padding: 6px 2px; text-align: center;
}
.dp-tl-untimed.dp-over, .dp-tl-poolbody.dp-over { background: var(--bf-teal-tint); }

/* The clock grid */
.dp-tl-grid { position: relative; }
/* Height is set from JS so it always matches the pixel maths behind the cards. */
.dp-tl-slot { border-top: 1px dashed var(--bf-border); box-sizing: border-box; }
.dp-tl-slot.dp-tl-hour { border-top-style: solid; }
.dp-tl-cards { position: absolute; inset: 0; }
.dp-tl-nodrivers {
  padding: 34px 20px; color: var(--bf-text-muted); font-size: 13px;
  border-left: 1px solid var(--bf-border); flex: 1;
}

/* ── Job cards ────────────────────────────────────────────────────────── */
.dp-tl-card {
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  border-left: 3px solid var(--bf-text-muted);
  border-radius: var(--bf-radius-sm); padding: 4px 7px; cursor: pointer;
  overflow: hidden; font-size: 12.5px; line-height: 1.3;
  box-shadow: 0 1px 2px rgba(31,32,36,.05);
}
.dp-tl-cards .dp-tl-card { position: absolute; }
.dp-tl-card:hover { border-color: var(--bf-accent); }
.dp-tl-card.dp-tlt-del { border-left-color: var(--bf-accent-2); }
.dp-tl-card.dp-tlt-pick { border-left-color: var(--bf-accent); }
.dp-tl-card.dp-tlt-custom { border-left-color: var(--bf-sand); }
.dp-tl-card.dp-done { opacity: .55; }
.dp-tl-card.dp-late { background: var(--bf-danger-tint); }
.dp-tl-card.dp-dragging { opacity: .4; }
.dp-tl-top { display: flex; align-items: center; gap: 5px; margin-bottom: 1px; min-width: 0; }
/* Never wrap: in a narrow overlap column "PICK UP" was breaking across lines
   and stealing the row the customer name needed. */
.dp-tl-top > * { white-space: nowrap; }
.dp-tl-type { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dp-tl-type {
  font-family: var(--bf-font-mono); font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bf-text-muted);
}
.dp-tl-time {
  margin-left: auto; font-family: var(--bf-font-mono); font-size: 11px;
  font-variant-numeric: tabular-nums; color: var(--bf-text-muted);
}
.dp-tl-late { color: var(--bf-danger-text); font-size: 10px; }
.dp-tl-done { color: var(--bf-success-text); font-size: 10px; }
.dp-tl-cust {
  font-weight: 500; color: var(--bf-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-tl-sub, .dp-tl-cont {
  color: var(--bf-text-muted); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-tl-cont { font-family: var(--bf-font-mono); }

/* Drop preview — shows the snapped time before you let go. */
.dp-tl-drop {
  position: absolute; left: 0; right: 3px; z-index: 5; pointer-events: none;
  border: 1.5px dashed var(--bf-accent); border-radius: var(--bf-radius-sm);
  background: var(--bf-coral-tint); opacity: .85;
  font-family: var(--bf-font-mono); font-size: 10px; color: var(--bf-accent-text);
  padding: 3px 6px;
}

@media (max-width: 900px) {
  /* The timeline is a desktop tool — HTML5 drag has no touch support, and the
     grid can't shrink usefully. Phones get the lanes board and tap-to-assign. */
  .dp-tl { grid-template-columns: 1fr; }
  .dp-tl-pool { max-height: none; }
}

/* ── Calendar: week view ──────────────────────────────────────────────── */
.cal-viewtoggle {
  display: inline-flex; background: var(--bf-surface-sunk);
  border-radius: var(--bf-radius-pill); padding: 2px; gap: 2px; margin-left: 8px;
}
/* stretch, not start: a ragged row of different-height day cards reads as broken,
   and the per-day "Dispatch \2192" action should sit on one line across the week. */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: stretch; }
.cal-wk-day {
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; min-height: 150px;
}
.cal-wk-day:hover { border-color: var(--bf-accent); }
.cal-wk-today { box-shadow: inset 0 0 0 2px var(--bf-accent-2); }
.cal-wk-sel { background: var(--bf-surface-alt); border-color: var(--bf-accent); }
.cal-wk-head {
  display: flex; align-items: baseline; gap: 6px; padding: 7px 9px;
  background: var(--bf-surface-sunk); border-bottom: 1px solid var(--bf-border);
}
.cal-wk-dow {
  font-family: var(--bf-font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bf-text-muted);
}
.cal-wk-num {
  font-family: var(--bf-font-mono); font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--bf-text);
}
.cal-wk-count {
  margin-left: auto; font-family: var(--bf-font-mono); font-size: 10px;
  font-variant-numeric: tabular-nums; color: var(--bf-accent-text);
  background: var(--bf-coral-tint); border-radius: var(--bf-radius-pill); padding: 1px 7px;
}
.cal-wk-body { padding: 6px; display: grid; gap: 4px; align-content: start; flex: 1; }
.cal-wk-item {
  display: grid; gap: 1px; padding: 4px 6px; border-radius: var(--bf-radius-sm);
  background: var(--bf-surface-alt); font-size: 11px; line-height: 1.25;
}
.cal-wk-item:hover { background: var(--bf-teal-tint); }
.cal-wk-item.cal-done { opacity: .5; }
.cal-wk-item.cal-done .cal-wk-cust { text-decoration: line-through; }
.cal-wk-tag {
  font-family: var(--bf-font-mono); font-size: 8.5px; letter-spacing: .04em;
  text-transform: uppercase;
}
.cal-wk-tag.d { color: var(--bf-accent-2-text); }
.cal-wk-tag.p { color: var(--bf-accent-text); }
.cal-wk-tag.t { color: var(--bf-warning-text); }
.cal-wk-cust {
  font-weight: 500; color: var(--bf-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-wk-site {
  color: var(--bf-text-muted); font-size: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-wk-empty { color: var(--bf-text-muted); font-size: 11px; text-align: center; padding: 10px 0; opacity: .6; }
.cal-wk-go {
  border: 0; border-top: 1px solid var(--bf-border); background: transparent;
  font-family: var(--bf-font-mono); font-size: 10px; color: var(--bf-text-muted);
  padding: 6px; cursor: pointer; text-align: center;
}
.cal-wk-go:hover { background: var(--bf-coral-tint); color: var(--bf-accent-text); }

@media (max-width: 900px) {
  .cal-week { grid-template-columns: repeat(2, 1fr); }
}

/* Calendar type colours — the month chips, day tags and legend predate the brand
   and were blue/orange/purple. Same three meanings, brand palette. */
.cal-dot.d, .cal-chip.d, .cal-tag.d { background: var(--bf-accent-2); }
.cal-dot.p, .cal-chip.p, .cal-tag.p { background: var(--bf-accent); }
.cal-dot.t, .cal-chip.t, .cal-tag.t { background: var(--bf-warning); }
.cal-chip, .cal-tag { font-family: var(--bf-font-mono); font-weight: 400; }
.cal-cell { border-radius: var(--bf-radius-sm); }
.cal-cell.cal-today { box-shadow: inset 0 0 0 2px var(--bf-accent-2); }
/* Selection shouldn't shout — a whole tile of coral reads as an alert, and the
   selected day is usually also today, which already has the teal ring. */
.cal-cell.cal-sel { background: var(--bf-surface-alt); border-color: var(--bf-accent); }
.cal-num { font-family: var(--bf-font-mono); font-variant-numeric: tabular-nums; }
.cal-dow { font-family: var(--bf-font-mono); font-weight: 400; }
.cal-month { font-family: var(--bf-font-mono); font-weight: 500; }

/* ── Timeline: resize grip, now line, conflict flag ───────────────────── */
.dp-tl-resize {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  cursor: ns-resize; touch-action: none;
}
.dp-tl-resize::after {
  content: ""; position: absolute; left: 50%; bottom: 2px;
  transform: translateX(-50%); width: 18px; height: 2px; border-radius: 1px;
  background: var(--bf-border);
}
.dp-tl-card:hover .dp-tl-resize::after { background: var(--bf-accent); }
.dp-tl-card.dp-resizing { z-index: 6; box-shadow: var(--bf-shadow); }

/* Where the day actually is. Only drawn on today. */
.dp-tl-now {
  position: absolute; left: 0; right: 0; height: 0; z-index: 4; pointer-events: none;
  border-top: 2px solid var(--bf-accent);
}
.dp-tl-now::before {
  content: ""; position: absolute; left: -3px; top: -4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--bf-accent);
}

.dp-tl-clash {
  font-family: var(--bf-font-mono); font-size: 10px;
  background: var(--bf-danger-tint); color: var(--bf-danger-text);
  border-radius: var(--bf-radius-pill); padding: 1px 7px;
}

/* Tap-to-assign: start + length pickers, the touch route to a scheduled time. */
.dp-assign-when { display: flex; gap: 10px; margin: 4px 0 12px; }
.dp-assign-when label {
  flex: 1; display: grid; gap: 3px;
  font-family: var(--bf-font-mono); font-size: var(--bf-fs-label);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-text-muted);
}
.dp-assign-sel {
  font-family: var(--bf-font-body); font-size: 14px;
  padding: 8px 10px; border-radius: var(--bf-radius-sm);
  border: 1px solid var(--bf-border); background: var(--bf-surface); color: var(--bf-text);
}

/* Idle gap between two jobs — a soft hatch, deliberately quieter than a card so
   it reads as absence rather than another thing to do. */
.dp-tl-gap {
  position: absolute; left: 0; right: 3px; z-index: 1; pointer-events: none;
  border-radius: var(--bf-radius-sm);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 5px,
    var(--bf-border) 5px, var(--bf-border) 6px);
  display: flex; align-items: center; justify-content: center;
}
.dp-tl-gap span {
  font-family: var(--bf-font-mono); font-size: 9.5px; color: var(--bf-text-muted);
  background: var(--bf-bg); border-radius: var(--bf-radius-pill); padding: 1px 6px;
}

/* ── Trucking templates ───────────────────────────────────────────────── */
.tt-tpl-list { display: grid; gap: 7px; }
.tt-tpl { display: flex; align-items: stretch; gap: 6px; }
.tt-tpl-use {
  flex: 1; text-align: left; display: grid; gap: 2px; cursor: pointer;
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-sm); padding: 9px 12px;
}
.tt-tpl-use:hover { border-color: var(--bf-accent); background: var(--bf-coral-tint); }
.tt-tpl-name { font-family: var(--bf-font-mono); font-size: 13px; color: var(--bf-text); }
.tt-tpl-sub { font-size: 12px; color: var(--bf-text-muted); }
.tt-tpl-del {
  width: 34px; flex: none; border: 1px solid var(--bf-border); background: transparent;
  border-radius: var(--bf-radius-sm); color: var(--bf-text-muted); cursor: pointer; font-size: 16px;
}
.tt-tpl-del:hover { border-color: var(--bf-danger); color: var(--bf-danger-text); background: var(--bf-danger-tint); }

/* "Schedule these" — fills a driver's untimed jobs into the first slots that fit.
   Lives in the column header, which is a fixed height: anything conditional
   between the untimed strip and the grid would push that driver's clock out of
   line with every other column. */
.dp-tl-fill {
  border: 0; border-radius: var(--bf-radius-pill);
  background: var(--bf-teal-tint); color: var(--bf-accent-2-text);
  font-family: var(--bf-font-mono); font-size: 10px; padding: 2px 7px; cursor: pointer;
  white-space: nowrap;
}
.dp-tl-fill:hover { filter: brightness(0.96); }

/* Week view: who's on each job, and the day's roster at a glance. */
.cal-wk-who {
  font-family: var(--bf-font-mono); font-size: 9.5px; color: var(--bf-accent-2-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-wk-who.cal-wk-none { color: var(--bf-text-muted); opacity: .75; }
.cal-wk-roster {
  display: flex; flex-wrap: wrap; gap: 3px; padding: 6px;
  border-top: 1px dashed var(--bf-border);
}
.cal-wk-drv {
  font-family: var(--bf-font-mono); font-size: 9.5px;
  background: var(--bf-teal-tint); color: var(--bf-accent-2-text);
  border-radius: var(--bf-radius-pill); padding: 1px 7px;
}
.cal-wk-orphan {
  font-family: var(--bf-font-mono); font-size: 9.5px;
  background: var(--bf-coral-tint); color: var(--bf-accent-text);
  border-radius: var(--bf-radius-pill); padding: 1px 7px;
}

/* ── Dispatch: lanes board (the run-order view) ───────────────────────── */
.dp-lane {
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
}
.dp-lane-unassigned { border-style: dashed; }
.dp-lane-head {
  background: var(--bf-surface-sunk); border-bottom: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg) var(--bf-radius-lg) 0 0;
}
.dp-lane-name { font-family: var(--bf-font-mono); font-weight: 500; font-size: 14px; }
.dp-lane-count {
  font-family: var(--bf-font-mono); font-weight: 400;
  background: var(--bf-coral-tint); color: var(--bf-accent-text);
}
.dp-lane-body.dp-over {
  background: var(--bf-teal-tint);
  outline: 2px dashed var(--bf-accent-2); outline-offset: -4px;
}
.dp-card {
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius); box-shadow: none;
}
.dp-card:hover { box-shadow: var(--bf-shadow); border-color: var(--bf-border); }
/* No coloured edge on lane cards: the type pill at the top already says
   Delivery / Pickup in words and colour. (The timeline keeps its edge — its
   compact blocks hide the pill, and a coloured edge is the calendar idiom.) */
.dp-card.dp-del, .dp-card.dp-pick { border-left-width: 1px; }
.dp-card.dp-late { background: var(--bf-danger-tint); }
.dp-card-cust { font-weight: 500; }
.dp-type {
  font-family: var(--bf-font-mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: 0.05em; border-radius: var(--bf-radius-pill);
}
.dp-t-del { color: var(--bf-accent-2-text); background: var(--bf-teal-tint); }
.dp-t-pick { color: var(--bf-accent-text); background: var(--bf-coral-tint); }
.dp-ds, .dp-card-cont { font-family: var(--bf-font-mono); }
.dp-mat { font-family: var(--bf-font-mono); font-size: 10.5px; border-radius: var(--bf-radius-pill); }
.dp-late-tag, .dp-done-tag {
  font-family: var(--bf-font-mono); font-weight: 400; border-radius: var(--bf-radius-pill);
}
.dp-late-tag { background: var(--bf-danger-tint); color: var(--bf-danger-text); }
.dp-done-tag { background: var(--bf-success-tint); color: var(--bf-success-text); }
.dp-sum { font-family: var(--bf-font-body); border-radius: var(--bf-radius-pill); }
.dp-sum strong { font-family: var(--bf-font-mono); }
.dp-date { font-family: var(--bf-font-mono); font-weight: 500; }
.dp-today {
  font-family: var(--bf-font-mono); font-weight: 400;
  background: var(--bf-teal-tint); color: var(--bf-accent-2-text);
  border-radius: var(--bf-radius-pill);
}
.dp-hint { color: var(--bf-text-muted); }

/* Every timeline card needs a route to driver + time that isn't dragging —
   drag is mouse-only, and a keyboard or touch user was otherwise stuck. */
.dp-tl-edit {
  margin-left: 2px; border: 0; background: transparent; cursor: pointer;
  color: var(--bf-text-muted); font-size: 13px; line-height: 1;
  padding: 0 3px; border-radius: var(--bf-radius-sm);
}
/* With no time chip there's nothing pushing the button right — do it here. */
.dp-tl-top:not(:has(.dp-tl-time)) .dp-tl-edit { margin-left: auto; }
.dp-tl-edit:hover { background: var(--bf-coral-tint); color: var(--bf-accent-text); }
.dp-tl-card:not(:hover) .dp-tl-edit { opacity: .45; }

/* ── Calendar: week × drivers ─────────────────────────────────────────── */
.cal-drivers {
  display: grid;
  grid-template-columns: 116px repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--bf-border);
  border: 1px solid var(--bf-border); border-radius: var(--bf-radius);
  overflow: hidden;
}
.cal-dv-cell { background: var(--bf-surface); padding: 6px 7px; min-height: 46px; }
.cal-dv-corner { background: var(--bf-surface-sunk); }
.cal-dv-dayhead {
  background: var(--bf-surface-sunk); display: flex; align-items: baseline; gap: 5px;
  min-height: 0; padding: 7px 9px;
}
.cal-dv-dow {
  font-family: var(--bf-font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bf-text-muted);
}
.cal-dv-num { font-family: var(--bf-font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.cal-dv-today { box-shadow: inset 0 2px 0 var(--bf-accent-2); }
.cal-dv-name-cell {
  background: var(--bf-surface-sunk); display: flex; align-items: center;
  font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text);
  position: sticky; left: 0; z-index: 2;
}
.cal-dv-pool { color: var(--bf-text-muted); font-style: italic; }
.cal-dv-slot { display: flex; flex-direction: column; gap: 3px; position: relative; }
.cal-dv-free { background: var(--bf-surface-alt); }
.cal-dv-open {
  font-family: var(--bf-font-mono); font-size: 9.5px; color: var(--bf-text-muted);
  opacity: .55; align-self: center; margin: auto;
}
.cal-dv-count {
  position: absolute; right: 5px; bottom: 3px;
  font-family: var(--bf-font-mono); font-size: 9px; color: var(--bf-text-muted);
}
.cal-dv-chip {
  display: flex; align-items: baseline; gap: 5px; cursor: pointer;
  background: var(--bf-surface-alt); border-radius: var(--bf-radius-sm);
  padding: 3px 6px; font-size: 11px; line-height: 1.25;
}
.cal-dv-chip:hover { background: var(--bf-teal-tint); }
.cal-dv-chip.cal-done { opacity: .5; }
.cal-dv-chip.cal-done .cal-dv-name { text-decoration: line-through; }
.cal-dv-chip.cal-dv-dragging { opacity: .4; }
.cal-dv-tag { font-family: var(--bf-font-mono); font-size: 8.5px; text-transform: uppercase; flex: none; }
.cal-dv-tag.d { color: var(--bf-accent-2-text); }
.cal-dv-tag.p { color: var(--bf-accent-text); }
.cal-dv-tag.t { color: var(--bf-warning-text); }
.cal-dv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Same-day drops are allowed; anything else would move the promised date. */
.cal-dv-slot.cal-dv-over { background: var(--bf-teal-tint); outline: 2px dashed var(--bf-accent-2); outline-offset: -3px; }
.cal-dv-slot.cal-dv-nope { background: var(--bf-danger-tint); cursor: not-allowed; }

@media (max-width: 900px) {
  .cal-drivers { grid-template-columns: 92px repeat(7, minmax(74px, 1fr)); overflow-x: auto; }
}

/* ── Calendar: month tiles (Outlook-style) ────────────────────────────── */
/* The old month grid was 74px cells holding count chips. These are tiles that
   list the actual jobs, so they need real height — but six rows of them is a
   lot of page, hence the per-tile cap and the "+N more" spill. */
.cal-grid { gap: 5px; }
/* Fixed, not min-height: uneven rows make a month grid look broken, and the
   "+N more" spill exists precisely so a busy day doesn't need extra room. */
.cal-cell {
  height: 132px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 0;
  background: var(--bf-surface);
}
.cal-cell.cal-out { opacity: 1; background: var(--bf-surface-alt); }
.cal-cell.cal-out .cal-num { color: var(--bf-text-muted); opacity: .75; } /* dimmed but legible: ~3.6:1 (was 2.4) */
.cal-mo-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 5px 8px 3px; flex: none;
}
/* Muted by default — every tile in a busy month carries one of these, and in
   coral they read as thirty warnings. Coral is kept for the overflow link. */
.cal-mo-count {
  font-family: var(--bf-font-mono); font-size: 9.5px; font-variant-numeric: tabular-nums;
  color: var(--bf-text-muted); background: var(--bf-surface-sunk);
  border-radius: var(--bf-radius-pill); padding: 0 6px;
}
/* Everything on the day is done — worth a quiet nod. */
.cal-mo-count.cal-mo-clear { color: var(--bf-success-text); background: var(--bf-success-tint); }
.cal-mo-items { display: flex; flex-direction: column; gap: 2px; padding: 0 5px 4px; overflow: hidden; }
.cal-mo-item {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  border-radius: 4px; padding: 2px 5px 2px 3px; font-size: 11px; line-height: 1.3;
  background: var(--bf-surface-alt);
}
.cal-cell.cal-out .cal-mo-item { background: transparent; }
.cal-mo-item:hover { background: var(--bf-teal-tint); }
.cal-mo-item.cal-done { opacity: .5; }
.cal-mo-item.cal-done .cal-mo-text { text-decoration: line-through; }
/* A colour bar rather than a filled pill — four of these in a tile shouldn't
   read as four alarms. */
.cal-mo-bar { width: 3px; align-self: stretch; min-height: 12px; border-radius: 2px; flex: none; }
.cal-mo-bar.d { background: var(--bf-accent-2); }
.cal-mo-bar.p { background: var(--bf-accent); }
.cal-mo-bar.t { background: var(--bf-warning); }
.cal-mo-text {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--bf-text);
}
.cal-mo-who {
  font-family: var(--bf-font-mono); font-size: 9px; color: var(--bf-text-muted);
  flex: none; max-width: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-mo-more {
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--bf-font-mono); font-size: 9.5px; color: var(--bf-accent-text);
  padding: 0 8px 5px; margin-top: auto;
}
.cal-mo-more:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .cal-cell { min-height: 92px; }
  .cal-mo-who { display: none; }
}


/* ── Timeline: card density ───────────────────────────────────────────────
   A short job has no room for four lines. Rather than clipping one halfway
   through, drop the detail and keep what identifies the job. ── */
.dp-tl-card.dp-tl-snug .dp-tl-cont { display: none; }
.dp-tl-card.dp-tl-tight .dp-tl-sub,
.dp-tl-card.dp-tl-tight .dp-tl-cont { display: none; }
.dp-tl-card.dp-tl-tight { padding: 2px 7px; line-height: 1.2; }
.dp-tl-card.dp-tl-tight .dp-tl-top { margin-bottom: 0; }
/* At the shortest, type and customer share the line. */
.dp-tl-card.dp-tl-tight .dp-tl-type { font-size: 9.5px; }
.dp-tl-card.dp-tl-tight .dp-tl-cust { font-size: 11.5px; }

/* ── Timeline: narrow screens ─────────────────────────────────────────────
   Below this the two-panel split stops earning its keep: the pool goes
   full-width above the board as a horizontal strip, and the board scrolls. ── */
@media (max-width: 1100px) {
  .dp-tl { grid-template-columns: 1fr; }
  .dp-tl-pool { max-height: none; }
  /* Stacked, the pool is a strip — it must not push the board off the screen,
     which is the whole point of the view. */
  .dp-tl-poolbody {
    grid-auto-flow: column; grid-auto-columns: minmax(190px, 220px);
    justify-content: start;
    overflow-x: auto; overflow-y: hidden;
    max-height: 96px; min-height: 0; padding: 7px;
  }
  .dp-tl-poolbody .dp-tl-untimed-empty { padding: 2px; }
  .dp-tl-poolfoot { border-top: 1px solid var(--bf-border); padding: 7px; }
  .dp-tl-poolfoot .dp-add-input { max-width: 220px; }
}

/* ── Timeline: narrow cards ───────────────────────────────────────────────
   A job overlapping another gets half a column, and at laptop width that's
   ~120px. Ellipsising the type label to "PIC…" is worse than dropping it: the
   coloured left border already says which it is, and the space is better spent
   on the customer name. Container queries, so it responds to the card's own
   width rather than the viewport's. ── */
.dp-tl-card { container-type: inline-size; }
@container (max-width: 132px) {
  .dp-tl-type { display: none; }
}
@container (max-width: 104px) {
  .dp-tl-sub, .dp-tl-cont { display: none; }
  .dp-tl-time { margin-left: 0; }
}

/* A half-hour job is ~27px of usable box, and two lines need 31 — so the
   shortest cards go single-line instead of clipping. display:contents lets the
   header's children join the card's own flex row, so the customer and the time
   share one line and the type falls away (the border already says which). */
.dp-tl-card.dp-tl-mini {
  display: flex; align-items: center; gap: 5px;
  padding: 1px 7px; line-height: 1.15;
}
.dp-tl-card.dp-tl-mini .dp-tl-top { display: contents; }
.dp-tl-card.dp-tl-mini .dp-tl-type,
.dp-tl-card.dp-tl-mini .dp-tl-sub,
.dp-tl-card.dp-tl-mini .dp-tl-cont { display: none; }
.dp-tl-card.dp-tl-mini .dp-tl-cust { order: -1; flex: 1; min-width: 0; font-size: 11.5px; }

/* Repeat controls on the schedule-pickup form. */
.ct-repeat-row { display: flex; gap: 8px; align-items: center; }
.ct-repeat-row select { flex: 1 1 auto; min-width: 0; }
.ct-repeat-row input[type="number"] { width: 86px; flex: none; }
.ct-repeat-row input[type="date"] { width: 150px; flex: none; }
@media (max-width: 560px) {
  .ct-repeat-row { flex-wrap: wrap; }
  .ct-repeat-row input[type="date"] { width: 100%; }
}

/* askChoice — a confirm() that can offer more than two answers. */
.ct-choice-list { display: grid; gap: 8px; }
.ct-choice {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-sm); padding: 11px 13px;
}
.ct-choice:hover { border-color: var(--bf-accent); background: var(--bf-coral-tint); }
.ct-choice-label { font-family: var(--bf-font-mono); font-size: 13px; color: var(--bf-text); }
.ct-choice-hint { font-size: 12px; color: var(--bf-text-muted); line-height: 1.4; }

/* Weekday chips on the repeat control. A multi-select, because a site is often
   worked more than one day a week — which is the whole point of the pattern. */
.ct-dow-row { display: flex; align-items: center; gap: 4px; margin: 6px 0 2px; flex-wrap: wrap; }
.ct-dow-label {
  font-family: var(--bf-font-mono); font-size: var(--bf-fs-label);
  letter-spacing: var(--bf-track-label); text-transform: uppercase;
  color: var(--bf-text-muted); margin-right: 4px;
}
.ct-dow {
  width: 30px; height: 30px; flex: none; cursor: pointer;
  border: 1px solid var(--bf-border); background: var(--bf-surface);
  border-radius: var(--bf-radius-sm); color: var(--bf-text-muted);
  font-family: var(--bf-font-mono); font-size: 12px; line-height: 1;
}
.ct-dow:hover:not(:disabled) { border-color: var(--bf-accent); }
.ct-dow.active { background: var(--bf-accent); border-color: var(--bf-accent); color: #fff; }
.ct-dow:disabled { opacity: .45; cursor: not-allowed; }

/* Projected recurring pickups — worked out from the rule, not booked yet. Muted
   and outlined rather than filled, so a month of planned service can't be
   mistaken for a month of committed work. */
.cal-mo-item.cal-planned,
.cal-wk-item.cal-planned,
.cal-dv-chip.cal-planned {
  background: transparent;
  border: 1px dashed var(--bf-border);
  color: var(--bf-text-muted);
  cursor: default;
}
.cal-mo-item.cal-planned:hover,
.cal-wk-item.cal-planned:hover,
.cal-dv-chip.cal-planned:hover { background: transparent; }
.cal-planned .cal-mo-text, .cal-planned .cal-wk-cust, .cal-planned .cal-dv-name { color: var(--bf-text-muted); }
.cal-planned .cal-mo-bar { opacity: .45; }

/* ── What's new ───────────────────────────────────────────────────────────
   Shown once after an update. Reads as a note, not an alert — nothing here
   needs acting on, it's just telling you what moved. */
.wn-modal { max-width: 520px; }
.wn-lead { margin: 0 0 16px; color: var(--bf-text-muted); font-size: 13px; }
.wn-entry { padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--bf-border); }
.wn-entry:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.wn-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; }
.wn-title { font-family: var(--bf-font-mono); font-size: 14px; color: var(--bf-text); }
.wn-ver {
  margin-left: auto; font-family: var(--bf-font-mono); font-size: 10px;
  font-variant-numeric: tabular-nums; color: var(--bf-text-muted);
  background: var(--bf-surface-sunk); border-radius: var(--bf-radius-pill); padding: 1px 8px;
}
.wn-items { list-style: none; display: grid; gap: 6px; }
.wn-items li {
  position: relative; padding-left: 15px; font-size: 13px; line-height: 1.5; color: var(--bf-text);
}
.wn-items li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--bf-accent-2);
}
.wn-foot { font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted); }
.rail-version { cursor: pointer; }

/* ── Driver progress on the dispatch board ──────────────────────────────
 * The line that tells the dispatcher what the driver has actually done. It sits
 * on the card because the alternative — a separate screen — means finding out
 * about a locked gate at the end of the day instead of when it happened. */
.dp-card.dp-problem { background: var(--bf-danger-tint); border-left-color: var(--bf-danger); }
.dp-drv {
  display: inline-block; margin-top: 6px;
  font-family: var(--bf-font-mono); font-size: 11px; font-weight: 500;
  padding: 2px 7px; border-radius: var(--bf-radius-pill);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-drv-done    { background: var(--bf-teal-tint);   color: #14685D; }
.dp-drv-onsite  { background: var(--bf-sand-tint);   color: #7A5312; }
.dp-drv-problem { background: var(--bf-danger);      color: #fff; }

/* ── Driver activity feed ───────────────────────────────────────────────── */
.dp-feed { margin-top: 18px; border-top: 1px solid var(--bf-border); padding-top: 14px; }
.dp-feed-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: var(--bf-fs-h3); font-weight: 600;
}
.dp-feed-count {
  font-family: var(--bf-font-mono); font-size: 11px; font-weight: 500;
  background: var(--bf-surface-sunk); color: var(--bf-text-muted);
  padding: 2px 8px; border-radius: var(--bf-radius-pill);
}
.dp-feed-list { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.dp-feed-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 10px; border-radius: var(--bf-radius-sm);
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  font-size: 13px;
}
.dp-feed-row.is-problem { background: var(--bf-danger-tint); border-color: var(--bf-danger); }
.dp-feed-row.is-error   { opacity: .7; }
.dp-feed-time {
  font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted);
  flex: none; min-width: 68px;
}
.dp-feed-who { font-weight: 600; flex: none; }
.dp-feed-what { flex: 1; min-width: 0; }
.dp-feed-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 6px; border-radius: var(--bf-radius-pill); flex: none;
}
/* Offline-synced entries are marked, because otherwise an event landing hours
   after it happened looks like the driver was late rather than out of signal. */
.dp-feed-synced { background: var(--bf-info-tint); color: #2F5560; }
.dp-feed-empty { color: var(--bf-text-muted); font-size: 13px; padding: 12px 2px; }

/* ── To Weigh ───────────────────────────────────────────────────────────── */
.tw-hint {
  font-size: 13px; color: var(--bf-text-muted);
  background: var(--bf-surface-sunk); border-radius: var(--bf-radius-sm);
  padding: 10px 14px; margin-bottom: 14px;
}
.tw-count {
  font-family: var(--bf-font-mono); font-size: 12px; font-weight: 500;
  background: var(--bf-sand-tint); color: #7A5312;
  padding: 3px 10px; border-radius: var(--bf-radius-pill);
}
.tw-ref { font-family: var(--bf-font-mono); font-weight: 500; }
.tw-sub { font-size: 12px; color: var(--bf-text-muted); margin-top: 2px; }
/* Wide enough to type into comfortably with a ticket in the other hand. */
.tw-page .tw-weight { width: 92px; font-family: var(--bf-font-mono); }
.tw-page .tw-ticket { width: 110px; }

/* ── Delivery sheet: containers that have been and gone ──────────────────
 * A swap closes one slot and opens another, so a site on weekly service builds
 * up a slot a week. These are a record rather than something to act on, so they
 * fold away and stay out of the way of the can that's actually there. */
.ds-past {
  grid-column: 1 / -1;
  margin-top: 4px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  background: var(--bf-surface);
}
.ds-past > summary {
  cursor: pointer; padding: 12px 16px;
  font-size: 13px; font-weight: 600; color: var(--bf-text-muted);
  list-style: none;
}
.ds-past > summary::-webkit-details-marker { display: none; }
.ds-past > summary::before { content: "▸ "; display: inline-block; width: 1em; }
.ds-past[open] > summary::before { content: "▾ "; }
.ds-past-list { padding: 0 16px 8px; }
.ds-past-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--bf-border);
  font-size: 13px;
}
.ds-past-serial { font-family: var(--bf-font-mono); font-weight: 500; min-width: 70px; }
.ds-past-dates { font-family: var(--bf-font-mono); color: var(--bf-text-muted); flex: 1; }
.ds-past-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--bf-teal-tint); color: #14685D;
  padding: 2px 7px; border-radius: var(--bf-radius-pill);
}

/* ── Annual report: which yard am I looking at ──────────────────────────
 * Loud on purpose. The dangerous mistake with a per-yard report is filing one
 * yard's figures believing they are the whole business, and the numbers alone
 * give no clue which you are looking at. */
.nys-scope {
  background: var(--bf-sand-tint);
  border: 1px solid var(--bf-warning);
  border-radius: var(--bf-radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #7A5312;
}
.nys-scope strong { font-size: 14px; }
.nys-scope-note {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(122,83,18,.25);
  font-size: 12px;
}

/* A yard with nothing free. Shown rather than omitted, and marked rather than
   left looking like any other count — "Tiona 0" is the useful reading. */
.fa-yard-chip.fa-yard-empty {
  background: var(--bf-danger-tint);
  color: var(--bf-danger-text);
  border-color: var(--bf-danger);
}

/* ── Admin: Yards ───────────────────────────────────────────────────────── */
.yd-list { display: grid; gap: 14px; }
.yd-card {
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  background: var(--bf-surface);
  padding: 14px 16px;
}
/* Still listed when inactive — its historical records are filed under it, so
   hiding it would make those look like they belong to nothing. */
.yd-card.yd-inactive { opacity: .62; }
.yd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.yd-name { font-size: var(--bf-fs-h3); font-weight: 700; }
.yd-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: var(--bf-radius-pill);
}
.yd-tag.yd-base   { background: var(--bf-teal-tint);   color: #14685D; }
.yd-tag.yd-off    { background: var(--bf-surface-sunk); color: var(--bf-text-muted); }
.yd-tag.yd-permit { background: var(--bf-sand-tint);   color: #7A5312; }
.yd-actions { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.yd-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--bf-text-muted); cursor: pointer; white-space: nowrap;
}
.yd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.yd-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--bf-track-label); color: var(--bf-text-muted);
}
.yd-grid input {
  font-family: var(--bf-font-body); font-size: 14px; font-weight: 400;
  text-transform: none; letter-spacing: normal; color: var(--bf-text);
  padding: 8px 10px;
  border: 1px solid var(--bf-border); border-radius: var(--bf-radius-sm);
  background: var(--bf-bg);
}
.yd-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bf-border);
}
.yd-note { font-size: 12px; color: var(--bf-text-muted); flex: 1; }
@media (max-width: 720px) { .yd-grid { grid-template-columns: 1fr; } }

.scrap-inv-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.scrap-inv-total { margin-left: auto; font-size: 14px; }
.scrap-inv-total strong { font-family: var(--bf-font-mono); font-size: 17px; }
.sc-num { font-family: var(--bf-font-mono); text-align: right; }
.sc-mono { font-family: var(--bf-font-mono); }
.sc-noval { color: var(--bf-text-muted); font-size: 12px; font-family: var(--bf-font-body); }
.sc-reg { font-size: 11px; font-weight: 700; background: var(--bf-teal-tint); color: #14685D; padding: 2px 8px; border-radius: var(--bf-radius-pill); }
.sc-voided { opacity: .5; }
.sc-void-tag { font-size: 10px; font-weight: 700; color: var(--bf-danger-text); }

/* ── Admin: scrap grades & prices ───────────────────────────────────────
 * One row, two halves. Left is the grade as configuration, right is setting a
 * price from a date — a visible divider because they behave differently: one
 * edits in place, the other only ever appends. */
.as-table { width: 100%; }
.as-table th { font-size: 11px; line-height: 1.25; vertical-align: bottom; }
.as-table input[type="text"], .as-table .as-name { width: 100%; min-width: 150px; }
.as-table .as-buy, .as-table .as-sell { width: 84px; font-family: var(--bf-font-mono); }
.as-table .as-from { width: 132px; }
.as-table .as-sort { font-family: var(--bf-font-mono); }
.as-table td, .as-table th { padding: 6px 8px; }
.as-cat-head {
  margin: 20px 0 8px; font-size: var(--bf-fs-h3); font-weight: 600;
}
.as-cat-head:first-of-type { margin-top: 4px; }
/* The divider between "what this grade is" and "what it's worth today". */
.as-sep { width: 14px; border-left: 2px solid var(--bf-border); padding: 0 !important; }
.as-cur { font-family: var(--bf-font-mono); white-space: nowrap; }
.as-noprice { color: var(--bf-text-muted); font-family: var(--bf-font-body); font-size: 12px; }
.as-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.as-add-chk {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--bf-text-muted); white-space: nowrap;
}

/* ── Scrap grades: drag to order ────────────────────────────────────────
 * The position used to be a number you typed, which is tedious and invites gaps
 * and duplicates. Dragging is the order, and dropping into another category's
 * table is how a grade moves between them. */
.as-grip {
  cursor: grab; user-select: none; text-align: center;
  color: var(--bf-text-muted); font-size: 13px; letter-spacing: -1px;
  width: 28px; padding: 6px 4px !important;
}
.as-grip:active { cursor: grabbing; }
.as-table tbody tr:hover .as-grip { color: var(--bf-accent-text); }
.as-ghost { opacity: .4; background: var(--bf-teal-tint); }
/* An empty category still shows its table, because that's the drop target. */
.as-empty-cat {
  padding: 10px 14px; margin-top: -6px;
  font-size: 12px; color: var(--bf-text-muted);
  border: 1px dashed var(--bf-border); border-radius: var(--bf-radius-sm);
}

/* A numeric column's heading has to sit over its numbers.
 * The cells are right-aligned (.sc-num) while the headings were left-aligned, so
 * every figure appeared under the *next* column's heading — a recovered tonnage
 * reading as if it had been shipped. Wrong in the most convincing way: the
 * numbers were right and the table was mislabelling them. */
/* Specificity matters here: style.css sets `.data-table th { text-align: left }`
   at (0,1,1), which a bare `.sc-numh` at (0,1,0) loses to no matter where it
   sits in the cascade. Qualifying it beats that. */
.data-table th.sc-numh,
.mc-table th.sc-numh,
th.sc-numh { text-align: right; }

/* ── Scrap: grade search (the box itself is a .bl-search) ──────────────── */
.scrap-search-clear { border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--bf-text-muted); padding: 0 4px; }
.scrap-search-clear:hover { color: var(--bf-text); }
.scrap-nohit { padding: 20px 4px; color: var(--bf-text-muted); font-size: 14px; }

/* ── One scrap ticket ───────────────────────────────────────────────────── */
.sc-ticket-row { cursor: pointer; }
.sc-ticket-row:hover { background: var(--bf-surface-alt); }
.st-head { display: flex; gap: 24px; margin-bottom: 14px; }
.st-head > div { flex: 1; }
.st-lbl {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--bf-track-label); color: var(--bf-text-muted); margin-bottom: 3px;
}
.st-sub { font-size: 12px; color: var(--bf-text-muted); margin-top: 2px; }
.st-total {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: var(--bf-radius-sm);
  background: var(--bf-surface-sunk); font-size: 13px;
}
.st-total strong { font-family: var(--bf-font-mono); font-size: 20px; }
.st-total .st-sub { margin-left: auto; }
/* The identity block is boxed because it's the part with a retention clock on
   it, not just another field on a form. */
.st-id {
  margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--bf-border); border-radius: var(--bf-radius-sm);
  background: var(--bf-surface);
}
.st-idgrid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 12px; align-items: baseline; }
.st-idgrid span { font-size: 10px; text-transform: uppercase; letter-spacing: var(--bf-track-label); color: var(--bf-text-muted); }
.st-void {
  margin-top: 12px; padding: 8px 12px; border-radius: var(--bf-radius-sm);
  background: var(--bf-danger-tint); color: #8E2E1E; font-weight: 600; font-size: 13px;
}

/* ── Retained photo ID ──────────────────────────────────────────────────
 * Prominent on purpose. A regulated purchase without the ID copy is a
 * compliance gap, and it is far cheaper to notice while the seller is still at
 * the counter than two years later when somebody asks for the register. */
.ss-idcap {
  display: flex; gap: 12px; align-items: center;
  border: 1px solid var(--bf-warning); background: var(--bf-sand-tint);
  border-radius: var(--bf-radius-sm); padding: 10px 12px; margin-bottom: 12px;
}
.ss-idcap.got { border-color: var(--bf-teal); background: var(--bf-teal-tint); }
.ss-idcap img { width: 74px; height: 52px; object-fit: cover; border-radius: 4px; border: 1px solid var(--bf-border); }
.ss-idcap strong { font-size: 13px; }
.ss-idcap .st-sub { margin-bottom: 6px; }

.st-idimg { margin-top: 10px; display: flex; gap: 12px; align-items: center; }
.st-idimg img {
  width: 120px; height: 80px; object-fit: cover; cursor: zoom-in;
  border: 1px solid var(--bf-border); border-radius: var(--bf-radius-sm);
}
.st-ok { color: #14685D; font-weight: 600; font-size: 13px; margin-right: 8px; }
.st-missing {
  flex: 1; padding: 9px 11px; border-radius: var(--bf-radius-sm);
  background: var(--bf-danger-tint); color: #8E2E1E; font-size: 13px; line-height: 1.45;
}
.st-missing button { margin-top: 8px; }

/* ── Scrap dashboard ────────────────────────────────────────────────────
 * Recessive chrome, thin marks, and the numbers doing the work. Category
 * colours are validated for colour-vision separation on both surfaces; every
 * segment is also directly labelled, so identity never rests on colour alone. */
.sd-range { display: flex; gap: 6px; margin-bottom: 14px; }
.sd-range-btn {
  border: 1px solid var(--bf-border); background: var(--bf-surface); color: var(--bf-text-muted);
  border-radius: var(--bf-radius-pill); padding: 5px 14px; font-size: 12px; cursor: pointer;
  font-family: var(--bf-font-body);
}
.sd-range-btn.on { background: var(--bf-accent); border-color: var(--bf-accent); color: #fff; }

/* An actionable gap, not decoration — icon plus words, never colour alone. */
.sd-alert {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--bf-danger); background: var(--bf-danger-tint);
  border-radius: var(--bf-radius); padding: 12px 14px; margin-bottom: 16px;
}
.sd-alert-ico {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bf-danger); color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}
.sd-alert strong { color: #8E2E1E; font-size: 14px; }
.sd-alert-sub { font-size: 12px; color: #8E2E1E; opacity: .85; margin-top: 2px; }
.sd-alert-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.sd-chip {
  border: 1px solid var(--bf-danger); background: var(--bf-surface); color: #8E2E1E;
  border-radius: var(--bf-radius-pill); padding: 4px 10px; font-size: 12px; cursor: pointer;
  font-family: var(--bf-font-mono);
}
.sd-chip:hover { background: var(--bf-danger); color: #fff; }

.sd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sd-tile {
  border: 1px solid var(--bf-border); background: var(--bf-surface);
  border-radius: var(--bf-radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.sd-tile-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--bf-track-label);
  color: var(--bf-text-muted); font-weight: 700;
}
/* The hero number. Text tokens, not a series colour. */
.sd-tile-value { font-family: var(--bf-font-mono); font-size: 24px; font-weight: 500; line-height: 1.1; }
.sd-tile-sub { font-size: 12px; color: var(--bf-text-muted); }
.sd-good .sd-tile-sub { color: #14685D; font-weight: 600; }
.sd-warn .sd-tile-sub { color: #8E2E1E; font-weight: 600; }

.sd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sd-card {
  border: 1px solid var(--bf-border); background: var(--bf-surface);
  border-radius: var(--bf-radius); padding: 14px 16px;
}
.sd-card.sd-wide { grid-column: 1 / -1; }
.sd-card h3 { margin: 0 0 10px; font-size: var(--bf-fs-h3); font-weight: 600; }
@media (max-width: 900px) { .sd-grid { grid-template-columns: 1fr; } }

.sd-trend { width: 100%; height: 124px; display: block; }
.sd-bar rect:first-child { transition: opacity .12s; }
.sd-bar:hover rect:first-child { opacity: .75; }
.sd-axis {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted);
}
.sd-stack { width: 100%; height: 26px; display: block; }
.sd-keys { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; }
.sd-key { display: flex; align-items: center; gap: 6px; color: var(--bf-text-muted); }
.sd-key i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.sd-key b { font-family: var(--bf-font-mono); color: var(--bf-text); font-weight: 500; }

.sd-gbs { display: grid; gap: 7px; }
.sd-gb { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto auto; gap: 10px; align-items: center; font-size: 13px; }
.sd-gb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-gb-track { background: var(--bf-surface-sunk); border-radius: 3px; height: 14px; overflow: hidden; }
.sd-gb-fill { display: block; height: 100%; background: var(--bf-accent-2); border-radius: 3px; }
.sd-gb-val { font-family: var(--bf-font-mono); font-weight: 500; }
.sd-gb-sub { font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted); min-width: 54px; text-align: right; }

.sd-empty { padding: 26px 4px; text-align: center; color: var(--bf-text-muted); font-size: 13px; }
.sd-note { margin-top: 10px; font-size: 12px; color: var(--bf-text-muted); line-height: 1.45; }

/* ── Purchasing report ───────────────────────────────────────────────────
 * Reuses the dashboard's tiles, cards and bar marks — it is the same data at a
 * different cadence, and giving it its own visual language would imply the two
 * screens disagree. What is added here is only what a closed period needs that
 * a rolling window doesn't: a period to page through, and changes against it. */
.sp-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.sp-bar .sd-range { margin-bottom: 0; }
.sp-nav { display: flex; align-items: center; gap: 8px; }
.sp-nav-btn {
  border: 1px solid var(--bf-border); background: var(--bf-surface); color: var(--bf-text);
  border-radius: var(--bf-radius); width: 30px; height: 30px; font-size: 17px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.sp-nav-btn:hover:not(:disabled) { background: var(--bf-surface-sunk); }
.sp-nav-btn:disabled { opacity: .35; cursor: default; }
.sp-period { display: flex; flex-direction: column; min-width: 190px; text-align: center; line-height: 1.25; }
.sp-period b { font-size: 15px; font-weight: 600; }
.sp-period-sub { font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted); }
.sp-actions { margin-left: auto; display: flex; gap: 6px; }

/* The change against the period before. Signed and arrowed as well as coloured,
   so it survives being read in greyscale or by someone who can't separate the
   two hues — the same rule the buy/sell spread follows below. */
.sp-d { font-size: 12px; font-family: var(--bf-font-mono); }
.sp-d.up { color: #14685D; font-weight: 600; }
.sp-d.down { color: #8E2E1E; font-weight: 600; }
.sp-d.flat { color: var(--bf-text-muted); }
.sp-d-vs { font-family: var(--bf-font-body); color: var(--bf-text-muted); font-weight: 400; margin-left: 3px; }

.sp-partial {
  border: 1px solid transparent;
  background: var(--bf-coral-tint); border-radius: var(--bf-radius);
  padding: 9px 12px; margin: 0 0 14px;
}
.sp-foot { margin-top: 14px; }

/* Day-of-week ticks under a week's seven bars. A month gets end labels instead —
   thirty-one of these would collide into a grey smear. */
.sp-dlabels { display: flex; margin-top: 5px; }
.sp-dlabels span {
  flex: 1; text-align: center; font-family: var(--bf-font-mono); font-size: 11px;
  color: var(--bf-text-muted);
}
.sp-dlabels b { color: var(--bf-text); font-weight: 600; margin-right: 3px; }

/* A category swatch is decoration beside a name that is already spelled out —
   never the only thing carrying the category. */
.sp-cat { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: 6px; }
.sp-catname { font-size: 11px; color: var(--bf-text-muted); margin-left: 4px; }
.sp-hint { font-size: 11px; color: var(--bf-text-muted); }
.sp-flag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: #8E2E1E; font-weight: 700; margin-left: 4px;
}
.sp-mono { font-family: var(--bf-font-mono); }
.sp-click { cursor: pointer; }
.sp-click:hover td { background: var(--bf-surface-sunk); }

/* Share of spend: a bar whose only job is rank at a glance, with the figure
   printed next to it because a bar cannot be read to one decimal place. */
.sp-share {
  display: inline-block; vertical-align: middle; width: 90px; height: 8px;
  background: var(--bf-surface-sunk); border-radius: 2px; overflow: hidden;
}
.sp-share-fill { display: block; height: 100%; background: var(--bf-accent-2); border-radius: 2px; }
.sp-share-pct {
  font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted);
  margin-left: 8px; vertical-align: middle;
}
.sp-cmp td:first-child { color: var(--bf-text-muted); }
.sp-grades tfoot td, .sp-cmp tfoot td { border-top: 2px solid var(--bf-border); }
@media (max-width: 760px) {
  .sp-actions { margin-left: 0; }
  .sp-bar { gap: 10px; }
}

/* Buy, sell and the gap between them. Direction is coloured but also signed, so
   it never depends on telling green from red. */
.as-table .as-cur { text-align: right; }
.as-spread { white-space: nowrap; }
.as-spread .as-up { color: #14685D; font-weight: 500; }
.as-spread .as-down { color: #8E2E1E; font-weight: 500; }
.as-pct {
  display: inline-block; margin-left: 6px; min-width: 40px;
  font-size: 11px; color: var(--bf-text-muted);
}

/* ── An ID copy already on file ──────────────────────────────────────────
   The card appears while the seller record is being filled in, so it has to
   read as an offer rather than an error. A number match is the same person and
   gets the confident treatment; a name match is a question and stays neutral,
   because "M Smith sold here before" is not identification. */
.ss-onfile-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-raised);
}
.ss-onfile-card.strong { background: var(--bf-success-tint); border-color: transparent; }
.ss-of-txt { flex: 1; min-width: 0; }
.ss-onfile-card em { color: var(--text-muted); font-style: normal; }

/* Stands in for the photo thumbnail when there is no new photo to show, so the
   block keeps its shape whichever path was taken. */
.ss-reuse-mark {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 64px; height: 44px; border-radius: 6px;
  border: 1px dashed var(--border);
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); background: var(--surface-raised);
}

/* Retention held open by later purchases. Informational, not a warning — the
   purge is working correctly, and the note exists so nobody concludes otherwise
   from seeing an old copy still on file. */
.sd-note.sd-held { background: var(--bf-surface-sunk); border-radius: var(--bf-radius-sm); padding: 8px 10px; }
.sd-note.sd-held .sd-alert-list { margin-top: 8px; }

/* ── The sale just taken ─────────────────────────────────────────────────
   Sits above the buying screen rather than replacing it: the counter serves the
   next person straight away, and the receipt for the last one stays one button
   away instead of behind a tab change. */
.scrap-took {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid var(--success);
  border-radius: 8px; background: var(--success-subtle);
}
.scrap-took > div:first-child { flex: 1; min-width: 0; }
.scrap-took-btns { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ── Recovered ───────────────────────────────────────────────────────────
   Two headline figures rather than a table of balances: how much came out of
   the stream, and what it would fetch today. Neither claims to describe what is
   physically in the yard. */
.sr-head { display: flex; gap: 34px; padding: 14px 2px 16px; flex-wrap: wrap; }
.sr-head strong { display: block; font-size: 24px; line-height: 1.2; margin-top: 3px; }
.sr-h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
         color: var(--text-muted); margin: 20px 0 8px; font-weight: 600; }
.sr-note { color: var(--text-muted); font-size: 12px; max-width: 320px; }
/* A right-aligned figure sitting flush against the left-aligned column beside it
   reads as one value. Same crowding that made the old inventory numbers appear
   to belong to the wrong heading. */
.data-table th.sr-by, .data-table td.sr-by { padding-left: 22px; }

/* ── Storage ─────────────────────────────────────────────────────────────
   The fill colour is never the only signal: the percentage is written out, and
   the warning states carry a sentence saying what to do. Colour is the fastest
   read for someone who already knows the screen, not the carrier of meaning. */
.stg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.stg-big { display: block; font-size: 30px; line-height: 1.15; margin-top: 2px; }
.stg-of { color: var(--text-muted); font-size: 13px; }
.stg-ed { color: var(--text-muted); font-size: 12px; }

.stg-bar { height: 12px; border-radius: 6px; background: var(--surface-raised);
           border: 1px solid var(--border); overflow: hidden; }
.stg-fill { height: 100%; border-radius: 5px 0 0 5px; background: var(--success); transition: width .3s; }
.stg-fill.lv-warn     { background: var(--warning); }
.stg-fill.lv-critical { background: var(--danger); }
.stg-scale { display: flex; justify-content: space-between; color: var(--text-muted);
             font-size: 11px; margin: 5px 2px 14px; }

.stg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.stg-tile { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.stg-tile strong { display: block; font-size: 21px; line-height: 1.2; margin: 3px 0 4px; }
.stg-tile.warn { border-color: var(--warning); }
.sd-note.stg-warn { background: var(--bf-warning-tint); color: var(--bf-warning-text); border-radius: var(--bf-radius-sm); padding: 8px 10px; }

.stg-spark { width: 100%; height: 84px; color: var(--primary); display: block; }
/* Cards sized to their contents: the chart is short and the table is long, and
   stretching the chart to match left a panel that looked like it had failed to
   load something. */
.sd-grid.stg-grid { align-items: start; }
/* The full table list can get long; keep the card a sane height and let the
   list scroll inside it rather than pushing everything else off the screen. */
.stg-tables { max-height: 420px; overflow-y: auto; }
/* The total pins to the bottom of the scroll area. The shadow is what makes it
   read as floating above the list rather than colliding with whichever row it
   happens to land on. */
.stg-tables tfoot td { position: sticky; bottom: 0; background: var(--surface);
                       border-top: 2px solid var(--border);
                       box-shadow: 0 -7px 11px -7px rgba(0, 0, 0, .22); }
.stg-overhead td { color: var(--text-muted); font-style: italic; }

/* ── Keyboard focus ───────────────────────────────────────────────
 *
 * There was no focus style anywhere in either stylesheet, and a dozen rules
 * set `outline: none` on :focus with nothing put back. Tabbing through the app
 * was invisible.
 *
 * :focus-visible rather than :focus, so a clicked button still looks clean and
 * only keyboard navigation draws the ring. Marked !important because it has to
 * outrank the existing `.thing:focus { outline: none }` rules — those are more
 * specific than a bare pseudo-class, and this is the accessibility floor rather
 * than a style anyone should be overriding per-component. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
  outline: 2px solid var(--bf-focus) !important;
  outline-offset: 2px !important;
}

/* Drawn inside for the icon rail and table cells, where an outset ring would be
 * clipped by the rail edge or overlap the neighbouring cell. */
.rail-item:focus-visible,
.data-table td:focus-visible,
.data-table th:focus-visible,
.conn-retry:focus-visible {
  outline-offset: -2px !important;
}

/* The rail is near-black in both themes; the accent alone is thin against it. */
.rail-item:focus-visible {
  outline-color: #fff !important;
  box-shadow: inset 0 0 0 3px rgba(224, 100, 75, 0.55);
}

/* ══════════════════════════════════════════════════════════════════════════
   MATERIAL DEPTH
   One overhead light source. Elevation by role (--bf-elev-1..5), a top-edge
   light catch (--bf-lift), recessed inputs (--bf-inset), a faint sheen on
   surface fills (--bf-sheen). Borders recede where a shadow now separates.
   All values live in batsford-tokens.css; tune them there, not here.
   ══════════════════════════════════════════════════════════════════════════ */

/* Cards at rest — elevation 1 + the light catch + a whisper of sheen. */
.bf-card,
.dash-chart-card,
.ct-card,
.dp-card {
  background-image: var(--bf-sheen);
  box-shadow: var(--bf-elev-1), var(--bf-lift);
}
.bf-card, .dash-chart-card { border: none; }

/* KPI tiles get their depth back without losing the soft tint. */
.dash-stat-card {
  background-image: var(--bf-sheen);
  box-shadow: var(--bf-elev-1), var(--bf-lift);
}

/* Interactive cards lift toward the pointer. */
.ct-card,
.dash-stat-card,
.dp-card {
  transition: box-shadow var(--bf-dur-fast) var(--bf-ease-out),
              transform var(--bf-dur-fast) var(--bf-ease-out);
}
.ct-card:hover,
.dash-stat-card:hover,
.dp-card:hover {
  box-shadow: var(--bf-elev-2), var(--bf-lift);
  transform: translateY(-1px);
  border-color: var(--bf-border);
}

/* Overlays climb the ladder by role. */
.modal                       { box-shadow: var(--bf-elev-4), var(--bf-lift); }
.omni-modal                  { box-shadow: var(--bf-elev-4); }
.toast,
.rail-flyout,
.rail-item[data-tip]::after  { box-shadow: var(--bf-elev-3); }

/* The rail reads as a raised panel — a top sheen down its length and a soft
   shadow spilling onto the content. The active item presses in, keeping its
   signature teal square. */
.sidebar.rail {
  background-color: var(--rail-bg);
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%);
  box-shadow: 3px 0 16px rgba(0,0,0,.14);
  border-right-color: transparent;
}
.rail-item.rail-active { box-shadow: var(--bf-inset); }

/* Primary button — a light-from-top sheen, the top-edge catch, and a
   coral-tinted drop shadow so it looks pressable. Presses in on :active. */
.btn-primary {
  background-color: var(--bf-accent-fill);
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 55%);
  box-shadow: var(--bf-elev-1), var(--bf-lift), 0 2px 8px var(--primary-glow, rgba(224,100,75,.22));
  transition: box-shadow var(--bf-dur-fast) var(--bf-ease-out),
              transform var(--bf-dur-fast) var(--bf-ease-out),
              filter var(--bf-dur-fast) var(--bf-ease-out);
}
.btn-primary:hover {
  background-color: var(--bf-accent-fill-hover);
  box-shadow: var(--bf-elev-2), var(--bf-lift), 0 4px 14px var(--primary-glow, rgba(224,100,75,.28));
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: var(--bf-inset);
  filter: brightness(0.95);
}

/* Secondary / ghost lift a little at rest, press on click. */
.btn-secondary { box-shadow: var(--bf-elev-1), var(--bf-lift); }
.btn-secondary:hover { box-shadow: var(--bf-elev-2), var(--bf-lift); transform: translateY(-1px); }
.btn:active, .bf-btn:active { transform: translateY(1px); }

/* Inputs look recessed — something you write into. */
input, textarea, select,
.bf-input,
.di-form input, .di-form select, .di-form textarea {
  box-shadow: var(--bf-inset);
}
input:focus, textarea:focus, select:focus,
.di-form input:focus, .di-form select:focus, .di-form textarea:focus {
  box-shadow: var(--bf-inset), 0 0 0 3px rgba(224,100,75,.22);
}

/* A grabbed card floats — top of the ladder + a hair of scale. This also
   retires the old hard blue/black Sortable ghost that was never re-skinned. */
.dp-chosen,
.sortable-fallback,
.dp-tl-card.dp-dragging {
  box-shadow: var(--bf-elev-5), var(--bf-lift) !important;
  transform: scale(1.02);
  opacity: 1 !important;
}
.dp-ghost {
  background: var(--bf-teal-tint) !important;
  opacity: 1 !important;
  outline: 2px dashed var(--bf-accent-2);
  outline-offset: -3px;
}

/* The remaining card-like list rows (Needs Attention stats, Fleet
   Availability rows/sheets/upcoming) were flat with a hard grey hover
   shadow — onto the ladder, keeping their own translateY. */
.na-stat, .fa-row, .fa-sheet, .fa-up {
  background-image: var(--bf-sheen);
  box-shadow: var(--bf-elev-1), var(--bf-lift);
}
.na-stat:hover:not(:disabled),
.fa-row:hover, .fa-sheet:hover, .fa-up:hover {
  box-shadow: var(--bf-elev-2), var(--bf-lift);
}

/* Dropdowns / context menus / the collapsed-sidebar drawer that carried
   their own hard black shadows. */
.omni-overlay .omni-modal,
.dropdown-menu, .context-menu, .ct-menu,
.sidebar-drawer, .rail-flyout {
  box-shadow: var(--bf-elev-3) !important;
}

/* Reduced-motion: the hover lifts are transform-driven, so the global
   *-rule already neutralises them; nothing to add here. */

/* ── Customer pages (#/customers, #/customers/:id) ─────────────────── */
.cu-page { display: grid; gap: var(--bf-4); }
.cu-back { justify-self: start; text-decoration: none; }
.cu-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--bf-4); flex-wrap: wrap;
}
.cu-head h2 { font-family: var(--bf-font-mono); font-weight: 500; margin: 0; }
.cu-sub { color: var(--bf-text-muted); margin: 4px 0 0; }
.cu-search {
  width: 280px; max-width: 100%;
  padding: 9px 12px; font: inherit; color: var(--bf-text);
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-sm); box-shadow: var(--bf-inset);
}
.cu-search:focus { outline: 2px solid var(--bf-focus); outline-offset: 1px; border-color: transparent; }
.cu-row { cursor: pointer; }
.cu-table .num, .cu-mini .num {
  text-align: right; font-family: var(--bf-font-mono); font-variant-numeric: tabular-nums;
}
.cu-link { color: inherit; text-decoration: underline; text-decoration-color: var(--bf-border); text-underline-offset: 3px; }
.cu-link:hover { color: var(--bf-accent-text); text-decoration-color: currentColor; }

.cu-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--bf-3); }
.cu-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--bf-3) var(--bf-4);
  background: var(--bf-surface); background-image: var(--bf-sheen);
  border: 1px solid var(--bf-border); border-radius: var(--bf-radius);
  box-shadow: var(--bf-elev-1), var(--bf-lift);
}
.cu-kpi-label { font-size: var(--bf-fs-small); color: var(--bf-text-muted); }
.cu-kpi-value { font-family: var(--bf-font-mono); font-size: 22px; font-variant-numeric: tabular-nums; }

.cu-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bf-4); align-items: start;
}
@media (max-width: 900px) { .cu-grid { grid-template-columns: minmax(0, 1fr); } }
.cu-card {
  min-width: 0; padding: var(--bf-4) var(--bf-5);
  background: var(--bf-surface); background-image: var(--bf-sheen);
  border: 1px solid var(--bf-border); border-radius: var(--bf-radius);
  box-shadow: var(--bf-elev-1), var(--bf-lift);
}
.cu-wide { grid-column: 1 / -1; }
.cu-card h3 {
  position: relative; padding-left: 18px; margin: 0 0 var(--bf-3);
  font-family: var(--bf-font-mono); font-weight: 500; font-size: var(--bf-fs-h3);
}
.cu-card h3::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--bf-accent-2);
}
.cu-card a:not(.cu-link) { color: var(--bf-accent-text); text-decoration: none; }
.cu-card a:not(.cu-link):hover { text-decoration: underline; }

.cu-list { list-style: none; margin: 0; padding: 0; }
.cu-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--bf-3);
  padding: 8px 0; border-top: 1px solid var(--bf-border);
}
.cu-list li:first-child { border-top: 0; padding-top: 0; }
.cu-list li > div { min-width: 0; }
.cu-list li > div .cu-muted { display: block; font-size: var(--bf-fs-small); }
.cu-list li > span { white-space: nowrap; font-size: var(--bf-fs-small); }
.cu-muted { color: var(--bf-text-muted); }
.cu-count { font-family: var(--bf-font-mono); color: var(--bf-text-muted); }
.cu-accounts { margin: var(--bf-3) 0 0; font-size: var(--bf-fs-small); }
.cu-warn {
  margin: var(--bf-3) 0 0; padding: 8px 12px; font-size: var(--bf-fs-small);
  color: var(--bf-warning-text); background: var(--bf-warning-tint); border-radius: var(--bf-radius-sm);
}
.cu-empty { color: var(--bf-text-muted); padding: var(--bf-6) 0; text-align: center; }
.cu-pill {
  font-family: var(--bf-font-mono); font-size: 11px; padding: 2px 9px;
  border-radius: var(--bf-radius-pill); background: var(--bf-surface-sunk); color: var(--bf-text-muted);
}
.cu-pill-hot { background: var(--bf-danger-tint); color: var(--bf-danger-text); }

.cu-mini { width: 100%; border-collapse: collapse; font-size: var(--bf-fs-small); }
.cu-mini th {
  padding: 0 8px 6px 0; text-align: left;
  font-family: var(--bf-font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--bf-text-muted);
}
.cu-mini td { padding: 7px 8px 7px 0; border-top: 1px solid var(--bf-border); vertical-align: top; }

/* ── Timeline & team-only notes ───────────────────────────────────────
   Sand + dashed edge + lock is the one "only the team sees this" look, used
   the same way on the customer page and in a request thread. */
.cu-note-compose { display: flex; gap: var(--bf-2); align-items: flex-end; margin-bottom: var(--bf-4); }
.cu-note-compose textarea {
  flex: 1; min-height: 44px; resize: vertical;
  padding: 9px 12px; font: inherit; color: var(--bf-text);
  background: var(--bf-sand-tint); border: 1px dashed var(--bf-sand); border-radius: var(--bf-radius-sm);
}
.cu-note-btn, .pr-mode-btn { display: inline-flex; align-items: center; gap: 6px; }
.cu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--bf-3); }
.cu-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; cursor: pointer;
  font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted);
  background: transparent; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-pill);
}
.cu-chip.active { background: var(--bf-surface-sunk); color: var(--bf-text); border-color: transparent; }
.cu-tl { list-style: none; margin: 0; padding: 0; }
.cu-tl-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--bf-3);
  padding: 10px 0; border-top: 1px solid var(--bf-border);
}
.cu-tl-item:first-child { border-top: 0; }
.cu-tl-note {
  background: var(--bf-sand-tint); border-radius: var(--bf-radius-sm);
  border-top-color: transparent; padding-inline: 8px; margin-inline: -8px;
}
.cu-tl-note + .cu-tl-item { border-top-color: transparent; }
.cu-tl-flag { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; }
.cu-tl-flag.cust { background: var(--bf-teal-tint); color: var(--bf-accent-2-text); }
.cu-tl-flag.team { background: var(--bf-sand-tint); color: var(--bf-warning-text); }
.cu-tl-note .cu-tl-flag.team { background: var(--bf-surface); }
.cu-tl-title { font-weight: 600; }
.cu-tl-text { margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.cu-tl-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 2px;
  font-size: var(--bf-fs-small); color: var(--bf-text-muted);
}
.cu-tl-act, .pr-note-act {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--bf-fs-small); color: var(--bf-accent-text);
}
.cu-tl-act:hover, .pr-note-act:hover { text-decoration: underline; }
.cu-tl-more { margin-top: var(--bf-3); }

.pr-chat-msg.note {
  align-self: flex-end; color: var(--bf-text);
  background: var(--bf-sand-tint); border: 1px dashed var(--bf-sand);
}
.pr-chat-msg.note .pr-chat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--bf-text-muted); }
.pr-note-head {
  display: flex; align-items: center; gap: 5px; margin-bottom: 3px;
  font-family: var(--bf-font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bf-warning-text);
}
.pr-chat-empty { color: var(--bf-text-muted); padding: 12px 0; }
.pr-mode {
  display: inline-flex; align-self: flex-start; gap: 4px; margin-bottom: var(--bf-2); padding: 3px;
  background: var(--bf-surface-sunk); border-radius: var(--bf-radius-pill);
}
.pr-mode-btn {
  padding: 5px 12px; border: 0; cursor: pointer; background: transparent;
  border-radius: var(--bf-radius-pill); font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted);
}
.pr-mode-btn.active { background: var(--bf-surface); color: var(--bf-text); box-shadow: var(--bf-elev-1); }
.pr-mode-btn[data-mode="note"].active { background: var(--bf-sand-tint); color: var(--bf-warning-text); }
.pr-chat-compose.note-mode textarea { background: var(--bf-sand-tint); border: 1px dashed var(--bf-sand); }
.pr-chat-compose.note-mode .btn-primary { background: var(--bf-warning); border-color: var(--bf-warning); color: var(--bf-ink); } /* white on amber was 2.9:1 */

/* ── Requests board (#/portal-requests/board) ─────────────────────────
   Lanes and cards are the dispatch board's; only the differences live here. */
.prb-page { display: flex; flex-direction: column; gap: var(--bf-3); }
.prb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bf-3); flex-wrap: wrap; }
.prb-views {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--bf-surface-sunk); border-radius: var(--bf-radius-pill);
}
.prb-view {
  padding: 5px 14px; border: 0; cursor: pointer; background: transparent;
  border-radius: var(--bf-radius-pill); font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted);
}
.prb-view.active { background: var(--bf-surface); color: var(--bf-text); box-shadow: var(--bf-elev-1); }
.prb-lanes .dp-lane { flex: 1 1 230px; min-width: 220px; max-width: 420px; }
.prb-lane[data-lane="on_hold"] .dp-lane-head { background: var(--bf-sand-tint); }
.prb-lane[data-lane="on_hold"] .dp-lane-count { background: var(--bf-surface); color: var(--bf-warning-text); }
.prb-lane[data-lane="done"] .dp-lane-count { background: var(--bf-teal-tint); color: var(--bf-accent-2-text); }
.prb-card { cursor: pointer; }
/* Unread is carried by the "N new" pill on the card; no coloured edge. */
.prb-kind { color: var(--bf-text); background: var(--bf-surface-sunk); }
.prb-new {
  font-family: var(--bf-font-mono); font-size: 10.5px; padding: 1px 8px;
  border-radius: var(--bf-radius-pill); background: var(--bf-danger-tint); color: var(--bf-danger-text);
}
.prb-foot { display: flex; justify-content: space-between; gap: 8px; font-size: var(--bf-fs-small); color: var(--bf-text-muted); }

/* ── Inbox: the rail bell and its flyout ───────────────────────────────
   The flyout shares the rail's ink surface. Unread items carry a teal edge,
   urgent ones (driver problems) a coral one; the bell holds a steady coral
   ring with a slow pulse while anything urgent is unread. */
#railInbox.inbox-urgent { color: var(--bf-accent); animation: inboxPulse 2.4s var(--bf-ease-in-out) infinite; }
#railInbox.inbox-urgent .rail-badge { background: var(--bf-danger); }
@keyframes inboxPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--bf-accent); }
  50% { box-shadow: inset 0 0 0 2px var(--bf-accent); }
}
.inbox-flyout { width: 340px; }
.inbox-body { overflow-y: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.inbox-section {
  padding: 10px 8px 4px; font-family: var(--bf-font-mono); font-size: 10.5px;
  letter-spacing: var(--bf-track-label); text-transform: uppercase; color: var(--rail-text); opacity: .7;
}
.inbox-item { display: flex; align-items: flex-start; gap: 4px; border-radius: var(--bf-radius-sm); }
.inbox-item:hover { background: var(--rail-surface); }
.inbox-open {
  flex: 1; min-width: 0; display: grid; gap: 2px; padding: 9px 10px;
  text-align: left; background: none; border: 0; border-radius: var(--bf-radius-sm);
  font: inherit; color: var(--rail-text); cursor: pointer;
}
/* Unread: the brand square leads the title (teal; coral when urgent) instead of
   a coloured edge on the row. A hidden "Unread" goes to screen readers, since
   bold and colour alone don't reach them. */
.inbox-mark {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 7px; vertical-align: .08em; background: var(--bf-ink-teal);
}
.inbox-item.urgent .inbox-mark { background: var(--bf-ink-coral); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.inbox-title { font-size: 13px; line-height: 1.35; }
.inbox-item.unread .inbox-title { color: var(--rail-text-strong); font-weight: 600; }
.inbox-flag {
  font-family: var(--bf-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bf-accent-text);
}
.inbox-more { font-family: var(--bf-font-mono); font-size: 11px; font-weight: 400; opacity: .7; }
.inbox-text {
  font-size: 12px; opacity: .8; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.inbox-when { font-family: var(--bf-font-mono); font-size: 11px; opacity: .6; }
.inbox-pin {
  padding: 10px 8px; background: none; border: 0; cursor: pointer;
  font-family: var(--bf-font-mono); font-size: 11px; color: var(--rail-text); opacity: .7;
}
.inbox-pin:hover, .inbox-pin[aria-pressed="true"] { opacity: 1; color: var(--bf-sand); }
.inbox-empty { display: grid; gap: 4px; padding: 28px 16px; text-align: center; font-size: 13px; color: var(--rail-text); }
.inbox-empty strong { font-family: var(--bf-font-mono); font-weight: 500; color: var(--rail-text-strong); }
.pr-follow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pr-follow-state { font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted); }

/* ── Work Can Wait ──────────────────────────────────────────────────────
   Settings on My Account and Admin → Notifications: day toggles and two times.
   Held inbox items are listed but dimmed. The catch-up bar sits where the
   connection banner does, and above it when both are showing. */
.wcw-now {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--bf-radius-sm); font-size: 13px;
  background: color-mix(in srgb, var(--bf-accent-2) 12%, transparent);
}
.wcw-now.out { background: color-mix(in srgb, var(--bf-sand) 28%, transparent); }
.wcw-now.off { background: color-mix(in srgb, currentColor 6%, transparent); color: var(--text-muted); }
.wcw-choices { display: grid; gap: 8px; margin-bottom: 12px; }
.wcw-choice, .wcw-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; cursor: pointer; margin: 0 0 10px; font-weight: 400; }
.wcw-choice input, .wcw-check input { margin-top: 3px; flex: none; width: auto; }
.wcw-sub { display: block; font-size: 12.5px; color: var(--text-muted); font-weight: 400; }
.wcw-editor {
  display: grid; gap: 12px; margin: 0 0 16px; padding: 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, .12)); border-radius: var(--bf-radius-sm);
}
.wcw-days { display: flex; flex-wrap: wrap; gap: 6px; }
.wcw-day {
  min-width: 48px; padding: 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border, rgba(0, 0, 0, .18)); background: transparent; color: inherit;
  font: inherit; font-size: 13px;
}
.wcw-day.on { background: var(--bf-accent-2); border-color: var(--bf-accent-2); color: #fff; }
.wcw-day:focus-visible, .catchup-btn:focus-visible { outline: 2px solid var(--bf-accent-2); outline-offset: 2px; }
.wcw-times { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; }
.wcw-times label { display: flex; align-items: center; gap: 8px; margin: 0; }
.wcw-times input { width: auto; }
.wcw-email { max-width: 360px; }
.wcw-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wcw-admin { padding: 24px; max-width: 640px; }
.inbox-item.held .inbox-open { box-shadow: none; opacity: .72; }
.inbox-held { color: var(--bf-sand); }

.catchup-banner {
  position: fixed; left: 64px; right: 0; bottom: 0; z-index: 1490;
  display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: 13px;
  background: #1F2024; color: #F6F1E9; border-top: 2px solid var(--bf-accent-2);
}
.catchup-banner[hidden] { display: none; }
.conn-banner:not([hidden]) ~ .catchup-banner { bottom: 42px; }
body:has(.app.sidebar-collapsed) .catchup-banner { left: 0; }
.catchup-msg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catchup-btn {
  flex: none; background: transparent; border: 1px solid currentColor; color: inherit;
  font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
}
.catchup-btn.primary { background: var(--bf-accent-2); border-color: var(--bf-accent-2); color: #fff; }
@media (max-width: 768px) {
  .catchup-banner { left: 0; flex-wrap: wrap; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .catchup-msg { white-space: normal; flex-basis: 100%; }
}

/* ── No page panel ──────────────────────────────────────────────────────
   Screens built on .query-editor-wrapper sit straight on the page background
   instead of in an off-white panel; the things standing on them (the SQL box,
   result and data tables, the report pickers) keep their own surfaces, header
   bands and rounded edges. html + class outranks style.css's
   html[data-theme="light"] .query-editor-wrapper { background: var(--surface) }.

   Started life scoped to Incoming Requests (.pr-page). The panel was never
   specific to that screen, though: the query editor and Reports use the same
   wrapper, so both were laying a white sheet of paper on a tan one. One ground.

   The form screens on .di-page (new and edit delivery sheet, materials out, the
   CDDHRF permit info) had the same sheet; their .di-section cards stand on the
   ground instead. */
html .main .query-editor-wrapper,
html .main .di-page { background: transparent; }

/* Customer page: the timeline can be minimized to its heading. */
.cu-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bf-3); margin-bottom: var(--bf-3); }
.cu-card-head h3 { margin: 0; }
.cu-collapsed .cu-card-head { margin-bottom: 0; }

/* Customer page: searching weight tickets by text and date range. */
.cu-weights-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bf-2) var(--bf-3); margin-bottom: var(--bf-3); }
.cu-weights-tools .cu-search { flex: 1 1 240px; width: auto; }
.cu-date { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--bf-fs-small); color: var(--bf-text-muted); }
.cu-date input {
  padding: 7px 8px; font: inherit; color: var(--bf-text);
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-sm);
}
.cu-weights-status { font-size: var(--bf-fs-small); color: var(--bf-text-muted); }

/* ── Rail menus: Yard, Billing, Data & reports, account ────────────────
   Short menus that open level with their rail button (placed by
   railMenuPlace) instead of full-height panels. Items are icon + label rows
   on the rail's ink; a count rides at the right. On phones they fill the space
   beside the drawer like the other panels. */
.rail-flyout.rail-menu {
  height: auto; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); width: 236px; padding: 8px 0; overflow-y: auto;
  border: 1px solid var(--rail-divider); border-left: 0;
  border-radius: 0 var(--bf-radius) var(--bf-radius) 0;
}

/* ── Rail flyouts are the rail continuing outwards ─────────────────────
   Both kinds — the short menus above and the full-height Tables / Saved
   Queries panels — are the rail extending, not cards resting beside it, so
   the join between them has to disappear:

   - they sit one pixel back, over the rail's own border-right, so the divider
     stops exactly where the panel leaves and picks up again below it;
   - they stack above the rail (60), because the rail throws a shadow to its
     right that was falling across the panel's first several pixels and reading
     as the panel passing underneath it;
   - their shadow only ever travels right and down — the centred elevation-3
     token washed back over the rail and drew the seam it was meant to hide.

   The squared, border-less left edge was always right; it just had a shadow
   lying across it. */
.rail-flyout {
  --rail-ext-shadow: 10px 0 22px rgba(61,50,38,.15), 5px 12px 28px rgba(61,50,38,.11);
  left: 63px;
  z-index: 61;
  box-shadow: var(--rail-ext-shadow) !important;
}
[data-theme="dark"] .rail-flyout {
  --rail-ext-shadow: 10px 0 24px rgba(0,0,0,.52), 5px 14px 32px rgba(0,0,0,.44);
}
.rail-menu .rail-flyout-head { padding: 4px 14px 8px; margin-bottom: 4px; font-size: 13px; }
.rail-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--bf-font-mono); font-size: 13px; color: var(--rail-text);
}
.rail-menu-item:hover, .rail-menu-item:focus-visible {
  background: var(--rail-surface); color: var(--rail-text-strong); outline: none;
}
.rail-menu-item:focus-visible { box-shadow: inset 3px 0 0 var(--bf-accent-2); }
.rail-menu-item .rail-ico { width: 18px; height: 18px; flex: none; }
.rail-menu-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-menu-item .rail-badge { position: static; margin-left: auto; flex: none; }
.rail-menu-sep { height: 1px; margin: 6px 14px; background: var(--rail-divider); }
/* The button's hover label would sit on top of its own open menu's heading.
   Desktop only: in the phone drawer that label is the button's name. */
@media (min-width: 769px) {
  .rail-item.rail-active[data-tip]::after { opacity: 0 !important; }
}
@media (max-width: 768px) {
  .rail-flyout.rail-menu { top: 0 !important; max-height: none; border: 0; border-radius: 0; }
  /* On a phone the rail is the 214px drawer (z 1100) over a dimming overlay
     (z 1050). The desktop placement above (left 63px, z 61) put every flyout
     under both, so Yard, Billing, Data & reports opened invisibly. Beside the
     drawer, above the overlay, clear of the notch. */
  .rail-flyout, .rail-flyout.rail-menu {
    left: 236px; width: calc(100vw - 236px); z-index: 1090;
    height: 100dvh;
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  /* With a menu open, the drawer folds back to its icon rail — the same rail
     as on a computer — and the menu takes the rest of the screen, so names like
     "Container Tracking" and "Ready to Invoice" fit. Closing the menu unfolds
     the drawer with its labels again. */
  .sidebar.rail {
    width: calc(236px + env(safe-area-inset-left)); /* every label on one line */
    transition: transform .22s ease, width .18s ease, padding .18s ease;
  }
  body.rail-menu-open .sidebar.rail {
    width: calc(64px + env(safe-area-inset-left));
    padding-left: calc(11px + env(safe-area-inset-left)); padding-right: 11px;
  }
  body.rail-menu-open .sidebar.rail .rail-item { justify-content: center; gap: 0; padding: 11px 0; }
  body.rail-menu-open .sidebar.rail .rail-item[data-tip]::after,
  body.rail-menu-open .sidebar.rail .rail-group-label { display: none; }
  body.rail-menu-open .sidebar.rail .rail-badge { position: absolute; top: 3px; right: 3px; margin: 0; }
  body.rail-menu-open .sidebar.rail .rail-brand { align-self: center; padding: 2px 0 10px; }
  body.rail-menu-open .rail-flyout,
  body.rail-menu-open .rail-flyout.rail-menu {
    left: calc(63px + env(safe-area-inset-left));
    width: calc(100vw - 63px - env(safe-area-inset-left));
  }
  /* A drawer label that doesn't fit (the account button's "name · role")
     wraps under itself instead of running off the drawer's edge. */
  .sidebar.rail .rail-item[data-tip]::after {
    white-space: normal; text-align: left; line-height: 1.3; min-width: 0; overflow-wrap: anywhere;
  }
  .sidebar.rail .rail-item .rail-ico { flex: none; }
  /* Room for the whole name; a very long one wraps rather than being cut. */
  .rail-menu-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
  .rail-menu-item { font-size: 14px; padding: 11px 12px; }
  .rail-flyout .table-list li { white-space: normal; }
}

/* Scheduling a pickup as a different material, and its prices. */
.pm-more {
  display: grid; gap: 8px; margin: -2px 0 10px; padding: 10px 12px;
  border-radius: var(--bf-radius-sm); background: var(--bf-sand-tint);
}
.pm-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; cursor: pointer; }
.pm-check input { width: auto; margin: 0; }
.pm-prices { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.pm-prices label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.pm-prices input { width: 110px; }
.pm-hint { margin: 0 !important; }
.pm-note strong { color: var(--bf-warning-text); }
.bill-load-rate { font-size: 11px; color: var(--bf-warning-text); white-space: nowrap; }


/* ══════════════════════════════════════════════════════════════════════════
   ONE BATSFORD LOOK (Sep 2026)
   Tally, the customer portal and batsfordsystems share one language now:
   ink chrome lit by a coral glow and a teal glow from opposite corners, a
   faint blueprint grid fading across it, bigger and lighter DM Mono heads,
   the coral "weighbridge beam" under a key word, and icon tiles that carry
   a soft tone. Ink is for chrome and heroes; the working screens stay on
   one paper ground, and dense tables stay calm. Tokens: batsford-tokens.css
   ("Ink surfaces"). Everything that moves stops for reduced motion.
   ══════════════════════════════════════════════════════════════════════════ */

/* Colour families, same as the portal: anything with tone-* has --tone/--tone-tint. */
.tone-teal  { --tone: var(--bf-teal);  --tone-tint: var(--bf-teal-tint); }
.tone-coral { --tone: var(--bf-coral); --tone-tint: var(--bf-coral-tint); }
.tone-sand  { --tone: #B07F2A;         --tone-tint: var(--bf-sand-tint); }
.tone-sage  { --tone: #4B8660;         --tone-tint: var(--bf-sage-tint); }
.tone-rose  { --tone: #B9604E;         --tone-tint: var(--bf-rose-tint); }
[data-theme="dark"] .tone-sand { --tone: #D6A24B; }
[data-theme="dark"] .tone-sage { --tone: #7DBB92; }
[data-theme="dark"] .tone-rose { --tone: #E0917F; }

/* ── The rail: lit ink, like the portal masthead and the site header ──── */
html[data-theme="dark"] { --rail-bg: var(--bf-ink-deep); --rail-surface: #1F2027; }
.sidebar.rail {
  isolation: isolate;
  background:
    radial-gradient(150% 30% at 0% 0%, var(--bf-glow-coral), transparent 72%),
    radial-gradient(160% 30% at 100% 100%, var(--bf-glow-teal), transparent 72%),
    var(--rail-bg);
  box-shadow: 3px 0 18px rgba(23,24,28,.18);
}
/* the blueprint grid, strongest at the top and gone by the middle */
.sidebar.rail::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--bf-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bf-grid-line) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}
.rail-item { color: var(--bf-ink-muted); }
.rail-item:hover { background: var(--bf-ink-raise); color: var(--bf-ink-text); }
.rail-item.rail-active {
  background: rgba(246,241,233,.11);
  color: var(--bf-ink-text);
  box-shadow: inset 0 0 0 1px var(--bf-ink-line);
}
.rail-div { background: var(--bf-ink-line); }
.rail-badge { box-shadow: 0 0 0 2px var(--rail-bg); }
.rail-version { color: var(--bf-ink-muted); opacity: 1; letter-spacing: .04em; } /* 9px over the rail's coral glow — needs the stronger ink tone */
.rail-version:hover { color: var(--bf-ink-text); }

/* Flyouts are the rail extending: same ink, the same coral light arriving at
   the top, and headings set as the portal's tracked labels. */
.rail-flyout,
html[data-theme="light"] .rail-flyout {
  background:
    radial-gradient(120% 220px at 0% 0%, rgba(224,100,75,.16), transparent 70%),
    var(--rail-bg);
}
.rail-flyout.rail-menu { background: var(--rail-bg); }
.rail-flyout-head,
.rail-menu .rail-flyout-head {
  font-size: var(--bf-fs-label);
  letter-spacing: var(--bf-track-label);
  text-transform: uppercase;
  color: var(--bf-ink-faint);
  border-bottom-color: var(--bf-ink-line);
}
.rail-menu-item { color: var(--bf-ink-muted); border-radius: 10px; width: calc(100% - 12px); margin: 0 6px; padding: 9px 10px; }
.rail-menu-item:hover, .rail-menu-item:focus-visible { background: var(--bf-ink-raise); color: var(--bf-ink-text); }
.rail-menu-sep { background: var(--bf-ink-line); }

/* Phone header: the portal's masthead. The glows rise from the bottom edge
   and fade out before the top, so the header's top edge is plain rail colour
   and runs seamlessly into the strip by the notch (which Safari paints flat). */
.mobile-header {
  background:
    radial-gradient(45% 120% at 0% 100%, rgba(224,100,75,.24), transparent 62%),
    radial-gradient(40% 120% at 100% 100%, rgba(30,147,132,.24), transparent 62%),
    var(--rail-bg);
  border-bottom-color: var(--bf-ink-line);
  box-shadow: 0 12px 30px -16px rgba(23,24,28,.55);
}

/* ── Screen headings: the portal/site head, bigger and lighter ────────── */
.dashboard-header h2,
.ct-header h2,
.cu-head h2,
.di-header h2,
.rpt-header h2,
.data-entry-header h2,
.ct-detail-header h2,
.ds-detail-header h2,
.query-editor-wrapper:not(.pr-page) .query-top-bar h2 {  /* Admin, query editor, password — were the old 800-weight head */
  font-family: var(--bf-font-mono);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.035em;
}
/* Cancel delivery — a quiet ghost button that reads as destructive on hover. */
.ds-cancel-btn { color: var(--bf-danger-text); }
.ds-cancel-btn:hover { background: var(--danger-subtle); color: var(--danger-hover); }

/* Dashboard part-to-whole: the numbers are written out beside the shape, so a
   slice never has to be read by colour alone. Swatches are the brand square. */
.dash-donut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 20px; align-items: center; }
.dash-donut .dash-chart-wrap { height: clamp(180px, 22vh, 260px); }
.dash-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dash-legend li {
  display: grid; grid-template-columns: 9px minmax(0, 1fr) auto 3.2em; gap: 10px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--bf-border); font-size: 13px;
}
.dash-legend li:last-child { border-bottom: 0; }
.dash-legend-sw { width: 9px; height: 9px; border-radius: 2px; }
.dash-legend-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-legend b, .dash-legend-pct { font-family: var(--bf-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.dash-legend b { font-weight: 500; }
.dash-legend-pct { color: var(--bf-text-muted); font-size: 12px; }
.dash-split { display: grid; gap: 14px; padding-top: 4px; }
.dash-split-bar { display: flex; gap: 3px; height: 18px; border-radius: 6px; overflow: hidden; }
.dash-split-bar span { min-width: 6px; }
.dash-split-total, .dash-split-empty { margin: 0; color: var(--bf-text-muted); font-size: 13px; }
.dash-split-total b { color: var(--bf-text); font-family: var(--bf-font-mono); font-weight: 500; }
@media (max-width: 720px) { .dash-donut { grid-template-columns: minmax(0, 1fr); } }

/* Panels round up to the portal's 20px. */
.dash-chart-card { border-radius: 20px; }
.dash-chart-card h3 { font-size: 15px; letter-spacing: -0.02em; }

/* Primary action: the portal's coral pill — lit from the top, coral shadow.
   Filled with the deeper coral so the white label clears 4.5:1 (the brand
   coral under white text was 2.9:1). */
.btn-primary {
  background-color: var(--bf-accent-fill);
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px -8px rgba(224,100,75,.7);
}
.btn-primary:hover {
  filter: none;
  background-color: var(--bf-accent-fill-hover);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 24px -8px rgba(224,100,75,.75);
}
.btn-primary:active { box-shadow: var(--bf-inset); }

/* ── The dashboard hero: the portal's home greeting, on ink ───────────── */
.dash-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px;
  padding: 36px 38px 34px; margin-bottom: 18px;
  border-radius: 26px; background: var(--bf-ink); color: var(--bf-ink-text);
  box-shadow: var(--bf-elev-3);
}
[data-theme="dark"] .dash-hero { background: var(--bf-ink-deep); box-shadow: var(--bf-elev-2), inset 0 0 0 1px var(--bf-ink-line); }
.dash-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(560px circle at var(--mx, -999px) var(--my, -999px), rgba(246,241,233,.07), transparent 45%),
    radial-gradient(55% 90% at 0% 0%, var(--bf-glow-coral), transparent 65%),
    radial-gradient(45% 80% at 100% 100%, var(--bf-glow-teal), transparent 65%);
}
.dash-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--bf-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bf-grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(100deg, transparent 10%, #000 75%);
          mask-image: linear-gradient(100deg, transparent 10%, #000 75%);
}
.dash-hero-copy { align-self: center; min-width: 0; }
/* The date leads the summary line under the greeting (it used to be a tracked
   uppercase label above it). */
.dash-hero-date { color: var(--bf-ink-text); }
.dash-hero h2 {
  font-family: var(--bf-font-mono); font-weight: 400; color: var(--bf-ink-text);
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -0.045em;
  margin: 0 0 14px;
}
/* The weighbridge beam from the mark, drawn under the name. */
.dash-hero h2 .hl { position: relative; color: var(--bf-ink-coral); white-space: nowrap; }
.dash-hero h2 .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.1em; height: .26em;
  border-inline: .07em solid var(--bf-coral);
  background: linear-gradient(var(--bf-coral), var(--bf-coral)) center / 100% .07em no-repeat;
  transform-origin: left; animation: bf-beam-in 1s .3s var(--bf-ease-out) both;
}
@keyframes bf-beam-in { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
.dash-hero-sub { font-size: 15.5px; color: var(--bf-ink-muted); max-width: 46ch; line-height: 1.55; }
.dash-hero-sub b { color: var(--bf-ink-text); font-weight: 500; }
.dash-hero-sub .warn { color: var(--bf-ink-coral); }
.dash-hero-actions { align-self: center; min-width: 0; }
.dash-hero-label {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--bf-font-mono); font-size: var(--bf-fs-label);
  letter-spacing: var(--bf-track-label); text-transform: uppercase;
  color: var(--bf-ink-faint); margin-bottom: 10px;
}
.dash-hero-refresh {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; cursor: pointer;
  background: transparent; color: var(--bf-ink-muted);
  border: 1px solid rgba(246,241,233,.18); border-radius: var(--bf-radius-pill);
  font: inherit; letter-spacing: .08em;
}
.dash-hero-refresh:hover { color: var(--bf-ink-text); border-color: rgba(246,241,233,.4); }
.dash-hero-refresh svg { width: 12px; height: 12px; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0;
  border-radius: 16px; color: var(--bf-ink-text); text-align: left; cursor: pointer; font: inherit;
  background: var(--bf-ink-raise); border: 1px solid rgba(246,241,233,.1);
  transition: background var(--bf-dur-fast), border-color var(--bf-dur-fast), transform var(--bf-dur-base) var(--bf-ease-out);
}
.quick:hover { background: rgba(246,241,233,.12); border-color: rgba(246,241,233,.24); transform: translateY(-2px); }
.quick:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.quick-icon {
  position: relative; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: var(--tone); color: #fff; box-shadow: 0 8px 18px -8px var(--tone);
}
.quick-icon svg { width: 18px; height: 18px; }
.quick-words { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.quick-title { font-family: var(--bf-font-mono); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-blurb { font-size: 12px; color: var(--bf-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bf-coral); color: #fff; font-family: var(--bf-font-mono); font-size: 11.5px;
  box-shadow: 0 0 0 3px rgba(224,100,75,.25);
}
@media (max-width: 1100px) { .dash-hero { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 760px) {
  .dash-hero { padding: 26px 20px 20px; border-radius: 22px; }
  .quick-grid { grid-template-columns: 1fr; }
}

/* ── KPI tiles: the portal's stat tiles — icon, tone blob, big light number ── */
.dash-stat-card {
  position: relative; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 20px 17px;
  background: var(--bf-surface);
  background-image: none;
  border: 1px solid var(--bf-border);
  border-radius: 20px;
  box-shadow: var(--bf-elev-1), var(--bf-lift);
}
.dash-stat-card::after {
  display: block; content: ""; position: absolute; right: -38px; top: -38px; width: 118px; height: 118px;
  border-radius: 50%; background: var(--tone-tint, var(--bf-teal-tint)); opacity: .8;
}
.dash-stat-card > * { position: relative; z-index: 1; }
.dash-stat-card:hover { box-shadow: var(--bf-elev-2), var(--bf-lift); transform: translateY(-2px); }
.dash-stat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dash-stat-icon {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--tone-tint); color: var(--tone);
}
.dash-stat-icon svg { width: 18px; height: 18px; }
.dash-stat-card .dash-stat-value {
  font-size: clamp(28px, 2.3vw, 36px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.05;
}
.dash-stat-card .dash-stat-label { line-height: 1.3; min-width: 0; }
.dash-stat-card .dash-stat-flag { align-self: flex-start; margin: 8px 0 0; }
/* an overdue pickup turns its tile warm, like the portal's "hot" tile */
.dash-stat-card.hot {
  border-color: rgba(224,100,75,.4);
  background: linear-gradient(140deg, var(--bf-coral-tint), var(--bf-surface) 70%);
}
.dash-stat-card.hot .dash-stat-value { color: var(--bf-accent-text); }

/* ── Arrival: the dashboard settles in, once ─────────────────────────── */
@keyframes bf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dashboard:not(.no-anim) .dash-hero       { animation: bf-rise .7s var(--bf-ease-out) backwards; }
.dashboard:not(.no-anim) .dash-stat-card  { animation: bf-rise .7s var(--bf-ease-out) backwards; }
.dashboard:not(.no-anim) .dash-stat-card:nth-child(2) { animation-delay: 40ms; }
.dashboard:not(.no-anim) .dash-stat-card:nth-child(3) { animation-delay: 80ms; }
.dashboard:not(.no-anim) .dash-stat-card:nth-child(4) { animation-delay: 120ms; }
.dashboard:not(.no-anim) .dash-stat-card:nth-child(5) { animation-delay: 160ms; }
.dashboard:not(.no-anim) .dash-stat-card:nth-child(6) { animation-delay: 200ms; }
.dashboard.no-anim .dash-hero h2 .hl::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .dash-hero, .dash-stat-card, .dash-hero h2 .hl::after { animation: none !important; }
  .quick:hover, .dash-stat-card:hover { transform: none; }
}

/* ── Prices per yard (Admin → Scrap) ─────────────────────────────────────
   One line per yard in the Yard / Buy / Sell / Spread cells. Every line has
   the same height so a yard's figures read straight across the row. */
.as-table .as-yl { line-height: 22px; min-height: 22px; white-space: nowrap; }
.as-table .as-yard { color: var(--bf-text-muted); font-size: 13px; }
.as-table .as-for { white-space: nowrap; font-size: 13px; }
.as-table .as-for label { display: flex; align-items: center; gap: 5px; line-height: 22px; }
/* A price still answered by the old every-yard list rather than the yard's own. */
.as-inherit { font-style: italic; color: var(--bf-text-muted); }
.as-hist-yards { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
/* A row is a line per yard tall already, so Set and History stack rather than
   widening a table that has gained two columns. */
.as-table .as-acts .btn { display: block; width: 100%; }
.as-table .as-acts .btn + .btn { margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   READY TO INVOICE (Oct 2026)
   One card per customer, whatever the billing mode. Ink only on the hero; the
   cards stand on the paper ground like every other working screen. Kinds keep
   one tone each everywhere they appear: the chip, the mix bar, the line tag.
   ══════════════════════════════════════════════════════════════════════════ */
.tone-info { --tone: var(--bf-info); --tone-tint: var(--bf-info-tint); }
[data-theme="dark"] .tone-info { --tone: #7FAAB8; --tone-tint: #1E2B30; }

html .main .bl-page { background: transparent; }
.bl-page { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.bl-page .dash-hero { margin-bottom: 0; }
.bl-page .dash-hero h2 { font-size: clamp(28px, 3.2vw, 42px); }
.bl-page .dash-hero-actions { display: flex; flex-direction: column; gap: 10px; }
.bl-page .dash-hero-label { margin-bottom: 0; }

.bl-mix { display: flex; height: 12px; border-radius: var(--bf-radius-pill); overflow: hidden; background: var(--bf-ink-line); }
.bl-mix span { display: block; height: 100%; background: var(--tone); }
.bl-mix span + span { box-shadow: inset 2px 0 0 rgba(0,0,0,.18); }
.bl-mix-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 12.5px; color: var(--bf-ink-muted); }
.bl-mix-legend div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bl-mix-legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--tone); }
.bl-mix-legend b { margin-left: auto; font-family: var(--bf-font-mono); font-weight: 400; color: var(--bf-ink-text); font-variant-numeric: tabular-nums; }

.bl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bl-tiles .dash-stat-value { font-family: var(--bf-font-mono); font-variant-numeric: tabular-nums; }
.bl-tile-note { font-size: 12px; color: var(--bf-text-muted); }

.bl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bl-search {
  flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-pill);
  padding: 7px 14px; box-shadow: var(--bf-inset);
}
.bl-search svg { width: 16px; height: 16px; color: var(--bf-text-muted); flex: none; }
.bl-search input { border: 0; background: transparent; outline: 0; font: inherit; color: var(--bf-text); width: 100%; padding: 0; box-shadow: none; }
.bl-search:focus-within { border-color: var(--bf-accent); box-shadow: 0 0 0 3px var(--bf-coral-tint); }
.bl-sort { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bf-text-muted); }
.bl-sort select { font: inherit; color: var(--bf-text); background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-pill); padding: 6px 10px; }
.bl-walkin svg, .na-allclear .btn svg { width: 14px; height: 14px; }

.bl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; cursor: pointer;
  border-radius: var(--bf-radius-pill); border: 1px solid var(--bf-border); background: var(--bf-surface);
  color: var(--bf-text); font: inherit; font-size: 13px;
  transition: background var(--bf-dur-fast), border-color var(--bf-dur-fast);
}
.bl-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.bl-chip span { font-family: var(--bf-font-mono); font-size: 11.5px; color: var(--bf-text-muted); }
.bl-chip:hover { border-color: var(--bf-text-muted); }
.bl-chip[aria-pressed="true"] { background: var(--bf-text); color: var(--bf-surface); border-color: var(--bf-text); }
.bl-chip[aria-pressed="true"] span { color: inherit; opacity: .7; }

.bl-list { display: flex; flex-direction: column; gap: 12px; }
.bl-empty { text-align: center; color: var(--bf-text-muted); padding: 30px; border: 1px dashed var(--bf-border); border-radius: var(--bf-radius-lg); }

.bl-cust {
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-elev-1), var(--bf-lift); overflow: hidden;
}
.bl-cust-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center;
  padding: 14px 18px; cursor: pointer;
}
.bl-cust-head:hover { background: var(--bf-surface-alt); }
.bl-cust-head:focus-visible { outline: 2px solid var(--bf-focus); outline-offset: -2px; }
.bl-avatar {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--bf-font-mono); font-size: 14px; background: var(--tone-tint); color: var(--tone);
}
.bl-cust-name { font-weight: 600; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bl-cust-meta { font-size: 12.5px; color: var(--bf-text-muted); }
.bl-mode {
  font-family: var(--bf-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400;
  color: var(--bf-text-muted); border: 1px solid var(--bf-border); border-radius: 6px; padding: 1px 6px;
}
.bl-age {
  font-family: var(--bf-font-mono); font-size: 11.5px; padding: 3px 9px; border-radius: var(--bf-radius-pill);
  background: var(--bf-surface-sunk); color: var(--bf-text-muted); white-space: nowrap;
}
.bl-age.warn { background: var(--bf-warning-tint); color: var(--bf-warning-text); }
.bl-age.late { background: var(--bf-danger-tint); color: var(--bf-danger-text); }
.bl-cust-total { font-family: var(--bf-font-mono); font-size: 19px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; }
.bl-chev svg { width: 18px; height: 18px; color: var(--bf-text-muted); transition: transform var(--bf-dur-base) var(--bf-ease-out); display: block; }
.bl-cust.open .bl-chev svg { transform: rotate(90deg); }
.bl-cust-body { display: none; border-top: 1px solid var(--bf-border); }
.bl-cust.open .bl-cust-body { display: block; }

.bl-line {
  display: grid; grid-template-columns: 22px 118px 96px minmax(0, 1fr) 112px; gap: 12px; align-items: center;
  padding: 10px 18px; border-bottom: 1px solid var(--bf-border);
}
.bl-line:hover { background: var(--bf-surface-alt); }
.bl-line input { width: 17px; height: 17px; margin: 0; accent-color: var(--bf-coral); }
.bl-line.off { opacity: .5; }
.bl-kind {
  justify-self: start; white-space: nowrap; font-size: 12px; font-weight: 500;
  color: var(--tone); background: var(--tone-tint); padding: 3px 9px; border-radius: var(--bf-radius-pill);
}
.bl-ref { font-family: var(--bf-font-mono); font-size: 12.5px; color: var(--bf-text-muted); background: none; border: 0; padding: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.bl-ref { cursor: pointer; text-decoration: underline; text-decoration-color: var(--bf-border); text-underline-offset: 3px; }
button.bl-ref:hover { color: var(--bf-accent-text); text-decoration-color: currentColor; }
.bl-desc { min-width: 0; display: flex; flex-direction: column; }
.bl-desc b { font-weight: 500; }
.bl-desc span { font-size: 12.5px; color: var(--bf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-amt { text-align: right; font-family: var(--bf-font-mono); font-variant-numeric: tabular-nums; }
.bl-stmt-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 18px; background: var(--bf-surface-sunk);
  font-family: var(--bf-font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bf-text-muted);
}
.bl-stmt-head .btn { margin-left: auto; text-transform: none; letter-spacing: 0; }
.bl-cust-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; background: var(--bf-surface-alt); }
.bl-sel { font-size: 13px; color: var(--bf-text-muted); }
.bl-sel b { font-family: var(--bf-font-mono); font-weight: 400; color: var(--bf-text); }
.bl-spacer { flex: 1; }

/* The invoice window */
.modal.bl-inv { max-width: 760px; width: 100%; }
.bl-inv-head { align-items: flex-start; }
.bl-inv-head h3 { font-family: var(--bf-font-mono); font-weight: 400; font-size: 22px; letter-spacing: -.03em; margin: 4px 0 2px; }
.bl-inv-head p { margin: 0; color: var(--bf-text-muted); font-size: 13px; }
.bl-eyebrow { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: var(--bf-track-label); text-transform: uppercase; color: var(--bf-text-muted); }
.bl-qb-wrap { border: 1px solid var(--bf-border); border-radius: var(--bf-radius); overflow-x: auto; }
table.bl-qb { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.bl-qb th { text-align: left; font-family: var(--bf-font-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bf-text-muted); background: var(--bf-surface-sunk); padding: 8px 12px; }
.bl-qb td { padding: 7px 12px; border-top: 1px solid var(--bf-border); vertical-align: top; }
.bl-qb .r { text-align: right; font-family: var(--bf-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-qb td.item { font-weight: 500; white-space: nowrap; }
.bl-qb td.d { color: var(--bf-text-muted); }
.bl-qb tr.credit td { color: var(--bf-success-text); }
.bl-qb tr.bl-qb-sub td { background: var(--bf-surface-alt); font-family: var(--bf-font-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--bf-text-muted); padding: 6px 12px; }
.bl-qb tfoot td { border-top: 2px solid var(--bf-text); font-weight: 600; }
.bl-qb tfoot .r { font-size: 16px; }
.bl-inv-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 4px; }
.bl-inv-tools svg { width: 14px; height: 14px; }
.bl-inv-form { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; margin-top: 10px; }
.bl-inv-form .form-group { margin: 0; }
#blQb { font-family: var(--bf-font-mono); }

/* Arrival — once, when opened by hand */
.bl-page:not(.no-anim) .dash-hero, .bl-page:not(.no-anim) .dash-stat-card, .bl-page:not(.no-anim) .bl-cust { animation: bf-rise .7s var(--bf-ease-out) backwards; }
.bl-page:not(.no-anim) .dash-stat-card:nth-child(2) { animation-delay: 40ms; }
.bl-page:not(.no-anim) .dash-stat-card:nth-child(3) { animation-delay: 80ms; }
.bl-page:not(.no-anim) .dash-stat-card:nth-child(4) { animation-delay: 120ms; }
.bl-page.no-anim .dash-hero h2 .hl::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .bl-page .dash-hero, .bl-page .dash-stat-card, .bl-page .bl-cust { animation: none !important; } }

@media (max-width: 980px) { .bl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .bl-tiles { gap: 10px; }
  .bl-mix-legend { gap: 6px 12px; }
  .bl-cust-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; }
  .bl-cust-head .bl-age, .bl-cust-head .bl-chev { display: none; }
  .bl-cust-total { font-size: 17px; }
  .bl-line { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "c k a" "c d d"; gap: 4px 10px; padding: 10px 14px; }
  .bl-line > input, .bl-line > span:first-child { grid-area: c; align-self: start; margin-top: 3px; }
  .bl-line .bl-kind { grid-area: k; }
  .bl-line .bl-ref { display: none; }
  .bl-line .bl-desc { grid-area: d; }
  .bl-line .bl-amt { grid-area: a; }
  .bl-stmt-head { padding: 8px 14px; flex-wrap: wrap; }
  .bl-cust-foot { padding: 12px 14px; }
  .bl-cust-foot .btn-primary { flex: 1 1 100%; justify-content: center; }
  .bl-inv-form { grid-template-columns: 1fr; }
}
.bl-tiles .dash-stat-unit { margin-left: 5px; }

/* ══════════════════════════════════════════════════════════════════════════
   INVOICE HISTORY (Oct 2026)
   A ledger: one calm row per invoice, grouped by month, newest first. The
   invoice itself opens in the same window style as Ready to Invoice's.
   ══════════════════════════════════════════════════════════════════════════ */
html .main .ih-page { background: transparent; }
.ih-page { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ih-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ih-head h2 { font-family: var(--bf-font-mono); font-weight: 400; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.04em; margin: 6px 0 4px; }
.ih-sub { margin: 0; color: var(--bf-text-muted); max-width: 60ch; }
.ih-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ih-toolbar .cu-date { font-size: 13px; color: var(--bf-text-muted); display: flex; align-items: center; gap: 6px; }
.ih-toolbar .cu-date input { font: inherit; color: var(--bf-text); background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-pill); padding: 5px 10px; }
.ih-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 0; }
.ih-filters:empty { display: none; }
.ih-filter {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; font-size: 13px;
  border-radius: var(--bf-radius-pill); background: var(--bf-teal-tint); color: var(--bf-accent-2-text);
}
.ih-filter button { border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.ih-filter button:hover { background: rgba(0,0,0,.06); }
.ih-filter svg { width: 12px; height: 12px; }

.ih-list { display: flex; flex-direction: column; gap: 14px; }
.ih-month {
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-elev-1), var(--bf-lift); overflow: hidden;
}
.ih-month-head {
  display: flex; justify-content: space-between; gap: 10px; padding: 9px 18px; background: var(--bf-surface-sunk);
  font-family: var(--bf-font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bf-text-muted);
}
.ih-row {
  display: grid; grid-template-columns: 64px 128px minmax(0, 1fr) auto 90px 112px; gap: 14px; align-items: center;
  width: 100%; padding: 11px 18px; border: 0; border-top: 1px solid var(--bf-border); background: transparent;
  font: inherit; color: var(--bf-text); text-align: left; cursor: pointer;
}
.ih-month-head + .ih-row { border-top: 0; }
.ih-row:hover { background: var(--bf-surface-alt); }
.ih-row:focus-visible { outline: 2px solid var(--bf-focus); outline-offset: -2px; }
.ih-date { font-family: var(--bf-font-mono); font-size: 12.5px; color: var(--bf-text-muted); }
.ih-qb { font-family: var(--bf-font-mono); font-size: 13.5px; }
.ih-noqb { color: var(--bf-text-muted); font-style: italic; font-family: var(--bf-font-body); font-size: 13px; }
.ih-cust { min-width: 0; display: flex; flex-direction: column; }
.ih-cust b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ih-cust span { font-size: 12.5px; color: var(--bf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ih-kinds { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ih-kinds .bl-kind { font-size: 11px; padding: 2px 8px; }
.ih-status { display: flex; justify-content: flex-end; }
.ih-total { font-size: 14px; }
.ih-row.voided .ih-qb, .ih-row.voided .ih-cust b, .ih-row.voided .ih-total { text-decoration: line-through; text-decoration-color: var(--bf-text-muted); color: var(--bf-text-muted); }
.ih-pill {
  display: inline-block; font-family: var(--bf-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--bf-radius-pill); background: var(--bf-surface-sunk); color: var(--bf-text-muted);
  vertical-align: middle; margin-left: 6px;
}
.ih-pill.void { background: var(--bf-danger-tint); color: var(--bf-danger-text); }
.ih-more { display: flex; justify-content: center; padding: 6px 0 2px; }

/* The invoice window, opened from history, a customer or a sheet */
.ih-batch .bl-inv-head h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ih-batch .bl-inv-head p .btn-linky { font-size: inherit; padding: 0; }
.ih-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--bf-radius); background: var(--bf-sand-tint); color: var(--bf-text); font-size: 13px; }
.ih-banner.void { background: var(--bf-danger-tint); }
.ih-note { margin: 0 0 12px; font-size: 13px; }
.ih-note b { font-family: var(--bf-font-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bf-text-muted); margin-right: 8px; }
.ih-item-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ih-item-acts { display: flex; gap: 14px; text-transform: none; letter-spacing: 0; font-family: var(--bf-font-body); }
.ih-item-acts .btn-linky { font-size: 12px; }
.ih-gone { display: block; text-transform: none; letter-spacing: 0; font-family: var(--bf-font-body); color: var(--bf-danger-text); margin-top: 3px; }
.bl-qb tr.voided td:not([colspan]) { color: var(--bf-text-muted); text-decoration: line-through; }
.ih-batch .modal-footer { display: flex; align-items: center; gap: 10px; }
.ih-void { color: var(--bf-danger-text); }
.ih-void:hover { border-color: var(--bf-danger); color: var(--bf-danger-text); }

/* Ready to Invoice: actions under the all-clear */
.na-allclear-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* The Billing card on a customer's page */
.cu-billing .cu-card-head .btn-linky { font-size: 13px; }
.cb-waiting { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 0 12px; border-bottom: 1px solid var(--bf-border); margin-bottom: 8px; }
.cb-waiting > div { display: flex; flex-direction: column; }
.cb-amt { font-family: var(--bf-font-mono); font-size: 26px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cb-amt.cb-zero { color: var(--bf-text-muted); }
.cb-recent { margin: 0 0 10px; }
.cb-recent li { padding: 0; }
.cb-inv {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  padding: 7px 0; border: 0; background: transparent; font: inherit; color: var(--bf-text); text-align: left; cursor: pointer;
}
.cb-inv:hover b { color: var(--bf-accent-text); }
.cb-inv b { font-family: var(--bf-font-mono); font-weight: 400; }
.cb-inv.voided b, .cb-inv.voided .bl-amt { text-decoration: line-through; color: var(--bf-text-muted); }
.cb-defaults { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding-top: 10px; border-top: 1px solid var(--bf-border); }
.cb-defaults label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--bf-text-muted); flex: 1 1 160px; }
.cb-defaults select { font: inherit; font-size: 13px; color: var(--bf-text); background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-sm); padding: 6px 8px; }

@media (max-width: 760px) {
  .ih-tiles { grid-template-columns: 1fr; }
  .ih-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q t" "c c" "k s"; gap: 4px 10px; padding: 11px 14px; }
  .ih-row .ih-date { display: none; }
  .ih-row .ih-qb { grid-area: q; }
  .ih-row .ih-total { grid-area: t; }
  .ih-row .ih-cust { grid-area: c; }
  .ih-row .ih-kinds { grid-area: k; justify-content: flex-start; }
  .ih-row .ih-status { grid-area: s; }
  .ih-month-head { padding: 9px 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SCRAP, REBUILT (Oct 2026)
   An ink strip carries the yard, today's figures and the tabs. The counter is
   three working columns — grades to tap, the ticket, the seller and what New
   York needs — so the whole sale is in view. Category colours are the ones the
   scrap charts always used: ferrous teal, non-ferrous coral, paper plum.
   ══════════════════════════════════════════════════════════════════════════ */
.tone-plum { --tone: #7A5FA6; --tone-tint: #EEE8F6; }
[data-theme="dark"] .tone-plum { --tone: #A88DD3; --tone-tint: #2A2436; }

html .main .scrap-page { background: transparent; }
.scrap-page { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
#scrapBody { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sx-empty { text-align: center; color: var(--bf-text-muted); padding: 34px 20px; border: 1px dashed var(--bf-border); border-radius: var(--bf-radius-lg); }
.sx-empty span { font-size: 13px; }

/* The strip */
.sx-strip {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 22px; background: var(--bf-ink); color: var(--bf-ink-text);
  padding: 18px 22px 0; box-shadow: var(--bf-elev-2);
}
[data-theme="dark"] .sx-strip { background: var(--bf-ink-deep); box-shadow: var(--bf-elev-2), inset 0 0 0 1px var(--bf-ink-line); }
.sx-strip::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(45% 120% at 0% 0%, var(--bf-glow-coral), transparent 65%), radial-gradient(40% 120% at 100% 100%, var(--bf-glow-teal), transparent 65%);
}
.sx-strip::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--bf-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--bf-grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 80%); mask-image: linear-gradient(100deg, transparent 15%, #000 80%);
}
.sx-strip-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sx-strip h2 { font-family: var(--bf-font-mono); font-weight: 400; font-size: 28px; letter-spacing: -.04em; margin: 0; color: var(--bf-ink-text); }
.sx-yard {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: var(--bf-radius-pill);
  background: var(--bf-ink-raise); border: 1px solid var(--bf-ink-line);
}
.sx-yard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bf-ink-teal); box-shadow: 0 0 0 3px rgba(134,217,203,.18); }
.sx-yard select { background: transparent; border: 0; color: var(--bf-ink-text); font: inherit; padding: 2px 4px; cursor: pointer; }
.sx-yard select option { color: var(--bf-text); background: var(--bf-surface); }
.sx-today { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }
.sx-today div { display: flex; flex-direction: column; align-items: flex-end; }
.sx-today span { font-family: var(--bf-font-mono); font-size: 10.5px; letter-spacing: var(--bf-track-label); text-transform: uppercase; color: var(--bf-ink-faint); }
.sx-today b { font-family: var(--bf-font-mono); font-weight: 400; font-size: 20px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--bf-ink-text); }
.sx-today b.hot { color: var(--bf-ink-coral); }
.sx-refresh {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; cursor: pointer; font: inherit; font-size: 12px;
  background: transparent; color: var(--bf-ink-muted); border: 1px solid rgba(246,241,233,.18); border-radius: var(--bf-radius-pill);
}
.sx-refresh:hover { color: var(--bf-ink-text); border-color: rgba(246,241,233,.4); }
.sx-refresh svg { width: 12px; height: 12px; }
.sx-tabs { display: flex; gap: 2px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.sx-tab {
  border: 0; background: transparent; color: var(--bf-ink-muted); padding: 10px 14px 12px; border-radius: 12px 12px 0 0;
  cursor: pointer; font: inherit; font-size: 13.5px; white-space: nowrap; display: flex; align-items: center; gap: 7px;
}
.sx-tab:hover { color: var(--bf-ink-text); }
.sx-tab[aria-selected="true"] { background: var(--bf-bg); color: var(--bf-text); font-weight: 500; }
.sx-tab:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.sx-tab-count { font-family: var(--bf-font-mono); font-size: 11px; padding: 0 6px; border-radius: var(--bf-radius-pill); background: var(--bf-coral); color: #fff; }

/* The counter */
.sx-counter { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(300px, .95fr); gap: 16px; align-items: start; }
.sx-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sx-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sx-col-head h3 { font-family: var(--bf-font-mono); font-weight: 400; font-size: 17px; letter-spacing: -.02em; margin: 0; }
.sx-grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
.sx-grade {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  min-height: 86px; padding: 12px 12px 11px 13px; text-align: left; cursor: pointer; font: inherit; color: var(--bf-text);
  border: 1px solid var(--bf-border); border-radius: 14px; background: var(--bf-surface); box-shadow: var(--bf-elev-1);
  transition: transform var(--bf-dur-fast) var(--bf-ease-out), box-shadow var(--bf-dur-fast), border-color var(--bf-dur-fast);
}
/* Material family: the brand square in the family's tone, leading the name —
   was a 4px edge stripe. */
.sx-grade::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--tone); }
.sx-grade:hover { transform: translateY(-2px); box-shadow: var(--bf-elev-2); border-color: var(--tone); }
.sx-grade:active { transform: none; }
.sx-grade.in { border-color: var(--tone); background: linear-gradient(140deg, var(--tone-tint), var(--bf-surface) 75%); }
.sx-grade .sg-name { font-weight: 500; font-size: 13.5px; line-height: 1.25; }
.sx-grade .sg-price { margin-top: auto; font-family: var(--bf-font-mono); font-size: 17px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sx-grade .sg-unit { font-size: 11px; color: var(--bf-text-muted); letter-spacing: 0; }
.sx-always {
  font-family: var(--bf-font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #B9604E; background: var(--bf-rose-tint); padding: 1px 6px; border-radius: var(--bf-radius-pill); white-space: nowrap;
}
[data-theme="dark"] .sx-always { color: #E0917F; }
.sx-delta { position: absolute; right: 10px; bottom: 12px; font-family: var(--bf-font-mono); font-size: 10.5px; }
.sx-delta.up { color: var(--bf-success-text); }
.sx-delta.down { color: var(--bf-danger-text); }

.sx-took.scrap-took {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 0;
  border: 1px solid color-mix(in srgb, var(--bf-success) 30%, transparent); border-radius: 16px; background: var(--bf-success-tint);
}
.sx-took.scrap-took { flex-wrap: wrap; }
.sx-took > div:nth-child(2) { flex: 1 1 200px; min-width: 0; }
.sx-took strong { font-family: var(--bf-font-mono); font-weight: 400; }
.sx-took-check { width: 34px; height: 34px; border-radius: 50%; background: var(--bf-success); color: #fff; display: grid; place-items: center; flex: none; }
.sx-took-check svg { width: 17px; height: 17px; }

.sx-ticket { background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 18px; box-shadow: var(--bf-elev-1), var(--bf-lift); overflow: hidden; }
.sx-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--bf-border); }
.sx-ticket-head > div { display: flex; flex-direction: column; }
.sx-ticket-when { font-family: var(--bf-font-mono); font-size: 13px; color: var(--bf-text-muted); }
.sx-line { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--bf-border); }
.sx-line-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sx-line-top b { font-weight: 500; }
.sx-line-list { margin-left: auto; font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted); white-space: nowrap; }
.sx-x { border: 0; background: transparent; color: var(--bf-text-muted); cursor: pointer; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.sx-x:hover { background: var(--bf-surface-alt); color: var(--bf-danger-text); }
.sx-x svg { width: 14px; height: 14px; }
.sx-line-row { display: grid; gap: 10px; align-items: center; }
.sx-line-row.gt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(80px, auto); }
.sx-col > .bl-search { flex: none; }
/* The light theme forces every input white (!important, style.css); the counter's
   number boxes sit inside their own tinted field, so they stay see-through. */
html .sx-field input, html .sx-field input[type] { background: transparent !important; }
.sx-field input:focus, .sx-field input[type]:focus { outline: 0; box-shadow: none; border: 0; background: transparent; }
.sx-step input:not([type="hidden"]) { padding: 7px 11px; font-size: 14px; min-height: 0; height: auto; }
.sx-step .form-group label { margin-bottom: 3px; }
.sx-line-row.lb { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(84px, auto); }
.sx-field {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 10px;
  background: var(--bf-surface-alt); border: 1px solid var(--bf-border); border-radius: 10px; box-shadow: var(--bf-inset);
}
.sx-field:focus-within { border-color: var(--bf-accent); box-shadow: 0 0 0 3px var(--bf-coral-tint); }
.sx-field input, .sx-field input[type] { border: 0; background: transparent; outline: 0; width: 100%; min-width: 0; padding: 0; box-shadow: none;
  font-family: var(--bf-font-mono); font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; color: var(--bf-text); }
.sx-field em { font-style: normal; font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted); white-space: nowrap; }
.sx-field.sx-gt { background: var(--bf-teal-tint); }
.sx-field.sx-gt input, .sx-field.sx-gt em { color: var(--bf-accent-2-text); }
.sx-line .sl-amt { font-family: var(--bf-font-mono); text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
.scrap-page .scrap-empty { padding: 30px 18px; text-align: center; color: var(--bf-text-muted); font-size: 14px; }
.sx-ticket-foot { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; background: var(--bf-surface-alt); }
.sx-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--bf-text-muted); }
.sx-total > div { text-align: right; }
.sx-total strong { display: block; font-family: var(--bf-font-mono); font-weight: 400; font-size: 36px; letter-spacing: -.04em; color: var(--bf-text); font-variant-numeric: tabular-nums; }
.sx-total small { font-size: 12px; }
.sx-law { display: flex; flex-direction: column; gap: 7px; }
.sx-meter { --mark: 25%; position: relative; height: 8px; border-radius: var(--bf-radius-pill); background: var(--bf-surface-sunk); margin-top: 14px; }
.sx-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--bf-radius-pill); background: var(--bf-accent-2); transition: width var(--bf-dur-slow) var(--bf-ease-out); }
.sx-meter.req .sx-meter-fill { background: var(--bf-accent); }
.sx-meter-mark { position: absolute; left: var(--mark); top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--bf-text); }
.sx-meter-mark::after { content: "$50"; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-family: var(--bf-font-mono); font-size: 10px; color: var(--bf-text-muted); }
.sx-law-msg { font-size: 12.5px; color: var(--bf-text-muted); }
.sx-law-msg b { color: var(--bf-text); font-weight: 500; }

/* The seller */
.sx-seller.scrap-seller { background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 18px; box-shadow: var(--bf-elev-1), var(--bf-lift); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sx-seller .scrap-seller-head { margin: 0; padding: 0; border: 0; }
.sx-seller .ss-req { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bf-accent-text); background: var(--bf-coral-tint); padding: 2px 9px; border-radius: var(--bf-radius-pill); font-weight: 400; }
.sx-seller .ss-opt { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bf-text-muted); }
.sx-banner { padding: 10px 12px; border-radius: 12px; background: var(--bf-coral-tint); font-size: 13px; color: var(--bf-text); }
.sx-banner b { font-weight: 600; }
.sx-banner.ok { background: var(--bf-success-tint); }
.sx-steps { display: flex; flex-direction: column; }
.sx-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--bf-border); }
.sx-step:first-child { border-top: 0; padding-top: 0; }
.sx-step h4 { margin: 2px 0 8px; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sx-step h4 .btn { padding: 3px 10px; font-size: 11.5px; }
.sx-step .form-group { margin-bottom: 8px; }
.sx-step .form-group label { font-size: 12px; }
.sx-step .form-row { gap: 8px; }
.sx-csz { display: grid; grid-template-columns: minmax(0, 1.4fr) 64px 90px; }
.sx-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--bf-font-mono); font-size: 11px; border: 1.5px solid var(--bf-border); color: var(--bf-text-muted); margin-top: 1px; }
.sx-step.done .sx-dot { background: var(--bf-success); border-color: var(--bf-success); color: #fff; }
.sx-step.done .sx-dot svg { width: 12px; height: 12px; }
.sx-req-star { color: var(--bf-accent-text); }
.sx-idcap.ss-idcap { margin-top: 4px; }
.sx-pay { display: flex; gap: 3px; padding: 3px; background: var(--bf-surface-sunk); border-radius: var(--bf-radius-pill); }
.sx-pay button { flex: 1; border: 0; background: transparent; padding: 6px 8px; border-radius: var(--bf-radius-pill); cursor: pointer; font: inherit; font-size: 12.5px; color: var(--bf-text-muted); }
.sx-pay button[aria-pressed="true"] { background: var(--bf-surface); color: var(--bf-text); box-shadow: var(--bf-elev-1); font-weight: 500; }
.sx-payref { margin-top: 8px; }
.sx-take { width: 100%; min-height: 52px; font-size: 15px; justify-content: center; }
.sx-take:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.sx-mbar { display: none; }

/* The dashboard */
.sx-hero.dash-hero { margin-bottom: 0; }
.sx-hero h2 { font-size: clamp(28px, 3.2vw, 42px); }
.sx-ranges { display: flex; gap: 4px; margin-top: 16px; }
.sx-ranges button { border: 1px solid var(--bf-ink-line); background: transparent; color: var(--bf-ink-muted); border-radius: var(--bf-radius-pill); padding: 4px 11px; font-family: var(--bf-font-mono); font-size: 11.5px; cursor: pointer; }
.sx-ranges button[aria-pressed="true"] { background: var(--bf-ink-text); color: var(--bf-ink); border-color: transparent; }
.sx-spark { display: flex; flex-direction: column; gap: 6px; }
.sx-spark svg { width: 100%; height: 150px; display: block; }
.sx-axis { display: flex; justify-content: space-between; font-family: var(--bf-font-mono); font-size: 10.5px; color: var(--bf-ink-faint); }
.sx-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--bf-sand-tint); }
.sx-alert.bad { background: var(--bf-danger-tint); }
.sx-alert strong { font-weight: 600; }
.sx-alert-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 13px; background: var(--bf-warning); color: #fff; }
.sx-alert.bad .sx-alert-ico { background: var(--bf-danger); }
.sx-alert-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sx-tiles .dash-stat-value { font-family: var(--bf-font-mono); font-variant-numeric: tabular-nums; }
.sx-tiles .dash-stat-card.sx-good .dash-stat-value { color: var(--bf-success-text); }
.sx-dash-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sx-card { background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 18px; box-shadow: var(--bf-elev-1), var(--bf-lift); padding: 18px 20px; min-width: 0; }
.sx-card.sx-wide { grid-column: 1 / -1; }
.sx-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.sx-card-head h3 { font-family: var(--bf-font-mono); font-weight: 400; font-size: 16px; margin: 0; }
.sx-bars { display: flex; flex-direction: column; gap: 9px; }
.sx-bar { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 92px; gap: 10px; align-items: center; font-size: 13px; }
.sx-bar-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-bar-n small { font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted); margin-left: 6px; }
.sx-bar-track { height: 10px; border-radius: var(--bf-radius-pill); background: var(--bf-surface-sunk); overflow: hidden; }
.sx-bar-track i { display: block; height: 100%; border-radius: var(--bf-radius-pill); background: var(--tone); }
.sx-bar-v { font-family: var(--bf-font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.sx-stack { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--bf-surface-sunk); }
.sx-stack span { display: block; height: 100%; background: var(--tone); }
.sx-stack span + span { box-shadow: inset 2px 0 0 var(--bf-surface); }
.sx-keys .sd-key i { background: var(--tone); }

/* Tickets */
.sx-tk-tools .cu-date { font-size: 13px; color: var(--bf-text-muted); display: flex; align-items: center; gap: 6px; }
.sx-tk-tools .cu-date input { font: inherit; color: var(--bf-text); background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-pill); padding: 5px 10px; }
.sx-tk-list { display: flex; flex-direction: column; gap: 14px; }
.sx-day { background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 18px; box-shadow: var(--bf-elev-1), var(--bf-lift); overflow: hidden; }
.sx-day-head { display: flex; justify-content: space-between; gap: 10px; padding: 9px 18px; background: var(--bf-surface-sunk); font-family: var(--bf-font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bf-text-muted); }
.sx-trow {
  display: grid; grid-template-columns: 116px 70px minmax(0, 1fr) minmax(0, 1.1fr) 168px 70px 92px auto; gap: 12px; align-items: center;
  padding: 10px 18px; border-top: 1px solid var(--bf-border); cursor: pointer;
}
.sx-day-head + .sx-trow { border-top: 0; }
.sx-trow:hover { background: var(--bf-surface-alt); }
.sx-trow:focus-visible { outline: 2px solid var(--bf-focus); outline-offset: -2px; }
.sx-tn { font-family: var(--bf-font-mono); font-size: 13px; }
.sx-tt { font-family: var(--bf-font-mono); font-size: 12.5px; color: var(--bf-text-muted); }
.sx-who { min-width: 0; display: flex; flex-direction: column; }
.sx-who b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-who span { font-size: 12px; color: var(--bf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-gr { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.sx-gtag { font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: var(--bf-radius-pill); background: var(--tone-tint); color: var(--tone); white-space: nowrap; }
.sx-gmore { font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted); }
.sx-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.sx-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); flex: none; }
.sx-st.tone-coral { color: var(--bf-danger-text); font-weight: 500; }
.sx-pm { font-size: 12.5px; color: var(--bf-text-muted); }
.sx-amt { font-family: var(--bf-font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.sx-tacts { display: flex; gap: 2px; justify-content: flex-end; }
.sx-trow.void .sx-tn, .sx-trow.void .sx-who b, .sx-trow.void .sx-amt { text-decoration: line-through; color: var(--bf-text-muted); }
.sx-trow.sc-voided { opacity: 1; }
.sx-more { text-align: center; color: var(--bf-text-muted); font-size: 13px; margin: 0; }

/* Purchasing, Recovered and Grades & prices keep their content; their panels pick up the card look. */
.scrap-page .sd-card { border-radius: 18px; box-shadow: var(--bf-elev-1), var(--bf-lift); }

@media (max-width: 1220px) {
  .sx-counter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sx-col-seller { grid-column: 1 / -1; }
  .sx-trow { grid-template-columns: 116px 64px minmax(0, 1fr) minmax(0, 1fr) 160px 86px auto; }
  .sx-trow .sx-pm { display: none; }
}
@media (max-width: 900px) {
  .sx-dash-grid { grid-template-columns: minmax(0, 1fr); }
  .sx-trow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n a" "w w" "g s" "x x"; gap: 4px 10px; }
  .sx-trow .sx-tn { grid-area: n; } .sx-trow .sx-amt { grid-area: a; } .sx-trow .sx-who { grid-area: w; }
  .sx-trow .sx-gr { grid-area: g; } .sx-trow .sx-st { grid-area: s; justify-self: end; } .sx-trow .sx-tacts { grid-area: x; justify-content: flex-start; }
  .sx-trow .sx-tt, .sx-trow .sx-pm { display: none; }
}
@media (max-width: 720px) {
  .sx-strip { padding: 16px 16px 0; border-radius: 20px; }
  .sx-today { margin-left: 0; width: 100%; justify-content: space-between; gap: 12px; }
  .sx-today div { align-items: flex-start; }
  .sx-counter { grid-template-columns: minmax(0, 1fr); }
  .sx-line-row.gt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sx-line-row.lb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sx-line .sl-amt { grid-column: 1 / -1; font-size: 16px; }
  .sx-bar { grid-template-columns: 110px minmax(0, 1fr) 76px; }
  .sx-mbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bf-ink); color: var(--bf-ink-text);
    box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  }
  .sx-mbar > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .sx-mbar span { font-family: var(--bf-font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-ink-faint); }
  .sx-mbar b { font-family: var(--bf-font-mono); font-weight: 400; font-size: 22px; letter-spacing: -.03em; }
  .scrap-page { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .sx-grade, .sx-meter-fill { transition: none; } .sx-grade:hover { transform: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   CUSTOMERS, REBUILT (Oct 2026)
   The directory is a roster grouped by letter, each row carrying what decides
   who needs a call. A customer's page opens on an ink header with how to reach
   them and four figures, over two working columns: what's out and what's
   happened on the left, money, sites, portal and sheets on the right.
   ══════════════════════════════════════════════════════════════════════════ */
html .main .cu-page { background: transparent; }
.cu-roster, .cu-detail { max-width: 1240px; margin: 0 auto; width: 100%; }

/* The strip */
.cu-strip {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border-radius: 22px; background: var(--bf-ink); color: var(--bf-ink-text); padding: 20px 24px; box-shadow: var(--bf-elev-2);
}
[data-theme="dark"] .cu-strip, [data-theme="dark"] .cu-hero { background: var(--bf-ink-deep); box-shadow: var(--bf-elev-2), inset 0 0 0 1px var(--bf-ink-line); }
.cu-strip::before, .cu-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(45% 120% at 0% 0%, var(--bf-glow-coral), transparent 65%), radial-gradient(40% 120% at 100% 100%, var(--bf-glow-teal), transparent 65%);
}
.cu-strip::after, .cu-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--bf-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--bf-grid-line) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 80%); mask-image: linear-gradient(100deg, transparent 15%, #000 80%);
}
.cu-strip h2 { font-family: var(--bf-font-mono); font-weight: 400; font-size: 28px; letter-spacing: -.04em; margin: 0; color: var(--bf-ink-text); }
.cu-strip-figs { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }
.cu-strip-figs div { display: flex; flex-direction: column; align-items: flex-end; }
.cu-strip-figs span { font-family: var(--bf-font-mono); font-size: 10.5px; letter-spacing: var(--bf-track-label); text-transform: uppercase; color: var(--bf-ink-faint); }
.cu-strip-figs b { font-family: var(--bf-font-mono); font-weight: 400; font-size: 20px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--bf-ink-text); }
.cu-strip-figs b.hot { color: var(--bf-ink-coral); }
.cu-roster > .cu-sub { margin: -6px 0 0; font-size: 13px; }
.cu-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cu-tools .bl-search { flex: 1 1 280px; }
.cu-tools .bl-search .cu-search { border: 0; background: transparent; padding: 0; box-shadow: none; width: 100%; outline: 0; font: inherit; color: var(--bf-text); }
html .cu-tools .bl-search input { background: transparent !important; }
.cu-tools-2 { justify-content: space-between; }
.cu-letters { display: flex; flex-wrap: wrap; gap: 2px; }
.cu-letters button { border: 0; background: transparent; font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; }
.cu-letters button:hover:not([disabled]) { background: var(--bf-surface); color: var(--bf-text); }
.cu-letters button[disabled] { opacity: .3; cursor: default; }

/* The roster */
.cu-list { display: flex; flex-direction: column; gap: 14px; }
.cu-none { text-align: center; color: var(--bf-text-muted); padding: 30px; border: 1px dashed var(--bf-border); border-radius: var(--bf-radius-lg); }
.cu-group { background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 18px; box-shadow: var(--bf-elev-1), var(--bf-lift); overflow: hidden; scroll-margin-top: 16px; }
.cu-group-head { display: flex; align-items: center; gap: 10px; padding: 8px 18px; background: var(--bf-surface-sunk); font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted); }
.cu-group-head b { font-family: var(--bf-font-mono); font-weight: 400; font-size: 14px; color: var(--bf-text); }
.cu-group-head span { margin-left: auto; }
.cu-roster .cu-row {
  display: grid; grid-template-columns: 44px minmax(0, 1.3fr) minmax(0, 1.4fr) 110px 18px; gap: 14px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--bf-border); cursor: pointer;
}
.cu-group-head + .cu-row { border-top: 0; }
.cu-roster .cu-row:hover { background: var(--bf-surface-alt); }
.cu-roster .cu-row:focus-visible { outline: 2px solid var(--bf-focus); outline-offset: -2px; }
.cu-av { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--bf-font-mono); font-size: 14px; background: var(--tone-tint); color: var(--tone); }
.cu-live { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--bf-success); border: 2px solid var(--bf-surface); }
.cu-rname { min-width: 0; display: flex; flex-direction: column; }
.cu-rname b { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cu-rname b .cu-link { color: var(--bf-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-rname > span { font-size: 12.5px; color: var(--bf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-mono { font-family: var(--bf-font-mono); }
.cu-portal-tag { flex: none; font-family: var(--bf-font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--bf-accent-2-text); background: var(--bf-teal-tint); padding: 1px 7px; border-radius: var(--bf-radius-pill); }
.cu-facts { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cu-fact { display: inline-flex; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: var(--bf-radius-pill); background: var(--bf-surface-alt); border: 1px solid var(--bf-border); white-space: nowrap; }
.cu-fact b { font-family: var(--bf-font-mono); font-weight: 400; }
.cu-fact.rent { background: var(--bf-coral-tint); border-color: transparent; color: var(--bf-accent-text); }
.cu-fact.hot { background: var(--bf-danger); border-color: transparent; color: #fff; }
.cu-fact.money { background: var(--bf-sand-tint); border-color: transparent; color: #8C6420; }
[data-theme="dark"] .cu-fact.money { color: #D6A24B; }
.cu-rec { display: flex; align-items: center; justify-content: flex-end; gap: 7px; font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted); white-space: nowrap; }
.cu-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.cu-chev { color: var(--bf-text-muted); display: grid; place-items: center; }

/* A customer's page */
.cu-hero {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px;
  padding: 26px 28px; border-radius: 22px; background: var(--bf-ink); color: var(--bf-ink-text); box-shadow: var(--bf-elev-2);
}
.cu-hero h2 { font-family: var(--bf-font-mono); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.045em; line-height: 1.06; margin: 12px 0 8px; color: var(--bf-ink-text); }
.cu-hero .cu-sub { color: var(--bf-ink-muted); }
.cu-hero .cu-sub a { color: var(--bf-ink-text); }
.cu-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cu-act {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--bf-radius-pill); font: inherit; font-size: 13px;
  background: var(--bf-ink-raise); border: 1px solid var(--bf-ink-line); color: var(--bf-ink-text); cursor: pointer; text-decoration: none;
}
.cu-act:hover { background: rgba(246,241,233,.12); }
.cu-act svg { width: 14px; height: 14px; }
.cu-act.primary { background: var(--bf-coral); border-color: transparent; color: #fff; }
.cu-act.primary:hover { background: #d45a41; }
.cu-act-info { cursor: default; }
.cu-hero .cu-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-self: center; }
.cu-hero .cu-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--bf-ink-raise); border: 1px solid var(--bf-ink-line); box-shadow: none; }
.cu-hero .cu-kpi-label { font-family: var(--bf-font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-ink-faint); }
.cu-hero .cu-kpi-value { font-family: var(--bf-font-mono); font-weight: 400; font-size: 24px; letter-spacing: -.03em; color: var(--bf-ink-text); }
.cu-hero .cu-kpi-sub { font-size: 12px; color: var(--bf-ink-muted); }
.cu-hero .cu-kpi.hot .cu-kpi-value { color: var(--bf-ink-coral); }
.cu-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cu-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cu-col > .cu-card, .cu-col > section { margin: 0; }
.cu-rent { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cu-cont { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--bf-border); background: var(--bf-surface-alt); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cu-cont.over { border-color: color-mix(in srgb, var(--bf-danger) 45%, transparent); background: linear-gradient(140deg, var(--bf-danger-tint), var(--bf-surface-alt) 70%); }
.cu-cont-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cu-cont-top b { font-family: var(--bf-font-mono); font-weight: 400; font-size: 16px; }
.cu-cont-top span { font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted); text-align: right; }
.cu-cont-site { font-size: 12.5px; color: var(--bf-text-muted); }
.cu-cont-days { display: flex; align-items: baseline; gap: 6px; }
.cu-cont-days b { font-family: var(--bf-font-mono); font-weight: 400; font-size: 26px; letter-spacing: -.04em; }
.cu-cont-days span { font-size: 12px; color: var(--bf-text-muted); }
.cu-cont-bar { height: 6px; border-radius: var(--bf-radius-pill); background: var(--bf-surface-sunk); overflow: hidden; }
.cu-cont-bar i { display: block; height: 100%; border-radius: var(--bf-radius-pill); background: var(--bf-accent-2); }
.cu-cont.over .cu-cont-bar i { background: var(--bf-danger); }
.cu-cont-pick { font-size: 12px; color: var(--bf-text-muted); }
.cu-cont.over .cu-cont-pick { color: var(--bf-danger-text); font-weight: 500; }

@media (max-width: 1100px) { .cu-cols, .cu-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .cu-strip-figs { margin-left: 0; width: 100%; justify-content: space-between; gap: 12px; }
  .cu-strip-figs div { align-items: flex-start; }
  .cu-roster .cu-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "a n r" "a f f"; gap: 6px 12px; padding: 12px 14px; }
  .cu-roster .cu-row .cu-av { grid-area: a; } .cu-roster .cu-row .cu-rname { grid-area: n; } .cu-roster .cu-row .cu-rec { grid-area: r; }
  .cu-roster .cu-row .cu-facts { grid-area: f; } .cu-roster .cu-row .cu-chev, .cu-rphone { display: none; }
  .cu-letters { display: none; }
  .cu-hero { padding: 22px 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Delivery sheets (1.52.0) — the board and one sheet as a page.
   Ink only on the strip/head; the work sits on the paper ground. Shares the
   bl-search / bl-sort / bl-chip toolbar with billing and customers.
   ══════════════════════════════════════════════════════════════════════════ */
html .main .sh-page { background: transparent; }
.sh-page { max-width: 1240px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.sh-none, .sh-muted { color: var(--bf-text-muted); font-size: 13.5px; margin: 0; }
.sh-none { text-align: center; padding: 48px 16px; }

/* Strip / head */
.sh-strip {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 16px;
  border-radius: 22px; background: var(--bf-ink); color: var(--bf-ink-text); padding: 20px 22px; box-shadow: var(--bf-elev-2);
}
[data-theme="dark"] .sh-strip { background: var(--bf-ink-deep); box-shadow: var(--bf-elev-2), inset 0 0 0 1px var(--bf-ink-line); }
.sh-strip::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(45% 120% at 0% 0%, var(--bf-glow-coral), transparent 65%), radial-gradient(40% 120% at 100% 100%, var(--bf-glow-teal), transparent 65%);
}
.sh-strip::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--bf-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--bf-grid-line) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 80%); mask-image: linear-gradient(100deg, transparent 15%, #000 80%);
}
.sh-strip-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sh-strip h2 { font-family: var(--bf-font-mono); font-weight: 400; font-size: 28px; letter-spacing: -.04em; margin: 0; color: var(--bf-ink-text); }
.sh-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sh-hbtn {
  border: 1px solid var(--bf-ink-line); background: rgba(246,241,233,.06); color: var(--bf-ink-text);
  border-radius: 10px; padding: 8px 13px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
.sh-hbtn:hover { background: rgba(246,241,233,.12); }
.sh-hbtn.primary { background: var(--bf-coral); border-color: transparent; color: #fff; }
.sh-hbtn.primary:hover { filter: brightness(1.06); }
/* Cancel delivery on the ink header: a light red that reads on dark, louder on hover. */
.sh-hbtn.ds-cancel-btn { color: #ffb4a6; }
.sh-hbtn.ds-cancel-btn:hover { background: rgba(229,72,77,.22); border-color: rgba(229,72,77,.5); color: #fff; }
.sh-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sh-fig {
  padding: 10px 12px; border-radius: 12px; background: rgba(246,241,233,.05); border: 1px solid var(--bf-ink-line);
  display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: inherit;
}
button.sh-fig { cursor: pointer; }
button.sh-fig:hover { background: rgba(246,241,233,.1); }
.sh-fig span { font-size: 12px; color: var(--bf-ink-muted); }
.sh-fig b { font-family: var(--bf-font-mono); font-weight: 400; font-size: 24px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--bf-ink-text); }
.sh-fig b small { font-size: 13px; color: var(--bf-sand); letter-spacing: 0; }
.sh-fig b.hot { color: var(--bf-ink-coral); }
.sh-fig b.warn { color: var(--bf-sand); }
.sh-fig b.ok { color: var(--bf-ink-teal); }

.sh-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sh-tools .bl-search { flex: 1 1 300px; }

/* Needs a can */
.sh-tray {
  border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--bf-warning) 55%, transparent);
  background: var(--bf-warning-tint); padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.sh-tray-h { display: flex; justify-content: space-between; font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-warning-text); }
.sh-need { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.sh-nc { background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-nc-top { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.sh-nc-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-nc small { color: var(--bf-text-muted); font-size: 12.5px; }
.sh-id { font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted); flex: none; }
.sh-pick { display: flex; gap: 6px; align-items: center; min-width: 0; }
.sh-pick select {
  flex: 1; min-width: 0; border: 1px solid var(--bf-border); background: var(--bf-surface-alt); color: var(--bf-text);
  border-radius: 9px; padding: 6px 8px; font-family: var(--bf-font-mono); font-size: 12.5px;
}

/* The list */
.sh-grp { display: flex; align-items: center; gap: 10px; margin: 4px 2px 0; font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-text-muted); }
.sh-grp::after { content: ""; flex: 1; height: 1px; background: var(--bf-border); order: 1; }
.sh-grp span:last-child { order: 2; }
.sh-grp.hot { color: var(--bf-danger-text); }
.sh-grp.warn { color: var(--bf-warning-text); }
.sh-list { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid var(--bf-border); background: var(--bf-surface); }
.sh-row {
  display: grid; grid-template-columns: 74px minmax(0, 1.6fr) minmax(0, 1fr) 150px 120px 16px; gap: 14px; align-items: center;
  padding: 12px 14px; border-top: 1px solid var(--bf-border); cursor: pointer;
}
.sh-row:first-child { border-top: 0; }
.sh-row:hover, .sh-row:focus-visible { background: var(--bf-surface-alt); outline: 0; }
.sh-row.done { opacity: .62; }
.sh-ds { font-family: var(--bf-font-mono); font-size: 13px; color: var(--bf-text-muted); }
.sh-who { min-width: 0; }
.sh-who b, .sh-who > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-who > span { font-size: 12.5px; color: var(--bf-text-muted); }
.sh-cans { display: flex; gap: 5px; flex-wrap: wrap; min-width: 0; }
.sh-can { font-family: var(--bf-font-mono); font-size: 12px; padding: 3px 8px; border-radius: 8px; background: var(--bf-surface-alt); border: 1px solid var(--bf-border); white-space: nowrap; }
.sh-can.open { border-style: dashed; color: var(--bf-warning-text); background: transparent; }
.sh-can.demo { background: var(--bf-info-tint); border-color: transparent; color: var(--bf-info-text); }
.sh-can.done { background: transparent; color: var(--bf-text-muted); }
.sh-can.rent { background: var(--bf-warning-tint, rgba(217,119,6,.12)); border-color: transparent; color: var(--bf-warning-text); font-family: inherit; font-weight: 600; }

/* Rental time card on a delivery sheet (renderRentalCard) */
.rn-card h3 { display: flex; align-items: center; gap: 8px; }
.rn-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bf-surface-alt); color: var(--bf-text-muted); letter-spacing: 0; text-transform: none; }
.rn-pill.over { background: var(--bf-warning-tint, rgba(217,119,6,.14)); color: var(--bf-warning-text); }
.rn-pill.soon { background: var(--bf-info-tint); color: var(--bf-info-text); }
.rn-pill.ok { background: var(--bf-success-tint, rgba(16,185,129,.12)); color: var(--bf-success, #10b981); }
.rn-cans { display: grid; gap: 10px; margin-bottom: 10px; }
.rn-can { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline; font-size: 13px; }
.rn-days { justify-self: end; color: var(--bf-text-muted); }
.rn-days b { color: var(--bf-warning-text); }
.rn-bar { grid-column: 1 / -1; position: relative; display: flex; height: 6px; border-radius: 999px; background: var(--bf-surface-alt); overflow: hidden; }
.rn-bar em { display: block; height: 100%; background: var(--bf-teal, #0f766e); }
.rn-bar em.over { background: var(--bf-warning); }
.rn-bar s { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--bf-text-muted); opacity: .5; text-decoration: none; }
.rn-terms { margin: 0 0 10px; font-size: 12.5px; color: var(--bf-text-muted); }
.rn-act { margin-top: 12px; display: flex; justify-content: flex-end; }
.rn-est { font-family: var(--bf-font-mono); font-weight: 600; color: var(--bf-warning-text); }
.sh-mtr { display: flex; flex-direction: column; gap: 5px; }
.sh-mtr b { font-family: var(--bf-font-mono); font-weight: 400; font-size: 13px; font-variant-numeric: tabular-nums; }
.sh-mtr i { display: block; height: 5px; border-radius: 3px; background: var(--bf-surface-sunk); overflow: hidden; }
.sh-mtr em { display: block; height: 100%; border-radius: 3px; background: var(--bf-teal); }
.sh-mtr.long em { background: var(--bf-warning); }
.sh-mtr.over em { background: var(--bf-danger); }
.sh-due { font-size: 12.5px; color: var(--bf-text-muted); text-align: right; }
.sh-due b { display: block; font-family: var(--bf-font-mono); font-weight: 400; font-size: 13px; color: var(--bf-text); }
.sh-due.late b { color: var(--bf-danger-text); }
.sh-chev { color: var(--bf-text-muted); display: grid; }
.sh-chev svg { width: 14px; height: 14px; }
.sh-more { display: flex; justify-content: center; }
.sh-more-n { color: var(--bf-text-muted); font-weight: 400; }

/* One sheet */
.sh-backs { display: flex; gap: 14px; flex-wrap: wrap; }
.sh-back { background: none; border: 0; padding: 0; color: var(--bf-text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.sh-back:hover { color: var(--bf-text); }
.sh-title { display: flex; flex-direction: column; gap: 3px; }
.sh-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 600; }
.sh-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sh-pill.on { background: rgba(134,217,203,.14); color: var(--bf-ink-teal); }
.sh-pill.late { background: rgba(242,130,106,.16); color: var(--bf-ink-coral); }
.sh-pill.warn { background: rgba(233,200,140,.14); color: var(--bf-sand); }
.sh-pill.done { background: rgba(246,241,233,.08); color: var(--bf-ink-muted); }
.sh-cust { display: flex; flex-direction: column; gap: 3px; }
.sh-cust a, .sh-cust .cust-link { color: var(--bf-ink-text); font-weight: 700; font-size: 19px; }
.sh-cust > span { color: var(--bf-ink-muted); }

.sh-tl {
  display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 16px; padding: 16px 10px 14px;
}
.sh-st { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; position: relative; padding: 0 4px; min-width: 0; }
.sh-st::before { content: ""; position: absolute; top: 8px; left: -50%; right: 50%; height: 2px; background: var(--bf-teal); }
.sh-st:first-child::before { display: none; }
.sh-st.todo::before { background: var(--bf-border); }
.sh-st.late::before { background: linear-gradient(90deg, var(--bf-teal), var(--bf-danger)); }
.sh-st i { width: 18px; height: 18px; border-radius: 50%; background: var(--bf-teal); position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bf-surface); }
.sh-st.todo i { background: var(--bf-surface); border: 2px solid var(--bf-border); }
.sh-st.late i { background: var(--bf-danger); }
.sh-st b { font-size: 13px; }
.sh-st span { font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted); }
.sh-st.late span { color: var(--bf-danger-text); }

.sh-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sh-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sh-card { background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sh-card h3 { margin: 0; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; font-family: var(--bf-font-body); letter-spacing: 0; text-transform: none; }
.sh-n { font-family: var(--bf-font-mono); font-weight: 400; font-size: 12px; color: var(--bf-text-muted); }
.sh-r { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--bf-text-muted); font-family: var(--bf-font-mono); }

.sh-cancard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px; border-radius: 14px; background: var(--bf-surface-alt); border: 1px solid var(--bf-border);
}
.sh-cancard > div { min-width: 0; }
.sh-cancard small { color: var(--bf-text-muted); font-size: 12.5px; display: block; }
.sh-cube { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-family: var(--bf-font-mono); font-size: 15px; background: var(--bf-teal-tint); color: var(--bf-teal); }
.sh-ser { font-family: var(--bf-font-mono); font-size: 24px; letter-spacing: -.03em; display: block; line-height: 1.1; }
.sh-days { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sh-days b { font-family: var(--bf-font-mono); font-weight: 400; font-size: 22px; }
.sh-days.late b { color: var(--bf-danger-text); }
.sh-cancard.open { background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--bf-warning) 55%, transparent); }
.sh-cancard.open .sh-cube { background: var(--bf-warning-tint); color: var(--bf-warning-text); }
.sh-cancard.open .sh-pick { min-width: 220px; }
.sh-demo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px; border-radius: 14px; background: var(--bf-info-tint); }
.sh-demo > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; }
.sh-demo small { color: var(--bf-text-muted); font-size: 12.5px; }
.sh-demo.done { background: var(--bf-teal-tint); }
.sh-demo-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-past { border-top: 1px solid var(--bf-border); padding-top: 10px; }
.sh-past summary { cursor: pointer; color: var(--bf-text-muted); font-size: 13px; }
.sh-past-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sh-prow { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--bf-text-muted); flex-wrap: wrap; }
.sh-prow b { font-family: var(--bf-font-mono); font-weight: 400; color: var(--bf-text); min-width: 60px; }
.sh-tag { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--bf-surface-sunk); }

.sh-tabs { display: flex; gap: 4px; padding: 3px; background: var(--bf-surface-sunk); border-radius: 10px; align-self: flex-start; flex-wrap: wrap; }
.sh-tabs button { border: 0; background: none; padding: 5px 11px; border-radius: 8px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--bf-text-muted); }
.sh-tabs button[aria-selected="true"] { background: var(--bf-surface); color: var(--bf-text); box-shadow: var(--bf-elev-1); }
.sh-tbl { overflow-x: auto; }
.sh-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sh-table th { text-align: left; font-weight: 500; color: var(--bf-text-muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--bf-border); white-space: nowrap; background: none; }
.sh-table td { padding: 8px; border-bottom: 1px solid var(--bf-border); white-space: nowrap; }
.sh-table .n { text-align: right; font-family: var(--bf-font-mono); }
.sh-table tfoot td { border-bottom: 0; font-weight: 600; }

.sh-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 7px 12px; font-size: 13.5px; }
.sh-kv > span { color: var(--bf-text-muted); font-size: 12.5px; padding-top: 1px; }
.sh-kv > div { overflow-wrap: anywhere; }
.sh-sep { height: 1px; background: var(--bf-border); }
.sh-rate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 13.5px; }
.sh-rate span { color: var(--bf-text-muted); }
.sh-rate b { font-family: var(--bf-font-mono); font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.sh-mode { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--bf-teal-tint); color: var(--bf-teal); align-self: flex-start; }
.sh-bill { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bf-coral-tint); flex-wrap: wrap; }
.sh-bill b { font-family: var(--bf-font-mono); font-weight: 400; font-size: 22px; color: var(--bf-coral); }
.sh-bill span { flex: 1 1 140px; font-size: 12.5px; color: var(--bf-text-muted); }
.sh-note { font-size: 13.5px; padding: 12px; border-radius: 12px; background: var(--bf-surface-alt); border: 1px solid var(--bf-border); white-space: pre-wrap; }
.sh-billing { margin-top: 0; }

@media (max-width: 900px) {
  .sh-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who due" "cans mtr"; row-gap: 8px; }
  .sh-row .sh-ds, .sh-row .sh-chev { display: none; }
  .sh-row .sh-who { grid-area: who; } .sh-row .sh-cans { grid-area: cans; }
  .sh-row .sh-mtr { grid-area: mtr; min-width: 110px; } .sh-row .sh-due { grid-area: due; }
  .sh-cols { grid-template-columns: minmax(0, 1fr); }
  .sh-tl { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .sh-st { flex-direction: row; text-align: left; gap: 10px; }
  .sh-st::before { display: none; }
  .sh-st span { margin-left: auto; }
  .sh-cancard { grid-template-columns: auto minmax(0, 1fr); }
  .sh-cancard .sh-days, .sh-cancard .sh-pick { grid-column: 1 / -1; }
  .sh-cancard .sh-days { flex-direction: row; justify-content: space-between; align-items: center; }
  .sh-cancard.open .sh-pick { min-width: 0; }
  .sh-strip { padding: 18px 16px; }
}
/* Form controls are 16px app-wide (style.css, so iPhones don't zoom on tap);
   at that size the pickers read better in the body face than in mono. */
.sh-page .sh-pick select { font-family: var(--bf-font-body); padding: 6px 10px; min-height: 0; height: auto; letter-spacing: 0; }
@media (max-width: 600px) {
  .sh-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sh-fig { padding: 8px 9px; }
  .sh-fig span { font-size: 11px; }
  .sh-fig b { font-size: 19px; }
  .sh-strip h2 { font-size: 24px; }
  .sh-acts { margin-left: 0; }
}

/* Phones: the strip by the notch should be the header's colour.
   - Home-screen app: the page runs under the status bar (black-translucent,
     viewport-fit cover), so whatever is painted behind the page shows there.
   - Safari (iOS 26+): theme-color is ignored; the strip takes the BODY's
     background-color. So the body carries the top-bar colour and the page
     ground moves one layer in, onto .app, which fills the screen. */
@media (max-width: 768px) {
  html[data-theme] { background: var(--rail-bg); }
  html[data-theme] body { background: var(--rail-bg); min-height: 100dvh; }
  html[data-theme] .app { background-color: var(--bf-bg); background-image: var(--bf-grain, none); }
}
/* iPad / wide screens saved to the home screen: no phone header, so the rail
   and the page clear the translucent status bar themselves. env() is 0 in a
   normal browser window, so desktops are unchanged. */
@media (min-width: 769px) {
  .sidebar.rail { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .main { padding-top: calc(32px + env(safe-area-inset-top, 0px)); }
}


/* ── Container map (openContainerMap) ───────────────────────────────────── */
.mp-page { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; height: calc(100vh - 48px); min-height: 520px; }
.mp-phone-seg { display: none; }
.mp-panel { display: flex; flex-direction: column; min-height: 0; background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); overflow: hidden; }
.mp-panel-head { padding: 16px 16px 12px; background: var(--bf-ink); color: var(--bf-ink-text); display: grid; gap: 12px; }
.mp-panel-head h2 { margin: 0; font: 400 22px/1.1 var(--bf-font-mono); letter-spacing: -.03em; color: var(--bf-ink-text); }
.mp-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: rgba(246,241,233,.08); border: 1px solid var(--bf-ink-line); }
.mp-seg button { border: 0; border-radius: 8px; padding: 7px 8px; font: 600 13px var(--bf-font-body); color: var(--bf-ink-muted); background: transparent; cursor: pointer; }
.mp-seg button[aria-selected="true"] { background: var(--bf-ink-text); color: var(--bf-ink); }
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.mp-chip { --c: var(--bf-teal); display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bf-border); background: var(--bf-surface); color: var(--bf-text);
  border-radius: 999px; padding: 5px 10px; font: 600 12.5px var(--bf-font-body); cursor: pointer; }
.mp-chip b { font: 600 11.5px var(--bf-font-mono); color: var(--bf-text-muted); }
.mp-chip.late { --c: var(--bf-coral); } .mp-chip.rental { --c: var(--bf-warning); } .mp-chip.long { --c: var(--bf-sand); } .mp-chip.soft { --c: var(--bf-text-muted); }
.mp-chip.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--bf-surface)); }
.mp-chip.on b { color: var(--bf-text); }
.mp-chip.drv i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.mp-day { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0; font-size: 14px; }
.mp-day span { color: var(--bf-text-muted); font-size: 13px; }
.mp-iconbtn { border: 1px solid var(--bf-border); background: var(--bf-surface); color: var(--bf-text); border-radius: 8px; min-width: 30px; height: 30px; font: 600 15px var(--bf-font-body); cursor: pointer; }
.mp-iconbtn.wide { padding: 0 12px; font-size: 13px; }
.mp-search { margin: 12px 14px 4px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--bf-border); border-radius: 10px; padding: 0 10px; background: var(--bf-surface-sunk); }
.mp-search svg { width: 15px; height: 15px; color: var(--bf-text-muted); flex: none; }
.mp-search input { flex: 1; border: 0; background: transparent; color: var(--bf-text); font: 14px var(--bf-font-body); padding: 9px 0; outline: none; min-width: 0; }
.mp-scroll { flex: 1; overflow: auto; padding: 4px 8px 12px; }
.mp-list-head { display: flex; align-items: center; gap: 8px; padding: 12px 8px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bf-text-muted); }
.mp-list { display: grid; gap: 2px; }
.mp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 1px solid transparent; border-radius: 10px; padding: 8px; cursor: pointer; }
.mp-row:hover { background: var(--bf-surface-alt); }
.mp-row.sel { background: var(--bf-surface-alt); border-color: var(--bf-teal); }
.mp-row.done .mp-row-main b { color: var(--bf-text-muted); text-decoration: line-through; }
.mp-row-main { display: grid; min-width: 0; }
.mp-row-main b, .mp-row-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-row-main b { font-size: 14px; }
.mp-row-main span { font-size: 12.5px; color: var(--bf-text-muted); }
.mp-row-side { display: grid; text-align: right; font-size: 12px; color: var(--bf-text-muted); }
.mp-row-side b { color: var(--bf-text); font-weight: 600; } .mp-row-side b.late { color: var(--bf-coral); }
.mp-flag { grid-column: 2 / -1; font-size: 11.5px; font-weight: 600; color: var(--bf-coral); }
.mp-flag.soft { color: var(--bf-warning-text); }
.mp-num { --c: #888; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 12px var(--bf-font-mono); }
.mp-empty { padding: 20px 10px; color: var(--bf-text-muted); font-size: 13px; text-align: center; }
.mp-foot { padding: 9px 14px; border-top: 1px solid var(--bf-border); font-size: 12.5px; color: var(--bf-text-muted); }
.mp-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--bf-teal); }
.mp-dot.late { background: var(--bf-coral); } .mp-dot.rental { background: var(--bf-warning); } .mp-dot.long { background: var(--bf-sand); }
.mp-dot.yard { border-radius: 3px; background: var(--bf-ink); border: 1px solid var(--bf-text-muted); }

/* The card for one site / stop / yard, in place of the list. */
.mp-card { flex: 1; overflow: auto; padding: 12px 16px 16px; display: grid; align-content: start; gap: 8px; }
.mp-back { justify-self: start; background: none; border: 0; padding: 2px 0; font: 600 13px var(--bf-font-body); color: var(--bf-teal); cursor: pointer; }
.mp-card h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.mp-card h3 small { font-size: 13px; font-weight: 500; color: var(--bf-text-muted); }
.mp-tag { --c: var(--bf-teal); justify-self: start; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--c); }
.mp-tag.late { --c: var(--bf-coral); } .mp-tag.rental { --c: var(--bf-warning); } .mp-tag.long { --c: var(--bf-sand); color: #2a2118; } .mp-tag.yard { --c: var(--bf-ink); }
.mp-addr { margin: 0; color: var(--bf-text-muted); font-size: 13.5px; line-height: 1.45; }
.mp-note { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; background: var(--bf-warning-tint); color: var(--bf-warning-text); }
.mp-note.late { background: var(--bf-coral-tint); color: var(--bf-coral); } .mp-note.ok { background: var(--bf-success-tint); color: var(--bf-success-text); }
.mp-cans { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; }
.mp-cans li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 10px; border-radius: 10px; background: var(--bf-surface-alt); font-size: 13.5px; }
.mp-cans a { color: inherit; text-decoration: none; } .mp-cans a:hover { color: var(--bf-teal); }
.mp-cans small { color: var(--bf-text-muted); font-family: var(--bf-font-mono); }
.mp-can-d { color: var(--bf-text-muted); font-size: 12.5px; text-align: right; }
.mp-can-d.late { color: var(--bf-coral); font-weight: 600; } .mp-can-d.rental { color: var(--bf-warning-text); font-weight: 600; }
.mp-cans .mp-link { grid-column: 1 / -1; justify-self: start; font-size: 12.5px; }
.mp-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mp-acts a { text-decoration: none; font-family: var(--bf-font-body); }
.mp-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--bf-teal); cursor: pointer; justify-self: start; }
.mp-move { padding: 10px; border-radius: 10px; border: 1px dashed var(--bf-teal); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* The map: a quiet grey base so the coloured pins carry the meaning. */
.mp-mapwrap { position: relative; border-radius: var(--bf-radius-lg); overflow: hidden; border: 1px solid var(--bf-border); background: var(--bf-surface-sunk); min-height: 0; }
.mp-map { position: absolute; inset: 0; z-index: 0; background: #e9eaec; }
.mp-map .mp-tiles { filter: grayscale(1) brightness(1.04) contrast(.92); }
html[data-theme="dark"] .mp-map { background: #1b1d21; }
html[data-theme="dark"] .mp-map .mp-tiles { filter: grayscale(1) invert(1) brightness(.86) contrast(1.05); }
html[data-theme="dark"] .mp-map .leaflet-control-attribution { background: rgba(20,22,26,.8); color: var(--bf-text-muted); }
html[data-theme="dark"] .mp-map .leaflet-control-attribution a { color: var(--bf-text); }
html[data-theme="dark"] .mp-map .leaflet-bar a { background: var(--bf-surface); color: var(--bf-text); border-color: var(--bf-border); }
.mp-map.placing, .mp-map.placing .leaflet-interactive { cursor: crosshair; }
.mp-mapbtns { position: absolute; top: 12px; right: 12px; z-index: 500; display: flex; gap: 6px; }
.mp-mapbtns .mp-iconbtn { box-shadow: var(--bf-shadow-soft); }
.mp-placing { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 600; background: var(--bf-ink); color: var(--bf-ink-text);
  padding: 9px 14px; border-radius: 999px; font-size: 13px; box-shadow: var(--bf-shadow); white-space: nowrap; }
.mp-placing .mp-link { color: var(--bf-ink-coral); margin-left: 8px; }
.mp-legend { position: absolute; left: 12px; bottom: 12px; z-index: 500; display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 7px 11px;
  background: color-mix(in srgb, var(--bf-surface) 94%, transparent); border: 1px solid var(--bf-border); border-radius: 10px; font-size: 12px; color: var(--bf-text-muted); }
.mp-legend span { display: inline-flex; align-items: center; gap: 6px; }

.mp-pin { --pin: var(--bf-teal); width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pin);
  border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35); display: grid; place-items: center; transition: transform .12s ease; }
.mp-pin span { transform: rotate(45deg); color: #fff; font: 700 13px/1 var(--bf-font-mono); }
.mp-pin.late { --pin: var(--bf-coral); } .mp-pin.rental { --pin: var(--bf-warning); } .mp-pin.long { --pin: var(--bf-sand); }
.mp-pin.long span { color: #2a2118; }
.mp-pin.approx { border-style: dashed; opacity: .85; }
.mp-pin.sel { transform: rotate(-45deg) scale(1.25); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pin) 35%, transparent), 0 4px 14px rgba(0,0,0,.4); }
.mp-cluster { width: 44px; height: 44px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; background: var(--bf-teal);
  border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.35); line-height: 1; }
.mp-cluster b { font: 700 14px var(--bf-font-mono); } .mp-cluster small { font-size: 8.5px; opacity: .9; }
.mp-cluster.late { background: var(--bf-coral); } .mp-cluster.rental { background: var(--bf-warning); } .mp-cluster.long { background: var(--bf-sand); color: #2a2118; }
.mp-stop { --c: #888; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; border: 2px solid #fff; display: grid; place-items: center;
  font: 700 13px var(--bf-font-mono); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.mp-stop.done { opacity: .62; filter: saturate(.7); }
.mp-stop.late { box-shadow: 0 0 0 3px var(--bf-coral), 0 2px 8px rgba(0,0,0,.35); }
.mp-stop.approx { border-style: dashed; }
.mp-stop.sel { transform: scale(1.25); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 40%, transparent), 0 3px 12px rgba(0,0,0,.4); }
.mp-yard { width: 30px; height: 30px; border-radius: 8px; background: var(--bf-ink); color: var(--bf-ink-text); border: 2px solid #fff;
  display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.mp-yard.sel { transform: scale(1.2); }
.mp-yard svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .mp-page { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 76px); gap: 10px; }
  .mp-phone-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: var(--bf-surface-alt); border: 1px solid var(--bf-border); }
  .mp-phone-seg button { border: 0; border-radius: 8px; padding: 8px; font: 600 14px var(--bf-font-body); background: transparent; color: var(--bf-text-muted); }
  .mp-phone-seg button[aria-selected="true"] { background: var(--bf-surface); color: var(--bf-text); box-shadow: var(--bf-shadow-soft); }
  .mp-page[data-phone="map"] .mp-panel { display: none; }
  .mp-page[data-phone="list"] .mp-mapwrap { display: none; }
  .mp-placing { white-space: normal; width: calc(100% - 24px); text-align: center; }
  .mp-legend { left: 8px; right: 8px; bottom: 26px; font-size: 11px; gap: 4px 10px; }
}

/* ── Dashboard Today strip (renderDashToday) ────────────────────────────── */
.td-strip { margin: 0 0 18px; }
.td-top { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; }
.td-top h3 { margin: 0; font-size: 15px; }
.td-top span { color: var(--bf-text-muted); font-size: 13px; }
.td-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.td-card { display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); padding: 14px 16px;
  transition: border-color var(--bf-dur-fast) var(--bf-ease-out), transform var(--bf-dur-fast) var(--bf-ease-out); }
.td-card:hover { border-color: var(--bf-teal); transform: translateY(-1px); }
.td-card:focus-visible { outline: 2px solid var(--bf-focus); outline-offset: 2px; }
.td-card.td-static { cursor: default; }
.td-card.td-static:hover { border-color: var(--bf-border); transform: none; }
.td-card.td-wide { grid-column: span 2; }
.td-card.hot { border-color: color-mix(in srgb, var(--bf-coral) 55%, var(--bf-border)); }
.td-card.warn { border-color: color-mix(in srgb, var(--bf-warning) 55%, var(--bf-border)); }
.td-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.td-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--bf-text-muted); text-transform: uppercase; }
.td-flag { font-size: 11px; font-weight: 600; color: var(--bf-coral); background: var(--bf-coral-tint); padding: 2px 8px; border-radius: 999px; }
.td-big { font: 500 28px/1.1 var(--bf-font-mono); letter-spacing: -.03em; }
.td-big small { font: 500 13px var(--bf-font-body); color: var(--bf-text-muted); letter-spacing: 0; }
.td-card.hot .td-big { color: var(--bf-coral); } .td-card.warn .td-big { color: var(--bf-warning-text); }
.td-sub { font-size: 12.5px; color: var(--bf-text-muted); }
.td-bar { height: 6px; border-radius: 999px; background: var(--bf-surface-alt); overflow: hidden; }
.td-bar em { display: block; height: 100%; background: var(--bf-teal); border-radius: inherit; }
.td-body { display: flex; gap: 14px; align-items: flex-start; }
.td-ring { --p: 0; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--bf-surface) 76%, transparent 78% 100%), conic-gradient(var(--bf-teal) calc(var(--p) * 1%), var(--bf-surface-alt) 0); }
.td-ring.all { background: radial-gradient(closest-side, var(--bf-surface) 76%, transparent 78% 100%), conic-gradient(var(--bf-success) 100%, var(--bf-surface-alt) 0); }
.td-ring b { font: 500 20px/1 var(--bf-font-mono); }
.td-ring small { font-size: 11px; color: var(--bf-text-muted); }
.td-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; flex: 1; }
.td-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; font-size: 13px; }
.td-tick { color: var(--bf-success-text); font-weight: 700; }
.td-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-who small { color: var(--bf-text-muted); margin-left: 6px; }
.td-list li.done .td-who { color: var(--bf-text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bf-text-muted) 50%, transparent); }
.td-late { font-size: 11px; font-weight: 600; color: var(--bf-coral); }
.td-none { margin: 6px 0 0; font-size: 13px; color: var(--bf-text-muted); }
.td-more { font-size: 12px; color: var(--bf-teal); font-weight: 600; }
@media (max-width: 700px) {
  .td-grid { grid-template-columns: 1fr 1fr; }
  .td-card.td-wide { grid-column: 1 / -1; }
  .td-big { font-size: 24px; }
}

/* ── Command palette (⌘K) — groups and the key hints under the list ─────── */
.omni-group { padding: 10px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bf-text-muted); }
.omni-group:first-child { padding-top: 4px; }
.omni-item.omni-cmd .omni-item-ico { font-weight: 700; }
.omni-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--bf-border); font-size: 11.5px; color: var(--bf-text-muted); }
.omni-foot kbd { font: 600 10.5px var(--bf-font-mono); padding: 1px 5px; margin-right: 3px; border-radius: 4px; border: 1px solid var(--bf-border); background: var(--bf-surface-alt); color: var(--bf-text); }
@media (max-width: 600px) { .omni-foot { display: none; } }