/* Revon — Run the Floor
   Revon design system (DESIGN.md): Orient accent, cool neutrals, semantic states.
   Architecture per reference screens: app shell, mode bar, view bar, one dominant
   workspace per view, contextual drawer. */

:root {
  /* v4 palette — OKLCH, harmonized with the teal brand; cooler + calmer (mentor feedback). */
  --orient-25: oklch(0.986 0.01 216);
  --orient-50: oklch(0.972 0.02 215);
  --orient-100: oklch(0.94 0.04 214);
  --orient-200: oklch(0.885 0.062 213);
  --orient-300: oklch(0.80 0.088 214);
  --orient-400: oklch(0.70 0.115 216);
  --orient-500: oklch(0.61 0.126 221);
  --orient-600: oklch(0.52 0.105 223);
  --orient-700: oklch(0.45 0.085 224);
  --orient-800: oklch(0.38 0.07 225);
  --orient-900: oklch(0.32 0.055 226);
  /* active / in-service — cool muted indigo-blue */
  --indigo-50: oklch(0.966 0.016 262);
  --indigo-100: oklch(0.93 0.03 262);
  --indigo-200: oklch(0.908 0.034 262);
  --indigo-600: oklch(0.575 0.11 263);
  --indigo-700: oklch(0.49 0.10 263);
  --indigo-800: oklch(0.42 0.09 263);
  /* neutrals — cool blue-grey (hue 258) */
  --neutral-0: #ffffff;
  --neutral-25: oklch(0.988 0.003 258);
  --neutral-50: oklch(0.976 0.004 258);
  --neutral-100: oklch(0.966 0.005 258);
  --neutral-150: oklch(0.944 0.008 258);
  --neutral-200: oklch(0.918 0.01 258);
  --neutral-250: oklch(0.89 0.011 258);
  --neutral-300: oklch(0.865 0.013 258);
  /* Muted end darkened a step so subtext/secondary reads clearly (was too gray)
     while staying below body (700/800) so hierarchy holds. */
  --neutral-400: oklch(0.645 0.019 258);
  --neutral-450: oklch(0.575 0.02 258);
  --neutral-500: oklch(0.50 0.021 258);
  --neutral-600: oklch(0.44 0.02 258);
  --neutral-650: oklch(0.41 0.018 260);
  --neutral-700: oklch(0.37 0.017 260);
  --neutral-800: oklch(0.26 0.013 262);
  --neutral-900: oklch(0.17 0.013 264);
  /* status — cooler + muted; warning stays orange */
  --success-bg: oklch(0.965 0.026 163);
  --success-border: oklch(0.905 0.048 163);
  --success-fg: oklch(0.63 0.105 163);
  --success-strong: oklch(0.48 0.082 164);
  --warning-bg: oklch(0.96 0.032 55);
  --warning-border: oklch(0.90 0.065 52);
  --warning-fg: oklch(0.685 0.155 50);
  --warning-strong: oklch(0.505 0.12 48);
  --critical-bg: oklch(0.965 0.014 20);
  --critical-border: oklch(0.905 0.034 20);
  --critical-fg: oklch(0.575 0.15 22);
  --critical-strong: oklch(0.50 0.128 22);
  --waiting-bg: oklch(0.966 0.012 250);
  --waiting-border: oklch(0.916 0.022 250);
  --waiting-fg: oklch(0.60 0.048 250);
  --waiting-strong: oklch(0.47 0.04 252);
  /* "At capacity" is a warning-class state — use the ONE system orange (warning), not a separate rust hue. */
  --capacity-high: var(--warning-fg);
  --capacity-high-soft: var(--warning-bg);
  --font-ui: "Manrope", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace; /* number-plate face only */
  /* shadows — Tailwind box-shadow scale */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-low: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-popover: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);
  --focus-ring: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--orient-300);
  /* Stable decision-list columns. The worklist fits normal laptop widths
     without a drawer, then scrolls horizontally only when the drawer removes
     available space. Sticky offsets depend on these widths plus the gap. */
  --wl-check: 34px;
  --wl-car: 160px;
  --wl-workflow: 136px;
  --wl-job: 188px;
  --wl-location: 108px;
  --wl-place: 86px;
  --wl-promise: 70px;
  --wl-predicted: 78px;
  --wl-risk: 188px;
  --wl-owner: 44px;
  --wl-action: 134px;
  --wl-gap: 8px;
  --wl-pad-x: 12px;
  --worklist-cols: var(--wl-check) var(--wl-car) var(--wl-workflow) var(--wl-job) var(--wl-location) var(--wl-place) var(--wl-promise) var(--wl-predicted) var(--wl-risk) var(--wl-owner) var(--wl-action);
  --worklist-min-width: calc(var(--wl-check) + var(--wl-car) + var(--wl-workflow) + var(--wl-job) + var(--wl-location) + var(--wl-place) + var(--wl-promise) + var(--wl-predicted) + var(--wl-risk) + var(--wl-owner) + var(--wl-action) + (var(--wl-gap) * 10) + (var(--wl-pad-x) * 2));
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--neutral-900);
  background: var(--neutral-50);
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.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;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 40;
  padding: 8px 14px;
  border-radius: 0;
  background: var(--neutral-900);
  color: var(--neutral-0);
}

.skip-link:focus {
  left: 8px;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Lucide icons are stroke-only outlines — never fill them (filling an outline path
   turns the icon into a solid blob). Active/selected states read via colour + weight. */
svg.lucide {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  fill: none;
  flex: none;
}

/* ---------- Shell ---------- */

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  /* Near-white base with a very subtle brand tint pooling at the bottom of
     the sidebar column (the workspace sheet floats above this). */
  background: linear-gradient(180deg, var(--neutral-25) 0%, var(--neutral-25) 62%, var(--orient-50) 100%);
}
/* The main workspace is an elevated, rounded sheet floating above the sidebar base. */
.shell-body {
  margin: 8px 8px 8px 4px;
  border-radius: 0;
  overflow: hidden;
  background: var(--neutral-0);
  box-shadow: 0 0 0 1px var(--neutral-200), 0 10px 28px -12px rgba(19, 24, 33, 0.18);
}

.side-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 64px;
  flex: none;
  padding: 12px 0;
  background: transparent;
  overflow: hidden;
  transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.app-shell.is-rail-expanded .side-rail { width: 212px; }

/* The collapse toggle lives inline with the logo (no dedicated toggle row).
   Collapsed: only the toggle shows (logo hidden). Expanded: logo + toggle. */
.rail-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  margin-bottom: 12px;
  padding: 0;
}
.app-shell.is-rail-expanded .rail-head { justify-content: space-between; padding: 0 2px 0 4px; }
.rail-brand-group { display: none; align-items: center; gap: 10px; min-width: 0; }
.app-shell.is-rail-expanded .rail-brand-group { display: flex; }
.rail-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--orient-500), var(--orient-700));
  color: var(--neutral-0);
  font-weight: 700;
  font-size: 16px;
}
.rail-mark-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail-brand {
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  white-space: nowrap;
}
.rail-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.rail-toggle:hover { background: var(--neutral-100); color: var(--orient-600); }
.rail-toggle svg.lucide { width: 19px; height: 19px; }
/* Show expand glyph when collapsed, collapse glyph when expanded. */
.rail-toggle-collapse { display: none; }
.app-shell.is-rail-expanded .rail-toggle-collapse { display: block; }
.app-shell.is-rail-expanded .rail-toggle-expand { display: none; }

.rail-nav { display: flex; flex-direction: column; gap: 4px; position: relative; }

/* Sliding selected-state indicator (vanilla port of Framer's layoutId magic-move):
   a single white pill that springs to the active button's measured position. */
.rail-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: 0 1px 2px rgba(19, 24, 33, 0.10), 0 0 0 1px var(--neutral-200);
  transform: translateY(0);
  /* Spring-ish stand-in for Framer's layoutId: a touch of overshoot, settled < 300ms. */
  transition: transform 0.28s cubic-bezier(0.34, 1.26, 0.5, 1), width 0.22s ease, height 0.22s ease, opacity 0.18s ease;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}
.rail-indicator.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rail-indicator { transition: opacity 0.2s ease; }
}

.rail-button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-500);
  overflow: hidden;
  cursor: pointer;
  transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.12s ease, color 0.12s ease, transform 0.09s ease;
}
.app-shell.is-rail-expanded .rail-button { width: 100%; padding: 0 8px; }

.rail-button svg.lucide {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0 10px;
}
.app-shell.is-rail-expanded .rail-button svg.lucide { margin: 0 12px 0 2px; }

.rail-label {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  max-width: 0;
  transition: opacity 0.15s ease;
}
.app-shell.is-rail-expanded .rail-label { opacity: 1; max-width: 140px; }

.rail-button:hover {
  background: var(--neutral-100);
  color: var(--neutral-700);
}

/* Active button sits on the white sliding indicator: dark label, brand-coloured icon. */
.rail-button.is-active {
  background: transparent;
  color: var(--neutral-900);
}
.rail-button.is-active:hover { background: transparent; }
/* Nav icons stay outline (never filled — filling lucide outlines makes solid
   blobs); the active state reads through the brand-colour icon + heavier stroke. */
.rail-button svg.lucide { fill: none; }
.rail-button.is-active svg.lucide { color: var(--orient-600); stroke-width: 2.25; }

.rail-button:disabled {
  opacity: 0.48;
  cursor: default;
}

.rail-button:disabled:hover {
  background: transparent;
  color: var(--neutral-500);
}

/* Foot group pinned to the bottom of the rail: Settings + the designer plug. */
.rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.rail-bottom {
  margin-top: 0;
}

/* ── Designer plug ───────────────────────────────────────────────────────────
   A quiet "made by" credit at the foot of the rail, built from the same tokens as
   the rest of the UI (hairline border, neutral surface). Collapsed rail → a small
   monogram; expanded rail → a compact card with a name + two links. */
.rail-plug { min-width: 0; }

/* Collapsed state: monogram chip (the card can't fit in 64px). */
.rail-plug-mini {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  color: var(--neutral-600);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.rail-plug-mini:hover { background: var(--neutral-100); color: var(--neutral-800); border-color: var(--neutral-300); }
.rail-plug-mono { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; }
.app-shell.is-rail-expanded .rail-plug-mini { display: none; }

/* Expanded state: a compact, subtle card. */
.rail-plug-card {
  display: none;
  padding: 10px 10px 11px;
  border-radius: 0;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-25, var(--neutral-50));
}
.app-shell.is-rail-expanded .rail-plug-card { display: block; }
.rail-plug-eyebrow {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-400);
}
.rail-plug-name { margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--neutral-800); }
.rail-plug-actions { display: flex; gap: 6px; }
.rail-plug-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  min-width: 0;
  white-space: nowrap;
  border-radius: 0;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.rail-plug-btn svg.lucide { width: 14px; height: 14px; transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1); }
/* Portfolio = the one gentle brand accent; LinkedIn = a quiet icon square. */
.rail-plug-btn.is-primary { flex: 1 1 auto; color: var(--orient-700); border-color: var(--orient-200, var(--neutral-200)); background: var(--orient-50, var(--neutral-50)); }
.rail-plug-btn-icon { flex: none; width: 30px; padding: 0; }
.rail-plug-li { width: 15px; height: 15px; display: block; }
.rail-plug-btn:hover { background: var(--neutral-50); border-color: var(--neutral-300); color: var(--neutral-900); }
.rail-plug-btn.is-primary:hover { background: var(--orient-100, var(--neutral-100)); border-color: var(--orient-300, var(--neutral-300)); color: var(--orient-700); }
.rail-plug-btn.is-primary:hover svg.lucide { transform: translate(1px, -1px); }
.rail-plug-btn:focus-visible { outline: 2px solid var(--orient-500); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rail-plug-btn:hover svg.lucide { transform: none; }
}

.rail-scrim { display: none; }

/* On narrower screens the expanded rail overlays content instead of squeezing it */
@media (max-width: 1180px) {
  .app-shell.is-rail-expanded .side-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    box-shadow: var(--shadow-popover);
  }
  .app-shell.is-rail-expanded .rail-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(18, 28, 38, 0.34);
  }
}

.shell-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: none;
  height: 64px;
  padding: 0 20px;
  background: var(--neutral-25);
  border-bottom: 1px solid var(--neutral-200);
}

/* Greeting replaces the per-page title (which changed width and shifted the search).
   A fixed-width block keeps the centered search bar in the same place on every page. */
.topbar-greet { flex: none; width: 240px; display: flex; flex-direction: column; gap: 1px; }
.topbar-greet strong { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--neutral-900); white-space: nowrap; }
.topbar-greet-sub { font-size: 12px; line-height: 15px; color: var(--neutral-500); font-weight: 500; white-space: nowrap; }

.sys-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--success-border); border-radius: 0;
  background: var(--success-bg); color: var(--success-strong);
  font-size: 12px; font-weight: 700;
}
.sys-dot { width: 7px; height: 7px; border-radius: 0; background: var(--success-fg); box-shadow: 0 0 0 3px rgba(36, 122, 74, 0.16); animation: sys-pulse 2.4s ease-in-out infinite; }
@keyframes sys-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .sys-dot { animation: none; } }

.topbar-identity h1 {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.topbar-sub {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-500);
}

.mode-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 0;
  background: var(--neutral-100);
}

.mode-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-600);
  font-size: 13px;
  font-weight: 600;
}

.mode-tabs button:hover {
  color: var(--neutral-800);
}

.mode-tabs button:disabled,
.view-tabs button:disabled {
  cursor: not-allowed;
  color: var(--neutral-500);
  opacity: 0.68;
}

.mode-tabs button:disabled:hover,
.view-tabs button:disabled:hover {
  color: var(--neutral-500);
  background: transparent;
}

.mode-tabs button.is-active {
  background: var(--neutral-0);
  color: var(--neutral-900);
  box-shadow: var(--shadow-low);
}

.mode-dot {
  width: 7px;
  height: 8px;
  border-radius: 50%;
  background: var(--orient-500);
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.status-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.status-block strong {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

.status-block span {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--neutral-500);
  font-weight: 600;
}

.status-block.is-risk strong {
  color: var(--critical-fg);
}

.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-600);
}

.icon-button:hover {
  background: var(--neutral-50);
}

/* ---------- Topbar: centered command search, clock, day progress ---------- */

.topbar-search {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: min(460px, 100%);
  height: 38px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-500);
  font-size: 13px;
  cursor: text;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.cmdk-trigger:hover {
  border-color: var(--neutral-300);
  background: var(--neutral-50);
}

.cmdk-trigger svg.lucide {
  width: 16px;
  height: 16px;
  color: var(--neutral-400);
}

.cmdk-trigger span {
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmdk-kbd,
.cmdk-esc,
.cmdk-footer kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 650;
}

.clock-block {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}

.clock-block strong {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--neutral-900);
}

.clock-block .clock-sep { color: var(--neutral-300); font-weight: 700; }

.clock-block span {
  font-size: 13px;
  line-height: 16px;
  color: var(--neutral-500);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.day-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.day-progress-label {
  font-size: 12px;
  color: var(--neutral-500);
  font-weight: 600;
}

.day-progress-track {
  width: 64px;
  height: 6px;
  border-radius: 0;
  background: var(--neutral-200);
  overflow: hidden;
}

.day-progress-fill {
  display: block;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg, var(--orient-500), var(--orient-700));
}

.day-progress-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-800);
}

.day-progress-ot {
  font-size: 12px;
  color: var(--neutral-500);
  font-weight: 600;
}

.day-progress-ot b {
  color: var(--success-strong);
}

.icon-button.has-badge {
  position: relative;
  overflow: visible;
}

/* Manager account avatar (after the bell) */
.topbar-avatar {
  flex: none;
  width: 34px; height: 34px;
  padding: 0; border: 0;
  border-radius: 0;
  background: var(--neutral-100);
  box-shadow: 0 0 0 1px var(--neutral-200);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.14s ease, transform 0.09s ease;
}
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topbar-avatar:hover { box-shadow: 0 0 0 1px var(--orient-300); }
.topbar-avatar:active { transform: scale(0.96); }
.topbar-avatar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) { .topbar-avatar:active { transform: none; } }

/* Presence-only dot — signals "unread" without a count (numbers on the bell read as noisy). */
.notif-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  background: var(--critical-fg);
  border: 2px solid var(--neutral-0);
  box-sizing: content-box;
}

/* ---------- Command palette (⌘K) ---------- */

.cmdk {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
}

.cmdk[hidden] {
  display: none;
}

.cmdk-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 47, 67, 0.28);
  backdrop-filter: blur(1px);
}

.cmdk-panel {
  position: relative;
  width: min(620px, calc(100% - 40px));
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-popover);
  overflow: hidden;
}

.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-100);
}

.cmdk-input-row svg.lucide {
  width: 18px;
  height: 18px;
  color: var(--neutral-400);
}

.cmdk-input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--neutral-900);
  font-size: 15px;
  font-family: inherit;
}

.cmdk-input::placeholder {
  color: var(--neutral-400);
}

.cmdk-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
}

.cmdk-group {
  margin: 8px 10px 4px;
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-800);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.cmdk-item.is-active {
  background: var(--neutral-50);
}

.cmdk-item svg.lucide {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--neutral-500);
}

.cmdk-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 550;
}

.cmdk-item-hint {
  flex: none;
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 600;
}

.cmdk-item.is-active .cmdk-item-hint {
  color: var(--neutral-600);
}

.cmdk-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--neutral-500);
  font-size: 13px;
}

.cmdk-footer {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-25);
  color: var(--neutral-500);
  font-size: 12px;
}

.cmdk-footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------- View bar ---------- */

.view-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid var(--neutral-200);
  background: var(--neutral-50);
}

.view-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-100);
}

.view-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-600);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 1px 1px rgba(23, 26, 33, 0.03);
}

.view-tabs button:not(.is-active) {
  width: 36px;
  padding: 0;
  justify-content: center;
}

.view-tabs button:not(.is-active) span {
  display: none;
}

.view-tabs button:hover {
  background: var(--neutral-25);
  color: var(--neutral-800);
}

.view-tabs button.is-active {
  min-width: 112px;
  background: var(--orient-50);
  color: var(--orient-800);
  box-shadow: inset 0 0 0 1px var(--orient-200), 0 1px 1px rgba(23, 26, 33, 0.03);
}

.view-bar.is-close-page .view-tabs {
  display: none;
}

.view-bar.is-overview-page .view-tabs {
  display: none;
}

.view-bar.is-overview-page .view-bar-tools {
  margin-left: auto;
}

.view-bar.is-live-page .view-tabs {
  display: none;
}

.view-bar.is-live-page .view-bar-tools {
  margin-left: auto;
}

.view-bar.is-plan-page .view-tabs {
  order: 2;
  margin-left: auto;
}

.view-bar.is-plan-page .view-bar-tools {
  margin-left: 0;
}

.view-bar-meta {
  font-size: 13px;
  color: var(--neutral-500);
}

.view-bar-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.attention-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-800);
  white-space: nowrap;
}

.attention-button:hover {
  background: var(--neutral-50);
}

.attention-button.is-open {
  border-color: var(--orient-300);
  background: var(--orient-50);
  color: var(--orient-800);
}

.attention-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--critical-fg);
}

.attention-count {
  display: inline-grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 24px;
  padding: 0;
  border-radius: 0;
  background: var(--critical-bg);
  border: 1px solid var(--critical-border);
  color: var(--critical-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.search-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-500);
}

.search-box:focus-within {
  box-shadow: var(--focus-ring);
}

.search-box input {
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  width: 150px;
  color: var(--neutral-800);
}

.search-box input::placeholder {
  color: var(--neutral-500);
}

/* ---------- Canvas ---------- */

.canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

/* Option B de-boxing: the main content area IS the surface (white). Page sections
   flow directly on it, separated by hairline dividers — no inner cards. */
.view-root {
  --gutter: 20px;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 14px 0 24px;
  background: var(--neutral-0);
}
/* Sections that carry their own edge gutter (so dividers/rows go full-bleed). */
.overview-kpis, .overview-section-head, .overview-list-row, .cars-filterbar,
.cars-board-scroll, .page-head, .cars-views, .staff-section, .perf-page,
.staff-filters, .overview-work-strip, .overview-board-strip { padding-left: var(--gutter); padding-right: var(--gutter); }
.overview-kpi:first-child { padding-left: 0; }
.assign-context, .next-move-strip { margin-left: var(--gutter); margin-right: var(--gutter); }
.data-table thead th:first-child, .cars-table td.cars-check-col { padding-left: var(--gutter); }
.cars-table th:nth-child(2), .cars-table td:nth-child(2) { left: calc(44px + var(--gutter)); }

/* Smooth page-change transition (only when switching pages, not on re-render) */
.view-root.page-enter > * {
  animation: page-enter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view-root.page-enter > * { animation: none; }
}

.canvas.is-overview.drawer-open .view-root {
  padding-right: 20px;
}

.canvas.is-overview .drawer {
  position: absolute;
  top: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 22;
  width: min(430px, calc(100% - 56px));
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  box-shadow: var(--shadow-popover);
}

@media (min-width: 1440px) {
  .canvas.is-overview .drawer {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 420px;
    margin: 20px 20px 20px 0;
    box-shadow: var(--shadow-low);
  }
}

/* ---------- Shared Operations Spine ---------- */

.run-workspace {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  min-width: 0;
}

.run-workspace .worklist {
  flex: 1;
  min-height: 0;
}

.move-spine {
  position: sticky;
  top: 0;
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-200);
  box-shadow: var(--shadow-low);
}

.move-spine-head {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid var(--orient-200);
  background: var(--orient-50);
  color: var(--neutral-900);
}

.move-spine-head span,
.move-spine-head em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.move-spine-head span {
  color: var(--orient-800);
  font-size: 13px;
  line-height: 16px;
  font-weight: 750;
}

.move-spine-head strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.move-spine-head em {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 650;
}

.move-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
}

.move-card {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) max-content;
  grid-template-areas:
    "rank main proof"
    "rank recovery action";
  gap: 4px 8px;
  min-width: 0;
  min-height: 76px;
  padding: 10px 12px;
  border: 0;
  background: var(--neutral-0);
  color: inherit;
  text-align: left;
}

.move-card:hover {
  background: var(--neutral-25);
}

.move-card.is-selected {
  background: var(--orient-50);
  box-shadow: inset 0 0 0 1px var(--orient-300);
}

.move-card[data-tone="critical"] .move-rank,
.move-card[data-tone="critical"] .move-main strong {
  color: var(--critical-strong);
}

.move-card[data-tone="high"] .move-rank,
.move-card[data-tone="high"] .move-main strong,
.move-card[data-tone="medium"] .move-rank,
.move-card[data-tone="medium"] .move-main strong {
  color: var(--warning-strong);
}

.move-rank {
  grid-area: rank;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 800;
}

.move-main {
  grid-area: main;
  min-width: 0;
}

.move-main strong,
.move-main em,
.move-recovery,
.move-action {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.move-main strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 16px;
  font-weight: 850;
}

.move-main em {
  margin-top: 1px;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 650;
}

.move-proof {
  grid-area: proof;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  justify-self: end;
}

.move-proof span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.move-proof svg.lucide {
  width: 13px;
  height: 12px;
  color: var(--neutral-400);
}

.move-recovery {
  grid-area: recovery;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
}

.move-action {
  grid-area: action;
  justify-self: end;
  color: var(--orient-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.move-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 70px;
  padding: 0 14px;
  background: var(--neutral-0);
  color: var(--success-strong);
  font-size: 13px;
  font-weight: 750;
}

.move-empty svg.lucide {
  width: 17px;
  height: 16px;
}

.move-spine.is-dense {
  grid-template-columns: minmax(150px, 0.22fr) minmax(0, 1fr);
}

.move-spine.is-dense .move-card {
  min-height: 64px;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-areas:
    "rank main"
    "rank recovery";
}

.move-spine.is-dense .move-proof,
.move-spine.is-dense .move-action {
  display: none;
}

/* ---------- Primary Overview ---------- */

.overview-page {
  display: flex;
  flex-direction: column;
  /* No gap under the KPI strip so the column divider meets the KPI hairline;
     the work list / bay map carry their own top padding for breathing room. */
  gap: 0;
  /* Grows with content so the whole page (view-root) scrolls — the KPI strip
     scrolls away and the right panel sticks (see .overview-side). */
  min-height: 100%;
}
/* The board is a bordered card, so it keeps a gap below the KPI strip. */
.overview-page-board { gap: 14px; }

/* ---- KPI strip: one quiet row spanning full width, hairline-divided ---- */
.overview-kpis {
  flex: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* Sit flush under the topbar so the vertical cell dividers meet the topbar's own
     hairline (no stray gap, no double line). Cell padding keeps the labels breathing. */
  margin-top: -14px;
  border-bottom: 1px solid var(--neutral-150, var(--neutral-200));
}
.overview-kpi:first-child { padding-left: 0; }

/* Suggested next move: one compact recommendation row (no big card). */
.next-move-strip {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border: 1px solid var(--orient-200);
  border-radius: 0;
  background: linear-gradient(100deg, var(--orient-50), var(--neutral-0) 62%);
}
.nm-row { display: flex; align-items: center; gap: 12px; }

.next-move-strip.is-open { z-index: 26; }
.nm-alts-toggle { display: inline-flex; align-items: center; gap: 4px; }
.nm-alts-toggle svg.lucide { width: 14px; height: 14px; }

/* Strip / assign-context sit at the top of the work-list column */
.overview-worklist > .next-move-strip,
.overview-worklist > .assign-context { margin-bottom: 12px; }

/* Bay-triggered "Assign Bay N" candidate list (image 1) */
/* Candidate suggestion is the first group in the work list (flush, scrolls with it) */
.assign-context {
  flex: none;
  background: var(--neutral-0);
  border-bottom: 1px solid var(--neutral-100);
}
/* Read-only "entering bays next" preview — full-width rows, matching the work-list grammar. */
.entering-next { flex: none; padding: 12px 20px 0; background: var(--neutral-25); border-bottom: 1px solid var(--neutral-150); }
.entering-next-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.entering-next-mark { flex: none; width: 28px; height: 28px; border-radius: 0; display: grid; place-items: center; background: var(--orient-100); color: var(--orient-600); }
.entering-next-mark svg.lucide { width: 15px; height: 15px; }
.entering-next-copy p { margin: 0; font-size: 13px; font-weight: 750; color: var(--neutral-900); }
.entering-next-copy em { font-style: normal; font-size: 12px; color: var(--neutral-500); }
.entering-next-list { list-style: none; margin: 0 -20px; padding: 0; }
.entering-row { display: flex; align-items: center; gap: 12px; padding: 9px 20px; border-top: 1px solid var(--neutral-150); }
.entering-rank { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--orient-600); color: #fff; font-size: 12px; font-weight: 800; }
.entering-plate { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.entering-vehicle { font-size: 13px; color: var(--neutral-500); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entering-target { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 650; color: var(--neutral-700); }
.entering-target svg.lucide { width: 13px; height: 13px; color: var(--neutral-400); }
.entering-eta { margin-left: auto; flex: none; font-size: 12px; color: var(--neutral-500); }
.entering-eta b { color: var(--neutral-800); font-weight: 700; }
.overview-list > .assign-context:first-child { border-top: 0; }
/* In the work list the recommendation is full-bleed like the rows (no side inset). */
.overview-list > .assign-context { margin-left: 0; margin-right: 0; }
/* In the board it stands alone, so give it a card treatment */
.overview-board-strip { flex: none; margin-bottom: 12px; }
.overview-board-strip .assign-context {
  border: 1px solid var(--success-border);
  border-radius: 0;
  overflow: hidden;
}
.assign-context-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--success-bg);
  border-bottom: 1px solid var(--success-border);
}
.assign-context-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 28px;
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--success-fg);
  flex: none;
}
.assign-context-mark svg.lucide { width: 15px; height: 16px; }
.assign-context-copy { flex: 1; min-width: 0; }
.assign-context-copy p { margin: 0; font-size: 13px; }
.assign-context-copy p b { color: var(--success-strong); font-weight: 700; }
.assign-context-copy p span { color: var(--success-fg); font-weight: 600; }
.assign-context-copy em { font-style: normal; font-size: 12px; color: var(--neutral-500); }
.icon-button-sm { width: 24px; height: 24px; }
.icon-button-sm svg.lucide { width: 14px; height: 14px; }
.assign-context-list { display: flex; flex-direction: column; padding: 0; }
.assign-cand {
  display: grid;
  grid-template-columns: 22px 104px 1fr auto auto minmax(150px, auto);
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--neutral-100);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.assign-cand:hover { background: var(--neutral-25); }
.assign-cand.is-active { background: var(--orient-50); }
.assign-cand-rank {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 12px;
  font-weight: 700;
}
.assign-cand-rank[data-tone="success"] { background: var(--success-fg); color: #fff; }
.assign-cand-plate { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.assign-cand-vehicle { font-size: 12px; color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assign-cand-jobs { font-size: 12px; font-weight: 600; color: var(--neutral-700); white-space: nowrap; }
.assign-cand-promise { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.assign-cand-promise em { font-size: 12px; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; color: var(--neutral-400); }
.assign-cand-promise b { font-size: 13px; color: var(--neutral-800); }
.assign-cand-fit { font-size: 12px; font-weight: 600; color: var(--neutral-500); white-space: nowrap; }
.assign-cand-fit[data-tone="success"] { color: var(--success-fg); }
.assign-context-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--neutral-100);
  font-size: 12px;
  color: var(--neutral-500);
}
@container worklist (max-width: 680px) {
  .assign-cand { grid-template-columns: 22px 104px 1fr auto auto; }
  .assign-cand-fit { display: none; }
}
@container worklist (max-width: 520px) {
  .assign-cand { grid-template-columns: 22px 100px auto auto; }
  .assign-cand-vehicle { display: none; }
}

/* Alternatives: inline vertical-card panel (not an absolute popover — the card clips) */
.nm-alts {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--orient-200);
}
.nm-alts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--neutral-600);
  font-size: 12px;
  font-weight: 600;
}
.nm-alts-head b { color: var(--neutral-900); font-weight: 750; }
.nm-alts-cards { display: flex; flex-direction: column; gap: 8px; }

.nm-alt {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}
.nm-alt-top { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.nm-alt-top strong { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.nm-alt-tag { padding: 2px 8px; border-radius: 0; font-size: 12px; font-weight: 700; background: var(--neutral-100); color: var(--neutral-600); }
.nm-alt-tag[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); }
.nm-alt-tag[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); }
.nm-alt ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.nm-alt li { display: flex; align-items: baseline; gap: 6px; font-size: 12px; line-height: 16px; color: var(--neutral-600); }
.nm-alt li svg.lucide { width: 13px; height: 12px; flex: none; transform: translateY(2px); color: var(--neutral-400); }
.nm-alt li[data-ok="true"] svg.lucide { color: var(--success-fg); }
.nm-alt-pick { justify-self: end; align-self: center; border: 1px solid var(--neutral-200); white-space: nowrap; }
@container worklist (max-width: 640px) {
  .nm-alt { grid-template-columns: 1fr auto; }
  .nm-alt ul { grid-column: 1 / -1; }
}

.next-move-strip .nm-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: var(--orient-600);
  color: var(--neutral-0);
}

.next-move-strip .nm-icon svg.lucide { width: 15px; height: 16px; }

.next-move-strip .nm-body {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--neutral-700);
}

.next-move-strip .nm-body b { color: var(--orient-800); font-weight: 700; margin-right: 6px; }
.next-move-strip .nm-body strong { color: var(--neutral-900); font-weight: 700; }

.next-move-strip .nm-actions { flex: none; display: flex; gap: 8px; }

.btn-sm { height: 30px; padding: 0 12px; font-size: 13px; }

.overview-kpi {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 18px 18px;
  min-width: 0;
}

.overview-kpi-label {
  margin-bottom: 24px;
}
.overview-kpi-sub,
.overview-kpi-trend {
  margin-top: 4px;
}

.overview-kpi + .overview-kpi {
  border-left: 1px solid var(--neutral-100);
}

.overview-kpi-label {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.overview-kpi-value {
  color: var(--neutral-900);
  font-size: 22px;
  line-height: 30px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.overview-kpi-value[data-tone="critical"] { color: var(--critical-strong); }
.overview-kpi-value[data-tone="warning"] { color: var(--warning-strong); }
.overview-kpi-value[data-tone="success"] { color: var(--neutral-900); }
/* Floor-health hero: a tone dot before the status word; Healthy reads green (unlike numeric KPIs). */
.overview-kpi.is-health .overview-kpi-value { display: inline-flex; align-items: center; }
.overview-kpi.is-health .overview-kpi-value[data-tone="success"] { color: var(--success-strong); }
/* Reason + trend share one line: the reason clips before wrapping, the trend stays fixed at its end
   so the tone-coloured "easing"/"building" always shows. */
.overview-kpi-foot { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; }
.overview-kpi-foot .overview-kpi-sub { margin-top: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview-kpi-foot .overview-kpi-trend { margin-top: 0; flex: none; }

.overview-kpi-sub {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 550;
}

.overview-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  color: var(--neutral-500);
}

.overview-kpi-trend[data-tone="success"] { color: var(--success-strong); }
.overview-kpi-trend[data-tone="warning"] { color: var(--warning-strong); }
.overview-kpi-trend[data-tone="critical"] { color: var(--critical-strong); }

.overview-kpi-trend svg.lucide {
  width: 13px;
  height: 12px;
}

/* ---- Body: Live floor card + (Work list + Car detail) card ---- */
.overview-body {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 14px;
}

/* ---- Overview 2-col: work list (left, scrolls with page) + bay map / detail
   (right, sticky) ---- */
.overview-body-2col {
  flex: 1 1 auto;
  display: flex;
  gap: 0;
  align-items: stretch;
}
.overview-worklist-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  /* Full-height column separator: the panel stretches to the row height
     (align-items: stretch), so this hairline runs top-to-bottom edge. */
  border-right: 1px solid var(--neutral-150, var(--neutral-200));
  container-type: inline-size;
  container-name: worklist;
}
.overview-worklist-panel > .overview-list { flex: 1 1 auto; overflow: visible; }
.overview-side {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: none;
  width: 384px;
  max-height: calc(100vh - 104px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: transparent;
  scrollbar-width: thin;
}
.overview-side.is-detail {
  padding: 0 18px;
  /* Fill the visible height (not just cap it) so the sticky action bar pins to the true
     bottom via margin-top:auto, and the work-list column stretches to match so its
     separator runs to the bottom edge — even when the panel's own content is short on
     tall screens. Content taller than this scrolls internally under the sticky header/footer. */
  min-height: calc(100vh - 104px);
}

/* ---- Bay map (spatial, low-detail, colour-coded) ---- */
/* Padding is vertical-only on the card so the Service/Shared divider can run edge to edge; every
   other section re-adds the 16px side padding to stay aligned. */
.baymap { display: flex; flex-direction: column; height: 100%; gap: 14px; padding: 16px 0; }
.baymap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 16px; }
.baymap-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--neutral-900); }
.baymap-head p { margin: 4px 0 0; font-size: 13px; color: var(--neutral-600); }
.baymap-head p strong { color: var(--neutral-800); }
.baymap-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.baymap-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 18px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
.baymap-cell:hover { box-shadow: var(--shadow-low); }
.baymap-cell.is-selected { box-shadow: var(--focus-ring); }
.baymap-cell[data-tone="blocked"] { border-color: var(--critical-border); background: var(--critical-bg); }
.baymap-cell[data-tone="atrisk"] { border-color: var(--warning-border); background: var(--warning-bg); }
.baymap-cell[data-tone="active"] { border-color: var(--indigo-100); background: var(--indigo-50); }
.baymap-cell[data-tone="empty"] { border-color: var(--success-border); background: var(--success-bg); border-style: dashed; }
.baymap-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.baymap-top strong { font-size: 15px; font-weight: 700; color: var(--neutral-900); }
/* Bay status reads as a pill (dot + tinted fill + stroke), matching the status pills
   elsewhere — the small pill carries the colour on the otherwise-white bay card. */
.baymap-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--neutral-200); border-radius: 0; font-size: 12px; font-weight: 700; white-space: nowrap; flex: none; }
.baymap-status::before { content: ""; flex: none; width: 7px; height: 7px; background: currentColor; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2); }
/* Text uses the -strong tone (not -fg): at 12px/700 on the light tint, -fg fell to 2.6-4.2:1
   (fails AA); -strong clears 4.5:1. */
.baymap-status[data-tone="blocked"] { background: var(--critical-bg); border-color: var(--critical-border); color: var(--critical-strong); }
.baymap-status[data-tone="atrisk"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-strong); }
.baymap-status[data-tone="active"] { background: var(--indigo-50); border-color: var(--indigo-200); color: var(--indigo-700); }
.baymap-status[data-tone="empty"] { background: var(--success-bg); border-color: var(--success-border); color: var(--success-strong); }
.baymap-mech { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutral-700); }
.baymap-mech .avatar-only { width: 22px; height: 22px; }
.baymap-free { color: var(--neutral-600); }
.baymap-bar { height: 6px; border-radius: 0; background: rgba(23, 26, 33, 0.06); overflow: hidden; }
.baymap-bar i { display: block; height: 100%; border-radius: 0; }
.baymap-bar i[data-tone="blocked"] { background: var(--critical-fg); }
.baymap-bar i[data-tone="atrisk"] { background: var(--warning-fg); }
.baymap-bar i[data-tone="active"] { background: var(--indigo-600); }
.baymap-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--neutral-700); }
.baymap-foot b { color: var(--neutral-900); }
.baymap-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--neutral-600); padding: 0 16px; }
.baymap-legend span { display: inline-flex; align-items: center; gap: 4px; }
.baymap-key { width: 8px; height: 8px; border-radius: 0; }
.baymap-key[data-tone="active"] { background: var(--indigo-600); }
.baymap-key[data-tone="atrisk"] { background: var(--warning-fg); }
.baymap-key[data-tone="blocked"] { background: var(--critical-fg); }
.baymap-key[data-tone="empty"] { background: var(--success-fg); }
.baymap-cta {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
  color: var(--neutral-700);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.baymap-cta:hover { background: var(--orient-50); border-color: var(--orient-200); color: var(--orient-700); }
.baymap-cta svg.lucide { width: 15px; height: 16px; }

/* Bay map v2: service bays + a hairline-split "Shared bays" section; the "Live floor" CTA
   moved into the head, top-right, as a small text link. */
.baymap-head { align-items: flex-start; }
/* "Live floor ↗" reads as a secondary button (bordered, like the work-list tool buttons), not a
   bare text link. */
.baymap-cta-mini {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0);
  color: var(--neutral-700); font-size: 12px; font-weight: 650; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.baymap-cta-mini:hover { background: var(--neutral-50); border-color: var(--neutral-300); color: var(--neutral-900); }
.baymap-cta-mini svg.lucide { width: 13px; height: 13px; }
.baymap-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.baymap-body .baymap-grid { flex: none; }
/* The card is only vertically padded, so each section re-insets its content by 16px — but the
   Service/Shared divider itself spans the full width (touches both edges). */
.baymap-body .baymap-subhead, .baymap-body .baymap-grid { padding-left: 16px; padding-right: 16px; }
.baymap-subhead { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral-500); }
.baymap-shared { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--neutral-200); }
/* Expanded-page bay-map column: card + column already provide the inset, so drop the extra 16px. */
.dm-baymap-col .baymap-head, .dm-baymap-col .baymap-legend, .dm-baymap-col .baymap-body .baymap-subhead, .dm-baymap-col .baymap-body .baymap-grid { padding-left: 0; padding-right: 0; }
.baymap-station-ico { width: 13px; height: 13px; color: var(--neutral-500); vertical-align: -1px; margin-right: 5px; }
.baymap-cell-station .baymap-top strong { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
.baymap-cell-station .baymap-status { padding: 2px 7px; }

/* ---- Live floor page ---- */
.livefloor-body { flex: 1; min-height: 0; display: flex; gap: 14px; }
/* The main area is just a scroll container — bays and shared stations are their own
   separate cards (the stations card is no longer nested inside the bays card). */
.livefloor-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

/* Live floor Option A: adaptive bay grid (left) + shared-station queues (right).
   Stacks on narrow widths and whenever a car detail panel is open. */
/* Service bays + shared stations sit directly on the page (no outer box) — just a
   hairline between them (the 1px grid gap shows the container bg: a vertical rule
   side-by-side, horizontal when stacked). */
.livefloor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  align-items: stretch;
  background: var(--neutral-200);
  /* Natural height now — the shared stations sit in their own full-width card BELOW this
     grid, so the grid no longer fills the workspace. */
  min-height: 0;
  flex: none;
}
@media (min-width: 1180px) {
  /* Next-up column == the detail drawer width (384px) so clicking a card to open the
     assign drawer swaps in place with no abrupt width change. */
  .app-shell:not(.is-rail-expanded) .livefloor-grid { grid-template-columns: minmax(0, 1fr) 384px; }
}
@media (min-width: 1320px) {
  .livefloor-grid { grid-template-columns: minmax(0, 1fr) 384px; }
}
.livefloor-body.is-detail { gap: 0; }
.livefloor-body.is-detail .livefloor-grid { grid-template-columns: 1fr; }
/* Car detail shares one hairline seam with the floor (no gap, no boxed panel).
   Bounded to the body height so its sticky header + action bar stay on-screen — the
   secondary actions were falling below the fold on short laptops. */
.livefloor-body.is-detail .overview-detail {
  position: static;
  align-self: stretch;
  max-height: 100%;
  /* On the live floor the detail is bounded to the (non-scrolling) grid body, so it must NOT
     take the full-viewport min-height used on the scrolling Command/Cars pages — align-self:
     stretch already fills the body and pins the action bar. */
  min-height: 0;
  border-left: 1px solid var(--neutral-200);
  padding: 0 18px;
}
/* Service bays — one half of the shared card */
.livefloor-bays-col {
  min-width: 0;
  padding: 16px;
  background: var(--neutral-0);
  container-type: inline-size;
  container-name: floor;
}
/* Shared stations — the other half, divided by the grid hairline */
.livefloor-stations-col {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* No horizontal padding on the column — rows + separators span wall-to-wall
     (divider ↔ workspace edge) like the overview work list; content is inset 16px. */
  padding: 14px 0 12px;
  background: var(--neutral-0);
}
.livefloor-stations-col .overview-subhead { margin-bottom: 8px; flex: none; padding: 0 16px; }
/* Flat list — no box-in-box; queue rows match the overview work-list density. */
.livefloor-stations-col .station-tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.livefloor-stations-col .station-tabbar { padding: 0 16px; }
.livefloor-stations-col .station-tabpanel { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.livefloor-stations-col .queue-lane { padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.livefloor-stations-col .queue-lane-head { padding: 6px 16px; border-bottom: 0; }
.livefloor-stations-col .queue-group-label { padding: 8px 16px 6px; }
.livefloor-stations-col .queue-lane-group + .queue-lane-group { border-top: 0; }
.livefloor-stations-col .station-tabpanel,
.livefloor-stations-col .queue-lane,
.livefloor-stations-col .queue-lane-group { min-width: 0; }
.livefloor-stations-col .queue-lane-group { position: relative; }
/* Full-bleed rows: separators + the now-serving highlight reach the walls; text inset 16px. */
.livefloor-stations-col .queue-list-row { margin: 0; padding-left: 16px; padding-right: 16px; gap: 8px; }
/* Narrow column: plate + promise + risk carry the queue; the vehicle name drops. */
.livefloor-stations-col .queue-list-row .overview-row-vehicle { display: none; }
/* Queue status as a subtle right-hugging pill (consistent size, right edges align). */
.livefloor-stations-col .queue-list-row .overview-row-risk {
  flex: none; min-width: 0; max-width: none;
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 0;
  font-size: 12px; font-weight: 700; line-height: 15px;
  background: var(--neutral-100); color: var(--neutral-600);
}
.livefloor-stations-col .queue-list-row .overview-row-risk[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); }
.livefloor-stations-col .queue-list-row .overview-row-risk[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-strong); }
.livefloor-stations-col .queue-list-row .overview-row-risk[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); }
.livefloor-stations-col .queue-list-row .overview-row-risk[data-tone="waiting"] { background: var(--neutral-100); color: var(--neutral-600); }
/* The active row keeps plate + promise + risk (the urgent signal); the % ring drops
   in this narrow column since the row colour + risk already convey it. */
.livefloor-stations-col .queue-list-row.is-inprogress .overview-row-progress { display: none; }

/* ── Shared stations: Wash + Alignment as bay cards + one tabbed queue ────── */
.livefloor-stations-col .shared-stations {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
}
.shared-stations-cards { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; flex: none; }
/* The station card IS the bay card, compacted for this narrow column. */
.station-bay-card { min-height: 0; }
.station-bay-card .live-bay-head > strong { display: inline-flex; align-items: center; gap: 7px; }
.station-bay-ico { width: 15px; height: 15px; color: var(--neutral-500); }
.station-bay-card .station-bay-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Margin line — is the car in the shared bay safe, or eating the queue behind it? */
.station-margin { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; font-weight: 650; color: var(--neutral-600); }
.station-margin svg.lucide { width: 13px; height: 13px; }
.station-margin[data-tone="success"] { color: var(--success-strong); }
.station-margin[data-tone="warning"] { color: var(--warning-strong); }
.station-margin[data-tone="critical"] { color: var(--critical-strong); }
.station-margin[data-tone="active"] { color: var(--orient-700); }
/* Queue pressure strip on the card face — the bottleneck signal, always visible. */
.station-foot {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  border-top: 1px solid var(--neutral-100);
  font-size: 13px; font-weight: 700; color: var(--neutral-700);
  background: var(--neutral-25);
}
.station-foot svg.lucide { width: 14px; height: 14px; color: var(--neutral-500); flex: none; }
.station-foot[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-strong); border-top-color: var(--critical-border); }
.station-foot[data-tone="critical"] svg.lucide { color: var(--critical-strong); }
.station-foot[data-tone="empty"] { color: var(--neutral-500); }
/* Tabbed queue-detail panel below the two cards. */
.station-queue { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.station-queue-tabs { display: flex; padding: 0 16px; border-bottom: 1px solid var(--neutral-200); flex: none; }
.station-queue-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 2px; margin-right: 18px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--neutral-500);
  transition: color 0.12s ease;
}
.station-queue-tab:hover { color: var(--neutral-800); }
.station-queue-tab.is-active { color: var(--orient-800); }
.station-queue-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orient-700);
}
.sqt-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--neutral-100); color: var(--neutral-600);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.station-queue-tab.is-active .sqt-count { background: var(--orient-100); color: var(--orient-800); }
.station-queue-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; padding-top: 4px; }
.station-queue-list .queue-empty { padding: 16px; }

/* ── Live floor v2: Next-up column (right) + full-width shared stations (below) ── */
/* Right column: pinned to the right edge, fills its cell white (no exposed grid bg). The
   INNER wrapper is what's sticky, so the list stays visible while bays + stations scroll. */
.livefloor-nextup-col {
  min-width: 0;
  align-self: stretch;
  display: flex; flex-direction: column;
  background: var(--neutral-0);
}
.nextup-sticky {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  display: flex; flex-direction: column;
  /* No top padding — the column already carries `.overview-subsection` padding-top:14px,
     so the first row lines up with the first bay card (adding padding here double-spaced it). */
  padding: 0 0 12px;
}
/* In detail mode the grid collapses to one column, so the sticky pin doesn't apply. */
.livefloor-body.is-detail .nextup-sticky { position: static; max-height: none; }
/* Match the bays subhead height (which carries the 30px Add-bay button) so the first
   Next-up card lines up with the first bay card. */
.livefloor-nextup-col .overview-subhead { margin-bottom: 12px; flex: none; padding: 0 16px; min-height: 38px; display: flex; align-items: center; }
/* Next up = dense hairline-separated ROWS (no card boxes — less chrome, lower cognitive
   load). Two lines each: car + promise, then work + the predicted-bay pill. Bounded by a
   separator above the first row and below the last (neutral-200 to match the other rules,
   the neutral-100 hairline read too faint on white). */
.nextup { display: flex; flex-direction: column; }
.nextup-row {
  display: flex; align-items: stretch; gap: 10px;
  padding: 14px 16px 14px 8px;
  border-top: 1px solid var(--neutral-200);
}
.nu-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* Drag affordance — grip on the left; the whole card is draggable onto an empty bay. */
.nu-grip { flex: none; display: grid; place-items: center; width: 20px; align-self: stretch; color: var(--neutral-300); cursor: grab; }
.nu-grip:active { cursor: grabbing; }
.nextup-row:hover .nu-grip { color: var(--neutral-500); }
.nu-grip svg.lucide { width: 16px; height: 16px; }
.nextup-row.is-dragging { opacity: 0.5; }
.nextup-row:last-child { border-bottom: 1px solid var(--neutral-200); }
.nextup-row[data-assign-plate] { cursor: pointer; transition: background 0.12s ease; }
.nextup-row[data-assign-plate]:hover { background: var(--neutral-25); }
.nextup-row[data-assign-plate]:focus-visible { outline: 2px solid var(--orient-500); outline-offset: -2px; }
.nu-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nu-plate { font-size: 13px; font-weight: 700; color: var(--neutral-800); flex: none; }
.nu-veh { color: var(--neutral-500); font-size: 12px; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Urgency now rides the promise TIME (heat-map on the meaningful value): red = tight
   incoming, amber = watch, else neutral. */
.nu-promise { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--neutral-600); font-variant-numeric: tabular-nums; }
.nu-promise svg.lucide { width: 12px; height: 12px; color: var(--neutral-400); flex: none; }
.nu-promise[data-tone="critical"] { color: var(--critical-strong); }
.nu-promise[data-tone="critical"] svg.lucide { color: var(--critical-strong); }
.nu-promise[data-tone="warning"] { color: var(--warning-strong); }
.nu-promise[data-tone="warning"] svg.lucide { color: var(--warning-strong); }
.nu-line2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nu-dest { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.nu-meta { flex: none; display: inline-flex; align-items: center; gap: 10px; }
.nu-jobs { flex: none; font-size: 12px; font-weight: 600; color: var(--neutral-500); }
/* Predicted bay = a compact brand pill (arrow + bay ONLY). The free-time is its own quiet
   text beside the pill (it's a different fact, so it doesn't belong inside the pill). */
.nu-bay { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid var(--orient-200); background: var(--orient-50); color: var(--orient-800); font-size: 12px; font-weight: 700; white-space: nowrap; }
.nu-bay svg.lucide { width: 12px; height: 12px; color: var(--orient-600); flex: none; }
.nu-free { flex: none; font-size: 12px; font-weight: 600; color: var(--neutral-500); white-space: nowrap; }
.nu-free.is-wait { display: inline-flex; align-items: center; gap: 5px; }
.nu-free.is-wait svg.lucide { width: 12px; height: 12px; color: var(--neutral-400); }
/* Waiting-for-a-bay duration — hourglass = "how long this car has been queued". */
.nu-wait { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--neutral-500); font-variant-numeric: tabular-nums; }
.nu-wait svg.lucide { width: 12px; height: 12px; color: var(--neutral-400); flex: none; }
.nextup-empty { display: flex; align-items: center; gap: 8px; padding: 20px 16px; color: var(--neutral-500); font-size: 13px; }
.nextup-empty svg.lucide { width: 16px; height: 16px; color: var(--success-fg); }

/* Shared stations now live UNDER the bays in the same left column, split off by a hairline. */
.livefloor-instations {
  /* Full-bleed hairline: negative margins cancel the bays-col 16px padding so the divider
     runs edge-to-edge (workspace left ↔ the vertical grid seam); content re-inset by padding. */
  margin: 20px -16px 0;
  padding: 20px 16px 0;
  border-top: 1px solid var(--neutral-200);
}
.livefloor-instations > .overview-subhead { margin-bottom: 12px; }
/* The bays column now fills the width (Next-up is pinned right), so cap the stations so
   they stay comfortable cards (~570px each) rather than stretched banners on wide screens. */
.shared-stations-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1180px; }
@media (max-width: 900px) { .shared-stations-row { grid-template-columns: 1fr; } }
.station-col { display: flex; flex-direction: column; min-width: 0; gap: 10px; }
.station-col .station-bay-card { min-height: 0; }
.station-col .station-bay-card .station-bay-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The queue is its OWN block, spaced below the station card (not fused to it). */
.station-queue-block { border: 1px solid var(--neutral-200); }
.station-queue-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0; padding: 8px 12px;
  background: var(--neutral-25);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-500);
  border-bottom: 1px solid var(--neutral-100);
}
.station-queue-head .sqt-count { text-transform: none; letter-spacing: 0; }
.shared-stations-row .station-queue-list { max-height: 240px; overflow-y: auto; padding-top: 0; }
.shared-stations-row .queue-list-row { margin: 0; padding-left: 12px; padding-right: 12px; }
/* The queue position + promise carry the ordering; the priority label ("Lower priority",
   "Can wait", "Long job") is redundant/over-explanatory, so it's dropped here. */
.shared-stations-row .queue-list-row .overview-row-risk { display: none; }

.overview-floor,
.overview-work {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

/* Body row holds the work list + resizer + car detail */
.overview-work-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Suggested-move strip is a header band that spans work list + detail, tucked
   behind them with a flat bottom (top corners are clipped by the card radius). */
.overview-work-strip { flex: none; }
.overview-work-strip .next-move-strip {
  border: 0;
  border-bottom: 1px solid var(--orient-200);
  border-radius: 0;
  padding: 12px 16px;
}
/* Candidate list as a full-width band (flat, spans work list + detail) */
.overview-work-strip .assign-context {
  border: 0;
  border-bottom: 1px solid var(--success-border);
  border-radius: 0;
}
.assign-cand-go { display: grid; place-items: center; color: var(--neutral-300); }
.assign-cand-go svg.lucide { width: 15px; height: 16px; }
.assign-cand:hover .assign-cand-go { color: var(--orient-500); }

.overview-floor {
  flex: 1 1 46%;
  flex-direction: column;
  container-type: inline-size;
  container-name: floor;
}

/* Work list + car detail are attached inside one card. */
.overview-work {
  flex: 1 1 54%;
}

.overview-worklist {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  container-type: inline-size;
  container-name: worklist;
}

.overview-resizer {
  flex: none;
  width: 7px;
  margin: 0 -3px;
  cursor: col-resize;
  position: relative;
  z-index: 5;
  touch-action: none;
}

.overview-resizer::before {
  content: "";
  position: absolute;
  inset: 0 3px;
  background: var(--neutral-200);
  transition: background 0.12s ease;
}

.overview-resizer:hover::before,
.overview-resizer.is-active::before {
  background: var(--orient-400, var(--orient-500));
}

body.is-resizing-detail {
  cursor: col-resize;
  user-select: none;
}

.overview-detail {
  flex: none;
  min-width: 0;
  overflow-y: auto;
  /* Flex column so the sticky action bar can be pushed to the panel bottom
     (margin-top:auto) even when the content is short. */
  display: flex;
  flex-direction: column;
  /* Top padding lives in the sticky header so its solid band covers content
     scrolling underneath with no bleed at the very top. */
  padding: 0 18px 0;
  scrollbar-width: thin;
}

/* The detail panel keeps an explicit expand + close (×) group in its (sticky) header on
   every page, so there's always a visible way to enlarge it or return to the bay map —
   even after scrolling down through a long card. */
.drawer-top-actions { display: inline-flex; align-items: center; gap: 4px; flex: none; }

.overview-detail .drawer-top,
.cars-detail .drawer-top {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 -18px;
  padding: 18px 18px 12px;
  background: var(--neutral-0);
  border-bottom: 1px solid var(--neutral-100);
}

/* Action bar sticks to the bottom of the panel so it's always visible without
   scrolling to the end of the detail. */
.overview-detail .drawer-actions,
.cars-detail .drawer-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  /* margin-top:auto pins the bar to the panel bottom when content is short;
     with long content it has no effect and the bar simply sticks on scroll. */
  margin: auto -18px 0;
  padding: 14px 18px 18px;
  background: var(--neutral-0);
  border-top: 1px solid var(--neutral-100);
}

.overview-left {
  border-left: 1px solid var(--neutral-200);
}

.overview-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-100);
}

.overview-section-head h2 {
  margin: 0;
  color: var(--neutral-900);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}

.overview-section-head p {
  margin: 2px 0 0;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.overview-inline-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.overview-inline-stats span {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 550;
  white-space: nowrap;
}

.overview-inline-stats strong {
  color: var(--neutral-800);
  font-weight: 750;
}

/* ---- Work list toolbar (filter / sort / panel) ---- */
.overview-list-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.overview-tools-divider {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--neutral-200);
}

.overview-view-switch {
  display: inline-flex;
  padding: 2px;
  border-radius: 0;
  background: var(--neutral-100);
}

.overview-view-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.overview-view-btn:hover {
  color: var(--neutral-800);
}

.overview-view-btn.is-active {
  background: var(--neutral-0);
  color: var(--orient-700);
  box-shadow: var(--shadow-low);
}

.overview-view-btn svg.lucide {
  width: 15px;
  height: 16px;
}

.board-model-switch {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border-radius: 0;
  background: var(--neutral-100);
}
.board-model-switch .seg-pill { border-radius: 0; box-shadow: var(--shadow-low); }

.board-model-btn {
  position: relative;
  z-index: 1;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-600);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.board-model-btn:hover { color: var(--neutral-800); }
.board-model-btn.is-active {
  background: transparent;
  color: var(--orient-700);
  box-shadow: none;
}

.overview-kanban-pressure {
  padding: 4px 12px;
  border-bottom: 1px solid var(--neutral-100);
  background: var(--neutral-25);
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 650;
}

.overview-tool-wrap {
  position: relative;
}

.overview-tool-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.overview-tool-btn:hover {
  background: var(--neutral-50);
  color: var(--neutral-800);
}

.overview-tool-btn.is-active {
  border-color: var(--orient-200);
  background: var(--orient-50);
  color: var(--orient-600);
}

.overview-tool-btn svg.lucide {
  width: 16px;
  height: 16px;
}

/* Panel toggle: brand-tinted + filled when the detail panel is open. */
.overview-panel-toggle.is-active {
  border-color: var(--orient-200);
  background: var(--orient-50);
  color: var(--orient-600);
}

.overview-panel-toggle.is-active svg.lucide {
  fill: var(--orient-100);
  stroke: var(--orient-600);
}

.overview-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 184px;
  padding: 6px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-popover);
}

.overview-menu-label {
  margin: 4px 8px 6px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.overview-menu-item {
  display: grid;
  grid-template-columns: 16px 1fr 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-700);
  font-size: 13px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}

.overview-menu-item:hover {
  background: var(--neutral-50);
}

.overview-menu-item svg.lucide {
  width: 15px;
  height: 16px;
  color: var(--neutral-500);
}

.overview-menu-item .overview-menu-check {
  opacity: 0;
  color: var(--orient-500);
}

.overview-menu-item.is-active {
  color: var(--neutral-900);
  font-weight: 650;
}

.overview-menu-item.is-active .overview-menu-check {
  opacity: 1;
}

.overview-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.overview-list-section + .overview-list-section {
  border-top: 1px solid var(--neutral-100);
}

.overview-list-empty,
.overview-kanban-empty {
  padding: 12px 14px;
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 500;
}

.overview-list-stationhead {
  margin-top: 12px;
  padding: 16px 14px 8px;
  border-top: 8px solid var(--neutral-50);
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Board (kanban) view ---- */
.overview-page-board {
  min-height: 0;
}

.overview-board {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  overflow: hidden;
}

.overview-kanban {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(232px, 1fr);
  gap: 0;
  overflow-x: auto;
}

.overview-kanban-lane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--neutral-100);
}

.overview-kanban-lane:first-child {
  border-left: 0;
}

.overview-kanban-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--neutral-100);
  background: var(--neutral-25);
}

.overview-kanban-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--neutral-800);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.overview-kanban-title svg.lucide {
  width: 14px;
  height: 14px;
  color: var(--neutral-500);
}

.overview-kanban-lane[data-tone="critical"] .overview-kanban-title { color: var(--critical-strong); }
.overview-kanban-lane[data-tone="critical"] .overview-kanban-title svg.lucide { color: var(--critical-fg); }
.overview-kanban-lane[data-tone="warning"] .overview-kanban-title { color: var(--warning-strong); }
.overview-kanban-lane[data-tone="warning"] .overview-kanban-title svg.lucide { color: var(--warning-fg); }
.overview-kanban-lane[data-tone="active"] .overview-kanban-title { color: var(--indigo-700); }
.overview-kanban-lane[data-tone="active"] .overview-kanban-title svg.lucide { color: var(--indigo-600); }
.overview-kanban-lane[data-tone="success"] .overview-kanban-title { color: var(--success-strong); }
.overview-kanban-lane[data-tone="success"] .overview-kanban-title svg.lucide { color: var(--success-fg); }

.overview-kanban-head b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 0;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-600);
  font-size: 12px;
}

.overview-kanban-cards {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--neutral-25);
}

/* Decision board gets wider lanes for the richer cards */
.overview-kanban.is-decision { grid-auto-columns: minmax(272px, 1fr); }

/* ---- Workflow-board card (operational state, risk chip) ---- */
.wf-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.wf-card:hover { border-color: var(--neutral-300); box-shadow: var(--shadow-low); }
.wf-card[aria-pressed="true"] { border-color: var(--orient-400); box-shadow: var(--focus-ring); }
.wf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wf-card-top .plate { font-size: 13px; font-weight: 700; color: var(--neutral-900); letter-spacing: 0.01em; }
.wf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Every status pill leads with a tone dot (matches the kicker dots — user request). */
.wf-chip::before { content: ""; width: 6px; height: 6px; background: currentColor; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.22); flex: none; }
.wf-chip[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-strong); border-color: var(--critical-border); }
.wf-chip[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); border-color: var(--warning-border); }
.wf-chip[data-tone="waiting"] { background: var(--waiting-bg); color: var(--waiting-strong); border-color: var(--waiting-border); }
.wf-chip[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); border-color: var(--success-border); }
.wf-chip[data-tone="neutral"] { background: var(--neutral-100); color: var(--neutral-700); border-color: var(--neutral-200); }
.wf-card-vehicle { font-size: 12px; color: var(--neutral-500); }
.wf-card-job { font-size: 13px; font-weight: 600; color: var(--neutral-800); }
.wf-card-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--neutral-600); }
.wf-card-owner .avatar-only { width: 18px; height: 18px; }
.wf-unassigned { display: inline-flex; align-items: center; gap: 4px; color: var(--waiting-fg); font-weight: 600; }
.wf-unassigned svg.lucide { width: 13px; height: 12px; }
.wf-card-times { display: flex; gap: 16px; padding-top: 6px; border-top: 1px solid var(--neutral-100); }
.wf-card-times span { display: flex; flex-direction: column; gap: 1px; }
.wf-card-times em { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-500); font-style: normal; }
.wf-card-times strong { font-size: 12px; color: var(--neutral-800); }
.wf-card-times span[data-tone="critical"] strong { color: var(--critical-fg); }
.wf-card-times span[data-tone="warning"] strong { color: var(--warning-fg); }
.wf-card-next { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--neutral-700); }
.wf-card-next em { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-400); font-style: normal; }

/* ---- Decision-board card (manager decision queue) ---- */
.decision-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.decision-card:hover { border-color: var(--neutral-300); box-shadow: var(--shadow-low); }
.decision-card[aria-pressed="true"] { border-color: var(--orient-400); box-shadow: var(--focus-ring); }
.dc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dc-top .plate { font-size: 13px; font-weight: 700; color: var(--neutral-900); letter-spacing: 0.01em; }
.dc-risk { font-size: 12px; font-weight: 700; white-space: nowrap; }
.dc-risk[data-tone="critical"] { color: var(--critical-fg); }
.dc-risk[data-tone="warning"] { color: var(--warning-fg); }
.dc-risk[data-tone="waiting"] { color: var(--waiting-fg); }
.dc-risk[data-tone="success"] { color: var(--success-fg); }
.dc-field { display: flex; flex-direction: column; gap: 1px; }
.dc-field > em { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-400); font-style: normal; }
.dc-field > span { font-size: 13px; color: var(--neutral-800); font-weight: 600; }
.dc-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--neutral-100); border-bottom: 1px solid var(--neutral-100); }
.dc-owner { display: inline-flex; align-items: center; gap: 8px; }
.dc-owner .avatar-only { width: 22px; height: 24px; }
.dc-owner > span { display: flex; flex-direction: column; }
.dc-owner strong { font-size: 12px; color: var(--neutral-800); }
.dc-owner em { font-size: 12px; color: var(--neutral-500); font-style: normal; }
.dc-urgency { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dc-urgency > em { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-400); font-style: normal; }
.dc-rec { display: flex; flex-direction: column; gap: 1px; }
.dc-rec > em { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orient-600); font-style: normal; }
.dc-rec > span { font-size: 13px; font-weight: 700; color: var(--orient-700); }

/* Urgency donut on decision cards */
.urgency-donut { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; }
.urgency-donut svg { width: 30px; height: 30px; transform: rotate(-90deg); }
.urgency-donut .ud-track { fill: none; stroke: var(--neutral-100); stroke-width: 3.5; }
.urgency-donut .ud-arc { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.urgency-donut[data-tone="critical"] .ud-arc { stroke: var(--critical-fg); }
.urgency-donut[data-tone="warning"] .ud-arc { stroke: var(--warning-fg); }
.urgency-donut[data-tone="active"] .ud-arc { stroke: var(--indigo-600); }
.urgency-donut[data-tone="success"] .ud-arc { stroke: var(--success-fg); }
.urgency-donut b { position: absolute; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--neutral-700); }

/* ==================== Contextual drawer views (assign / resequence / holding) ==================== */

.assign-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: 8px;
}
.assign-label em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--neutral-400); margin-left: 6px; }

/* Stepper */
.assign-steps { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.assign-steps svg.lucide { width: 14px; height: 14px; color: var(--neutral-300); }
.assign-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--neutral-400); }
.assign-step b {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 0;
  background: var(--neutral-100); color: var(--neutral-500); font-size: 12px;
}
.assign-step.is-active { color: var(--orient-700); }
.assign-step.is-active b { background: var(--orient-600); color: #fff; }

/* Selected-car card */
.assign-car {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; margin: 18px 0 16px;
  border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-25);
}
.assign-car-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 0; background: var(--orient-50); color: var(--orient-600); flex: none; }
.assign-car-icon svg.lucide { width: 18px; height: 18px; }
.assign-car-copy { flex: 1; min-width: 0; }
.assign-car-plate { display: flex; align-items: center; gap: 8px; }
.assign-car-plate b { font-size: 15px; font-weight: 700; color: var(--neutral-900); }
.assign-car-copy p { margin: 2px 0 0; font-size: 12px; color: var(--neutral-600); }
.assign-car-arrive { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.assign-car-arrive span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--neutral-400); }
.assign-car-arrive b { font-size: 13px; color: var(--neutral-800); }

.assign-field { margin-bottom: 16px; }
.assign-work { display: flex; align-items: center; gap: 10px; }
.assign-dur { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--neutral-600); }
.assign-dur svg.lucide { width: 13px; height: 12px; color: var(--neutral-400); }
.assign-promise { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assign-promise b { font-size: 13px; color: var(--neutral-800); }
.assign-promise-in { font-size: 12px; font-weight: 600; }
.assign-promise-in[data-tone="warning"] { color: var(--warning-fg); }

/* Bay + mechanic chips */
/* Compact single-line pills (was a full-width 2-line card — one free bay ballooned into wide space). */
.assign-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Compact 3×2 grid — every bay, no number plates, no lock icons. Free bays sort first; recommended
   pre-selected. 2-line cell (bay name + status) with a CHECKBOX in the top-right corner: checked on
   the selected bay, an empty disabled box on occupied ones. */
.assign-bays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.assign-bays .assign-chip { display: block; position: relative; width: auto; padding: 10px 32px 10px 12px; min-height: 50px; }
.assign-bays .assign-chip-check { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; }
.assign-bays .assign-chip-check svg.lucide { width: 11px; height: 11px; }
.assign-bays .assign-chip.is-busy .assign-chip-check { border-color: var(--neutral-200); background: var(--neutral-25); }
.assign-bay-lbl { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.18; text-align: left; }
.assign-bay-lbl b { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.assign-bay-lbl em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--neutral-500); white-space: nowrap; }
.assign-bay-lbl em.is-best { color: var(--orient-700); }
.assign-chip.is-busy .assign-bay-lbl b { color: var(--neutral-500); font-weight: 650; }
.assign-chip.is-busy .assign-bay-lbl em { color: var(--neutral-400); }
.assign-chip {
  position: relative;
  flex: 0 0 auto; display: inline-flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 13px; text-align: left;
  border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0); cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.assign-chip:hover { border-color: var(--neutral-300); }
.assign-chip.is-best { border-color: var(--success-border); background: var(--success-bg); }
/* Selected: a SOFT brand tint (not a harsh saturated ring) — lighter border/fill, gentler check. */
.assign-chip.is-selected { border-color: var(--orient-300); box-shadow: inset 0 0 0 1px var(--orient-200); background: var(--orient-25); }
/* Leading selection box (radio-style, always present so the pill width doesn't jump). */
.assign-chip-check { position: static; display: grid; place-items: center; width: 18px; height: 18px; flex: none; border: 1px solid var(--neutral-300); background: var(--neutral-0); color: transparent; }
.assign-chip.is-selected .assign-chip-check { border-color: var(--orient-500); background: var(--orient-500); color: var(--neutral-0); }
.assign-chip-check svg.lucide { width: 12px; height: 12px; }
.assign-chip b { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.assign-chip > span:not(.assign-chip-check) { font-size: 12px; color: var(--neutral-500); }
.assign-chip.is-best span { color: var(--success-strong); }
.assign-chip.is-selected span:not(.assign-chip-check) { color: var(--orient-700); }
.assign-chip:hover { border-color: var(--neutral-300); }
.assign-chip-best { font-size: 11.5px; font-weight: 700; color: var(--orient-700); }
/* Occupied bays: shown for full-floor context but disabled (locked), with the occupant's plate. */
.assign-chip.is-busy { cursor: not-allowed; background: var(--neutral-25); border-color: var(--neutral-150); }
.assign-chip.is-busy:hover { border-color: var(--neutral-150); }
.assign-chip.is-busy b { color: var(--neutral-500); font-weight: 650; }
.assign-chip.is-busy .assign-chip-check { border-color: var(--neutral-200); color: var(--neutral-400); background: var(--neutral-0); }
.assign-chip-occ { font-size: 11px; font-weight: 600; font-family: var(--font-mono); color: var(--neutral-500); letter-spacing: 0.01em; }
/* Compact 3-stat strip under the header (replaces the standalone car card + two fields). */
.assign-meta { display: flex; justify-content: space-between; gap: 16px; margin: 18px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--neutral-150); }
/* Each value left-aligns under its own label (no right-alignment on the last cell). */
.assign-meta > span { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; }
.assign-meta em { font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--neutral-500); }
.assign-meta b { font-size: 15px; font-weight: 650; color: var(--neutral-900); letter-spacing: -0.01em; }
/* One reassurance line (replaces the 4-item checklist). */
/* Reassurance line reads as the SELECTED mechanic card's footer: it's injected right under the
   chosen card and hugs it (cancels the list gap, shares the soft brand tint + side borders). */
/* Outcome line = the selected mechanic-card's live result footer (seamless with the card, no divider).
   Tone-coloured icon + verdict re-forecast the pickup when you switch mechanic. */
.assign-fit { display: flex; align-items: flex-start; gap: 8px; margin: -6px 0 0; padding: 10px 12px 11px; font-size: 12.5px; line-height: 1.45; color: var(--neutral-700); background: var(--orient-25); border: 1px solid var(--orient-300); border-top: none; }
.assign-fit b { color: var(--neutral-900); font-weight: 700; }
.assign-fit svg.lucide { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--success-fg); }
.assign-fit[data-tone="warning"] svg.lucide { color: var(--warning-fg); }
.assign-fit[data-tone="warning"] b { color: var(--warning-strong); }
.assign-fit[data-tone="critical"] svg.lucide { color: var(--critical-fg); }
.assign-fit[data-tone="critical"] b { color: var(--critical-strong); }
.assign-fit[data-tone="success"] b { color: var(--success-strong); }
/* Sticky footer echo — the same outcome above the Assign button, so it's visible however far you scroll. */
.assign-foot-outcome { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--neutral-600); }
.assign-foot-outcome svg.lucide { width: 14px; height: 14px; flex: none; color: var(--success-fg); }
.assign-foot-outcome b { color: var(--neutral-900); }
.assign-foot-outcome[data-tone="warning"] { color: var(--warning-strong); }
.assign-foot-outcome[data-tone="warning"] svg.lucide { color: var(--warning-fg); }
.assign-foot-outcome[data-tone="warning"] b { color: var(--warning-strong); }
.assign-foot-outcome[data-tone="critical"] { color: var(--critical-strong); }
.assign-foot-outcome[data-tone="critical"] svg.lucide { color: var(--critical-fg); }
.assign-foot-outcome[data-tone="critical"] b { color: var(--critical-strong); }
/* Job cards (the work the car needs) + the not-yet-inspected state. */
/* One "job card": a single bordered container of hairline-divided checklist rows (a to-do list of
   the jobs this car needs). Each row leads with an empty checkbox — the work isn't started yet. */
.assign-jobs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--neutral-200); background: var(--neutral-0); }
.assign-jobs li { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-top: 1px solid var(--neutral-100); font-size: 13.5px; font-weight: 550; color: var(--neutral-800); }
.assign-jobs li:first-child { border-top: none; }
.assign-job-check { width: 15px; height: 15px; flex: none; border: 1.5px solid var(--neutral-300); background: var(--neutral-0); }
.assign-job-name { min-width: 0; }
.assign-inspecting { display: flex; align-items: center; gap: 9px; margin: 0; padding: 10px 12px; border: 1px dashed var(--neutral-200); font-size: 13px; color: var(--neutral-600); }
.assign-inspecting svg.lucide { width: 16px; height: 16px; color: var(--orient-500); flex: none; }
/* Stacked equal-height actions (Cancel is now a stroked ghost, not a text link). */
.assign-actions { display: flex; flex-direction: column; gap: 8px; }
.assign-actions .btn { min-height: 44px; }

/* Single-line mechanic rows with a leading select control. */
.assign-mechs { display: flex; flex-direction: column; gap: 6px; }
.assign-mech {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-0); text-align: left; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.assign-mech:hover { border-color: var(--neutral-300); background: var(--neutral-25); }
/* Chosen card drops its ring + bottom border so it merges with the fit footer into ONE card
   (the footer supplies the bottom edge; a soft internal hairline separates who from why). */
.assign-mech.is-chosen { border-color: var(--orient-300); background: var(--orient-25); box-shadow: none; border-bottom: none; }
/* RADIO (round, single-select) — square check-boxes wrongly imply multi-select; only one
   mechanic is chosen. Unselected = empty ring; selected = brand ring + filled centre dot. */
.assign-mech-check {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; border: 1.5px solid var(--neutral-300); background: var(--neutral-0);
}
.assign-mech-check svg.lucide { display: none; }
.assign-mech-check.is-on { border-color: var(--orient-500); background: var(--neutral-0); }
.assign-mech-check.is-on::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--orient-500); }
.assign-mech .avatar-only { width: 28px; height: 28px; flex: none; }
.assign-mech-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.assign-mech-name { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.assign-mech-skill { font-size: 12px; color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assign-mech-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.assign-mech-when { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.assign-mech-when .staff-dot { width: 7px; height: 7px; border-radius: 0; flex: none; }
.assign-mech-when[data-state="free"] { color: var(--success-strong); }
.assign-mech-when[data-state="soon"] { color: var(--orient-700); }
.assign-mech-when[data-state="busy"] { color: var(--neutral-500); }
.assign-mech-when[data-state="reserved"] { color: var(--warning-strong); }
/* Capacity meter: segmented load gauge (one segment per bay slot) + a "N/N · M today" fatigue line.
   Enterprise load gauge — reads the mechanic's headroom AND how much they've already carried today. */
/* Fatigue signal only — "N today" (jobs done so far). The old segmented N/3 "concurrency" meter was
   removed: a mechanic works one car at a time, so /3 implied a capacity that doesn't exist. */
.assign-mech-cap { display: flex; align-items: center; }
.assign-cap-txt { font-size: 11.5px; font-weight: 600; color: var(--neutral-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.assign-mech-best { width: 15px; height: 16px; color: var(--warning-fg); flex: none; align-self: center; }

/* Recommended combination */
.assign-rec { padding: 12px; border: 1px solid var(--orient-200); border-radius: 0; background: var(--orient-50); }
.assign-rec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.assign-rec-head span:first-child { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--orient-700); }
.assign-best-tag { padding: 2px 8px; border-radius: 0; background: var(--success-fg); color: #fff; font-size: 12px; font-weight: 700; }
.assign-rec-combo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.assign-rec-combo b { font-size: 15px; font-weight: 700; color: var(--orient-900); }
.assign-rec-combo svg.lucide { width: 15px; height: 16px; color: var(--orient-500); }
.assign-checks { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.assign-checks li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--neutral-700); }
.assign-checks svg.lucide { width: 14px; height: 14px; color: var(--success-fg); flex: none; }
.assign-rec-finish { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--orient-200); font-size: 12px; color: var(--neutral-600); }
.assign-rec-finish b { font-size: 13px; color: var(--orient-800); }

/* Queue resequencing preview */
.reseq { display: flex; align-items: stretch; gap: 8px; margin-bottom: 16px; }
.reseq-col { flex: 1; min-width: 0; }
.reseq-h { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-500); margin-bottom: 8px; }
.reseq-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px; border: 1px solid var(--neutral-200); border-radius: 0; margin-bottom: 6px; }
.reseq-row b { display: inline-grid; place-items: center; width: 17px; height: 16px; border-radius: 0; background: var(--neutral-100); color: var(--neutral-600); font-size: 12px; flex: none; margin-top: 1px; }
.reseq-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reseq-plate { font-size: 12px; color: var(--neutral-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reseq-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.reseq-meta em { font-size: 12px; color: var(--neutral-500); font-style: normal; }
.reseq-meta small { font-size: 12px; font-weight: 700; white-space: nowrap; }
.reseq-meta small[data-tone="success"] { color: var(--success-fg); }
.reseq-meta small[data-tone="warning"] { color: var(--warning-fg); }
.reseq-meta small[data-tone="critical"] { color: var(--critical-fg); }
.reseq-meta small[data-tone="neutral"] { color: var(--neutral-500); }
.reseq-row.is-late { border-color: var(--critical-border); background: var(--critical-bg); }
.reseq-row.is-moved { border-color: var(--success-border); background: var(--success-bg); }
.reseq-arrow { display: grid; place-items: center; color: var(--neutral-300); }
.reseq-arrow svg.lucide { width: 16px; height: 16px; }

/* Resequencing preview — outcome-first (replaces the two-column diff) */
.reseq-top { gap: 8px; align-items: flex-start; }
.reseq-top .reseq-titles { flex: 1 1 auto; min-width: 0; }
.reseq-back { flex: none; margin-top: 1px; }

.reseq-outcome {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 0;
  background: var(--orient-50);
  border: 1px solid var(--orient-200);
  margin: 16px 0;
}
.reseq-outcome-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: var(--orient-500);
  color: #fff;
  display: grid;
  place-items: center;
}
.reseq-outcome-icon svg.lucide { width: 18px; height: 18px; }
.reseq-outcome strong { display: block; font-size: 14px; font-weight: 750; color: var(--neutral-900); margin-bottom: 3px; }
.reseq-outcome p { margin: 0; font-size: 13px; line-height: 18px; color: var(--neutral-650); }
.reseq-outcome p b { color: var(--neutral-900); font-weight: 750; }

.reseq2 { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.reseq2 .assign-label { margin-bottom: 4px; }
/* Flat rows that read like the work-list rows on the other tabs — no card border,
   just a subtle fill on the moved row (same treatment as a selected list row). */
.reseq2-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 0;
}
.reseq2-row.is-moved { background: var(--orient-50); }
.reseq2-pos {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 12px;
  font-weight: 800;
}
.reseq2-row.is-moved .reseq2-pos { background: var(--orient-500); color: #fff; }
.reseq2-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.reseq2-plate { font-size: 13px; font-weight: 750; color: var(--neutral-900); white-space: nowrap; }
.reseq2-was { font-size: 12px; font-weight: 700; color: var(--neutral-500); background: var(--neutral-100); border-radius: 0; padding: 1px 6px; white-space: nowrap; }
.reseq2-row.is-moved .reseq2-was { color: var(--orient-700); background: var(--orient-100); }
.reseq2-finish { font-size: 13px; font-weight: 750; color: var(--neutral-700); }
.reseq2-status {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 0;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-25);
  color: var(--neutral-700);
  white-space: nowrap;
}
.reseq2-status[data-tone="success"] { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
.reseq2-status[data-tone="warning"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.reseq2-note { display: flex; align-items: center; gap: 7px; margin: 6px 2px 0; font-size: 12px; color: var(--neutral-600); }
.reseq2-note svg.lucide { width: 14px; height: 14px; color: var(--success-strong); flex: none; }

/* Impact summary (shared by resequence + holding) */
.impact { margin-bottom: 6px; }
.impact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.impact-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--neutral-700); }
.impact-list svg.lucide { width: 15px; height: 16px; flex: none; margin-top: 1px; }
.impact-list li[data-tone="success"] svg.lucide { color: var(--success-fg); }
.impact-list li[data-tone="warning"] svg.lucide { color: var(--warning-fg); }

/* Move-to-holding drawer */
.hold-car { margin-bottom: 14px; }
.hold-blocked { display: inline-flex; margin-bottom: 8px; }
.hold-plate { display: flex; align-items: center; gap: 8px; }
.hold-plate b { font-size: 17px; font-weight: 700; color: var(--neutral-900); }
.hold-car > p { margin: 3px 0 0; font-size: 12px; color: var(--neutral-500); }
.hold-block { padding: 12px; margin-bottom: 12px; border: 1px solid var(--critical-border); border-radius: 0; background: var(--critical-bg); }
.hold-block strong { display: block; font-size: 13px; color: var(--critical-strong); }
.hold-block p { margin: 4px 0 0; font-size: 12px; color: var(--neutral-600); }

/* Revise-promise time picker */
.revise-now {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  padding: 12px 14px; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-25);
}
.revise-now-col { display: flex; flex-direction: column; gap: 3px; }
.revise-now-col b { font-size: 17px; font-weight: 750; color: var(--neutral-900); }
.revise-now-col b[data-tone="critical"] { color: var(--critical-strong); }
.revise-now-col b[data-tone="warning"] { color: var(--warning-strong); }
.revise-now > svg.lucide { width: 16px; height: 16px; color: var(--neutral-400); flex: none; margin-top: 14px; }
.revise-block { margin-bottom: 14px; }
.revise-block .assign-label { display: block; margin-bottom: 8px; }
.revise-slots { display: flex; flex-direction: column; gap: 8px; }
.revise-slot {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 12px; border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-0); text-align: left; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.09s ease;
}
.revise-slot:hover { border-color: var(--neutral-300); background: var(--neutral-25); }
.revise-slot:active { transform: scale(0.99); }
.revise-slot.is-chosen { border-color: var(--orient-500); background: var(--orient-50); box-shadow: inset 0 0 0 1px var(--orient-200); }
.revise-slot-check { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 0; border: 1.5px solid var(--neutral-300); background: var(--neutral-0); color: #fff; }
.revise-slot-check svg.lucide { width: 11px; height: 11px; opacity: 0; }
.revise-slot.is-chosen .revise-slot-check { background: var(--orient-600); border-color: var(--orient-600); }
.revise-slot.is-chosen .revise-slot-check svg.lucide { opacity: 1; }
.revise-slot b { flex: none; font-size: 14px; font-weight: 750; color: var(--neutral-900); min-width: 92px; }
.revise-slot > span:not(.revise-slot-check) { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--neutral-500); }
.revise-slot-best { flex: none; width: 15px; height: 16px; color: var(--warning-fg); }
.revise-note { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; color: var(--neutral-500); }
.revise-note svg.lucide { width: 14px; height: 14px; color: var(--neutral-400); flex: none; }
@media (prefers-reduced-motion: reduce) { .revise-slot:active { transform: none; } }

.hold-delay b { color: var(--critical-fg); }
.hold-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; margin-bottom: 14px; border: 1px solid var(--success-border); border-radius: 0; background: var(--success-bg); }
.hold-cap b { display: block; font-size: 13px; color: var(--success-strong); }
.hold-cap span { font-size: 12px; color: var(--neutral-600); }
.hold-cap svg.lucide { width: 22px; height: 24px; color: var(--success-fg); flex: none; }
.hold-next { margin-bottom: 16px; }
.hold-next-car { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hold-next-car b { font-size: 13px; color: var(--neutral-900); }
.hold-next-car span:last-child { font-size: 12px; color: var(--neutral-500); }
.hold-next-meta { display: flex; gap: 18px; font-size: 12px; color: var(--neutral-600); }
.hold-next-meta b { color: var(--neutral-800); }

/* ==================== Cars / Staff / Analytics pages ==================== */

.page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--neutral-150, var(--neutral-200));
}

.page-head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--neutral-900);
}

.page-head p {
  margin: 2px 0 0;
  color: var(--neutral-500);
  font-size: 13px;
  font-weight: 500;
}

.page-head-stats {
  display: flex;
  gap: 24px;
  flex: none;
}

.page-head-stats span {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.page-head-stats strong {
  font-size: 18px;
  line-height: 24px;
  font-weight: 750;
  color: var(--neutral-900);
}

.page-head-stats em {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

.page-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 0;
  background: var(--neutral-100);
  flex: none;
}

.page-seg-btn {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.page-seg-btn.is-active {
  background: var(--neutral-0);
  color: var(--neutral-900);
  box-shadow: var(--shadow-low);
}

/* ---- Data table (Cars) ---- */
.data-panel {
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--neutral-150, var(--neutral-200));
  background: transparent;
  overflow: hidden;
}

.data-scroll {
  height: 100%;
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px;
  text-align: left;
  background: var(--neutral-25);
  border-bottom: 1px solid var(--neutral-200);
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-row {
  cursor: pointer;
  border-bottom: 1px solid var(--neutral-100);
  transition: background 0.14s ease;
}

.data-row:hover {
  background: var(--neutral-25);
}

.data-row.is-selected {
  background: var(--orient-50);
  box-shadow: inset 2px 0 0 var(--orient-500);
}

.data-row td {
  padding: 12px 14px;
  color: var(--neutral-800);
  white-space: nowrap;
  vertical-align: middle;
}

/* Merged Car column: plate on top, model below */
.cell-car b { display: block; font-size: 13px; font-weight: 750; color: var(--neutral-900); letter-spacing: 0.01em; }
.cell-car span { display: block; font-size: 12px; color: var(--neutral-500); margin-top: 1px; }

.cell-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
}

.cell-status i {
  width: 7px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-400);
}

.cell-status[data-tone="critical"] { color: var(--critical-strong); }
.cell-status[data-tone="critical"] i { background: var(--critical-fg); }
.cell-status[data-tone="warning"] { color: var(--warning-strong); }
.cell-status[data-tone="warning"] i { background: var(--warning-fg); }
.cell-status[data-tone="active"] { color: var(--indigo-700); }
.cell-status[data-tone="active"] i { background: var(--indigo-600); }
.cell-status[data-tone="waiting"] { color: var(--waiting-strong); }
.cell-status[data-tone="waiting"] i { background: var(--waiting-strong); }
.cell-status[data-tone="success"] { color: var(--success-strong); }
.cell-status[data-tone="success"] i { background: var(--success-fg); }

.cell-person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cell-person .avatar {
  width: 24px;
  height: 24px;
}

.data-table td[data-tone="critical"] { color: var(--critical-strong); }
.data-table td[data-tone="warning"] { color: var(--warning-strong); }

.cell-risk {
  font-weight: 650;
  color: var(--neutral-600);
}

.cell-risk[data-tone="critical"] { color: var(--critical-strong); }
.cell-risk[data-tone="warning"] { color: var(--warning-strong); }
.cell-risk[data-tone="success"] { color: var(--success-strong); }

/* ---- Cars page: saved views + filters + richer table ---- */
.cars-page { gap: 12px; }
/* Live floor: no gap under the page header so the vertical bay/stations divider
   meets the header's hairline (T-junction) instead of floating below it. The bay /
   stations columns carry their own top padding, so content still breathes. */
.livefloor-page { gap: 0; }

.cars-views {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: none;
}

.cars-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cars-view:hover { background: var(--neutral-50); border-color: var(--neutral-300); }
.cars-view.is-active { background: var(--orient-50); border-color: var(--orient-200); color: var(--orient-700); }
.cars-view b {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 0; background: var(--neutral-100); color: var(--neutral-600); font-size: 12px; font-weight: 700;
}
.cars-view.is-active b { background: var(--orient-100); color: var(--orient-700); }
.cars-view-save { color: var(--neutral-500); border-style: dashed; }
.cars-view-save svg.lucide { width: 14px; height: 14px; }
.cars-view-saved { gap: 6px; }
.cars-view-saved svg.lucide { width: 13px; height: 12px; }
.cars-view-remove {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border-radius: 0;
  color: var(--neutral-400);
}
.cars-view-remove:hover { background: var(--neutral-150, var(--neutral-100)); color: var(--neutral-700); }
.cars-view-remove svg.lucide { width: 11px; height: 12px; }

.cars-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.cars-filter { position: relative; }

.cars-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-600);
  font-size: 13px;
  cursor: pointer;
}
.cars-filter-btn:hover { background: var(--neutral-50); border-color: var(--neutral-300); }
.cars-filter-btn.is-set { border-color: var(--orient-300); color: var(--orient-700); background: var(--orient-50); }
.cars-filter-btn svg.lucide { width: 14px; height: 14px; color: var(--neutral-400); }
.cars-filter-label { color: var(--neutral-500); font-weight: 600; }
.cars-filter-btn b { font-weight: 700; color: var(--neutral-800); }
.cars-filter-btn.is-set b, .cars-filter-btn.is-set .cars-filter-label { color: var(--orient-700); }

.cars-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 176px;
  padding: 4px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-popover);
}
.cars-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 8px; border: 0; border-radius: 0; background: transparent;
  color: var(--neutral-700); font-size: 13px; font-weight: 550; text-align: left; cursor: pointer;
}
.cars-menu-item:hover { background: var(--neutral-50); }
.cars-menu-check { width: 15px; height: 16px; opacity: 0; color: var(--orient-600); }
.cars-menu-item.is-active { color: var(--neutral-900); font-weight: 650; }
.cars-menu-item.is-active .cars-menu-check { opacity: 1; }

.cars-filterbar-spacer { flex: 1 1 auto; }
.cars-clear {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px;
  border: 0; background: transparent; color: var(--neutral-500); font-size: 13px; font-weight: 600; cursor: pointer;
}
.cars-clear:hover { color: var(--neutral-800); }
.cars-clear svg.lucide { width: 14px; height: 14px; }
.cars-count { color: var(--neutral-500); font-size: 12px; font-weight: 600; }

.cell-jobblocker b { display: block; font-weight: 600; color: var(--neutral-800); }
.cell-jobblocker span { display: block; font-size: 12px; font-weight: 650; margin-top: 1px; }
.cell-jobblocker span[data-tone="critical"] { color: var(--critical-strong); }
.cell-jobblocker span[data-tone="warning"] { color: var(--warning-strong); }
.cell-jobblocker span[data-tone="active"] { color: var(--indigo-700); }
.cell-jobblocker span[data-tone="waiting"] { color: var(--waiting-strong); }
.cell-jobblocker-none { color: var(--neutral-500) !important; }

.cell-progress { min-width: 92px; }
.cell-jobs { display: block; font-size: 12px; font-weight: 650; color: var(--neutral-700); }
.cell-jobs-bar { display: block; height: 4px; margin-top: 4px; border-radius: 0; background: var(--neutral-150, var(--neutral-100)); overflow: hidden; }
.cell-jobs-bar i { display: block; height: 100%; border-radius: 0; background: var(--orient-500); }
.cell-jobs-bar i[data-tone="success"] { background: var(--success-fg); }
.cell-jobs-bar i[data-tone="critical"] { background: var(--critical-fg); }
.cell-jobs-bar i[data-tone="warning"] { background: var(--warning-fg); }

.cell-status[data-tone="waiting"] { color: var(--waiting-strong); }
.cell-status[data-tone="waiting"] i { background: var(--waiting-strong); }

/* Next-action = a subtle ghost button, uniform width so the column reads as a
   consistent action rail (short 1-2 word labels). */
.cell-next-cell { text-align: left; }
.cell-next-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 116px; height: 30px; padding: 0 10px;
  border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-0); color: var(--neutral-700);
  font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.cell-next-btn svg.lucide { width: 14px; height: 14px; color: var(--neutral-400); }
.cell-next-btn:hover { border-color: var(--neutral-300); background: var(--neutral-50); }
.cell-next-btn[data-tone="critical"] { color: var(--critical-strong); border-color: var(--critical-border); }
.cell-next-btn[data-tone="critical"] svg.lucide { color: var(--critical-fg); }
.cell-next-btn[data-tone="critical"]:hover { background: var(--critical-bg); }
.cell-next-btn[data-tone="warning"] { color: var(--warning-strong); border-color: var(--warning-border); }
.cell-next-btn[data-tone="warning"] svg.lucide { color: var(--warning-fg); }
.cell-next-btn[data-tone="warning"]:hover { background: var(--warning-bg); }
.cell-next-btn[data-tone="primary"] { color: var(--orient-700); border-color: var(--orient-200); }
.cell-next-btn[data-tone="primary"] svg.lucide { color: var(--orient-500); }
.cell-next-btn[data-tone="primary"]:hover { background: var(--orient-50); }

.data-empty { padding: 0; text-align: center; color: var(--neutral-500); }

/* Shared empty-state block (Cars table + work list) */
.table-empty,
.worklist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 44px 24px;
  text-align: center;
}
.worklist-empty { margin: auto; max-width: 320px; min-height: 220px; justify-content: center; }
.table-empty-icon,
.worklist-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 0;
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.worklist-empty.is-positive .worklist-empty-icon { background: var(--success-bg); color: var(--success-fg); }
.table-empty-icon svg.lucide,
.worklist-empty-icon svg.lucide { width: 20px; height: 20px; }
.table-empty h3,
.worklist-empty h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--neutral-800); }
.table-empty p,
.worklist-empty p { margin: 0; font-size: 13px; color: var(--neutral-500); max-width: 40ch; line-height: 1.45; }
.table-empty .btn,
.worklist-empty .btn { margin-top: 8px; }
.table-empty .btn svg.lucide { width: 14px; height: 14px; }

/* Workflow as a real pill (not just dot + text). */
.wf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.wf-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wf-pill[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-strong); }
.wf-pill[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); }
.wf-pill[data-tone="active"] { background: var(--indigo-50); color: var(--indigo-700); }
.wf-pill[data-tone="waiting"] { background: var(--waiting-bg); color: var(--waiting-strong); }
.wf-pill[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); }

/* Freeze Select / Car / Current-job columns; scroll the rest horizontally. */
.cars-table th, .cars-table td { white-space: nowrap; }
/* Col 1 = checkbox (narrow), col 2 = Car, col 3 = Current job/blocker — all sticky. */
/* Pinned: checkbox + Car on the LEFT, Next action on the RIGHT. Current job/blocker scrolls. */
.cars-table th:nth-child(1), .cars-table td:nth-child(1) { position: sticky; left: 0; width: 44px; min-width: 44px; }
.cars-table th:nth-child(2), .cars-table td:nth-child(2) {
  position: sticky; left: 44px; width: 184px; min-width: 184px;
  box-shadow: 8px 0 10px -8px rgba(23, 26, 33, 0.16);
}
.cars-table td.cell-next-cell, .cars-table thead th:last-child {
  position: sticky; right: 0; z-index: 1;
  box-shadow: -8px 0 10px -8px rgba(23, 26, 33, 0.16);
}
.cars-table td:nth-child(-n+2), .cars-table td.cell-next-cell { background: var(--neutral-0); z-index: 1; transition: background 0.14s ease; }
.cars-table .data-row:hover td:nth-child(-n+2), .cars-table .data-row:hover td.cell-next-cell { background: var(--neutral-25); }
.cars-table .data-row.is-selected td:nth-child(-n+2), .cars-table .data-row.is-selected td.cell-next-cell,
.cars-table .data-row.is-checked td:nth-child(-n+2), .cars-table .data-row.is-checked td.cell-next-cell { background: var(--orient-50); }
.cars-table thead th:nth-child(-n+2), .cars-table thead th:last-child { z-index: 3; background: var(--neutral-25); }

/* ---- Staff page: sectioned availability tables ---- */
.staff-page { gap: 0; min-height: 0; }
.staff-page > .staff-filters { margin-top: 16px; }
.staff-page > .staff-body { margin-top: 14px; }

/* When a mechanic is selected, the page becomes a two-column grid. The page-head spans the FULL
   width, and the drawer occupies the right column from just under the page-head separator down to
   the bottom of the container — so it never touches the top bar and its content is never cropped.
   The KPI strip sits flush under the page-head hairline so its vertical dividers meet that line. */
.staff-page.has-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas:
    "head    head"
    "kpi     detail"
    "filters detail"
    "body    detail";
  column-gap: 0;
  row-gap: 0;
}
.staff-page.has-detail > .page-head { grid-area: head; }
.staff-page.has-detail > .staff-capacity { grid-area: kpi; }
.staff-page.has-detail > .staff-filters { grid-area: filters; }
.staff-page.has-detail > .staff-body { grid-area: body; }
.staff-page.has-detail > .staff-detail { grid-area: detail; align-self: stretch; }

/* The roster region — the list/table scrolls inside its own bounded box, page never scrolls. */
.staff-body { flex: 1 1 auto; min-height: 0; display: flex; min-width: 0; overflow: hidden; }
.staff-body .staff-roster { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; }
.staff-body .staff-list { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; align-content: start; border-top: 1px solid var(--neutral-200); }
.staff-detail {
  min-height: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--neutral-200);
  background: var(--neutral-0);
}
.staff-detail .sd-close { display: none; }
.staff-detail .sd-head { padding-top: 22px; }
.staff-row.is-selected { background: var(--orient-50); box-shadow: inset 2px 0 0 var(--orient-500); }
.staff-row.is-selected:hover { background: var(--orient-50); }
/* Detail panel open: keep every data column (incl. Utilization), drop only Today. */
.staff-body.is-detail .staff-roster-head,
.staff-body.is-detail .staff-roster .staff-row { grid-template-columns: minmax(106px, 0.85fr) minmax(0, 1.25fr) 100px 64px 88px 44px 42px; gap: 15px; }

.staff-section { display: flex; flex-direction: column; gap: 10px; }
.staff-section-head { display: flex; align-items: center; gap: 8px; }
.staff-section-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--neutral-900); letter-spacing: 0.02em; text-transform: uppercase; }
.staff-section-head b {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 0; background: var(--neutral-100); color: var(--neutral-600); font-size: 12px; font-weight: 700;
}

.staff-table { border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0); overflow: hidden; }

.staff-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) minmax(150px, 1fr) minmax(170px, 1.1fr) 132px minmax(230px, 1.5fr) minmax(110px, 0.8fr);
  gap: 16px;
  align-items: center;
  padding: 12px 14px; /* match the Cars table cell padding */
  border-top: 1px solid var(--neutral-100);
}
.staff-row:first-child { border-top: 0; }

.staff-row-head {
  padding: 12px 14px; /* match the Cars table header */
  background: var(--neutral-25);
  border-bottom: 1px solid var(--neutral-200);
}
.staff-row-head span { color: var(--neutral-500); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }

.staff-cell { min-width: 0; }
.staff-cell-person { display: flex; align-items: center; gap: 10px; }
.staff-cell-person .avatar { width: 34px; height: 34px; }
.staff-cell-person b { display: block; font-size: 14px; font-weight: 700; color: var(--neutral-900); }
.staff-cell-person span { display: block; font-size: 12px; color: var(--neutral-500); }

.staff-cell-skills { display: flex; flex-wrap: wrap; gap: 4px; }
.skill-tag {
  padding: 3px 8px; border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-25); color: var(--neutral-700); font-size: 12px; font-weight: 600;
}
.skill-tag.is-cert { border-color: var(--indigo-200); background: var(--indigo-50); color: var(--indigo-700); }
.skill-more { align-self: center; color: var(--neutral-400); font-size: 12px; font-weight: 600; }

.staff-cell-avail b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--neutral-800); }
.staff-cell-avail > span { display: block; margin-top: 2px; margin-left: 12px; font-size: 12px; color: var(--neutral-500); }
.avail-dot { width: 7px; height: 8px; border-radius: 50%; flex: none; background: var(--neutral-400); }
.avail-dot[data-tone="success"] { background: var(--success-fg); }
.avail-dot[data-tone="warning"] { background: var(--warning-fg); }
.staff-cell-avail b[data-tone="success"] { color: var(--success-strong); }
.staff-cell-avail b[data-tone="warning"] { color: var(--warning-strong); }

.staff-cell-load { display: flex; align-items: center; gap: 8px; }
.staff-load-bar { flex: 1 1 auto; height: 8px; border-radius: 0; background: var(--neutral-150, var(--neutral-100)); overflow: hidden; }
.staff-load-bar i { display: block; height: 100%; border-radius: 0; background: var(--success-fg); }
.staff-load-bar i[data-tone="warning"] { background: var(--warning-fg); }
.staff-load-bar i[data-tone="critical"] { background: var(--critical-fg); }
.staff-cell-load b { flex: none; font-size: 12px; color: var(--neutral-600); }

/* ===== Staff roster (one list; specialty is a skill attribute, not a section) ===== */
/* Filter tabs — matched to the Cars-page view chips (rectangular, orient-50 active). */
.staff-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.staff-filters-div { width: 1px; height: 20px; background: var(--neutral-200); margin: 0 4px; }

/* Skill filters collapsed into a dropdown (they used to overflow under the detail panel). */
.staff-skill-filter { position: relative; }
.staff-skill-btn { gap: 6px; }
.staff-skill-btn svg.lucide { width: 14px; height: 14px; color: var(--neutral-400); }
.staff-skill-btn.is-active svg.lucide { color: var(--orient-600); }
.staff-skill-btn b { font-weight: 700; color: var(--neutral-800); }
.staff-skill-btn.is-active b { color: var(--orient-700); }
.staff-skill-caret { margin-left: 2px; }
.staff-skill-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 180px; padding: 4px;
  border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-0); box-shadow: var(--shadow-popover);
  animation: dp-in 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}
.staff-skill-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 10px; border: 0; border-radius: 0; background: transparent;
  color: var(--neutral-700); font-size: 13px; font-weight: 550; text-align: left; cursor: pointer;
}
.staff-skill-item:hover { background: var(--neutral-50); }
.staff-skill-item.is-active { color: var(--orient-700); font-weight: 650; }
.staff-skill-check { width: 15px; height: 15px; color: var(--orient-600); opacity: 0; }
.staff-skill-item.is-active .staff-skill-check { opacity: 1; }
.staff-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-0); color: var(--neutral-700);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.staff-chip:hover { border-color: var(--neutral-300); background: var(--neutral-50); }
.staff-chip:active { transform: scale(0.98); }
.staff-chip b {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  border-radius: 0; background: var(--neutral-100); color: var(--neutral-600);
  font-size: 12px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Active tab: darker teal text (orient-800) for AA contrast on the tinted fill. */
.staff-chip.is-active { background: var(--orient-50); border-color: var(--orient-200); color: var(--orient-800); }
.staff-chip.is-active b { background: var(--orient-100); color: var(--orient-800); }

/* De-boxed roster: full-bleed hairline table (no card, no rounded corners). */
/* No bottom border — the table just ends into the empty scroll area; the drawer's border-left runs
   the full height to the workspace edge instead. */
.staff-roster { border: 0; border-top: 1px solid var(--neutral-200); background: var(--neutral-0); }
/* Full-height master-detail: drop the view-root's bottom gutter so the column separator (work
   list ↔ bay map / drawer) and the table reach the actual bottom edge of the workspace card,
   in every right-panel state (bay map, assign drawer, car detail) and at any content length. */
.view-root:has(.staff-page),
.view-root:has(.overview-page),
.view-root:has(.cars-page),
.view-root:has(.livefloor-page) { padding-bottom: 0; }
.staff-roster-head,
.staff-roster .staff-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 1.3fr) 116px 96px 128px 64px 62px;
  align-items: center; gap: 18px;
  padding: 0 20px;
}
.staff-roster-head { position: sticky; top: 0; z-index: 2; height: 40px; border-bottom: 1px solid var(--neutral-200); background: var(--neutral-25); }
.staff-roster-head span { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--neutral-500); }
.staff-roster .staff-row {
  min-height: 60px;
  border: 0; border-top: 1px solid var(--neutral-100);
  background: var(--neutral-0); cursor: pointer; text-align: left;
  transition: background 0.12s ease;
}
.staff-roster .staff-row:first-of-type { border-top: 0; }
.staff-roster .staff-row:hover { background: var(--neutral-25); }
.staff-right { text-align: right; justify-self: end; }
.sr-col-num { text-align: right; }
/* Station column: a location pin + bay/where, as its own column. */
.staff-station { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.staff-station svg.lucide { width: 13px; height: 13px; color: var(--neutral-400); flex: none; }
.staff-station span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Next-free column: when this mechanic can take the next car. "Now" reads success-green. */
.staff-nextfree { min-width: 0; font-size: 13px; font-weight: 650; color: var(--neutral-700); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-nextfree[data-tone="now"] { color: var(--success-strong); }
/* Utilization as its own number column. */
.sr-util { text-align: right; font-size: 14px; font-weight: 700; color: var(--neutral-800); font-variant-numeric: tabular-nums; }
.sr-util[data-tone="full"] { color: var(--warning-strong); }
.sr-util[data-tone="empty"] { color: var(--neutral-500); }
/* Today column (throughput). */
.staff-col-today { text-align: right; justify-self: end; }
.staff-col-today b { font-size: 15px; font-weight: 750; color: var(--neutral-900); }
.staff-col-today em { display: block; font-style: normal; font-size: 12px; color: var(--neutral-500); }

.staff-member { display: flex; align-items: center; gap: 11px; min-width: 0; }
.staff-member .avatar-only { width: 36px; height: 36px; flex: none; }
.staff-id { min-width: 0; }
.staff-id b { display: block; font-size: 15px; font-weight: 700; color: var(--neutral-900); }
.staff-id em { display: block; margin-top: 1px; font-size: 12px; font-weight: 550; font-style: normal; color: var(--neutral-500); }
.staff-row.is-out { opacity: .58; }
.staff-row.is-out .staff-avail span { color: var(--neutral-500); }
.sr-load-out { color: var(--neutral-400); font-weight: 600; }
.staff-dot[data-state="out"] { background: var(--neutral-300); }
/* Floor capacity summary — the workload picture the manager needs to spread the crew. */
/* Floor-capacity KPI strip — mirrors the Command page's .overview-kpis: NO surrounding card, just
   an equal-width grid with vertical hairline dividers between cells and a single bottom hairline
   under the band. Cells fill edge-to-edge; the first aligns flush to the page gutter. */
.staff-capacity { flex: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--neutral-200); }
/* Bottom padding tuned so the KPI band's bottom hairline lines up exactly with the drawer header's
   bottom hairline (one continuous "header zone" seam across the page). */
.cap-metric { display: flex; flex-direction: column; padding: 16px 20px 22px; min-width: 0; }
.cap-metric + .cap-metric { border-left: 1px solid var(--neutral-200); }
.cap-label { font-size: 12px; font-weight: 650; color: var(--neutral-500); margin-bottom: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-value { font-size: 22px; font-weight: 780; color: var(--neutral-900); line-height: 1; letter-spacing: -.02em; }
.cap-value[data-tone="warning"] { color: var(--warning-strong); }
.cap-value[data-tone="critical"] { color: var(--critical-strong); }
.cap-value[data-tone="success"] { color: var(--success-strong); }
.cap-of { font-size: 13px; font-weight: 600; color: var(--neutral-500); letter-spacing: 0; }
.cap-sub { font-size: 12px; color: var(--neutral-600); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Empty-state value (e.g. Avg turnaround before enough jobs finish) — reads intentional, not broken. */
.cap-empty { font-size: 15px; font-weight: 650; color: var(--neutral-500); line-height: 1; }

.staff-skills { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.skill-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 0; background: var(--neutral-100); color: var(--neutral-700); font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.skill-chip.is-generalist { background: transparent; border: 1px dashed var(--neutral-300); color: var(--neutral-500); }
.skill-more { flex: none; font-size: 12px; font-weight: 700; color: var(--neutral-400); }
.sd-skills { flex-wrap: wrap; overflow: visible; }

.staff-avail { display: flex; align-items: center; gap: 8px; min-width: 0; }
.staff-avail .staff-dot { flex: none; width: 9px; height: 9px; border-radius: 0; }
.staff-dot[data-state="free"] { background: var(--success-fg); }
.staff-dot[data-state="soon"] { background: var(--orient-500); }
.staff-dot[data-state="busy"] { background: var(--neutral-400); }
.staff-dot[data-state="reserved"] { background: var(--warning-fg); }
.staff-avail > span:not(.staff-dot):not(.staff-flag) { font-size: 13px; font-weight: 650; color: var(--neutral-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One consistent availability pill for every crew member (table + list views). Tone by state:
   on-a-job = indigo, free/soon = green, reserved = amber, on-leave = neutral. "At capacity" is not
   a state — a full 3/3 load reads from the Load column, so it isn't a separate pill. */
.avail-pill { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 10px 3px 8px; border-radius: 0; font-size: 12px; font-weight: 650; white-space: nowrap; }
.avail-pill .avail-dot { flex: none; width: 6px; height: 6px; border-radius: 0; background: currentColor; opacity: 0.85; }
.avail-pill[data-tone="indigo"] { background: var(--indigo-50); color: var(--indigo-700); }
.avail-pill[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); }
.avail-pill[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); }
.avail-pill[data-tone="neutral"] { background: var(--neutral-100); color: var(--neutral-600); }

.staff-roster .sr-load { display: flex; align-items: center; gap: 9px; }
.staff-roster .sr-load .staff-load-bar { width: 68px; flex: none; height: 6px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: var(--neutral-100); overflow: hidden; }
.staff-roster .sr-load .staff-load-bar i { display: block; width: auto; height: 100%; border-radius: 0; background: var(--orient-500); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.staff-roster .sr-load .staff-load-bar i[data-tone="full"] { background: var(--warning-fg); }
.staff-roster .sr-load .staff-load-bar i[data-tone="empty"] { background: var(--neutral-300); }
.staff-roster .sr-load .staff-load-bar { flex: 1 1 auto; width: auto; max-width: 44px; }
.staff-roster .sr-load b { flex: none; font-size: 13px; font-weight: 700; color: var(--neutral-800); font-variant-numeric: tabular-nums; }

/* Add-mechanic button in the filters row */
.staff-add-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px; border: 1px solid var(--orient-600); border-radius: 0;
  background: var(--orient-600); color: var(--neutral-0); font-size: 13px; font-weight: 650; cursor: pointer;
  transition: background 0.12s ease, transform 0.09s ease;
}
.staff-add-btn:hover { background: var(--orient-700); border-color: var(--orient-700); }
.staff-add-btn:active { transform: scale(0.97); }
.staff-add-btn svg.lucide { width: 15px; height: 15px; }

/* List / Table view switch (sliding seg pill, positioned by positionSegPills). Pushed to the right
   of the filter row; the Add-mechanic button follows it. */
.staff-view-switch { position: relative; margin-left: auto; display: inline-flex; padding: 3px; border-radius: 0; background: var(--neutral-100); }
.staff-view-switch .seg-pill { border-radius: 0; }
.staff-view-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; background: none; border-radius: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--neutral-600); cursor: pointer; }
.staff-view-btn svg.lucide { width: 14px; height: 14px; }
.staff-view-btn:hover { color: var(--neutral-800); }
.staff-view-btn.is-active { color: var(--neutral-900); }
.staff-view-btn:active { transform: scale(0.97); }
/* Add-mechanic sits at the far right of the filter row. */
.staff-filters .staff-add-btn { margin-left: auto; }

/* List view — a more spacious, scannable alternative to the dense table (inspired by the Command
   work list): one airy row per mechanic — who + expertise, status + station, and a load meter. */
/* List view reuses the Command work-list styling wholesale (.overview-list-rows + .overview-list-row:
   single-line 60px flex rows, gliding hover pill, inset-ring selected state). Below are just the
   staff-specific cells: who on the left, an aligned status/station/load trail on the right. */
.staff-lrow { cursor: pointer; }
.staff-lrow.is-out { opacity: 0.62; }
.slr-avatar { flex: none; display: inline-flex; }
.slr-avatar .avatar-only { width: 30px; height: 30px; }
.slr-name { flex: none; font-size: 14px; font-weight: 750; color: var(--neutral-900); white-space: nowrap; }
.slr-role { flex: 0 1 auto; min-width: 0; font-size: 12px; font-weight: 600; color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview-list-row.staff-lrow .overview-row-trail { gap: 14px; }
.slr-avail { flex: none; width: 96px; display: inline-flex; }
.slr-where { flex: none; width: 156px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slr-where svg.lucide { width: 13px; height: 13px; flex: none; color: var(--neutral-400); }
.slr-load { flex: none; width: 96px; display: flex; align-items: center; gap: 8px; }
.slr-load .sl-load-meter { width: 60px; flex: none; height: 6px; border-radius: 0; background: var(--neutral-100); overflow: hidden; }
.slr-load .sl-load-meter i { display: block; height: 100%; border-radius: 0; background: var(--orient-500); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.slr-load .sl-load-meter i[data-tone="full"] { background: var(--warning-fg); }
.slr-load .sl-load-meter i[data-tone="empty"] { background: var(--neutral-300); }
/* The load-fill width animation is a layout-property transition — disable it under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .staff-roster .sr-load .staff-load-bar i, .slr-load .sl-load-meter i, .sd-load i { transition: none; }
}
.slr-load > b { flex: none; font-size: 13px; font-weight: 700; color: var(--neutral-800); font-variant-numeric: tabular-nums; }
.slr-util { flex: none; width: 38px; text-align: right; font-size: 12px; font-weight: 650; color: var(--neutral-500); }
.slr-util[data-tone="full"] { color: var(--warning-strong); }
.slr-load-out { flex: none; width: 134px; text-align: right; font-size: 12px; font-weight: 600; color: var(--neutral-500); }
/* Muted secondary text stays legible on the tinted selected row (bump toward ink off the tint). */
.staff-lrow.is-selected .slr-role, .staff-lrow.is-selected .slr-where, .staff-lrow.is-selected .slr-util { color: var(--neutral-700); }

/* Detail footer: remove-from-roster */
/* A real drawer footer (sibling of the scrolling body), so the destructive action is always pinned
   at the bottom and never scrolls out — fixes the laptop-height clip. The border-top cues the seam. */
.sd-foot { flex: none; padding: 14px 22px 18px; border-top: 1px solid var(--neutral-150, var(--neutral-200)); background: var(--neutral-0); }
.sd-remove {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-0); color: var(--critical-fg); font-size: 13px; font-weight: 650; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.sd-remove:hover { background: var(--critical-bg); border-color: var(--critical-border); }
.sd-remove.is-armed { background: var(--critical-bg); border-color: var(--critical-border); color: var(--critical-strong); }
.sd-remove svg.lucide { width: 15px; height: 15px; }

/* ===== Generic modal (add-mechanic form) ===== */
.modal-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.modal-scrim { position: absolute; inset: 0; background: rgba(19, 24, 33, 0.34); opacity: 0; transition: opacity 0.2s ease; }
.modal-wrap.is-open .modal-scrim { opacity: 1; }
.modal {
  position: relative; width: 420px; max-width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: 0;
  box-shadow: 0 24px 60px -18px rgba(19, 24, 33, 0.42);
  transform: translateY(8px) scale(0.985); opacity: 0;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.modal-wrap.is-open .modal { transform: none; opacity: 1; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--neutral-100); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--neutral-900); }
.modal-close { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 0; background: transparent; color: var(--neutral-500); cursor: pointer; }
.modal-close:hover { background: var(--neutral-100); color: var(--neutral-800); }
.modal-close svg.lucide { width: 17px; height: 17px; }
.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; font-weight: 650; color: var(--neutral-600); }
.field input[type="text"], .field input[type="number"] {
  height: 38px; padding: 0 12px; border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-0); color: var(--neutral-900); font-size: 14px; font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.field input:focus { outline: none; border-color: var(--orient-400); box-shadow: 0 0 0 3px var(--orient-100); }
.field input.is-error { border-color: var(--critical-border); box-shadow: 0 0 0 3px var(--critical-bg); }
.field-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.field-inline input[type="number"] { width: 80px; text-align: center; }
.am-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.am-skill { padding: 6px 11px; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0); color: var(--neutral-700); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease; }
.am-skill:hover { border-color: var(--neutral-300); }
.am-skill.is-on { border-color: var(--orient-500); background: var(--orient-50); color: var(--orient-700); }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--neutral-100); }
@media (prefers-reduced-motion: reduce) { .modal, .modal-scrim { transition: opacity 0.15s ease; } .modal { transform: none; } }

.staff-right b { font-size: 15px; font-weight: 750; color: var(--neutral-900); }
.staff-right em { display: block; font-style: normal; font-size: 12px; color: var(--neutral-500); }

.staff-empty { padding: 32px 20px; text-align: center; color: var(--neutral-500); font-size: 13px; }

/* ===== Staff workload drawer (slide-in from the right) ===== */
.staff-drawer-wrap { position: fixed; inset: 0; z-index: 60; }
.staff-drawer-scrim { position: absolute; inset: 0; background: rgba(19, 24, 33, 0.30); opacity: 0; transition: opacity 0.28s ease; }
.staff-drawer-wrap.is-open .staff-drawer-scrim { opacity: 1; }
.staff-drawer {
  position: absolute; top: 0; right: 0; height: 100%; width: 392px; max-width: 88vw;
  display: flex; flex-direction: column;
  background: var(--neutral-0); border-left: 1px solid var(--neutral-200);
  box-shadow: -20px 0 48px -24px rgba(19, 24, 33, 0.42);
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.staff-drawer-wrap.is-open .staff-drawer { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .staff-drawer { transition: opacity 0.2s ease; transform: none; opacity: 0; }
  .staff-drawer-wrap.is-open .staff-drawer { opacity: 1; }
}

.sd-head { position: relative; flex: none; padding: 22px 22px 20px; border-bottom: 1px solid var(--neutral-150, var(--neutral-200)); }
.sd-close { position: absolute; top: 16px; right: 16px; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 0; background: transparent; color: var(--neutral-500); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.sd-close:hover { background: var(--neutral-100); color: var(--neutral-800); }
.sd-close svg.lucide { width: 17px; height: 17px; }
/* Overflow (ellipsis) menu at the drawer's top-right — holds the destructive Remove action. */
.sd-more-wrap { position: absolute; top: 16px; right: 14px; z-index: 5; }
.sd-more { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 0; background: transparent; color: var(--neutral-500); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.sd-more:hover { background: var(--neutral-100); color: var(--neutral-800); }
.sd-more[aria-expanded="true"] { background: var(--neutral-100); color: var(--neutral-800); }
.sd-more svg.lucide { width: 18px; height: 18px; }
.sd-menu { position: absolute; top: calc(100% + 5px); right: 0; min-width: 194px; padding: 6px; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0); box-shadow: 0 14px 30px -10px rgba(19, 24, 33, 0.24); z-index: 6; animation: sd-menu-in 0.13s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: top right; }
@keyframes sd-menu-in { from { opacity: 0; transform: scale(0.96) translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sd-menu { animation: none; } }
.sd-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--neutral-700); cursor: pointer; text-align: left; }
.sd-menu-item:hover { background: var(--neutral-50); }
.sd-menu-item svg.lucide { width: 15px; height: 15px; }
.sd-menu-item.is-danger { color: var(--critical-fg); }
.sd-menu-item.is-danger:hover { background: var(--critical-bg); color: var(--critical-strong); }
/* T-shape caption under the Strengths chips — every mechanic handles general service too. */
.sd-skills-note { margin: 9px 0 0; font-size: 12px; line-height: 1.4; color: var(--neutral-500); }
/* Calm at-capacity note (replaces the reassign picker) — the load-aware assign flow reroutes new
   cars, so this is reassurance, not an action. */
.sd-atcap { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-25); }
.sd-atcap > svg.lucide { flex: none; width: 16px; height: 16px; color: var(--warning-fg); margin-top: 1px; }
.sd-atcap b { display: block; font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.sd-atcap p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: var(--neutral-600); }
/* At-capacity next-action: hand a job to a crew-mate with room (the in-drawer Balance action). */
.sd-reassign-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px 11px 14px; border: 1px solid var(--warning-border); border-radius: 0; background: var(--warning-bg); }
.sd-reassign-cta-txt b { display: block; font-size: 13px; font-weight: 700; color: var(--warning-strong); }
.sd-reassign-cta-txt span { font-size: 12px; color: var(--warning-strong); opacity: 0.82; }
.sd-reassign-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--orient-600); border-radius: 0; background: var(--orient-600); color: var(--neutral-0); font-size: 13px; font-weight: 650; cursor: pointer; transition: background 0.12s ease, transform 0.09s ease; }
.sd-reassign-btn:hover { background: var(--orient-700); border-color: var(--orient-700); }
.sd-reassign-btn:active { transform: scale(0.97); }
.sd-reassign-btn svg.lucide { width: 15px; height: 15px; }
.sd-reassign-lead { margin: 0 0 2px; font-size: 13px; line-height: 1.5; color: var(--neutral-600); }
.sd-reassign-target { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 7px; padding: 9px 10px; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0); cursor: pointer; text-align: left; transition: border-color 0.12s ease, background 0.12s ease; }
.sd-reassign-target:hover { border-color: var(--orient-200); background: var(--orient-50); }
.sd-reassign-target .avatar-only { width: 34px; height: 34px; flex: none; }
.srt-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.srt-id b { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.srt-id span { font-size: 12px; color: var(--neutral-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srt-load { flex: none; text-align: right; }
.srt-load b { font-size: 13px; font-weight: 700; color: var(--neutral-800); font-variant-numeric: tabular-nums; }
.srt-load em { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--success-strong); }
.sd-reassign-cancel { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0); color: var(--neutral-600); font-size: 13px; font-weight: 600; cursor: pointer; }
.sd-reassign-cancel:hover { background: var(--neutral-50); color: var(--neutral-800); }
.sd-reassign-cancel svg.lucide { width: 14px; height: 14px; }
.sd-person { display: flex; align-items: center; gap: 12px; }
.sd-person .avatar-only { width: 46px; height: 46px; flex: none; }
.sd-person-id h3 { margin: 0; font-size: 18px; font-weight: 750; color: var(--neutral-900); }
.sd-person-id p { margin: 2px 0 0; font-size: 13px; color: var(--neutral-500); }
.sd-avail { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; }
.sd-avail .staff-dot { width: 9px; height: 9px; border-radius: 0; flex: none; }
.sd-avail b { font-weight: 700; color: var(--neutral-800); }
.sd-avail em { font-style: normal; color: var(--neutral-500); }
.sd-avail em::before { content: "·"; margin-right: 6px; color: var(--neutral-300); }

.sd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 22px 28px; display: flex; flex-direction: column; gap: 22px; }
/* Sections keep their natural height (the panel scrolls) — otherwise a short panel
   shrinks the flex children and clips content like the stat sub-labels. */
.sd-body > * { flex: none; }
.sd-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--neutral-200); border-radius: 0; overflow: hidden; }
.sd-stat { padding: 14px 14px; border-right: 1px solid var(--neutral-200); }
.sd-stat:last-child { border-right: 0; }
.sd-stat b { display: block; font-size: 22px; font-weight: 780; letter-spacing: -0.02em; color: var(--neutral-900); }
.sd-stat span { display: block; margin-top: 3px; font-size: 12px; color: var(--neutral-500); }

.sd-section { display: flex; flex-direction: column; gap: 10px; }
.sd-section-head { display: flex; align-items: center; justify-content: space-between; }
.sd-section-head span { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-500); }
.sd-section-head b { font-size: 13px; font-weight: 650; color: var(--neutral-600); }
.sd-load { width: 100%; height: 8px; }
.sd-skills { gap: 6px; }

/* Compact fact list — shift, station, availability. */
.sd-facts { display: flex; flex-direction: column; gap: 0; margin: 0; border: 1px solid var(--neutral-200); border-radius: 0; overflow: hidden; }
.sd-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--neutral-100); }
.sd-facts > div:first-child { border-top: 0; }
.sd-facts dt { font-size: 12px; color: var(--neutral-500); }
.sd-facts dd { margin: 0; font-size: 13px; font-weight: 650; color: var(--neutral-800); text-align: right; }

/* Rich "working on now" rows — plate + location + risk, then vehicle/job + progress. */
.sd-job { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 11px 8px; margin: 0 -8px; border: 0; border-top: 1px solid var(--neutral-100); border-radius: 0; background: transparent; text-align: left; cursor: pointer; transition: background 0.12s ease; }
.sd-job:hover { background: var(--neutral-25); }
.sd-job:first-of-type { border-top: 0; }
.sd-job-top { display: flex; align-items: center; gap: 8px; }
.sd-job-top b { font-size: 13px; font-weight: 750; color: var(--neutral-900); }
.sd-job-loc { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--neutral-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-job-top .attn-status { flex: none; font-size: 12px; padding: 2px 8px; }
.sd-job-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sd-job-sub > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--neutral-600); }
.sd-job-prog { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--neutral-600); font-variant-numeric: tabular-nums; }
.sd-job-bar { display: inline-block; width: 44px; height: 5px; border-radius: 0; background: var(--neutral-150, var(--neutral-100)); overflow: hidden; }
.sd-job-bar i { display: block; height: 100%; border-radius: 0; background: var(--orient-500); }
.sd-empty { margin: 2px 0 0; font-size: 13px; color: var(--neutral-500); }

@media (max-width: 1120px) {
  .staff-roster-head,
  .staff-roster .staff-row { grid-template-columns: minmax(140px, 1.1fr) minmax(0, 1.4fr) 120px 140px 124px; gap: 16px; }
  .staff-roster-head .sr-col-num,
  .sr-util, .staff-col-today { display: none; }
}

.staff-cell-assign { display: flex; flex-direction: column; gap: 6px; }
.staff-assign-chip {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 4px 8px; border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-25); text-align: left; cursor: pointer;
}
.staff-assign-chip:hover { background: var(--neutral-50); border-color: var(--neutral-300); }
.staff-assign-chip b { font-size: 12px; font-weight: 750; color: var(--neutral-900); }
.staff-assign-chip span { font-size: 12px; color: var(--neutral-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-assign-chip em { font-size: 12px; font-style: normal; color: var(--neutral-400); white-space: nowrap; }

.staff-cell-risk { display: flex; flex-direction: column; gap: 6px; }
.staff-risk { font-size: 12px; font-weight: 700; color: var(--neutral-600); min-height: 24px; display: flex; align-items: center; }
.staff-risk[data-tone="critical"] { color: var(--critical-strong); }
.staff-risk[data-tone="warning"] { color: var(--warning-strong); }
.staff-risk[data-tone="success"] { color: var(--success-strong); }

.staff-empty { color: var(--neutral-400); font-size: 12px; font-weight: 500; }

/* ---- Analytics ---- */
.analytics-kpis {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  overflow: hidden;
}

.analytics-kpis .overview-kpi + .overview-kpi {
  border-left: 1px solid var(--neutral-100);
}

.analytics-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}

.chart-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

.chart-wide {
  grid-column: 1 / -1;
}

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.chart-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
}

.chart-head span {
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 550;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
}

.bar-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}

.bar-track {
  flex: 1 1 auto;
  width: 100%;
  max-width: 34px;
  display: flex;
  align-items: flex-end;
  border-radius: 0;
  background: var(--neutral-100);
  overflow: hidden;
}

.bar-track i {
  display: block;
  width: 100%;
  border-radius: 0;
  background: linear-gradient(180deg, var(--orient-500), var(--orient-700));
  min-height: 3px;
}

.bar-track i[data-tone="brand"] {
  background: linear-gradient(180deg, var(--orient-400, var(--orient-500)), var(--orient-600));
}

.bar-col b {
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-800);
}

.bar-col em {
  font-size: 12px;
  font-style: normal;
  color: var(--neutral-500);
  font-weight: 600;
}

.hbar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hbar-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
}

.hbar-label {
  color: var(--neutral-700);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hbar-track {
  height: 10px;
  border-radius: 0;
  background: var(--neutral-100);
  overflow: hidden;
}

.hbar-track i {
  display: block;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg, var(--orient-500), var(--orient-700));
}

.hbar-row b {
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-800);
}

/* ==================== Performance (analytics) page ==================== */
.perf-page {
  gap: 24px;
  overflow-y: auto;
  padding-bottom: 8px;
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
}

/* Sticky section nav so the long report is jump-navigable */
.perf-nav {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: -6px -4px 0;
  padding: 8px 4px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-200);
}
.perf-nav-btn {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.perf-nav-btn:hover { background: var(--neutral-100); color: var(--neutral-800); }
.perf-nav-btn.is-active { background: var(--orient-50); color: var(--orient-700); border-color: var(--orient-200); }
.perf-section { scroll-margin-top: 60px; }

.perf-controls {
  display: flex;
  gap: 8px;
  flex: none;
}

.perf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.perf-btn:hover { background: var(--neutral-50); border-color: var(--neutral-300); }
.perf-btn svg.lucide { width: 15px; height: 16px; }

.perf-btn-primary {
  border-color: var(--orient-600);
  background: var(--orient-600);
  color: var(--neutral-0);
  box-shadow: var(--shadow-control-raised, var(--shadow-low));
}
.perf-btn-primary:hover { background: var(--orient-700); border-color: var(--orient-700); }

.perf-section { display: flex; flex-direction: column; gap: 12px; }

.perf-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.perf-section-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
}

.perf-section-head > div h3 { margin: 0; }

.perf-section-head span {
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 500;
}

/* Outcome cards with sparklines */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.outcome-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 8px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  min-width: 0;
}

.outcome-label {
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 600;
}

.outcome-value {
  margin-top: 3px;
  color: var(--neutral-900);
  font-size: 22px;
  line-height: 30px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.outcome-value em {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-400);
}

.outcome-value[data-tone="critical"] { color: var(--critical-strong); }

.outcome-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 650;
}

.outcome-delta svg.lucide { width: 13px; height: 12px; }
.outcome-delta[data-tone="success"] { color: var(--success-strong); }
.outcome-delta[data-tone="warning"] { color: var(--warning-strong); }
.outcome-delta[data-tone="critical"] { color: var(--critical-strong); }

.sparkline {
  width: 100%;
  height: 34px;
  margin-top: 6px;
  overflow: visible;
}

.sparkline .spk-line { fill: none; stroke: var(--neutral-400); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.sparkline .spk-area { opacity: 0.14; }
/* Monochrome charts: teal for good/neutral, one muted red for negatives */
.sparkline[data-tone="success"] .spk-line,
.sparkline[data-tone="brand"] .spk-line { stroke: var(--orient-600); }
.sparkline[data-tone="success"] .spk-fill-a,
.sparkline[data-tone="brand"] .spk-fill-a { stop-color: var(--orient-600); }
.sparkline[data-tone="critical"] .spk-line,
.sparkline[data-tone="warning"] .spk-line { stroke: var(--critical-fg); }
.sparkline[data-tone="critical"] .spk-fill-a,
.sparkline[data-tone="warning"] .spk-fill-a { stop-color: var(--critical-fg); }
.sparkline .spk-fill-b { stop-color: var(--neutral-0); stop-opacity: 0; }

/* Story of the day */
.story-card {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--orient-200);
  border-radius: 0;
  background: linear-gradient(120deg, var(--orient-50), var(--neutral-0) 60%);
}

.story-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: var(--orient-600);
  color: var(--neutral-0);
}

.story-icon svg.lucide { width: 20px; height: 20px; }

.story-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--neutral-900); }
.story-card p { margin: 0; color: var(--neutral-700); font-size: 14px; line-height: 20px; max-width: 92ch; }
.story-card p strong { color: var(--neutral-900); font-weight: 700; }
.story-suggest { margin-top: 8px !important; display: block; color: var(--orient-800); font-weight: 550; }
.story-suggest svg.lucide { width: 15px; height: 16px; display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--orient-600); }
.story-suggest strong { color: var(--orient-800); }

/* Why grid (3-up cards) */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.chart-head-count { font-weight: 700; }
.chart-head-count[data-tone="critical"] { color: var(--critical-strong); }

.chart-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--orient-700);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.chart-link svg.lucide { width: 14px; height: 14px; }
.chart-link:hover { color: var(--orient-800); }

/* Missed pickups list */
.missed-list { display: flex; flex-direction: column; }
.missed-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--neutral-100);
}
.missed-row:first-child { border-top: 0; }
.missed-car { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.missed-car b { font-size: 13px; font-weight: 750; color: var(--neutral-900); }
.missed-car > span { font-size: 12px; color: var(--neutral-500); }
.missed-informed { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.missed-informed svg.lucide { width: 12px; height: 12px; }
.missed-informed[data-ok="true"] { color: var(--success-strong); }
.missed-informed[data-ok="false"] { color: var(--critical-strong); }
.missed-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; flex: none; max-width: 46%; }
.missed-late { font-size: 13px; font-weight: 750; }
.missed-late[data-tone="critical"] { color: var(--critical-strong); }
.missed-cause { font-size: 12px; color: var(--neutral-700); }
.missed-impact { font-size: 12px; color: var(--neutral-500); }

/* Delay causes */
.cause-list { display: flex; flex-direction: column; gap: 12px; }
.cause-row { display: flex; align-items: center; gap: 12px; }
.cause-rank {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 24px; border-radius: 0;
  background: var(--neutral-100); color: var(--neutral-600);
  font-size: 12px; font-weight: 700;
}
.cause-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cause-top { display: flex; justify-content: space-between; gap: 8px; }
.cause-top span { font-size: 13px; font-weight: 550; color: var(--neutral-700); }
.cause-top b { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.cause-track { height: 8px; border-radius: 0; background: var(--neutral-100); overflow: hidden; }
.cause-track i { display: block; height: 100%; border-radius: 0; background: var(--orient-500); }
/* Graduated brand-blue ramp by rank — dark = biggest cause, lightening down */
.cause-list .cause-row:nth-child(1) .cause-track i { background: var(--orient-700); }
.cause-list .cause-row:nth-child(2) .cause-track i { background: var(--orient-600); }
.cause-list .cause-row:nth-child(3) .cause-track i { background: var(--orient-500); }
.cause-list .cause-row:nth-child(4) .cause-track i { background: var(--orient-400); }
.cause-list .cause-row:nth-child(5) .cause-track i { background: var(--orient-300); }
.cause-list .cause-row:nth-child(n+6) .cause-track i { background: var(--orient-200); }

/* Busiest bays */
.bay-util-list { display: flex; flex-direction: column; gap: 14px; }
.bay-util-row { display: flex; flex-direction: column; gap: 4px; }
.bay-util-top { display: flex; justify-content: space-between; }
.bay-util-top b { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.bay-util-top span { font-size: 13px; font-weight: 750; color: var(--neutral-800); }
.bay-util-top span[data-tone="critical"] { color: var(--critical-strong); }
.bay-util-top span[data-tone="warning"] { color: var(--neutral-800); }
.bay-util-top span[data-tone="success"] { color: var(--orient-700); }
.bay-util-track { height: 8px; border-radius: 0; background: var(--neutral-100); overflow: hidden; }
.bay-util-track i { display: block; height: 100%; border-radius: 0; }
.bay-util-list .bay-util-row:nth-child(1) .bay-util-track i { background: var(--orient-700); }
.bay-util-list .bay-util-row:nth-child(2) .bay-util-track i { background: var(--orient-600); }
.bay-util-list .bay-util-row:nth-child(3) .bay-util-track i { background: var(--orient-500); }
.bay-util-list .bay-util-row:nth-child(4) .bay-util-track i { background: var(--orient-400); }
.bay-util-list .bay-util-row:nth-child(n+5) .bay-util-track i { background: var(--orient-300); }
.bay-util-row em { font-size: 12px; font-style: normal; color: var(--neutral-500); }

/* Perf tables */
.perf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.perf-table th {
  padding: 6px 8px 8px; text-align: left;
  color: var(--neutral-500); font-size: 12px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  border-bottom: 1px solid var(--neutral-200);
}
.perf-table th:not(:first-child), .perf-table td:not(:first-child) { text-align: right; }
.perf-table td { padding: 8px 8px; color: var(--neutral-800); border-bottom: 1px solid var(--neutral-100); }
.perf-table tr:last-child td { border-bottom: 0; }
.perf-risk {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 0; background: var(--neutral-100); color: var(--neutral-500);
  font-size: 12px; font-weight: 700;
}
.perf-risk[data-on="true"] { background: var(--critical-bg); color: var(--critical-strong); }

/* Mechanic workload */
.workload-list { display: flex; flex-direction: column; }
.workload-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--neutral-100); }
.workload-row:first-child { border-top: 0; }
.workload-row .avatar { width: 28px; height: 28px; }
.workload-id { flex: 1 1 auto; min-width: 0; }
.workload-id b { display: block; font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.workload-id span { display: block; font-size: 12px; color: var(--neutral-500); }
.workload-load { font-size: 13px; font-weight: 700; color: var(--neutral-700); }
.workload-plan { min-width: 56px; text-align: right; font-size: 13px; font-weight: 700; }
.workload-plan[data-tone="success"] { color: var(--success-strong); }
.workload-plan[data-tone="critical"] { color: var(--critical-strong); }
.workload-plan[data-tone="waiting"] { color: var(--neutral-500); }

/* Donut */
.status-donut { display: flex; align-items: center; gap: 18px; }
.donut { position: relative; flex: none; width: 128px; height: 128px; }
.donut svg { width: 100%; height: 100%; transform: rotate(0deg); }
.donut-track { fill: none; stroke: var(--neutral-100); stroke-width: 4; }
.donut-arc { fill: none; stroke-width: 4.5; stroke-linecap: butt; transition: stroke-width 0.12s ease; }
.donut svg:hover .donut-arc { opacity: 0.5; }
.donut-arc:hover { stroke-width: 5.5; opacity: 1; }
/* Donut: teal ramp with a single red accent for the negative slice */
.donut-arc[data-tone="success"] { stroke: var(--orient-600); }
.donut-arc[data-tone="brand"] { stroke: var(--orient-500); }
.donut-arc[data-tone="active"] { stroke: var(--orient-400); }
.donut-arc[data-tone="waiting"] { stroke: var(--orient-200); }
.donut-arc[data-tone="warning"] { stroke: var(--orient-300); }
.donut-arc[data-tone="critical"] { stroke: var(--critical-fg); }
.donut-arc[data-tone="neutral"] { stroke: var(--neutral-300); }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center strong { font-size: 22px; font-weight: 750; color: var(--neutral-900); }
.donut-center span { font-size: 12px; color: var(--neutral-500); font-weight: 600; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.donut-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutral-700); }
.donut-legend .dot { width: 9px; height: 8px; border-radius: 0; flex: none; }
.donut-legend .dot[data-tone="success"] { background: var(--orient-600); }
.donut-legend .dot[data-tone="brand"] { background: var(--orient-500); }
.donut-legend .dot[data-tone="active"] { background: var(--orient-400); }
.donut-legend .dot[data-tone="waiting"] { background: var(--orient-200); }
.donut-legend .dot[data-tone="warning"] { background: var(--orient-300); }
.donut-legend .dot[data-tone="critical"] { background: var(--critical-fg); }
.donut-legend .dot[data-tone="neutral"] { background: var(--neutral-300); }
.donut-legend b { margin-left: auto; font-weight: 700; color: var(--neutral-900); }

/* Operational timeline */
.perf-timeline {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 4px 0 6px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  overflow-x: auto;
}
/* Single rail behind the evenly-spaced nodes (no per-item line seams). */
.ptl-rail {
  position: absolute;
  left: 8.3%;
  right: 8.3%;
  top: 55px;
  height: 2px;
  background: var(--neutral-200);
}
.ptl-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 14px;
  min-width: 176px;
  text-align: center;
}
.ptl-time { height: 16px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--neutral-500); }
.ptl-node {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 0;
  border: 1px solid var(--neutral-200); background: var(--neutral-0); color: var(--neutral-500);
}
.ptl-node svg.lucide { width: 15px; height: 16px; }
.ptl-item[data-tone="critical"] .ptl-node { border-color: var(--critical-border); background: var(--critical-bg); color: var(--critical-fg); }
.ptl-item[data-tone="warning"] .ptl-node { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); }
.ptl-item[data-tone="success"] .ptl-node { border-color: var(--success-border); background: var(--success-bg); color: var(--success-fg); }
.ptl-card strong { display: block; font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.ptl-card span { display: block; margin-top: 3px; font-size: 12px; line-height: 16px; color: var(--neutral-500); }

/* Analytics range dropdown + compare toggle */
.perf-range { position: relative; }
.perf-btn.is-active { border-color: var(--orient-300); background: var(--orient-50); color: var(--orient-700); }
.perf-range-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 168px;
  padding: 4px; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0); box-shadow: var(--shadow-popover);
}
.perf-range-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 8px 8px; border: 0; border-radius: 0; background: transparent;
  color: var(--neutral-700); font-size: 13px; font-weight: 550; text-align: left; cursor: pointer;
}
.perf-range-item:hover { background: var(--neutral-50); }
.perf-range-check { width: 15px; height: 16px; opacity: 0; color: var(--orient-600); }
.perf-range-item.is-active { color: var(--neutral-900); font-weight: 650; }
.perf-range-item.is-active .perf-range-check { opacity: 1; }
.perf-page[data-compare="off"] .outcome-delta { visibility: hidden; }

/* Weekday bar chart (bay utilization) */
.wbar { display: flex; flex-direction: column; gap: 8px; }
.wbar-plot { position: relative; display: flex; align-items: flex-end; gap: 14px; height: 180px; padding-top: 14px; }
.wbar-avgline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--neutral-300); }
.wbar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.wbar-val { font-size: 12px; font-weight: 700; color: var(--neutral-500); }
.wbar-col.is-today .wbar-val { color: var(--orient-700); }
.wbar-bar { width: 100%; max-width: 46px; border-radius: 0; background: var(--neutral-200); min-height: 4px; }
.wbar-bar[data-tone="brand"] { background: linear-gradient(180deg, var(--orient-500), var(--orient-700)); }
.wbar-bar[data-tone="warning"] { background: var(--critical-fg); }
.wbar-axis { display: flex; gap: 14px; }
.wbar-axis span { flex: 1 1 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--neutral-500); }
.wbar-axis span.is-today { color: var(--orient-700); font-weight: 750; }
.wbar-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--neutral-500); }
.wbar-avgkey { width: 14px; border-top: 1px dashed var(--neutral-400); }
.wbar-todaykey { width: 10px; height: 10px; border-radius: 0; margin-left: 10px; background: linear-gradient(180deg, var(--orient-500), var(--orient-700)); }

/* Stacked bar chart (cars completed) */
.sbar { display: flex; flex-direction: column; gap: 8px; }
.sbar-plot { display: flex; align-items: flex-end; gap: 14px; height: 150px; }
.sbar-col { flex: 1 1 0; max-width: 46px; margin: 0 auto; display: flex; flex-direction: column; border-radius: 0; overflow: hidden; }
.sbar-seg[data-seg="ontime"] { background: var(--orient-600); }
.sbar-seg[data-seg="missed"] { background: var(--critical-fg); }
.sbar-seg[data-seg="carry"] { background: var(--orient-200); }
.sbar-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--neutral-600); }
.sbar-legend .dot { width: 9px; height: 8px; border-radius: 0; margin-left: 8px; }
.sbar-legend .dot:first-child { margin-left: 0; }
.sbar-legend .dot[data-seg="ontime"] { background: var(--orient-600); }
.sbar-legend .dot[data-seg="missed"] { background: var(--critical-fg); }
.sbar-legend .dot[data-seg="carry"] { background: var(--orient-200); }

/* Gradient area chart */
.areachart { position: relative; }
.areachart svg { width: 100%; height: 120px; overflow: visible; }
.areachart .ar-line { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.areachart .ar-area { opacity: 0.16; }
.areachart .ar-dot { stroke: var(--neutral-0); stroke-width: 1.5; }
.areachart[data-tone="success"] .ar-line,
.areachart[data-tone="brand"] .ar-line { stroke: var(--orient-600); }
.areachart[data-tone="success"] .ar-dot,
.areachart[data-tone="brand"] .ar-dot { fill: var(--orient-600); stroke: var(--neutral-0); }
.areachart[data-tone="success"] .ar-fill-a,
.areachart[data-tone="brand"] .ar-fill-a { stop-color: var(--orient-500); }
.areachart[data-tone="critical"] .ar-line { stroke: var(--critical-fg); }
.areachart[data-tone="critical"] .ar-dot { fill: var(--critical-fg); stroke: var(--neutral-0); }
.areachart[data-tone="critical"] .ar-fill-a { stop-color: var(--critical-fg); }
.areachart .ar-fill-b { stop-color: var(--neutral-0); stop-opacity: 0; }
.ar-last {
  position: absolute; padding: 2px 8px; border-radius: 0;
  background: var(--neutral-900); color: var(--neutral-0);
  font-size: 12px; font-weight: 700; transform: translateY(-150%);
}

/* Tomorrow's opportunities */
.opp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.opp-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}
.opp-top { display: flex; align-items: center; justify-content: space-between; }
.opp-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 0;
  background: var(--neutral-50); color: var(--neutral-600);
}
.opp-icon svg.lucide { width: 17px; height: 16px; }
.opp-card[data-tone="critical"] .opp-icon { background: var(--critical-bg); color: var(--critical-fg); }
.opp-card[data-tone="warning"] .opp-icon { background: var(--warning-bg); color: var(--warning-fg); }
.opp-card[data-tone="success"] .opp-icon { background: var(--success-bg); color: var(--success-fg); }
.opp-weight { padding: 3px 8px; border-radius: 0; font-size: 12px; font-weight: 700; background: var(--neutral-100); color: var(--neutral-600); }
.opp-weight[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-strong); }
.opp-weight[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); }
.opp-weight[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); }
.opp-card strong { font-size: 14px; font-weight: 700; color: var(--neutral-900); }
.opp-card p { margin: 0; font-size: 12px; line-height: 16px; color: var(--neutral-600); flex: 1 1 auto; }
.opp-gain { font-size: 12px; color: var(--neutral-500); font-weight: 550; padding-top: 6px; border-top: 1px solid var(--neutral-100); }
.opp-gain b { color: var(--success-strong); font-weight: 750; }

/* Historical trends */
.trend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.linechart { position: relative; }
.linechart svg { width: 100%; height: 96px; overflow: visible; }
.linechart .lc-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.linechart .lc-dot { stroke: var(--neutral-0); stroke-width: 1.5; }
.linechart[data-tone="success"] .lc-line, .linechart[data-tone="success"] .lc-dot,
.linechart[data-tone="brand"] .lc-line, .linechart[data-tone="brand"] .lc-dot { stroke: var(--orient-600); }
.linechart[data-tone="success"] .lc-dot, .linechart[data-tone="brand"] .lc-dot { fill: var(--orient-600); }
.linechart[data-tone="warning"] .lc-line, .linechart[data-tone="warning"] .lc-dot,
.linechart[data-tone="critical"] .lc-line, .linechart[data-tone="critical"] .lc-dot { stroke: var(--critical-fg); }
.linechart[data-tone="warning"] .lc-dot, .linechart[data-tone="critical"] .lc-dot { fill: var(--critical-fg); }
.lc-last {
  position: absolute; padding: 1px 8px; border-radius: 0;
  background: var(--neutral-900); color: var(--neutral-0);
  font-size: 12px; font-weight: 700; transform: translateY(-140%);
}
.lc-axis { display: flex; justify-content: space-between; margin-top: 2px; }
.lc-axis span { font-size: 12px; color: var(--neutral-400); font-weight: 550; }

/* ---- Analytics hero: the two figures that define a good day.
   De-boxed like the overview KPI strip — one surface, hairline-divided columns. ---- */
.perf-hero {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--neutral-200);
  border: 1px solid var(--neutral-200); border-radius: 0; overflow: hidden;
}
.hero-metric {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px 14px;
  background: var(--neutral-0); min-width: 0;
}
.hero-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero-metric-label { font-size: 13px; font-weight: 650; color: var(--neutral-600); }
.hero-metric-target { font-size: 12px; font-weight: 650; color: var(--neutral-500); padding: 2px 8px; border-radius: 0; background: var(--neutral-50); }
.hero-metric-figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hero-metric-figure strong { font-size: 40px; line-height: 1.05; font-weight: 780; letter-spacing: -0.02em; color: var(--neutral-900); }
.hero-metric-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; }
.hero-metric-delta svg.lucide { width: 14px; height: 14px; }
.hero-metric-delta[data-tone="success"] { color: var(--success-strong); }
.hero-metric-delta[data-tone="warning"] { color: var(--warning-strong); }
.hero-metric-delta[data-tone="critical"] { color: var(--critical-strong); }
.hero-metric-sub { margin: 0; font-size: 13px; color: var(--neutral-500); }
.hero-metric .areachart { margin-top: 6px; }
.hero-metric .areachart svg { height: 88px; }

/* Per-bay utilization strip under the hero */
.perf-baystrip {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0);
}
.perf-baystrip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.perf-baystrip-head h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.perf-baystrip-head span { font-size: 12px; color: var(--neutral-500); }
.baystrip { display: flex; align-items: flex-end; gap: 10px; }
.baystrip-cell { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
/* Track shows the unused capacity as a subtle diagonal hatch (Tufte-ish ghost bar). */
.baystrip-meter {
  width: 100%; max-width: 44px; height: 64px; display: flex; align-items: flex-end;
  border-radius: 0; overflow: hidden;
  background: repeating-linear-gradient(-45deg, var(--neutral-100) 0, var(--neutral-100) 3px, var(--neutral-50) 3px, var(--neutral-50) 6px);
}
.baystrip-meter i { display: block; width: 100%; border-radius: 0; background: var(--orient-500); transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.baystrip-meter i[data-tone="high"] { background: var(--capacity-high); }
.baystrip-meter i[data-tone="ok"] { background: var(--orient-500); }
.baystrip-meter i[data-tone="low"] { background: var(--neutral-300); }
.baystrip-cell b { font-size: 12px; font-weight: 750; color: var(--neutral-800); }
.baystrip-name { font-size: 12px; color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.baystrip-cell.is-shared .baystrip-name { color: var(--neutral-500); }
.baystrip-div { width: 1px; align-self: stretch; margin: 4px 3px 20px; background: var(--neutral-200); }
.bay-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; }
.bay-legend > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 550; color: var(--neutral-500); }
.bay-legend i { width: 9px; height: 9px; border-radius: 0; flex: none; }
.bay-legend i[data-tone="high"] { background: var(--capacity-high); }
.bay-legend i[data-tone="ok"] { background: var(--orient-500); }
.bay-legend i[data-tone="low"] { background: var(--neutral-300); }
.bay-legend-note { flex-basis: 100%; margin-top: 2px; color: var(--neutral-400); font-size: 12px; }

/* Supporting metrics (the manager's five + contacts): one hairline-divided strip,
   not six boxes (mirrors the overview KPI row). */
.perf-metrics {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; background: var(--neutral-200);
  border: 1px solid var(--neutral-200); border-radius: 0; overflow: hidden;
}
.perf-metrics .outcome-card { border: 0; border-radius: 0; background: var(--neutral-0); padding: 14px 16px 10px; }

/* What helped / what hurt: two columns on one surface, split by a hairline */
.wl-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--neutral-200);
  border: 1px solid var(--neutral-200); border-radius: 0; overflow: hidden;
}
.wl-card { padding: 16px 18px; background: var(--neutral-0); }
.wl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wl-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 0; }
.wl-icon svg.lucide { width: 16px; height: 16px; }
.wl-card[data-kind="win"] .wl-icon { background: var(--success-bg); color: var(--success-fg); }
.wl-card[data-kind="loss"] .wl-icon { background: var(--critical-bg); color: var(--critical-fg); }
.wl-head h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--neutral-900); }
.wl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wl-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--neutral-100); font-size: 13px; color: var(--neutral-700); line-height: 18px; }
.wl-list li:first-child { border-top: 0; }
.wl-dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 0; }
.wl-dot[data-tone="success"] { background: var(--success-fg); }
.wl-dot[data-tone="critical"] { background: var(--critical-fg); }
.wl-text { flex: 1 1 auto; min-width: 0; }
.wl-list li b { flex: none; font-size: 12px; font-weight: 750; white-space: nowrap; }
.wl-list li b[data-tone="success"] { color: var(--success-strong); }
.wl-list li b[data-tone="critical"] { color: var(--critical-strong); }
.wl-suggest {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: 0;
  background: linear-gradient(120deg, var(--orient-50), var(--neutral-0) 70%);
  border: 1px solid var(--orient-200);
  font-size: 13px; line-height: 18px; color: var(--orient-800); font-weight: 550;
}
.wl-suggest svg.lucide { flex: none; width: 16px; height: 16px; color: var(--orient-600); margin-top: 1px; }
.wl-suggest strong { color: var(--orient-800); font-weight: 750; }

/* Journey funnel */
.funnel { display: flex; flex-direction: column; gap: 16px; }
.funnel-stage {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-areas: "info track" "info note";
  column-gap: 16px; row-gap: 4px; align-items: center;
}
.funnel-info { grid-area: info; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.funnel-label { font-size: 13px; font-weight: 650; color: var(--neutral-700); }
.funnel-info b { font-size: 18px; font-weight: 780; color: var(--neutral-900); }
.funnel-track { grid-area: track; display: flex; align-items: center; gap: 10px; }
.funnel-bar { height: 22px; border-radius: 0; background: var(--orient-500); min-width: 3px; transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.funnel-bar[data-tone="success"] { background: var(--success-fg); }
.funnel-drop { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 750; }
.funnel-drop svg.lucide { width: 13px; height: 13px; }
.funnel-drop[data-tone="warning"] { color: var(--warning-strong); }
.funnel-drop[data-tone="critical"] { color: var(--critical-strong); }
.funnel-note { grid-area: note; font-size: 12px; color: var(--neutral-500); }

/* Customer contact effort */
.contact-grid { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 14px; align-items: start; }
.contact-figure { display: flex; flex-direction: column; gap: 4px; }
.contact-figure .outcome-label { font-size: 12px; }
.contact-figure .hero-metric-figure strong { font-size: 34px; }
.contact-reasons { margin-top: 2px; }
.contact-foot { margin: 12px 0 0; font-size: 12px; line-height: 16px; color: var(--neutral-500); }

/* Carryover into tomorrow (pc- = perf carryover; distinct from Plan's .carryover-*) */
.pc-list { display: flex; flex-direction: column; width: 100%; }
.pc-row { display: grid; width: 100%; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--neutral-100); }
.pc-row:first-child { border-top: 0; }
.pc-car { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-car b { font-size: 13px; font-weight: 750; color: var(--neutral-900); }
.pc-car span { font-size: 12px; color: var(--neutral-500); }
.pc-reason { font-size: 13px; color: var(--neutral-700); }
.pc-first { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--orient-700); white-space: nowrap; }
.pc-first svg.lucide { width: 13px; height: 14px; }

/* Unify the analytics module radius with the de-boxed strips (8px, our shell radius) */
.perf-section .chart-card { border-radius: 0; }

@media (max-width: 1160px) {
  .why-grid, .trend-grid, .perf-hero, .wl-grid, .contact-grid { grid-template-columns: 1fr; }
  .perf-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pc-row { grid-template-columns: 1fr; gap: 4px; }
  .funnel-stage { grid-template-columns: 120px 1fr; }
  .perf-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================================================================
   Analytics report (overhaul): scannable, no in-page nav, no line/bar
   time-series charts. Big numbers + health tints + one readiness donut.
   ================================================================== */
.perf-report { gap: 16px; max-width: 1240px; }
/* No page title (the topbar already says "Analytics") — just the date + controls. */
.perf-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.perf-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--neutral-900); }
.perf-date { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--neutral-600); white-space: nowrap; }
.perf-date svg.lucide { width: 15px; height: 16px; color: var(--neutral-400); }
.perf-controls { display: flex; align-items: center; gap: 12px; }

/* Segmented time-range control (replaces the dropdown + compare toggle) */
.seg-range { position: relative; display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-50); }
.seg-range-btn { position: relative; z-index: 1; height: 28px; padding: 0 15px; border: 0; border-radius: 0; background: transparent; color: var(--neutral-600); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.seg-range-btn:hover { color: var(--neutral-900); }
.seg-range-btn.is-active { background: transparent; color: var(--neutral-900); box-shadow: none; }
.seg-range .seg-pill { border-radius: 0; }
.seg-range-div { position: relative; z-index: 1; width: 1px; height: 18px; background: var(--neutral-200); margin: 0 3px; }
/* Fixed min-width so the tab group doesn't resize as the date label changes per range. */
.seg-range-date { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--neutral-600); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.seg-range-date:hover { background: var(--neutral-0); color: var(--neutral-900); }
.seg-range-date svg.lucide { width: 14px; height: 15px; color: var(--neutral-400); }
.seg-range-date { position: relative; z-index: 1; }
.seg-range-date.is-open, .seg-range-date.is-active { background: var(--neutral-0); color: var(--neutral-900); box-shadow: 0 1px 2px rgba(19, 24, 33, 0.08), 0 0 0 1px var(--neutral-200); }

/* Sliding indicator pill shared by the segmented tab groups (FLIP-animated in JS) */
.seg-pill {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 0; height: 0; opacity: 0;
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: 0 1px 2px rgba(19, 24, 33, 0.08), 0 0 0 1px var(--neutral-200);
  transition: transform 0.28s cubic-bezier(0.34, 1.26, 0.5, 1), width 0.24s cubic-bezier(0.34, 1.26, 0.5, 1), height 0.2s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .seg-pill { transition: none !important; } }

/* Two-month date-range picker popover */
.perf-controls { position: relative; }
.perf-datepicker {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  padding: 16px; border-radius: 0;
  background: var(--neutral-0); border: 1px solid var(--neutral-200);
  box-shadow: 0 16px 40px -12px rgba(19, 24, 33, 0.28), 0 0 0 1px var(--neutral-150);
  animation: dp-in 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes dp-in { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .perf-datepicker { animation: none; } }
.dp-months { display: flex; gap: 22px; }
.dp-title { font-size: 13px; font-weight: 700; color: var(--neutral-900); text-align: center; margin-bottom: 10px; }
.dp-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dp-week span { text-align: center; font-size: 12px; font-weight: 700; color: var(--neutral-400); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px 0; }
.dp-cell { height: 30px; }
.dp-day { width: 32px; height: 30px; border: 0; background: transparent; border-radius: 0; color: var(--neutral-700); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.1s ease, color 0.1s ease; }
.dp-day:hover { background: var(--neutral-100); }
.dp-day.in-range { background: var(--orient-50); color: var(--orient-800); border-radius: 0; }
.dp-day.is-start { background: var(--orient-600); color: var(--neutral-0); border-radius: 0; }
.dp-day.is-end { background: var(--orient-600); color: var(--neutral-0); border-radius: 0; }
.dp-day.is-start.is-end { border-radius: 0; }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--neutral-100); }
.dp-selected { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--neutral-800); }
.dp-selected svg.lucide { width: 14px; height: 15px; color: var(--neutral-400); }
.dp-actions { display: flex; gap: 8px; }

/* Subtle press feedback on the pill / chip controls (physics: active state, <120ms). */
.seg-range-btn, .seg-range-date, .staff-chip, .dp-day, .carry-action, .attn-action, .perf-btn {
  transition: transform 0.09s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.seg-range-btn:active, .seg-range-date:active, .staff-chip:active, .dp-day:active, .carry-action:active, .attn-action:active, .perf-btn:active { transform: scale(0.96); }
.rail-button:not(:disabled):active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  .seg-range-btn:active, .seg-range-date:active, .staff-chip:active, .dp-day:active, .carry-action:active, .attn-action:active, .perf-btn:active, .rail-button:active { transform: none; }
}

/* Hero as a bento: a tall on-time card on the left, readiness + bay stacked on the right.
   White cards (no tint), calm neutral labels — the charts carry the brand colour. */
.perf-hero-row {
  flex: none;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  align-items: stretch;
}
.hero-card { display: flex; flex-direction: column; gap: 11px; padding: 18px; min-width: 0; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0); }
.ns-big { grid-column: 1; grid-row: 1 / 3; }
/* Bay utilization on top of the right column, readiness below it. */
.bay-col { grid-column: 2; grid-row: 1; }
.read-col { grid-column: 2; grid-row: 2; }

.hero-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral-500); }
.hero-chip { flex: none; font-size: 12px; font-weight: 650; color: var(--neutral-600); padding: 3px 9px; border-radius: 0; background: var(--neutral-50); border: 1px solid var(--neutral-150, var(--neutral-200)); }
.hero-figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hero-figure strong { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--neutral-900); }
.hero-delta { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 0; background: var(--success-bg); color: var(--success-strong); font-size: 13px; font-weight: 700; }
.hero-delta svg.lucide { width: 14px; height: 14px; }
.hero-sub { margin: 0; font-size: 13px; line-height: 19px; color: var(--neutral-600); max-width: 46ch; }
.hero-sub-inline { font-size: 13px; font-weight: 600; color: var(--neutral-600); }
/* Bay + readiness share one secondary figure size (smaller than the on-time north-star). */
.bay-col .hero-figure strong,
.read-col .hero-figure strong { font-size: 40px; }

.ns-week { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 14px; }
.ns-week-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.ns-week-val { font-size: 12px; font-weight: 700; color: var(--neutral-500); font-variant-numeric: tabular-nums; }
.ns-week-track { width: 100%; max-width: 40px; height: 108px; display: flex; align-items: flex-end; border-radius: 0; overflow: hidden; background: repeating-linear-gradient(-45deg, var(--neutral-100) 0, var(--neutral-100) 3px, var(--neutral-50) 3px, var(--neutral-50) 6px); }
.ns-week-bar { display: block; width: 100%; border-radius: 0; background: var(--orient-200); }
.ns-week-col.is-today .ns-week-bar { background: var(--orient-600); }
.ns-week-col.is-today .ns-week-val { color: var(--orient-700); }
.ns-week-day { font-size: 12px; font-weight: 600; color: var(--neutral-500); }
.ns-week-col.is-today .ns-week-day { color: var(--neutral-900); }
/* On-time week chart: content top-anchored, chart fills the remaining height so there's
   no dead space — the right column is compacted to keep the bars a sensible length. */
.ns-big { justify-content: flex-start; }
.ns-big .ns-week { flex: 1 1 auto; align-items: stretch; margin-top: 20px; padding-top: 0; }
.ns-big .ns-week-col { justify-content: flex-end; }
.ns-big .ns-week-track { flex: 1 1 auto; height: auto; max-width: 44px; min-height: 150px; }

/* Readiness / bay bodies. Bay bars grow to fill the column height (no dead space). */
.read-head h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--neutral-900); }
.read-head p { margin: 0; font-size: 13px; line-height: 17px; color: var(--neutral-600); }
.read-body { display: flex; align-items: center; gap: 18px; }
.read-body .donut { width: 118px; height: 118px; flex: none; }
.read-col .read-body { margin-block: auto; }
.bay-col .baystrip { margin-top: auto; }
.bay-col .baystrip-meter { height: 100px; }
/* Compact readiness legend (drop the per-row note) so the right column isn't overly tall. */
.read-col .read-legend-copy span { display: none; }
/* Readiness donut: teal / pale-teal / amber (on-brand; no green, late reads as a warning) */
.read-col .donut-arc[data-tone="success"] { stroke: var(--orient-600); }
.read-col .donut-arc[data-tone="brand"] { stroke: var(--orient-300); }
.read-col .donut-arc[data-tone="critical"] { stroke: var(--warning-fg); }
.read-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.read-legend li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--neutral-100); }
.read-legend li:first-child { border-top: 0; }
/* Readiness legend rows are two lines (label + note); anchor the swatch to the label. */
.read-col .read-legend li { align-items: flex-start; }
.read-col .read-legend .dot { margin-top: 3px; }
.read-col .read-legend-num { text-align: right; }
/* Legend dots follow the donut teal ramp by default (used by the lost breakdown) */
.read-legend .dot { flex: none; width: 10px; height: 10px; border-radius: 0; }
.read-legend .dot[data-tone="success"] { background: var(--orient-600); }
.read-legend .dot[data-tone="brand"] { background: var(--orient-500); }
.read-legend .dot[data-tone="active"] { background: var(--orient-400); }
.read-legend .dot[data-tone="warning"] { background: var(--orient-300); }
.read-legend .dot[data-tone="waiting"] { background: var(--orient-200); }
.read-legend .dot[data-tone="critical"] { background: var(--critical-fg); }
.read-col .read-legend .dot[data-tone="success"] { background: var(--orient-600); }
.read-col .read-legend .dot[data-tone="brand"] { background: var(--orient-300); }
.read-col .read-legend .dot[data-tone="critical"] { background: var(--warning-fg); }
.read-legend-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.read-legend-copy b { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.read-legend-copy span { font-size: 12px; color: var(--neutral-500); }
.read-legend-num { flex: none; text-align: right; display: flex; align-items: baseline; gap: 6px; }
.read-legend-num b { font-size: 15px; font-weight: 780; color: var(--neutral-900); font-variant-numeric: tabular-nums; }
.read-legend-num span { font-size: 12px; font-weight: 600; color: var(--neutral-500); min-width: 30px; }

/* Readiness as a horizontal stacked bar — distinct from a donut, reads as proportions. */
.readbar { display: flex; gap: 3px; height: 16px; margin-top: 2px; }
.readbar-seg { border-radius: 0; min-width: 5px; transition: opacity 0.12s ease; cursor: default; }
.readbar:hover .readbar-seg { opacity: 0.5; }
.readbar-seg:hover { opacity: 1; }
.readbar-seg[data-tone="success"] { background: var(--orient-600); }
.readbar-seg[data-tone="brand"] { background: var(--orient-300); }
.readbar-seg[data-tone="critical"] { background: var(--warning-fg); }
.read-col .read-legend { margin-top: 6px; }
.read-col .read-legend li { padding: 6px 0; }

/* Time-lost + carryover, side by side, equal height (bento). Carryover a touch wider. */
.perf-two-lc { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 16px; align-items: stretch; }
.perf-two-lc .soft-card { display: flex; flex-direction: column; }
.lost-card .read-body { gap: 24px; align-items: center; margin-top: auto; margin-bottom: auto; }
.lost-card .read-body .donut { width: 150px; height: 150px; }
.lost-card .read-legend { max-width: none; }

/* Carryover: one row per car (plate + reason + status + action on a single line). */
.carry-list { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; }
.carry-item {
  display: grid;
  grid-template-columns: minmax(128px, auto) minmax(0, 1fr) auto auto;
  grid-template-areas: "car reason status action";
  gap: 14px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--neutral-100);
}
.carry-item:first-child { border-top: 0; }
.carry-car { grid-area: car; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.carry-car b { font-size: 13px; font-weight: 750; color: var(--neutral-900); }
.carry-car span { font-size: 12px; color: var(--neutral-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carry-reason { grid-area: reason; font-size: 13px; color: var(--neutral-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carry-status { grid-area: status; justify-self: end; }
.carry-action { grid-area: action; justify-self: end; }

.perf-block { display: flex; flex-direction: column; gap: 12px; }

/* Supporting metrics: white tiles in one hairline-divided strip. Health shows only in
   the colored trend line (no full-card tint), so gray body text stays legible. */
.tile-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--neutral-200); border-radius: 0; overflow: hidden;
}
.stat-tile {
  display: flex; flex-direction: column; gap: 0;
  padding: 16px 16px 16px;
  background: var(--neutral-0);
  /* Full-height column divider that meets the card's top + bottom borders. */
  border-right: 1px solid var(--neutral-200);
}
.stat-tile:last-child { border-right: 0; }
.stat-tile-label { font-size: 13px; font-weight: 600; color: var(--neutral-600); }
/* More air between the label and the number, and a little under the number. */
.stat-tile-value { margin: 18px 0 6px; font-size: 30px; line-height: 1.05; font-weight: 780; letter-spacing: -0.02em; color: var(--neutral-900); }
.stat-tile-sub { font-size: 12px; color: var(--neutral-500); }
/* Full-bleed separator (touches the tile edges); sits at the bottom with generous,
   uniform spacing above (auto gap ≥16, via min-height) and 16px inside. */
.stat-tile-status {
  display: flex; align-items: center; gap: 5px;
  margin: auto -16px 0; padding: 15px 14px 0;
  border-top: 1px solid var(--neutral-150, var(--neutral-100));
  font-size: 12px; font-weight: 650; color: var(--neutral-600);
  white-space: nowrap; overflow: hidden;
}
.stat-tile-status svg.lucide { width: 13px; height: 13px; flex: none; }
.stat-tile-status[data-tone="good"] { color: var(--success-strong); }
.stat-tile-status[data-tone="watch"] { color: var(--warning-strong); }
.stat-tile-status[data-tone="bad"] { color: var(--critical-strong); }

/* Two-up soft cards (where time was lost + bay utilization) */
.perf-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.soft-card { padding: 20px 22px; border-radius: 0; border: 1px solid var(--neutral-200); background: var(--neutral-0); }
.soft-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.soft-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--neutral-900); }
.soft-head span { font-size: 12px; color: var(--neutral-500); }

/* Where time was lost — ranked breakdown bars */
.lost-list { display: flex; flex-direction: column; gap: 14px; }
.lost-row { display: flex; align-items: center; gap: 12px; }
.lost-rank { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 0; background: var(--neutral-100); color: var(--neutral-600); font-size: 12px; font-weight: 700; }
.lost-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lost-top { display: flex; justify-content: space-between; gap: 8px; }
.lost-top span { font-size: 13px; font-weight: 550; color: var(--neutral-700); }
.lost-top b { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.lost-track { height: 8px; border-radius: 0; background: var(--neutral-100); overflow: hidden; }
.lost-track i { display: block; height: 100%; border-radius: 0; background: var(--orient-500); }
.lost-row:nth-child(1) .lost-track i { background: var(--orient-700); }
.lost-row:nth-child(2) .lost-track i { background: var(--orient-600); }
.lost-row:nth-child(3) .lost-track i { background: var(--orient-500); }
.lost-row:nth-child(4) .lost-track i { background: var(--orient-400); }
.lost-row:nth-child(n+5) .lost-track i { background: var(--orient-300); }

/* Needs your attention — a compact table */
.attn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.attn-table th { padding: 0 10px 10px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--neutral-500); border-bottom: 1px solid var(--neutral-200); }
.attn-table td { padding: 14px 10px; border-bottom: 1px solid var(--neutral-100); vertical-align: middle; }
.attn-table tr:last-child td { border-bottom: 0; }
/* Outer columns align with the card's own padding (not double-inset). */
.attn-table th:first-child, .attn-table td:first-child { padding-left: 0; }
.attn-table th:last-child, .attn-table td:last-child { padding-right: 0; }
.attn-table th.attn-right, .attn-table td.attn-right { text-align: right; }
.attn-action { min-width: 138px; justify-content: center; }
.attn-car { display: flex; flex-direction: column; gap: 2px; }
.attn-car b { font-size: 13px; font-weight: 750; color: var(--neutral-900); }
.attn-car span { font-size: 12px; color: var(--neutral-500); }
.attn-cause { color: var(--neutral-700); }
.attn-impact { color: var(--neutral-600); }
.attn-status { display: inline-flex; padding: 3px 10px; border-radius: 0; font-size: 12px; font-weight: 700; }
.attn-status[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-strong); }
.attn-status[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); }
.attn-status[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); }
.attn-table .attn-right .btn { margin-left: auto; }
.attn-table .btn svg.lucide { width: 13px; height: 14px; }

@media (max-width: 1080px) {
  .perf-hero-row { grid-template-columns: 1fr; grid-template-rows: none; }
  .ns-big, .read-col, .bay-col { grid-column: 1; grid-row: auto; }
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-tile:nth-child(3n) { border-right: 0; }
  .stat-tile:nth-child(-n+3) { border-bottom: 1px solid var(--neutral-200); }
  .perf-two-lc { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .read-body { flex-direction: column; align-items: stretch; }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-tile:nth-child(3n) { border-right: 1px solid var(--neutral-200); }
  .stat-tile:nth-child(2n) { border-right: 0; }
  .stat-tile:nth-child(-n+4) { border-bottom: 1px solid var(--neutral-200); }
  .ns-figure strong { font-size: 48px; }
}

/* Compact group header: chevron · title · count sit together on the left (no
   subtext, count adjacent — not pushed to the far right). */
.overview-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px 8px 20px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

/* One-line rule under the Queued group: assignments are provisional (a car takes whichever bay
   frees first, ordered by promise), so the per-row bay reads as a suggestion not a commitment. */
.overview-group-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0 20px 8px 41px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--neutral-500);
}
.overview-group-hint svg.lucide {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  color: var(--neutral-400);
}

.overview-group-chevron {
  flex: none;
  width: 13px;
  height: 12px;
  color: var(--neutral-400);
  transition: transform 0.15s ease;
}
.overview-group.is-collapsed .overview-group-chevron { transform: rotate(-90deg); }

.overview-group strong {
  flex: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.overview-group b {
  flex: none;
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 0;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Group headers carry a low-weight tone tint (red=act now, indigo=monitor/in-service,
   green=ready, amber=reassign/waiting, gray=arriving). The tint sits on the full-width
   head so it bleeds edge-to-edge (past the select checkbox, out to the divider);
   the title picks up the strong tone. */
.overview-list-section[data-tone="critical"] .overview-group-head { background: var(--critical-bg); }
.overview-list-section[data-tone="critical"] .overview-group strong { color: var(--critical-strong); }
.overview-list-section[data-tone="critical"] .overview-group .overview-group-chevron { color: var(--critical-fg); }
.overview-list-section[data-tone="warning"] .overview-group-head { background: var(--warning-bg); }
.overview-list-section[data-tone="warning"] .overview-group strong { color: var(--warning-strong); }
.overview-list-section[data-tone="waiting"] .overview-group-head { background: var(--waiting-bg); }
.overview-list-section[data-tone="waiting"] .overview-group strong { color: var(--waiting-strong); }
.overview-list-section[data-tone="active"] .overview-group-head { background: var(--indigo-50); }
.overview-list-section[data-tone="active"] .overview-group strong { color: var(--indigo-700); }
.overview-list-section[data-tone="active"] .overview-group .overview-group-chevron { color: var(--indigo-500); }
/* Queued for service uses the brand blue so it reads distinctly from amber Holding. */
.overview-list-section[data-tone="orient"] .overview-group-head { background: var(--orient-50); }
.overview-list-section[data-tone="orient"] .overview-group strong { color: var(--orient-700); }
.overview-list-section[data-tone="orient"] .overview-group .overview-group-chevron { color: var(--orient-500); }
.overview-list-section[data-tone="success"] .overview-group-head { background: var(--success-bg); }
.overview-list-section[data-tone="success"] .overview-group strong { color: var(--success-strong); }
.overview-list-section[data-tone="neutral"] .overview-group-head { background: var(--neutral-50); }
/* The count badge sits on white so it stays legible on the tint. */
.overview-list-section .overview-group b { background: var(--neutral-0); border: 1px solid var(--neutral-200); }

.overview-list-rows {
  display: grid;
  position: relative;
}

/* Hover magic-move: a single light band glides behind the hovered row — full width,
   flat (no inset, no rounded corners), so it reads as the row's own hover state. */
.hover-pill {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0;
  z-index: 0;
  border-radius: 0;
  background: var(--neutral-25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 0.24s cubic-bezier(0.34, 1.1, 0.5, 1), height 0.24s cubic-bezier(0.34, 1.1, 0.5, 1), opacity 0.16s ease;
}
.hover-pill.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hover-pill { transition: opacity 0.16s ease; } }

/* Single-line rows: fixed height, columns drop as the list narrows. */
.overview-list-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  height: 60px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid var(--neutral-100);
  background: transparent;
  color: inherit;
  text-align: left;
  transition: background 0.14s ease;
}

/* Static attention flag used only under prefers-reduced-motion (the animated flash is
   skipped there). Full tint, not a side-stripe. */
.overview-list-row.wl-row-flagged, .wl-row.wl-row-flagged { background: rgba(19, 131, 182, 0.12); }

.overview-list-row.is-arrival {
  cursor: pointer;
}

.overview-list-row.is-arrival:active {
  transform: scale(0.997);
}

.overview-list-row.is-dragging {
  opacity: 0.45;
}

.overview-list-row.is-selected {
  background: var(--orient-25);
  box-shadow: inset 0 0 0 1px var(--orient-200);
}

/* Exclude the empty (alignment-only) flow slot — otherwise a selected on-track/ready row shows a
   stray white bordered rectangle where its (absent) status pill would be. */
.overview-list-row.is-selected .overview-row-flow:not(.is-empty) {
  border-color: var(--orient-200);
  background: var(--neutral-0);
}

.overview-row-status {
  flex: none;
  display: grid;
  place-items: center;
}

.overview-row-plate {
  flex: none;
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 750;
  white-space: nowrap;
}

.overview-row-vehicle {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-row-trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.overview-row-flow,
.overview-row-suggestion,
.overview-row-job,
.overview-row-risk {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-row-flow {
  flex: none;
  max-width: 120px;
  padding: 2px 8px;
  border: 1px solid var(--neutral-400);
  border-radius: 0;
  background: var(--neutral-25);
  color: var(--neutral-750);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

/* Leading square status dot in the pill's own colour. */
.overview-row-flow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  vertical-align: middle;
  background: currentColor;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.22);
}

/* Stroke sits a couple shades up from the fill (the tone's -fg), so the pill stays
   legible against a selected/tinted row background. */
.overview-row-flow[data-tone="critical"] {
  background: var(--critical-bg);
  border-color: var(--critical-fg);
  color: var(--critical-strong);
}

.overview-row-flow[data-tone="warning"] {
  background: var(--warning-bg);
  border-color: var(--warning-fg);
  color: var(--warning-strong);
}

.overview-row-flow[data-tone="active"] {
  background: var(--indigo-50);
  border-color: var(--indigo-600);
  color: var(--indigo-700);
}

.overview-row-flow[data-tone="waiting"] {
  background: var(--waiting-bg);
  border-color: var(--waiting-fg);
  color: var(--waiting-strong);
}
.overview-row-flow[data-tone="orient"] {
  background: var(--orient-50);
  border-color: var(--orient-500);
  color: var(--orient-700);
}

.overview-row-flow[data-tone="success"] {
  background: var(--success-bg);
  border-color: var(--success-fg);
  color: var(--success-strong);
}

.overview-row-job {
  flex: none;
  max-width: 132px;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

/* Next-action label — plain muted text, not a competing pill */
.overview-row-suggestion {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-width: 60px;
  height: 24px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.overview-row-suggestion-legacy[data-tone="critical"] {
  background: var(--critical-bg);
  color: var(--critical-strong);
}

.overview-row-suggestion[data-tone="warning"] {
  background: var(--warning-bg);
  color: var(--warning-strong);
}

.overview-row-suggestion[data-tone="success"] {
  background: var(--success-bg);
  color: var(--success-strong);
}

/* Inline action affordance: the next-action cell becomes a clickable verb (opens the car, where the
   same action is primary — never a dead "Open"). Tinted by urgency; the arrow reveals on row hover
   so the resting row stays calm. */
button.overview-row-suggestion { border: 0; font: inherit; cursor: pointer; }
.overview-row-suggestion.is-action { gap: 3px; padding: 0 7px; border-radius: 0; background: none; color: var(--neutral-600); font-weight: 650; transition: background .14s ease, color .14s ease; }
.overview-row-suggestion.is-action[data-tone="critical"] { color: var(--critical-strong); background: none; }
.overview-row-suggestion.is-action[data-tone="warning"] { color: var(--warning-strong); background: none; }
.overview-row-suggestion.is-action[data-tone="primary"] { color: var(--orient-700); background: none; }
.overview-row-suggestion.is-action svg.lucide { width: 13px; height: 13px; opacity: 0; transform: translateX(-3px); transition: opacity .14s ease, transform .14s ease; }
.overview-list-row:hover .overview-row-suggestion.is-action svg.lucide { opacity: .75; transform: translateX(0); }
.overview-list-row .overview-row-suggestion.is-action:hover { background: var(--neutral-100); }
@media (prefers-reduced-motion: reduce) { .overview-row-suggestion.is-action svg.lucide { transition: opacity .14s ease; transform: none; } }

/* Leading severity glyph in the risk cell so urgency scans down the column. */
.overview-row-risk { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.wl-risk-ico { flex: none; width: 13px; height: 13px; }

.overview-row-time {
  flex: none;
  min-width: 42px;
  text-align: right;
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 750;
}

.overview-row-time[data-tone="critical"] {
  color: var(--critical-strong);
}

.overview-row-time[data-tone="warning"] {
  color: var(--warning-strong);
}

.overview-row-due {
  flex: none;
  min-width: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}
.overview-row-due svg.lucide { width: 11px; height: 11px; color: var(--neutral-400); flex: none; }
.overview-row-due[data-tone="warning"] svg.lucide { color: var(--warning-strong); }
.overview-row-due[data-tone="critical"] svg.lucide { color: var(--critical-strong); }
/* Waiting-for-a-bay duration on the arrival rows (hourglass + elapsed). Muted — it's context,
   not the deadline. Empty span still reserves the column so the promise column stays aligned. */
.overview-row-wait {
  flex: none;
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}
.overview-row-wait svg.lucide { width: 11px; height: 11px; color: var(--neutral-400); flex: none; }

.overview-row-due[data-tone="warning"] { color: var(--warning-strong); }
.overview-row-due[data-tone="critical"] { color: var(--critical-strong); }

/* Promise timeline — the "By time" lens on the work list */
.tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--neutral-150);
  margin-bottom: 4px;
}
.tl-head-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 750; color: var(--neutral-900); }
.tl-head-title i { width: 16px; height: 16px; color: var(--neutral-500); }
.tl-head-stats { display: inline-flex; align-items: center; gap: 16px; }
.tl-stat { font-size: 12px; font-weight: 600; color: var(--neutral-600); }
.tl-stat b { font-weight: 800; color: var(--neutral-900); margin-right: 3px; }
.tl-stat[data-tone="critical"] b { color: var(--critical-strong); }
.tl-stat[data-tone="warning"] b { color: var(--warning-strong); }

.tl-track { display: flex; flex-direction: column; }
.tl-hour { display: flex; align-items: center; gap: 10px; margin: 12px 4px 4px; }
.tl-hour span { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--neutral-400); }
.tl-hour::after { content: ""; flex: 1; height: 1px; background: var(--neutral-150); }

.tl-row {
  display: grid;
  grid-template-columns: 50px 10px 116px 1fr auto 30px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.12s ease;
}
.tl-row:hover { background: var(--neutral-50); }
.tl-row.is-selected { background: var(--orient-50); box-shadow: inset 0 0 0 1px var(--orient-200); }
.tl-time { text-align: right; font-size: 13px; font-weight: 750; color: var(--neutral-800); }
.tl-time[data-past="true"] { color: var(--critical-strong); }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--neutral-300); }
.tl-dot[data-tone="critical"] { background: var(--critical-strong); }
.tl-dot[data-tone="warning"] { background: var(--warning-strong); }
.tl-dot[data-tone="success"] { background: var(--success-strong); }
.tl-dot[data-tone="waiting"] { background: var(--waiting-strong); }
.tl-plate { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.tl-vehicle { font-size: 13px; color: var(--neutral-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-flow { justify-self: end; }
.tl-owner { display: inline-flex; justify-content: flex-end; }

.tl-now { display: flex; align-items: center; gap: 9px; margin: 6px 4px; }
.tl-now-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orient-500); box-shadow: 0 0 0 4px var(--orient-100); flex: none; }
.tl-now-label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--orient-700); flex: none; }
.tl-now-line { flex: 1; height: 2px; border-radius: 0; background: linear-gradient(90deg, var(--orient-400), transparent); }
/* Hour header on the Time tab reuses the standard section-header shell; the clock
   icon sits where the collapse chevron does on the other tabs. */
.tl-group { cursor: default; }
.tl-group .tl-group-ico,
.tl-group > svg.lucide { flex: none; width: 14px; height: 14px; color: var(--neutral-400); }
.tl-now { margin: 8px 12px; }

.overview-row-risk {
  flex: none;
  min-width: 74px;
  text-align: right;
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.overview-row-risk[data-tone="critical"] {
  color: var(--critical-strong);
}

.overview-row-risk[data-tone="warning"] {
  color: var(--warning-strong);
}

.overview-row-risk[data-tone="success"] {
  color: var(--success-strong);
}

.overview-row-owner {
  flex: none;
  display: flex;
}

.overview-row-grip {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--neutral-400);
}

.overview-row-grip svg.lucide {
  width: 15px;
  height: 16px;
}

/* Arrival drag handle sits in the leftmost (status) slot */
.arrival-grip {
  display: grid;
  place-items: center;
  width: 22px;
  height: 24px;
  border-radius: 0;
  color: var(--neutral-400);
  cursor: grab;
}
.overview-list-row.is-arrival:hover .arrival-grip { color: var(--neutral-600); background: var(--neutral-100); }
.arrival-grip svg.lucide { width: 15px; height: 16px; }

/* Progress ring on a white surface. */
.overview-row-progress {
  flex: none;
  display: flex;
  align-items: center;
}

/* Ring + number beside it (number sits to the side, not cramped inside). */
.pring {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pring-svg {
  flex: none;
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
}

.pring-track {
  fill: none;
  stroke: var(--neutral-200);
  stroke-width: 3.4;
}

.pring-arc {
  fill: none;
  stroke: var(--neutral-400);
  stroke-width: 3.4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}

.pring[data-tone="success"] .pring-arc { stroke: var(--success-fg); }
.pring[data-tone="active"] .pring-arc { stroke: var(--indigo-600); }
.pring[data-tone="warning"] .pring-arc { stroke: var(--warning-fg); }
.pring[data-tone="critical"] .pring-arc { stroke: var(--critical-fg); }

.pring-num {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: var(--neutral-700);
  font-variant-numeric: tabular-nums;
}

/* Progressive disclosure: hide least-critical columns as the list narrows
   (e.g. when the car detail panel is open). */
@container worklist (max-width: 640px) {
  .wl-col-progress {
    display: none;
  }
}

@container worklist (max-width: 580px) {
  .wl-col-suggestion,
  .wl-col-wait,
  .wl-col-job {
    display: none;
  }
}

@container worklist (max-width: 470px) {
  .wl-col-flow {
    display: none;
  }
}

@container worklist (max-width: 380px) {
  .wl-col-vehicle,
  .wl-col-risk {
    display: none;
  }
}

.overview-floor {
  position: relative;
}

.overview-floor-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 16px 16px;
}

/* Flat subsections separated by whitespace + a hairline label, no nested cards. */
.overview-subsection {
  min-width: 0;
  padding-top: 14px;
}

.overview-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.overview-subhead span {
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.overview-subhead em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 500;
}

/* 2x3 on laptop-width floors, 3x2 once the floor card is wide enough.
   Compound selector beats the base `.live-bay-grid` (3-col) that follows later. */
.live-bay-grid.overview-bay-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3 columns only when the floor is genuinely wide; expanding the sidebar (or a
   laptop-width screen) narrows the floor below this and drops to a 2×3 grid. */
@container floor (min-width: 680px) {
  .live-bay-grid.overview-bay-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.overview-queue-kanban {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container floor (max-width: 460px) {
  .overview-queue-kanban {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Worklist ---------- */

.worklist {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  box-shadow: var(--shadow-low);
  overflow: hidden;
}

.worklist-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-color: var(--neutral-300) transparent;
  scrollbar-width: thin;
}

.worklist-scroll::-webkit-scrollbar {
  height: 10px;
}

.worklist-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.worklist-scroll::-webkit-scrollbar-thumb {
  border: 3px solid var(--neutral-0);
  border-radius: 0;
  background: var(--neutral-300);
}

.worklist-head {
  --row-bg: var(--neutral-25);
  position: sticky;
  top: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: var(--worklist-cols);
  gap: var(--wl-gap);
  align-items: center;
  width: max(100%, var(--worklist-min-width));
  padding: 10px var(--wl-pad-x);
  background: var(--row-bg);
  border-bottom: 1px solid var(--neutral-100);
}

.worklist-head span {
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

.wl-group {
  position: sticky;
  left: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px var(--wl-pad-x);
  border: 0;
  border-bottom: 1px solid var(--neutral-100);
  text-align: left;
  background: var(--neutral-50);
}

.wl-group[data-tone="critical"] {
  background: var(--critical-bg);
}

.wl-group[data-tone="success"] {
  background: var(--success-bg);
}

.wl-group svg.lucide {
  width: 14px;
  height: 14px;
  color: var(--neutral-500);
  transition: transform 0.15s ease;
}

.wl-group.is-collapsed svg.lucide {
  transform: rotate(-90deg);
}

.wl-group[data-tone="critical"] svg.lucide {
  color: var(--critical-fg);
}

.wl-group[data-tone="success"] svg.lucide {
  color: var(--success-fg);
}

.wl-group-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--neutral-700);
}

.wl-group[data-tone="critical"] .wl-group-title {
  color: var(--critical-strong);
}

.wl-group[data-tone="success"] .wl-group-title {
  color: var(--success-strong);
}

.wl-group-count {
  display: inline-grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 24px;
  padding: 0;
  border-radius: 0;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--neutral-700);
}

.wl-group-note {
  font-size: 13px;
  color: var(--neutral-500);
}

.wl-group[data-tone="critical"] .wl-group-note {
  color: var(--critical-fg);
}

.wl-group[data-tone="success"] .wl-group-note {
  color: var(--success-fg);
}

.wl-row {
  --row-bg: var(--neutral-0);
  position: relative;
  display: grid;
  grid-template-columns: var(--worklist-cols);
  gap: var(--wl-gap);
  align-items: center;
  width: max(100%, var(--worklist-min-width));
  padding: 12px var(--wl-pad-x);
  border-bottom: 1px solid var(--neutral-100);
  background: var(--row-bg);
  cursor: pointer;
  transition: background 0.14s ease;
}

.wl-row:last-child {
  border-bottom: 0;
}

.wl-row:hover {
  --row-bg: var(--neutral-25);
  background: var(--row-bg);
}

/* Selected: full-surface tint + even 1px border, no one-sided stripe. */
.wl-row.is-selected {
  --row-bg: var(--orient-50);
  background: var(--row-bg);
  box-shadow: inset 0 0 0 1px var(--orient-300);
}

.wl-row.is-selected:hover {
  --row-bg: var(--orient-50);
  background: var(--row-bg);
}

.worklist.is-drawer-compact .worklist-head,
.worklist.is-drawer-compact .wl-row {
  grid-template-columns: var(--wl-check) 142px 118px 72px 64px 72px minmax(116px, 1fr) 34px 108px;
  width: 100%;
  min-width: 0;
}

.worklist.is-drawer-compact .wl-col-job,
.worklist.is-drawer-compact .wl-col-loc,
.worklist.is-drawer-compact .wl-job,
.worklist.is-drawer-compact .wl-loc {
  display: none;
}

.worklist.is-drawer-compact .wl-pin-right {
  position: static;
  z-index: auto;
  align-self: auto;
  background: transparent;
  box-shadow: none;
}

.worklist.is-drawer-compact .wl-pin,
.worklist.is-drawer-compact .wl-col-workflow.wl-pin {
  position: static;
  z-index: auto;
  align-self: auto;
  background: transparent;
  box-shadow: none;
}

.worklist.is-drawer-compact .worklist-scroll.is-scrolled .wl-col-workflow.wl-pin::after {
  display: none;
}

.worklist.is-drawer-compact .wl-col-check {
  padding-left: 0;
}

.worklist.is-drawer-compact .wl-col-check::before {
  display: none;
}

.worklist.is-drawer-compact .wl-action {
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.worklist.is-drawer-compact .btn-row-action {
  min-width: 104px;
}

.wl-pin {
  position: sticky;
  z-index: 5;
  align-self: stretch;
  background: var(--row-bg);
  box-shadow: var(--wl-gap) 0 0 var(--row-bg);
}

.worklist-head .wl-pin {
  z-index: 14;
}

.wl-pin-right {
  position: sticky;
  right: var(--wl-pad-x);
  z-index: 5;
  align-self: stretch;
  background: var(--row-bg);
  box-shadow: calc((var(--wl-gap) + 1px) * -1) 0 0 var(--row-bg), -1px 0 0 var(--neutral-100);
}

.worklist-head .wl-pin-right {
  z-index: 14;
}

.wl-col-check {
  left: var(--wl-pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--wl-pad-x);
  box-shadow: calc(var(--wl-gap) + var(--wl-pad-x)) 0 0 var(--row-bg);
}

.wl-col-check::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--wl-pad-x) * -1);
  width: var(--wl-pad-x);
  background: var(--row-bg);
}

.wl-col-check > * {
  position: relative;
  z-index: 1;
}

.wl-car,
.wl-head-car {
  left: calc(var(--wl-pad-x) + var(--wl-check) + var(--wl-gap));
}

.wl-car {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wl-col-workflow.wl-pin {
  left: calc(var(--wl-pad-x) + var(--wl-check) + var(--wl-gap) + var(--wl-car) + var(--wl-gap));
  display: flex;
  align-items: center;
  box-shadow: calc(var(--wl-gap) + 1px) 0 0 var(--row-bg), 1px 0 0 var(--neutral-100);
}

.worklist-scroll.is-scrolled .wl-col-workflow.wl-pin::after {
  content: "";
  position: absolute;
  top: 0;
  right: -168px;
  bottom: 0;
  width: 168px;
  pointer-events: none;
  background: var(--row-bg);
}

.wl-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--neutral-300);
  border-radius: 0;
  background: var(--neutral-0);
  color: transparent;
}

.wl-check svg.lucide {
  width: 12px;
  height: 12px;
  stroke-width: 3;
  fill: none;
}

.wl-row.is-selected .wl-check {
  border-color: var(--orient-600);
  background: var(--orient-600);
  color: var(--neutral-0);
}

.wl-car .plate {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--neutral-900);
}

.wl-row.is-selected .wl-car .plate {
  color: var(--orient-900);
}

.wl-car .vehicle {
  display: block;
  font-size: 13px;
  line-height: 18px;
  color: var(--neutral-500);
}

.chip {
  display: inline-grid;
  grid-auto-flow: column;
  place-items: center;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 24px;
  padding: 0 10px;
  border-radius: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
}
/* Every chip carries a stroke in its own status colour (not just a fill). */
.chip[data-tone="active"] { border-color: var(--indigo-200); }
.chip[data-tone="waiting"] { border-color: var(--waiting-border); }
.chip[data-tone="orient"] { border-color: var(--orient-200); }
.chip[data-tone="warning"] { border-color: var(--warning-border); }
.chip[data-tone="critical"] { border-color: var(--critical-border); }
.chip[data-tone="success"] { border-color: var(--success-border); }

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.chip.no-dot::before {
  display: none;
}

.chip[data-tone="active"] {
  background: var(--indigo-50);
  color: var(--indigo-700);
}

.chip[data-tone="waiting"] {
  background: var(--waiting-bg);
  color: var(--waiting-fg);
}
.chip[data-tone="orient"] {
  background: var(--orient-50);
  color: var(--orient-700);
}

.chip[data-tone="warning"] {
  background: var(--warning-bg);
  color: var(--warning-strong);
}

.chip[data-tone="critical"] {
  background: var(--critical-bg);
  color: var(--critical-fg);
}

.chip[data-tone="success"] {
  background: var(--success-bg);
  color: var(--success-fg);
}

.wl-job {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wl-owner {
  justify-content: center;
}

.progress-inline {
  display: grid;
  grid-template-columns: 16px 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.progress-inline svg.lucide {
  width: 15px;
  height: 16px;
  fill: none;
}

.progress-inline[data-tone="critical"] {
  color: var(--critical-fg);
}

.progress-inline[data-tone="active"] {
  color: var(--indigo-700);
}

.progress-inline[data-tone="waiting"] {
  color: var(--neutral-500);
}

.progress-inline[data-tone="success"] {
  color: var(--success-fg);
}

.progress-count {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
}

.progress-rail {
  position: relative;
  height: 4px;
  min-width: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--neutral-200);
}

.progress-rail span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  border-radius: inherit;
  background: currentColor;
}

.progress-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 24px;
  flex: none;
  color: var(--neutral-500);
}

.progress-badge[data-tone="critical"] {
  color: var(--critical-fg);
}

.progress-badge[data-tone="active"] {
  color: var(--indigo-700);
}

.progress-badge[data-tone="waiting"] {
  color: var(--neutral-500);
}

.progress-badge[data-tone="success"] {
  color: var(--success-fg);
}

.progress-ring {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--neutral-0) 56%, transparent 58%),
    conic-gradient(currentColor calc(var(--progress) * 1%), var(--neutral-200) 0);
}

.progress-ring-small {
  width: 24px;
  height: 24px;
  background:
    radial-gradient(circle at center, var(--neutral-900) 55%, transparent 57%),
    conic-gradient(currentColor calc(var(--progress) * 1%), rgba(255, 255, 255, 0.2) 0);
}

.progress-hover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 25;
  display: grid;
  grid-template-columns: 24px auto auto auto;
  align-items: center;
  gap: 8px;
  min-width: 190px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: var(--neutral-900);
  color: #f4f4f5;
  box-shadow: 0 8px 20px rgba(23, 26, 33, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  white-space: nowrap;
}

.progress-hover strong {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.progress-hover span:not(.progress-ring) {
  color: rgba(244, 244, 245, 0.68);
  font-size: 14px;
  font-weight: 650;
}

.progress-hover em {
  color: #f4f4f5;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}

.progress-badge:hover .progress-hover,
.progress-badge:focus-visible .progress-hover {
  opacity: 1;
  transform: translate(-50%, 0);
}

.wl-job .job-name,
.wl-loc .loc-name {
  display: block;
  overflow: hidden;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--neutral-800);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-place {
  min-width: 0;
}

.wl-place span {
  display: block;
  overflow: hidden;
  color: var(--neutral-600);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-place span[data-tone="critical"] {
  color: var(--critical-fg);
}

.wl-place span[data-tone="waiting"] {
  color: var(--waiting-fg);
}

.wl-job .job-sub,
.wl-loc .loc-sub {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-500);
}

.wl-loc .loc-sub[data-tone="critical"] {
  color: var(--critical-fg);
  font-weight: 600;
}

.wl-loc .loc-sub[data-tone="waiting"] {
  color: var(--waiting-fg);
  font-weight: 600;
}

.wl-time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

.time-label {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--neutral-500);
}

.wl-time strong {
  display: block;
  overflow: hidden;
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-time strong[data-tone="critical"] {
  color: var(--critical-fg);
}

.wl-time strong[data-tone="warning"] {
  color: var(--warning-strong);
}

.wl-time strong[data-tone="success"] {
  color: var(--success-fg);
}

.wl-risk {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--neutral-700);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

.wl-risk .risk-copy {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-risk strong,
.wl-risk em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-risk strong {
  font-size: 13px;
  line-height: 16px;
}

.wl-risk em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 600;
}

.risk-delta {
  flex: none;
  color: currentColor;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  text-align: right;
}

.risk-mark {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.wl-risk[data-tone="critical"] {
  color: var(--critical-fg);
}

.wl-risk[data-tone="warning"] {
  color: var(--warning-strong);
}

.wl-risk[data-tone="success"] {
  color: var(--success-fg);
}

.pickup-state {
  display: inline-grid;
  place-items: center;
  height: 20px;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 0;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}

.pickup-state[data-tone="critical"] {
  background: var(--critical-bg);
  color: var(--critical-fg);
}

.pickup-state[data-tone="warning"] {
  background: var(--warning-bg);
  color: var(--warning-strong);
}

.pickup-state[data-tone="success"] {
  background: var(--success-bg);
  color: var(--success-fg);
}

.wl-owner,
.person-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.person-chip {
  max-width: 100%;
}

.person-chip-large {
  gap: 10px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--orient-100);
  color: var(--orient-800);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* No-mechanic placeholder (e.g. a bay whose mechanic freed up on a block): a quiet dashed
   empty slot rather than a filled avatar, so it reads as "no one" not a person. */
.avatar.avatar-empty {
  background: var(--neutral-50);
  color: var(--neutral-400);
  border-style: dashed;
  border-color: var(--neutral-300);
  font-weight: 600;
}

.person-chip-large .avatar {
  width: 34px;
  height: 34px;
}

.person-copy {
  min-width: 0;
}

.owner-name {
  display: block;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--neutral-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.owner-role {
  display: block;
  font-size: 12px;
  line-height: 14px;
  color: var(--neutral-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-action {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.action-note {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 12px;
  color: var(--neutral-500);
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 0;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.btn-urgent {
  /* Critical CTA: darker top → lighter bottom, both stops clear AA on white (6.4 / 4.7). */
  background: linear-gradient(180deg, var(--critical-strong), var(--critical-fg));
  color: var(--neutral-0);
  box-shadow: var(--shadow-sm);
}

.btn-urgent:hover {
  background: linear-gradient(180deg, oklch(0.43 0.115 22), var(--critical-strong));
}

.btn-primary {
  /* Solid brand button shifted 2 shades up for contrast: orient-800 top → orient-700 bottom
     (white text clears AA at 9.8 / 7.2). Hover lifts one shade to 700 → 600. */
  background: linear-gradient(180deg, var(--orient-800), var(--orient-700));
  color: var(--neutral-0);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  /* Hover goes DARKER (a shade down), not lighter. */
  background: linear-gradient(180deg, var(--orient-900), var(--orient-800));
}

/* One consistent button box across EVERY standard variant — primary, critical,
   secondary (quiet) and ghost all share 42px height + 12/20 padding, so a primary
   and its secondary never mismatch in a row. Only .btn-sm and the dense inline
   .btn-row-action opt out and keep their own compact size. */
.btn:not(.btn-sm):not(.btn-row-action) {
  height: auto;
  min-height: 42px;
  padding: 12px 20px;
}

/* Keyboard focus ring for the action buttons. */
.btn:not(.btn-row-action):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  filter: none;
}

.btn-primary:disabled {
  background: var(--neutral-200);
  color: var(--neutral-500);
}
/* Loading is not "disabled": a busy primary keeps its bright brand fill, just faded (was turning grey). */
.btn-primary.is-loading, .btn-primary.is-loading:disabled {
  background: linear-gradient(180deg, var(--orient-800), var(--orient-700));
  color: var(--neutral-0);
  opacity: 0.72;
}

.btn-quiet {
  background: var(--neutral-0);
  border-color: var(--neutral-200);
  color: var(--neutral-800);
}

.btn-quiet:hover {
  background: var(--neutral-50);
}

.btn-row-action {
  min-width: 94px;
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  background: transparent;
  border-color: var(--neutral-200);
  color: var(--neutral-800);
  font-weight: 500;
  box-shadow: none;
}

.btn-row-action:hover {
  background: var(--neutral-50);
  border-color: var(--neutral-300);
}

.btn-row-action[data-action-tone="critical"] {
  border-color: var(--critical-border);
  color: var(--critical-strong);
}

.btn-row-action[data-action-tone="critical"]:hover {
  background: var(--critical-bg);
  border-color: var(--critical-border);
}

.btn-row-action[data-action-tone="primary"] {
  border-color: var(--orient-200);
  color: var(--orient-800);
}

.btn-row-action[data-action-tone="primary"]:hover {
  background: var(--orient-50);
  border-color: var(--orient-300);
}

.btn-row-action[data-action-tone="assigned"] {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-strong);
}

.btn-row-action[data-action-tone="assigned"]:hover {
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.btn-row-action[data-action-tone="done"] {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-strong);
}

/* ---------- Progress List ---------- */

.progress-list-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.pl-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-low);
}

.pl-overview h2,
.pl-overview p {
  margin: 0;
}

.pl-overview h2 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 650;
}

.pl-overview p {
  margin-top: 2px;
  color: var(--neutral-600);
  font-size: 13px;
  line-height: 18px;
}

.pl-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 1px;
  min-width: 400px;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-200);
}

.pl-stats span {
  display: block;
  padding: 8px 10px;
  background: var(--neutral-25);
}

.pl-stats strong,
.pl-stats em {
  display: block;
}

.pl-stats strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

.pl-stats em {
  margin-top: 1px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.progress-list {
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-low);
}

.pl-section + .pl-section {
  border-top: 1px solid var(--neutral-100);
}

.pl-group {
  display: grid;
  grid-template-columns: 16px 18px auto 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid var(--neutral-100);
  background: var(--neutral-50);
  text-align: left;
}

.pl-section[data-tone="critical"] .pl-group {
  background: var(--critical-bg);
}

.pl-section[data-tone="success"] .pl-group {
  background: var(--success-bg);
}

.pl-group > svg.lucide {
  width: 14px;
  height: 14px;
  color: var(--neutral-500);
  transition: transform 0.15s ease;
}

.pl-group.is-collapsed > svg.lucide {
  transform: rotate(-90deg);
}

.pl-group-state {
  display: grid;
  place-items: center;
  color: var(--neutral-600);
}

.pl-group-state svg.lucide {
  width: 17px;
  height: 16px;
  fill: none;
}

.pl-group-state[data-tone="critical"] {
  color: var(--critical-fg);
}

.pl-group-state[data-tone="success"] {
  color: var(--success-fg);
}

.pl-group strong {
  color: var(--neutral-800);
  font-size: 13px;
  line-height: 18px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pl-section[data-tone="critical"] .pl-group strong {
  color: var(--critical-strong);
}

.pl-section[data-tone="success"] .pl-group strong {
  color: var(--success-strong);
}

.pl-group-count {
  display: grid;
  place-items: center;
  width: 22px;
  height: 24px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-700);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.pl-group em {
  overflow: hidden;
  color: var(--neutral-500);
  font-size: 13px;
  line-height: 18px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-row {
  --row-bg: var(--neutral-0);
  display: grid;
  grid-template-columns: 24px minmax(250px, 1fr) minmax(520px, max-content);
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 56px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--neutral-100);
  background: var(--row-bg);
  cursor: pointer;
}

.pl-row:last-child {
  border-bottom: 0;
}

.pl-row:hover {
  --row-bg: var(--neutral-25);
  background: var(--row-bg);
}

.pl-row.is-selected {
  --row-bg: var(--orient-50);
  background: var(--row-bg);
  box-shadow: inset 0 0 0 1px var(--orient-300);
}

.pl-select {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--neutral-300);
  border-radius: 0;
  background: var(--neutral-0);
  color: transparent;
}

.pl-select svg.lucide {
  width: 12px;
  height: 12px;
  stroke-width: 3;
  fill: none;
}

.pl-row.is-selected .pl-select {
  border-color: var(--orient-600);
  background: var(--orient-600);
  color: var(--neutral-0);
}

.pl-state,
.list-status-icon {
  display: grid;
  place-items: center;
  color: var(--neutral-500);
}

.pl-state svg.lucide,
.list-status-icon svg.lucide {
  width: 17px;
  height: 16px;
  fill: none;
}

.pl-state[data-tone="critical"],
.list-status-icon[data-tone="critical"] {
  color: var(--critical-fg);
}

.pl-state[data-tone="active"],
.list-status-icon[data-tone="active"] {
  color: var(--indigo-700);
}

.pl-state[data-tone="success"],
.list-status-icon[data-tone="success"] {
  color: var(--success-fg);
}

.list-status-icon[data-tone="warning"] {
  color: var(--warning-strong);
}

.pl-main,
.pl-meta,
.pl-status,
.pl-workstream,
.pl-timing,
.pl-risk,
.pl-owner,
.pl-action {
  min-width: 0;
}

.pl-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pl-identity {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.pl-title-line {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.pl-plate {
  color: var(--neutral-700);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.pl-main strong {
  overflow: hidden;
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-flow-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
}

.pl-flow-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pl-flow-label[data-tone="waiting"] {
  color: var(--waiting-fg);
}

.pl-flow-label[data-tone="active"] {
  color: var(--indigo-700);
}

.pl-flow-label[data-tone="success"] {
  color: var(--success-fg);
}

.pl-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.pl-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--neutral-600);
}

.pl-status:has(.progress-badge[data-tone="critical"]) {
  color: var(--critical-strong);
}

.pl-status:has(.progress-badge[data-tone="active"]) {
  color: var(--indigo-800);
}

.pl-status:has(.progress-badge[data-tone="success"]) {
  color: var(--success-strong);
}

.pl-workstream {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
}

.pl-workstream span,
.pl-workstream em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-workstream em {
  display: inline-grid;
  place-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-50);
  color: var(--neutral-700);
  font-style: normal;
  font-weight: 700;
}

.pl-step-path {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  margin-top: 8px;
}

.pl-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 150px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.pl-step + .pl-step {
  margin-left: 18px;
}

.pl-step + .pl-step::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -15px;
  width: 11px;
  height: 1px;
  background: var(--neutral-300);
}

.pl-step svg.lucide {
  width: 13px;
  height: 12px;
  flex: none;
  fill: none;
}

.pl-step span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-step[data-status="done"] {
  color: var(--success-fg);
}

.pl-step[data-status="active"],
.pl-step[data-status="over"] {
  color: var(--indigo-700);
}

.pl-step[data-status="blocked"] {
  color: var(--critical-fg);
}

.pl-step-more {
  margin-left: 8px;
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 700;
}

.pl-timing {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.pl-timing span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--neutral-500);
}

.pl-timing svg.lucide {
  width: 14px;
  height: 14px;
}

/*
  Deprecated rail progress and two-line timing rules are kept for older
  table fragments, but List View uses .progress-badge and .pl-timing spans.
*/
.pl-progress .progress-inline {
  grid-template-columns: 34px minmax(0, 1fr);
}

.pl-timing-legacy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pl-timing span,
.pl-risk {
  display: block;
}

.pl-timing span {
  display: inline-flex;
}

.pl-timing strong,
.pl-timing em,
.pl-risk strong,
.pl-risk span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-timing strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 16px;
}

.pl-timing strong[data-tone="critical"] {
  color: var(--critical-fg);
}

.pl-timing strong[data-tone="warning"] {
  color: var(--warning-strong);
}

.pl-timing strong[data-tone="success"] {
  color: var(--success-fg);
}

.pl-timing em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
}

.pl-risk {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--neutral-700);
}

.pl-risk strong {
  font-size: 13px;
  line-height: 16px;
  font-weight: 750;
}

.pl-risk span {
  margin-top: 0;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.pl-risk strong,
.pl-risk span {
  display: inline;
}

.pl-risk {
  display: flex;
  align-items: baseline;
}

.pl-risk[data-tone="critical"] strong {
  color: var(--critical-fg);
}

.pl-risk[data-tone="warning"] strong {
  color: var(--warning-strong);
}

.pl-risk[data-tone="success"] strong {
  color: var(--success-fg);
}

.pl-owner .person-chip {
  max-width: 100%;
}

.pl-owner {
  display: flex;
  justify-content: center;
}

.avatar-only {
  width: 24px;
  height: 24px;
}

.pl-action {
  display: flex;
  align-items: center;
  width: 132px;
}

.pl-action .btn-row-action {
  width: 100%;
}

.pl-action > span {
  display: none;
}

.canvas.drawer-open .pl-overview {
  align-items: flex-start;
  flex-direction: column;
}

.canvas.drawer-open .pl-stats {
  width: 100%;
  min-width: 0;
}

.canvas.drawer-open .pl-row {
  grid-template-columns: 24px minmax(260px, 1fr) minmax(360px, max-content);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.canvas.drawer-open .pl-main {
  min-width: 0;
}

.canvas.drawer-open .pl-meta {
  grid-column: auto;
  justify-content: flex-end;
  gap: 10px;
  padding-left: 0;
}

.canvas.drawer-open .pl-timing {
  display: none;
}

.canvas.drawer-open .pl-action {
  display: none;
}

.canvas.drawer-open .pl-status,
.canvas.drawer-open .pl-workstream,
.canvas.drawer-open .pl-risk,
.canvas.drawer-open .pl-owner {
  flex: none;
}

/* ---------- Planning / Review Views ---------- */

.planning-view,
.close-view,
.split-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.planning-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

.planning-hero h2,
.split-head h2 {
  margin: 0;
  color: var(--neutral-900);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.planning-hero p,
.split-head p {
  max-width: 62ch;
  margin: 4px 0 0;
  color: var(--neutral-500);
  font-size: 13px;
  line-height: 18px;
}

.disabled-reason {
  flex-basis: 100%;
  color: var(--critical-strong);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 750;
  text-align: right;
}

.planning-grid,
.split-view {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 16px;
  align-items: start;
}

.planning-panel,
.split-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

.planning-panel-wide {
  grid-row: span 2;
}

.planning-head,
.split-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-100);
}

.planning-head h3 {
  margin: 0;
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.planning-head span {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
}

.dispatch-list,
.split-issue-list,
.close-list {
  display: flex;
  flex-direction: column;
}

.dispatch-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 118px;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 12px 16px;
  border-top: 1px solid var(--neutral-100);
}

.dispatch-row:first-child {
  border-top: 0;
}

.dispatch-row time {
  color: var(--neutral-700);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

.dispatch-row span,
.dispatch-row b {
  min-width: 0;
}

.dispatch-row strong,
.dispatch-row em,
.dispatch-row b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-row strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

.dispatch-row em {
  margin-top: 2px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 600;
}

.dispatch-row b {
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-align: right;
}

.dispatch-row[data-tone="critical"] time,
.dispatch-row[data-tone="critical"] strong {
  color: var(--critical-fg);
}

.dispatch-row[data-tone="warning"] time,
.dispatch-row[data-tone="warning"] strong {
  color: var(--warning-strong);
}

.dispatch-row[data-tone="success"] time,
.dispatch-row[data-tone="success"] strong {
  color: var(--success-fg);
}

.capacity-list,
.staff-load {
  display: grid;
  gap: 0;
}

.capacity-list > span,
.staff-load > span {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 16px;
  border-top: 1px solid var(--neutral-100);
}

.capacity-list > span:first-child,
.staff-load > span:first-child {
  border-top: 0;
}

.capacity-list strong {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-50);
  color: var(--neutral-800);
  font-size: 13px;
}

.capacity-list em,
.staff-load em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 600;
}

.staff-load > span {
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 1px;
}

.staff-load .avatar-only {
  grid-row: 1 / span 2;
  align-self: center;
}

.staff-load strong {
  overflow: hidden;
  color: var(--neutral-800);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-load em {
  grid-column: 2;
}

.split-view {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

.split-head {
  display: block;
}

.split-panel > .move-spine {
  position: relative;
  top: auto;
  z-index: 1;
  margin: 12px;
}

.split-panel > .move-spine .move-grid {
  grid-template-columns: minmax(0, 1fr);
}

.split-issue,
.close-list button {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  border: 0;
  border-top: 1px solid var(--neutral-100);
  background: transparent;
  color: inherit;
  text-align: left;
}

.split-issue:first-child,
.close-list button:first-child {
  border-top: 0;
}

.split-issue {
  grid-template-columns: 22px minmax(130px, 1.2fr) 96px minmax(110px, 0.7fr) minmax(106px, 0.68fr) 118px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.split-issue:hover,
.close-list button:hover {
  background: var(--neutral-50);
}

.split-issue.is-selected,
.close-list button.is-selected {
  background: var(--orient-50);
}

.split-issue span,
.split-issue button {
  min-width: 0;
}

.split-issue strong,
.split-issue em,
.split-issue b,
.split-issue small,
.close-list strong,
.close-list span,
.close-list em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split-issue strong,
.close-list strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
}

.split-issue em,
.close-list span {
  margin-top: 2px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 600;
}

.split-issue-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.split-issue-times b {
  color: var(--neutral-900);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.split-issue-times b[data-tone="critical"] {
  color: var(--critical-strong);
}

.split-issue-times b[data-tone="warning"] {
  color: var(--warning-strong);
}

.split-issue-times b[data-tone="success"] {
  color: var(--success-strong);
}

.split-issue-risk {
  color: var(--neutral-700);
}

.split-issue-risk strong,
.close-list em {
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 750;
}

.split-issue-risk em {
  margin-top: 0;
}

.split-issue-risk[data-tone="critical"] strong {
  color: var(--critical-fg);
}

.close-list em {
  color: var(--orient-700);
}

.split-issue-risk[data-tone="warning"] strong {
  color: var(--warning-strong);
}

.split-issue-risk[data-tone="success"] strong {
  color: var(--success-fg);
}

.split-issue-owner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.split-issue-owner em {
  margin-top: 0;
}

.split-bay-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.split-bay {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
}

.split-bay span,
.split-bay em,
.split-bay strong,
.split-bay small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split-bay span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.split-bay span b {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
}

.split-bay span em {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  padding: 1px 8px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 800;
}

.split-bay strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 750;
}

.split-bay small {
  color: var(--neutral-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.split-bay em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 600;
}

.split-bay[data-tone="empty"] {
  background: var(--success-bg);
  border-color: var(--success-border);
}

.split-bay[data-tone="critical"] {
  background: var(--critical-bg);
  border-color: var(--critical-border);
}

.split-bay[data-tone="waiting"],
.split-bay[data-tone="warning"] {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

.close-list button {
  grid-template-columns: 108px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

/* ---------- Floor View ---------- */

.floor-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.floor-board-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.kanban-lane {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-low);
}

.kanban-lane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--neutral-100);
  background: var(--neutral-25);
}

.kanban-lane-head span {
  min-width: 0;
}

.kanban-lane-head strong,
.kanban-lane-head em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-lane-head strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 850;
}

.kanban-lane-head em {
  margin-top: 1px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 650;
}

.kanban-lane-head b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 1;
}

.kanban-lane[data-tone="critical"] .kanban-lane-head {
  background: var(--critical-bg);
}

.kanban-lane[data-tone="critical"] .kanban-lane-head strong,
.kanban-lane[data-tone="critical"] .kanban-lane-head b {
  color: var(--critical-strong);
}

.kanban-lane[data-tone="waiting"] .kanban-lane-head,
.kanban-lane[data-tone="warning"] .kanban-lane-head {
  background: var(--warning-bg);
}

.kanban-lane[data-tone="waiting"] .kanban-lane-head strong,
.kanban-lane[data-tone="warning"] .kanban-lane-head strong,
.kanban-lane[data-tone="waiting"] .kanban-lane-head b,
.kanban-lane[data-tone="warning"] .kanban-lane-head b {
  color: var(--warning-strong);
}

.kanban-lane[data-tone="success"] .kanban-lane-head {
  background: var(--success-bg);
}

.kanban-lane[data-tone="success"] .kanban-lane-head strong,
.kanban-lane[data-tone="success"] .kanban-lane-head b {
  color: var(--success-strong);
}

.kanban-cards {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.kanban-cards .floor-car {
  min-height: 0;
}

.canvas.drawer-open .kanban-board {
  grid-template-columns: repeat(3, minmax(210px, 1fr));
}

.floor-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-low);
}

.floor-overview-copy h2,
.floor-overview-copy p {
  margin: 0;
}

.floor-overview-copy h2 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.floor-overview-copy p {
  margin-top: 2px;
  max-width: 66ch;
  font-size: 13px;
  color: var(--neutral-600);
}

.floor-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(86px, 1fr));
  gap: 1px;
  overflow: hidden;
  min-width: 430px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-200);
}

.floor-stats > div {
  padding: 10px 12px;
  background: var(--neutral-25);
}

.floor-stats strong,
.floor-stats span {
  display: block;
}

.floor-stats strong {
  font-size: 14px;
  line-height: 20px;
  color: var(--neutral-900);
}

.floor-stats span {
  margin-top: 1px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.floor-grid {
  display: grid;
  grid-template-columns: minmax(560px, 1fr) 380px;
  gap: 16px;
  align-items: start;
}

.live-floor-page {
  min-width: 0;
}

.live-floor-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.32fr) minmax(520px, 1fr) minmax(280px, 0.38fr);
  grid-template-areas:
    "arrivals bays detail"
    "moves queues load";
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.live-panel {
  min-width: 0;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-low);
}

.live-arrivals {
  grid-area: arrivals;
  padding: 12px;
}

.live-bays {
  grid-area: bays;
  padding: 14px;
}

.live-bays .floor-map {
  padding: 12px;
}

.live-bay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Clean bay cards: a calm neutral surface. Status reads from the tone pill in
   the header (and a subtle border tint), not a full-bleed color fill. */
.live-bay-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 244px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
/* Progress ring in the bay head, right of the status pill */
.live-bay-ring { flex: none; }
.live-bay-ring .pring { gap: 6px; }
.live-bay-ring .pring-svg { width: 26px; height: 26px; }
.live-bay-ring .pring-num { display: inline; font-size: 12px; font-weight: 700; color: var(--neutral-700); }
.live-bay-head { justify-content: flex-start; }
.live-bay-head > strong { margin-right: auto; }

.live-bay-card.is-selected,
.live-bay-card.is-selected[data-tone] {
  border-color: var(--orient-600);
  /* Outer (not inset) so the border + ring merge into one clean stroke — an inset
     ring here drew a second stroke just inside the border. */
  box-shadow: 0 0 0 1px var(--orient-600);
}

.live-bay-card[data-tone="critical"] {
  border-color: var(--critical-border);
}

.live-bay-card[data-tone="warning"] {
  border-color: var(--warning-border);
}

.live-bay-card.is-empty {
  border-style: dashed;
  background: var(--neutral-25);
}

/* ---- Add-bay button + dropdown: right of the Service-bays subhead (aligned to the
   vertical divider that splits service bays from the shared stations) ---- */
.livefloor-bays-subhead { align-items: center; margin-bottom: 12px; min-height: 30px; }
.bays-subhead-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
/* Sit the button near the vertical bays/stations divider with a small breathing gap
   (not touching it). */
.livefloor-bays-subhead .add-bay-wrap { margin-right: 0; }
.add-bay-wrap { position: relative; flex: none; }
.add-bay-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border: 1px solid var(--orient-600); border-radius: 0;
  background: var(--orient-600); color: var(--neutral-0); font-size: 13px; font-weight: 650; cursor: pointer;
  transition: background 0.12s ease, transform 0.09s ease;
}
.add-bay-btn:hover { background: var(--orient-700); border-color: var(--orient-700); }
.add-bay-btn:active { transform: scale(0.97); }
.add-bay-btn > svg.lucide { width: 15px; height: 15px; }
.add-bay-caret { width: 14px; height: 14px; margin-left: 1px; opacity: 0.85; }
.add-bay-btn.is-open .add-bay-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .add-bay-btn:active { transform: none; } }

.add-bay-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: 232px; padding: 6px; border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-0); box-shadow: var(--shadow-popover);
  animation: dp-in 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}
.add-bay-menu-label { margin: 6px 8px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--neutral-400); }
.add-bay-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 0; background: transparent; color: var(--neutral-800);
  font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.12s ease;
}
.add-bay-menu-item:hover { background: var(--neutral-50); }
.add-bay-type-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 0; background: var(--orient-50); color: var(--orient-600); flex: none; }
.add-bay-type-icon svg.lucide { width: 16px; height: 16px; }

.live-bay-card.is-drop-hover {
  border-style: solid;
  border-color: var(--orient-500);
  box-shadow: inset 0 0 0 2px var(--orient-200);
  background: var(--orient-50);
}
/* Dropping a Next-up card onto a BUSY bay queues it behind — a dashed ring, distinct from a place. */
.live-bay-card.is-queue-hover { box-shadow: inset 0 0 0 2px var(--orient-300); }
.live-bay-card.is-queue-hover::after { content: "Queue behind"; position: absolute; inset: auto 0 0 0; padding: 4px 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--orient-700); background: color-mix(in oklch, var(--orient-50) 85%, white); }
.live-bay-queued { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-top: 1px dashed var(--neutral-200); font-size: 12.5px; color: var(--neutral-600); }
.live-bay-queued svg.lucide { width: 14px; height: 14px; color: var(--orient-500); flex: none; }
.live-bay-queued b { color: var(--neutral-900); }

/* Selection-linked assignment highlighting (full-bg tint, never a side stripe) */
.live-bay-card.is-suitable {
  border-style: solid;
  border-color: var(--success-border);
  background: var(--success-bg);
}
.live-bay-card.is-best-fit {
  border-color: var(--success-fg);
  box-shadow: inset 0 0 0 1px var(--success-border);
}
.live-bay-card.is-dimmed { opacity: 0.5; }
.bay-bestfit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 0;
  background: var(--success-fg);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.bay-bestfit svg.lucide { width: 12px; height: 12px; }

.live-bay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 8px;
}

.live-bay-head strong {
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
}

/* Status pills follow the design-system tone system. */
.bay-status-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 8px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.bay-status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: currentColor;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.24);
}

.bay-status-pill[data-tone="active"] {
  background: var(--indigo-50);
  border-color: var(--indigo-200);
  color: var(--indigo-700);
}

.bay-status-pill[data-tone="warning"] {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-strong);
}

.bay-status-pill[data-tone="critical"] {
  background: var(--critical-bg);
  border-color: var(--critical-border);
  color: var(--critical-strong);
}

.bay-status-pill[data-tone="success"] {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-strong);
}

.bay-status-pill[data-tone="empty"] {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-strong);
}

.live-bay-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 0 16px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

button.live-bay-body {
  cursor: pointer;
}

/* Hover the whole card cohesively (not just the middle body). */
.live-bay-card:has(button.live-bay-body:hover),
.live-bay-card:has(.live-bay-action:hover) {
  border-color: var(--neutral-300);
  box-shadow: var(--shadow-low);
}

button.live-bay-body:hover {
  background: var(--neutral-25);
}

.live-bay-car,
.live-bay-owner {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Bay-card action pinned to the bottom of every card. */
.live-bay-action {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-25);
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease;
}

.live-bay-action:hover {
  background: var(--neutral-50);
}

.live-bay-action svg.lucide {
  width: 14px;
  height: 14px;
}

.live-bay-action[data-tone="critical"] {
  color: var(--critical-strong);
}

.live-bay-action[data-tone="warning"] {
  color: var(--warning-strong);
}

.live-bay-action[data-tone="primary"] {
  color: var(--orient-700);
}

.live-bay-action[data-tone="success"] {
  color: var(--success-strong);
}

.live-bay-action[data-tone="quiet"] {
  color: var(--neutral-600);
}

.live-bay-action-row {
  display: flex;
}

.live-bay-action-row .live-bay-action {
  flex: 1 1 auto;
}

.live-bay-action-undo {
  flex: none;
  width: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-top: 1px solid var(--neutral-100);
  border-left: 1px solid var(--neutral-100);
  background: var(--neutral-25);
  color: var(--neutral-500);
  cursor: pointer;
}

.live-bay-action-undo:hover {
  background: var(--neutral-50);
  color: var(--neutral-700);
}

.live-bay-action-undo svg.lucide {
  width: 14px;
  height: 14px;
}

.live-bay-empty-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--success-strong);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
}

.live-bay-empty-hint svg.lucide {
  width: 14px;
  height: 14px;
}

.live-bay-kind,
.live-bay-job {
  display: block;
  overflow: hidden;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-bay-car {
  display: grid;
  gap: 1px;
}

.live-bay-car b,
.live-bay-car small,
.live-bay-job {
  min-width: 0;
}

.live-bay-car b,
.live-bay-car small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-bay-car b {
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 850;
}

.live-bay-car small {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
}

/* Flat metric row inside the bay card — hairline separators, no nested box. */
.live-bay-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--neutral-100);
}

.live-bay-meta span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 0 12px;
}

.live-bay-meta span + span {
  border-left: 1px solid var(--neutral-100);
}

.live-bay-meta span:first-child {
  padding-left: 0;
}

.live-bay-meta em,
.live-bay-meta strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-bay-meta em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 14px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.live-bay-meta strong {
  color: var(--neutral-900);
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
}

.live-bay-meta strong[data-tone="critical"] {
  color: var(--critical-strong);
}

.live-bay-meta strong[data-tone="warning"] {
  color: var(--warning-strong);
}

.live-bay-owner {
  gap: 8px;
  margin-top: 12px;
  color: var(--neutral-700);
  font-size: 13px;
  line-height: 16px;
  font-weight: 750;
}
.live-bay-owner .live-bay-ring { margin-left: auto; }
.live-bay-owner b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Empty bay: no heavy box. The green "Available" head pill signals the free state;
   the body carries just a light, centered drop hint so it still reads as a drop target. */
.live-bay-drop {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 74px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.live-bay-drop svg.lucide {
  width: 14px;
  height: 14px;
}

.live-bay-card.is-empty:hover .live-bay-drop,
.live-bay-card.is-empty.is-drop-target .live-bay-drop {
  color: var(--success-strong);
}

.live-car-detail {
  grid-area: detail;
  padding: 12px;
}

.live-next-moves {
  grid-area: moves;
  overflow: hidden;
}

.live-next-moves .move-spine {
  position: relative;
  top: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.live-next-moves .move-grid {
  grid-template-columns: minmax(0, 1fr);
}

.live-shared-queues {
  grid-area: queues;
  padding: 12px;
}

.live-mechanic-load {
  grid-area: load;
  padding: 12px;
}

.live-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.live-panel-head h3,
.live-panel-head span {
  margin: 0;
}

.live-panel-head h3 {
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 750;
}

.live-panel-head span {
  overflow: hidden;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-arrival-list {
  display: grid;
  gap: 8px;
}

.live-arrival-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
  text-align: left;
}

.live-arrival-card:hover {
  border-color: var(--orient-200);
  background: var(--orient-50);
}

.live-arrival-card[data-tone="critical"] {
  border-color: var(--critical-border);
  background: var(--critical-bg);
}

.live-arrival-card span,
.live-arrival-card strong,
.live-arrival-card em {
  min-width: 0;
}

.live-arrival-card strong,
.live-arrival-card em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-arrival-card strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.live-arrival-card em {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 600;
}

.live-arrival-card b {
  color: var(--neutral-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.live-detail-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
}

.live-detail-card[data-tone="critical"] {
  border-color: var(--critical-border);
  background: var(--critical-bg);
}

.live-detail-card > strong {
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 850;
}

.live-detail-card > span {
  margin-top: -8px;
  color: var(--neutral-600);
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
}

.live-detail-card dl {
  display: grid;
  gap: 1px;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-200);
}

.live-detail-card dl > div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  background: var(--neutral-0);
}

.live-detail-card dt,
.live-detail-card dd {
  margin: 0;
  min-width: 0;
}

.live-detail-card dt {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 750;
}

.live-detail-card dd {
  overflow: hidden;
  color: var(--neutral-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-detail-card .person-chip {
  min-width: 0;
}

.live-queue-kanban {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Shared-station lanes reuse the work-list grammar (In progress + Queue). */
/* Shared-station tabs (Wash / Alignment) — one full-width queue at a time. */
.station-tabs { display: flex; flex-direction: column; gap: 10px; }
/* Underline tabs: a selection line under the active tab (matches the app's tab idiom) */
.station-tabbar { display: flex; gap: 0; border-bottom: 1px solid var(--neutral-200); }
.station-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 2px;
  margin-right: 18px;
  border: 0;
  background: transparent;
  color: var(--neutral-500);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.station-tab > span:first-child { white-space: nowrap; }
.station-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 0;
  background: transparent;
}
.station-tab:hover { color: var(--neutral-700); }
.station-tab.is-active { color: var(--orient-700); }
.station-tab.is-active::after { background: var(--orient-600); }
.station-tab-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 0; border: 1px solid var(--neutral-200); background: var(--neutral-100);
  color: var(--neutral-600); font-size: 12px; line-height: 1; font-weight: 700;
}
.station-tab.is-active .station-tab-count { border-color: var(--orient-200); background: var(--orient-100); color: var(--orient-700); }
/* A red attention dot — not a second number */
.station-tab-dot { width: 7px; height: 8px; border-radius: 50%; background: var(--critical-fg); }

.queue-lane {
  min-width: 0;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  overflow: hidden;
  background: var(--neutral-0);
}

.queue-lane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--neutral-100);
}

.queue-lane-head h4 {
  margin: 0;
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

.queue-lane-head span {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.queue-lane-group + .queue-lane-group {
  border-top: 1px solid var(--neutral-100);
}

/* Subtle group label, matching the work-list section-header feel */
.queue-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.queue-group-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-400); flex: none; }
.queue-group-dot[data-tone="active"] { background: var(--indigo-600); }
.queue-group-label b {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 4px;
  border-radius: 0;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-600);
  font-size: 12px;
  letter-spacing: 0;
}

/* Queue rows reuse the work-list row grammar; unify horizontal padding + highlight now-serving */
.queue-lane-head,
.queue-group-label,
.queue-list-row { padding-left: 14px; padding-right: 14px; }
.queue-list-row.is-inprogress { background: var(--indigo-50); }
.queue-list-row.is-inprogress:hover { background: var(--indigo-100); }
.queue-list-row.is-backlog { cursor: default; }
.queue-pos {
  display: grid;
  place-items: center;
  width: 22px;
  height: 24px;
  border-radius: 0;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 12px;
  font-weight: 700;
}
.queue-list-row .list-status-icon[data-tone="active"] svg.lucide { animation: queue-spin 2s linear infinite; }
@keyframes queue-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .queue-list-row .list-status-icon[data-tone="active"] svg.lucide { animation: none; } }

.queue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-0);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.queue-group-label + .queue-row {
  border-top: 0;
}

.queue-row:hover {
  background: var(--neutral-25);
}

.queue-row.is-backlog {
  cursor: default;
}

.queue-row-plate {
  flex: none;
  color: var(--neutral-900);
  font-size: 13px;
  font-weight: 750;
}

.queue-row-vehicle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--neutral-600);
  font-size: 12px;
  font-weight: 600;
}

.queue-row-risk {
  flex: none;
  color: var(--neutral-600);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.queue-row-risk[data-tone="critical"] {
  color: var(--critical-strong);
}

.queue-row-risk[data-tone="warning"] {
  color: var(--warning-strong);
}

.queue-row-risk[data-tone="waiting"] {
  color: var(--waiting-strong);
}

.queue-row-time {
  flex: none;
  min-width: 42px;
  text-align: right;
  color: var(--neutral-800);
  font-size: 13px;
  font-weight: 700;
}

.queue-empty {
  padding: 10px 12px;
  border-top: 1px solid var(--neutral-100);
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 500;
}

.queue-group-label + .queue-empty {
  border-top: 0;
}

.live-kanban-lane {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

.live-kanban-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--neutral-100);
  background: var(--neutral-25);
}

.live-kanban-head strong,
.live-kanban-head em {
  display: block;
}

.live-kanban-head strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 850;
}

.live-kanban-head em {
  margin-top: 1px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 650;
}

.live-kanban-head b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-700);
  font-size: 12px;
}

.live-kanban-cards {
  display: grid;
  gap: 8px;
  padding: 8px;
}

.live-kanban-card {
  display: grid;
  grid-template-columns: 34px minmax(120px, 0.9fr) minmax(130px, 1fr) max-content;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
  color: inherit;
  text-align: left;
}

.live-kanban-card:hover {
  border-color: var(--orient-200);
  background: var(--orient-50);
}

.live-kanban-card[data-tone="critical"] {
  border-color: var(--critical-border);
  background: var(--critical-bg);
}

.live-kanban-card[data-tone="warning"],
.live-kanban-card[data-tone="waiting"] {
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.live-kanban-pos {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 800;
}

.live-kanban-main,
.live-kanban-risk {
  min-width: 0;
}

.live-kanban-main strong,
.live-kanban-main em,
.live-kanban-risk strong,
.live-kanban-risk em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-kanban-main strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 850;
}

.live-kanban-main em,
.live-kanban-risk em {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 650;
}

.live-kanban-risk strong {
  color: var(--neutral-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.live-kanban-card[data-tone="critical"] .live-kanban-risk strong {
  color: var(--critical-strong);
}

.live-kanban-card[data-tone="warning"] .live-kanban-risk strong,
.live-kanban-card[data-tone="waiting"] .live-kanban-risk strong {
  color: var(--warning-strong);
}

.live-kanban-time {
  color: var(--neutral-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.canvas.drawer-open .floor-grid {
  grid-template-columns: 1fr;
}

.canvas.drawer-open .station-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.floor-zone {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-low);
}

.floor-zone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.floor-zone-head h3,
.floor-zone-head span {
  margin: 0;
}

.floor-zone-head h3 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--neutral-900);
}

.floor-zone-head span {
  font-size: 12px;
  color: var(--neutral-500);
}

.bay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bay-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
}

.bay-card[data-tone="critical"] {
  border-color: var(--critical-border);
  background: var(--critical-bg);
}

.bay-card[data-tone="warning"] {
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.bay-card[data-tone="success"] {
  border-color: var(--success-border);
  background: var(--success-bg);
}

.bay-card[data-tone="empty"] {
  border-style: dashed;
  background: var(--neutral-25);
}

.bay-head,
.station-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.bay-head h3,
.station-head h3 {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--neutral-900);
}

.bay-head span,
.station-head span {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-600);
}

.bay-head .bay-badge {
  display: inline-grid;
  place-items: center;
  height: 24px;
  min-width: 72px;
  padding: 0 10px;
  border-radius: 0;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.bay-head .bay-badge[data-tone="critical"] {
  border-color: var(--critical-border);
  background: var(--critical-bg);
  color: var(--critical-strong);
}

.bay-head .bay-badge[data-tone="warning"] {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-strong);
}

.bay-head .bay-badge[data-tone="success"] {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-strong);
}

.bay-head .bay-badge[data-tone="empty"] {
  border-color: var(--neutral-200);
  background: var(--neutral-50);
  color: var(--neutral-600);
}

.floor-car {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  text-align: left;
}

.floor-car:hover {
  border-color: var(--orient-200);
  background: var(--orient-50);
}

.floor-car.is-selected {
  border-color: var(--orient-300);
  background: var(--orient-50);
  box-shadow: inset 0 0 0 1px var(--orient-300);
}

.floor-car.is-muted {
  opacity: 0.42;
}

.floor-car-main,
.floor-car-status,
.floor-card-action,
.floor-time-strip,
.floor-note {
  min-width: 0;
}

.floor-car .plate {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--neutral-900);
}

.floor-car .vehicle {
  display: block;
  overflow: hidden;
  margin-top: 1px;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-owner .person-chip {
  max-width: 100%;
}

.floor-time-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.floor-time-strip > span {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 4px;
  min-width: 0;
  padding: 0;
}

.floor-time-strip svg.lucide {
  grid-row: span 2;
  align-self: center;
  width: 13px;
  height: 12px;
  color: var(--neutral-400);
}

.floor-time-strip span span,
.floor-time-strip strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-time-strip span span {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
}

.floor-time-strip strong {
  color: var(--neutral-900);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.floor-time-strip strong[data-tone="critical"] {
  color: var(--critical-fg);
}

.floor-time-strip strong[data-tone="warning"] {
  color: var(--warning-strong);
}

.floor-time-strip strong[data-tone="success"] {
  color: var(--success-fg);
}

.floor-car-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bay-card .floor-car-status {
  gap: 6px;
}

.floor-note {
  overflow: hidden;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 1px -10px -10px;
  min-height: 34px;
  padding: 8px 10px 0;
  border-top: 1px solid var(--neutral-100);
  color: var(--neutral-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.floor-card-action svg.lucide {
  width: 13px;
  height: 12px;
}

.floor-card-action > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-card-action small {
  overflow: hidden;
  max-width: 44%;
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-card-action[data-tone="critical"] {
  color: var(--critical-strong);
}

.floor-card-action[data-tone="warning"] {
  color: var(--warning-strong);
}

.floor-card-action[data-tone="primary"] {
  color: var(--orient-800);
}

.floor-card-action[data-tone="success"] {
  color: var(--success-strong);
}

.hold-pill {
  display: inline-grid;
  place-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 0;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.hold-pill[data-tone="waiting"] {
  background: var(--waiting-bg);
  color: var(--waiting-strong);
}

.hold-pill[data-tone="warning"] {
  background: var(--warning-bg);
  color: var(--warning-strong);
}

.station-grid {
  display: grid;
  gap: 12px;
}

.station-card {
  min-width: 0;
  padding: 0 0 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  overflow: hidden;
}

.station-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 0;
  background: var(--orient-50);
  color: var(--orient-700);
}

.station-head {
  padding: 12px 12px 10px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--neutral-100);
}

.station-list {
  display: grid;
  gap: 8px;
  padding: 10px 12px 0;
}

.queue-lane {
  position: relative;
  display: grid;
  gap: 0;
  padding: 10px 12px 0;
}

.queue-slot {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  position: relative;
}

.queue-slot + .queue-slot {
  margin-top: 8px;
}

.queue-slot::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: -9px;
  width: 1px;
  background: var(--neutral-200);
}

.queue-slot:last-of-type::before {
  display: none;
}

.queue-position {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
  color: var(--neutral-700);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

.queue-slot:first-child .queue-position {
  border-color: var(--orient-200);
  background: var(--orient-50);
  color: var(--orient-800);
  font-family: var(--font-ui);
}

.queue-lane .floor-car {
  padding: 8px 10px;
  gap: 8px;
}

.queue-lane .floor-card-action {
  margin-top: 0;
}

.queue-mini-car {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
}

.queue-mini-car .hold-pill {
  justify-self: start;
}

.queue-mini-car strong,
.queue-mini-car em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-mini-car strong {
  color: var(--neutral-900);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
}

.queue-mini-car em,
.queue-mini-meta {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
}

.queue-mini-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.queue-mini-meta svg.lucide {
  width: 13px;
  height: 12px;
  color: var(--neutral-400);
}

.queue-reveal {
  position: relative;
  margin: -2px 0 0 44px;
  padding-top: 34px;
}

.queue-reveal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -48px;
  height: 72px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--neutral-0) 72%);
}

.queue-lane.is-expanded .queue-reveal {
  padding-top: 8px;
}

.queue-lane.is-expanded .queue-reveal::before {
  display: none;
}

.queue-expand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 700;
}

.queue-expand:hover {
  border-color: var(--orient-200);
  background: var(--orient-50);
  color: var(--orient-800);
}

.empty-bay {
  display: grid;
  place-items: center;
  min-height: 222px;
  border: 1px dashed var(--neutral-200);
  border-radius: 0;
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 600;
}

/* ---------- Placeholder views (Floor / Split pending review) ---------- */

.pending-view {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

.pending-inner {
  max-width: 460px;
  text-align: center;
  padding: 40px 32px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  box-shadow: var(--shadow-low);
}

.pending-inner svg.lucide {
  width: 28px;
  height: 28px;
  color: var(--orient-600);
}

.pending-inner h2 {
  margin: 12px 0 6px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.pending-inner p {
  margin: 0 0 18px;
  color: var(--neutral-500);
}

/* ---------- Drawer ---------- */

.drawer {
  position: relative;
  flex: none;
  width: 440px;
  overflow-y: auto;
  background: var(--neutral-0);
  border-left: 1px solid var(--neutral-200);
  padding: 24px 24px 0;
}

.drawer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.drawer-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

.drawer-plate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.drawer-plate {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  color: var(--neutral-900);
}

.drawer-risk-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  white-space: nowrap;
}
.drawer-risk-chip::before { content: ""; width: 6px; height: 6px; background: currentColor; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.22); flex: none; }

.drawer-risk-chip strong {
  font-family: var(--font-mono);
  font-size: 12px;
}

.drawer-risk-chip[data-tone="critical"] {
  background: var(--critical-bg);
  border-color: var(--critical-border);
  color: var(--critical-strong);
}

.drawer-risk-chip[data-tone="warning"] {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-strong);
}

.drawer-risk-chip[data-tone="success"] {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-strong);
}
.drawer-risk-chip[data-tone="active"] { background: var(--indigo-50); border-color: var(--indigo-200); color: var(--indigo-700); }
.drawer-risk-chip[data-tone="orient"] { background: var(--orient-50); border-color: var(--orient-200); color: var(--orient-700); }
.drawer-risk-chip[data-tone="waiting"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-strong); }

.drawer-risk-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--neutral-600);
  font-size: 17px;
  line-height: 20px;
  font-weight: 750;
}
/* After a revise, the header carries a "revised · HH:MM" chip in place of the (now stale)
   lateness delta: the pickup is protected at a realistic time, even while still blocked. */
.drawer-risk-revised { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 750; color: var(--success-strong); background: var(--success-bg); border: 1px solid var(--success-border); border-radius: 0; padding: 3px 10px; }
.drawer-risk-revised svg.lucide { width: 12px; height: 12px; }
/* Small qualifier so a positive delta (e.g. "+2h30") reads as lateness vs the promise,
   not as time-in-bay. */
.drawer-risk-delta-lbl { font-size: 12px; font-weight: 600; text-transform: none; color: var(--neutral-500); }
.drawer-risk-delta[data-tone="critical"] { color: var(--critical-fg); }
.drawer-risk-delta[data-tone="warning"] { color: var(--warning-strong); }

.drawer-risk-delta[data-tone="critical"] {
  color: var(--critical-strong);
}

.drawer-risk-delta[data-tone="warning"] {
  color: var(--warning-strong);
}

.drawer-risk-delta[data-tone="success"] {
  color: var(--success-strong);
}

.drawer-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--neutral-500);
}

.drawer-owner {
  margin-top: 12px;
}

.drawer-focus {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
}

.drawer-focus[data-tone="critical"] {
  border-color: var(--critical-border);
  background: var(--critical-bg);
}

.drawer-focus[data-tone="warning"],
.drawer-focus[data-tone="waiting"] {
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.drawer-focus[data-tone="success"] {
  border-color: var(--success-border);
  background: var(--success-bg);
}

.drawer-focus span,
.drawer-snapshot span {
  display: block;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.drawer-focus strong {
  display: block;
  margin-top: 1px;
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 750;
}

.drawer-focus[data-tone="critical"] strong,
.drawer-focus[data-tone="critical"] .drawer-focus-next strong {
  color: var(--critical-strong);
}

.drawer-focus[data-tone="warning"] strong,
.drawer-focus[data-tone="waiting"] strong,
.drawer-focus[data-tone="warning"] .drawer-focus-next strong,
.drawer-focus[data-tone="waiting"] .drawer-focus-next strong {
  color: var(--warning-strong);
}

.drawer-focus[data-tone="success"] strong,
.drawer-focus[data-tone="success"] .drawer-focus-next strong {
  color: var(--success-strong);
}

.drawer-focus p {
  margin: 0;
  color: var(--neutral-700);
  font-size: 13px;
  line-height: 18px;
}

.drawer-focus-next {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid rgba(83, 90, 102, 0.16);
}

.drawer-focus-next strong {
  margin: 0;
}

/* Flat snapshot table — hairline-divided rows/columns, no nested box. */
.drawer-snapshot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  border-top: 1px solid var(--neutral-100);
}

.drawer-snapshot > div {
  min-width: 0;
  min-height: 74px;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--neutral-100);
}

.drawer-snapshot > div:nth-child(even) {
  padding-left: 16px;
  border-left: 1px solid var(--neutral-100);
}

.drawer-snapshot strong {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin-top: 8px;
  color: var(--neutral-900);
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
}

.drawer-handler .person-chip {
  max-width: 100%;
}

.drawer-handler .avatar {
  width: 28px;
  height: 28px;
}

/* Handler / mechanic: avatar with the name to its right (one line). */
.snapshot-person {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.snapshot-person .avatar {
  width: 26px;
  height: 28px;
}

.snapshot-person b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-900);
}

.drawer-snapshot strong[data-tone="critical"] {
  color: var(--critical-fg);
}

.drawer-snapshot strong[data-tone="warning"] {
  color: var(--warning-strong);
}

.drawer-snapshot strong[data-tone="success"] {
  color: var(--success-fg);
}

.drawer-inline-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.recovery-trail {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

/* Persistent per-car action log — the visible trace of a logged action */
.car-log {
  margin-top: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  overflow: hidden;
}
.car-log .drawer-section-head { padding: 10px 14px; border-bottom: 1px solid var(--neutral-100); }
.car-log-list { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; }
.car-log-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.car-log-dot { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 0; background: var(--success-bg); flex: none; }
.car-log-dot svg.lucide { width: 12px; height: 12px; color: var(--success-fg); }
.car-log-label { flex: 1; min-width: 0; font-size: 13px; color: var(--neutral-800); }
.car-log-time { font-size: 12px; color: var(--neutral-500); }

.recovery-trail .drawer-section-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--neutral-100);
}

.recovery-trail ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recovery-trail li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 8px 14px;
  border-top: 1px solid var(--neutral-100);
}

.recovery-trail li:first-child {
  border-top: 0;
}

.recovery-trail li.is-current {
  background: var(--orient-50);
}

.recovery-trail strong,
.recovery-trail em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recovery-trail strong {
  color: var(--neutral-900);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.recovery-trail em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 650;
}

.drawer-detail-block {
  flex: none; /* the detail panel is a flex column; overflow:hidden below zeroes the
                 auto min-height, so without this the block collapses to a 2px line */
  margin-top: 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  overflow: hidden; /* clip inner rows to the rounded corners */
}

.drawer-detail-block summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  color: var(--neutral-800);
  font-size: 13px;
  line-height: 18px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.drawer-detail-block summary::-webkit-details-marker { display: none; }
.ddb-title { margin-right: auto; }
/* Jobs accordion heading carries the current job (eyebrow + name) so it no longer needs its own box. */
.drawer-jobs summary { align-items: flex-start; min-height: 52px; padding-top: 9px; padding-bottom: 9px; }
.ddb-jobhead { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.ddb-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral-500); }
.ddb-jobhead .ddb-title { margin-right: 0; font-size: 14px; font-weight: 750; color: var(--neutral-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-jobs .ddb-count { align-self: center; }
.drawer-jobs .ddb-chevron { align-self: center; }
.ddb-count {
  color: var(--neutral-500);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
.ddb-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--neutral-400);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer-detail-block[open] .ddb-chevron { transform: rotate(180deg); }
.drawer-detail-block summary:hover .ddb-chevron { color: var(--neutral-600); }

.drawer-detail-block[open] summary {
  border-bottom: 1px solid var(--neutral-100);
}

.drawer-detail-block .job-list,
.drawer-detail-block .dm-jobs-list,
.drawer-detail-block .context-grid {
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* The drawer renders jobs via .dm-jobs-list (padding:0 by default), so it needs the same inset as
   .job-list — otherwise the step nodes sit flush against the card's left border. */
.drawer-detail-block .job-list,
.drawer-detail-block .dm-jobs-list {
  padding: 12px 18px 16px;
}

.drawer-times {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  overflow: hidden;
}

.drawer-times > div {
  padding: 10px 12px;
  background: var(--neutral-25);
}

.drawer-times > div + div {
  border-left: 1px solid var(--neutral-200);
}

.drawer-times span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

.drawer-times strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
}

.drawer-times strong[data-tone="critical"] {
  color: var(--critical-fg);
}

.drawer-times strong[data-tone="warning"] {
  color: var(--warning-strong);
}

.drawer-times strong[data-tone="success"] {
  color: var(--success-fg);
}

.pickup-graph {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
}

.pickup-graph-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pickup-graph-head span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

.pickup-graph-head strong {
  font-size: 13px;
  line-height: 18px;
  color: var(--neutral-800);
}

.pickup-graph[data-tone="critical"] .pickup-graph-head strong {
  color: var(--critical-strong);
}

.pickup-graph[data-tone="warning"] .pickup-graph-head strong {
  color: var(--warning-strong);
}

.pickup-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
}

.pickup-compare > div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

.pickup-compare span,
.pickup-compare strong {
  display: block;
  min-width: 0;
}

.pickup-compare span {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.pickup-compare strong {
  overflow: hidden;
  margin-top: 1px;
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pickup-compare strong[data-tone="critical"],
.pickup-status-line strong[data-tone="critical"] {
  color: var(--critical-fg);
}

.pickup-compare strong[data-tone="warning"],
.pickup-status-line strong[data-tone="warning"] {
  color: var(--warning-strong);
}

.pickup-compare strong[data-tone="success"],
.pickup-status-line strong[data-tone="success"] {
  color: var(--success-fg);
}

.pickup-delta-block {
  min-width: 104px;
  text-align: center;
}

.pickup-delta-block[data-tone="critical"] {
  border-color: var(--critical-border);
  background: var(--critical-bg);
}

.pickup-delta-block[data-tone="warning"] {
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.pickup-delta-block[data-tone="success"] {
  border-color: var(--success-border);
  background: var(--success-bg);
}

.pickup-delta-block[data-tone="critical"] strong,
.pickup-delta-block[data-tone="critical"] span {
  color: var(--critical-strong);
}

.pickup-delta-block[data-tone="warning"] strong,
.pickup-delta-block[data-tone="warning"] span {
  color: var(--warning-strong);
}

.pickup-delta-block[data-tone="success"] strong,
.pickup-delta-block[data-tone="success"] span {
  color: var(--success-strong);
}

.pickup-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--neutral-200);
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.pickup-status-line span[data-tone="critical"] {
  color: var(--critical-strong);
}

.pickup-status-line span[data-tone="warning"] {
  color: var(--warning-strong);
}

.pickup-status-line span[data-tone="success"] {
  color: var(--success-strong);
}

.drawer-section {
  margin-top: 20px;
}

.drawer-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.drawer-section-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.drawer-section-head span {
  font-size: 12px;
  color: var(--neutral-500);
}

.job-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.job-list li {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 0;
}

.job-list li::after {
  content: none;
  display: none;
}

/* Timeline connector between job status icons. */
.job-list li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 2px;
  height: 100%;
  background: var(--neutral-200);
  z-index: 0;
}

.job-list [data-status="done"]:not(:last-child)::before {
  background: var(--success-border);
}

.job-icon {
  position: relative;
  z-index: 1;
  background: var(--neutral-0);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex: none;
  border-radius: 50%;
  border: 1px solid transparent;
}

.job-icon svg.lucide {
  width: 12px;
  height: 12px;
}

.job-list [data-status="done"] .job-icon {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-fg);
}

.job-list [data-status="done"] .job-name {
  color: var(--neutral-600);
  text-decoration: none;
}

.job-list [data-status="active"] .job-icon {
  background: var(--indigo-50);
  border-color: var(--indigo-200);
  color: var(--indigo-700);
}

.job-list [data-status="blocked"] .job-icon,
.job-list [data-status="over"] .job-icon {
  background: var(--critical-bg);
  border-color: var(--critical-border);
  color: var(--critical-fg);
}

.job-list [data-status="pending"] .job-icon {
  background: var(--neutral-100);
  border-color: var(--neutral-200);
  color: var(--neutral-500);
}

.job-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--neutral-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-list [data-status="blocked"] .job-name,
.job-list [data-status="over"] .job-name {
  color: var(--critical-fg);
}

.job-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: max-content;
  font-size: 13px;
  line-height: 18px;
  color: var(--neutral-500);
  font-weight: 650;
  white-space: nowrap;
}

.job-meta svg.lucide {
  width: 13px;
  height: 12px;
}

.job-meta.is-time {
  color: var(--neutral-700);
  font-family: var(--font-mono);
  font-weight: 700;
}

.job-list [data-status="over"] .job-meta,
.job-list [data-status="blocked"] .job-meta {
  color: var(--critical-fg);
  font-weight: 600;
}

.fact-list {
  margin: 0;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  overflow: hidden;
}

.fact-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
}

.fact-list > div + div {
  border-top: 1px solid var(--neutral-100);
}

.fact-list dt {
  font-size: 13px;
  color: var(--neutral-500);
}

.fact-list dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-800);
  text-align: right;
}

.fact-list dd .person-chip {
  justify-content: flex-end;
}

.fact-list dd[data-tone="success"] {
  color: var(--success-fg);
}

.fact-list dd[data-tone="critical"] {
  color: var(--critical-fg);
}

.fact-list dd[data-tone="waiting"] {
  color: var(--waiting-fg);
}

.context-grid {
  display: block;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  overflow: hidden;
  background: var(--neutral-0);
}

.context-grid > div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 46px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
}

.context-grid > div + div {
  border-top: 1px solid var(--neutral-100);
}

.context-grid dt {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
}

.context-grid dd {
  min-width: 0;
  text-align: right;
  color: var(--neutral-800);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}

.context-grid dd > span {
  display: inline;
  color: inherit;
}

/* Person value: keep avatar + name together, aligned right (no split). */
.context-grid dd .person-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  vertical-align: middle;
  text-align: left;
}

.context-grid dd .person-chip .avatar {
  width: 24px;
  height: 24px;
}

.context-grid dd[data-tone="critical"] {
  color: var(--critical-strong);
}

.context-grid dd[data-tone="warning"] {
  color: var(--warning-strong);
}

.context-grid dd[data-tone="waiting"] {
  color: var(--waiting-strong);
}

.context-grid dd[data-tone="success"] {
  color: var(--success-strong);
}

.drawer-insight {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding: 12px;
  border-radius: 0;
  font-size: 13px;
  line-height: 20px;
}

.drawer-insight svg.lucide {
  margin-top: 2px;
}

.drawer-insight[data-tone="critical"] {
  background: var(--critical-bg);
  color: var(--critical-strong);
}

.drawer-insight[data-tone="warning"] {
  background: var(--warning-bg);
  color: var(--warning-strong);
}

.drawer-insight[data-tone="waiting"] {
  background: var(--waiting-bg);
  color: var(--waiting-strong);
}

.drawer-insight[data-tone="success"] {
  background: var(--success-bg);
  color: var(--success-strong);
}

.blocker-summary {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
}

.blocker-summary > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.blocker-summary span {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.blocker-summary strong {
  color: var(--neutral-800);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

.blocker-summary[data-tone="critical"] {
  border-color: var(--critical-border);
  background: var(--critical-bg);
}

.blocker-summary[data-tone="critical"] strong {
  color: var(--critical-strong);
}

.blocker-summary[data-tone="warning"] {
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.blocker-summary[data-tone="warning"] strong {
  color: var(--warning-strong);
}

.blocker-summary details {
  padding-top: 6px;
  border-top: 1px solid rgba(145, 42, 42, 0.14);
}

.blocker-summary summary {
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.blocker-summary p {
  margin: 6px 0 0;
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
}

.action-trail {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
}

.action-trail-plain {
  grid-template-columns: minmax(0, 1fr);
}

.action-trail > svg.lucide {
  align-self: start;
  margin-top: 2px;
}

.action-trail strong,
.action-trail span {
  display: block;
}

.action-trail strong {
  font-size: 13px;
  line-height: 18px;
  color: var(--neutral-900);
}

.action-trail span {
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-600);
}

.action-trail[data-tone="critical"] {
  border-color: var(--critical-border);
  background: var(--neutral-25);
  color: var(--critical-strong);
}

.action-trail[data-tone="warning"] {
  border-color: var(--warning-border);
  background: var(--neutral-25);
  color: var(--warning-strong);
}

.action-trail[data-tone="success"] {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-strong);
}

.drawer-actions {
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin: 24px -24px 0;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--neutral-200);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), var(--neutral-0) 18%);
  box-shadow: 0 -8px 16px rgba(23, 26, 33, 0.04);
}

.drawer-actions .btn-block {
  width: 100%;
  height: 42px;
  font-size: 14px;
}

/* Action hierarchy: dominant primary; one visible alternative + a ⋯ overflow menu for
   the rest. Icons on every action for fast scanning. */
.drawer-actions .btn { gap: 7px; }
.drawer-actions .btn svg.lucide { width: 15px; height: 15px; flex: none; }
.drawer-action-row { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; }
.drawer-action-row > span { flex: 1 1 auto; }
/* .drawer-alt is a .btn, so the app-wide min-height:42px would win over a plain height — match the
   ⋯ button's box with equal specificity so the two sit at the SAME 40px height. */
.drawer-action-row .drawer-alt.btn { flex: 1 1 auto; min-height: 40px; height: 40px; padding: 0 14px; }
.drawer-alt svg.lucide { color: var(--neutral-500); }

.drawer-more-wrap { position: relative; flex: none; }
.drawer-more {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0);
  color: var(--neutral-600); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease;
}
.drawer-more:hover, .drawer-more.is-open { background: var(--neutral-50); border-color: var(--neutral-300); }
.drawer-more svg.lucide { width: 18px; height: 18px; }
.drawer-more-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 210px; padding: 5px; border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-0); box-shadow: var(--shadow-popover);
  animation: dp-in 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer-more-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 0; background: transparent; color: var(--neutral-800);
  font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.12s ease;
}
.drawer-more-item:hover { background: var(--neutral-50); }
.drawer-more-item svg.lucide { width: 15px; height: 15px; color: var(--neutral-500); flex: none; }

.drawer-footer-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--orient-700);
  border-radius: 0;
}

.drawer-footer-link:hover {
  background: var(--orient-50);
}

.timeline {
  margin: 0;
  padding: 14px 18px 16px;
  list-style: none;
}
.timeline li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  padding-bottom: 19px;
}
.timeline li:last-child { padding-bottom: 2px; }
.tl-node { position: relative; display: flex; justify-content: center; }
.tl-node::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: -19px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--success-border);
}
.timeline li:last-child .tl-node::before { display: none; }
/* Completed steps get a filled check; the current step is a live ring. */
.tl-check {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success-fg);
  color: var(--neutral-0);
}
.tl-check svg.lucide { width: 11px; height: 11px; stroke-width: 3; }
.tl-dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin: 2px 2px 0;
  border-radius: 50%;
  background: var(--neutral-0);
  border: 2px solid var(--neutral-300);
}
.tl-dot.is-now { background: var(--orient-600); border-color: var(--orient-600); box-shadow: 0 0 0 4px var(--orient-100); }
.timeline li.is-now .tl-event { color: var(--orient-800); font-weight: 700; }
/* Event and its time share one baseline-aligned row (node ─ event … time), so the
   time reads as belonging to its own event, not floating between two nodes. */
.timeline li { align-items: start; }
.tl-body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.tl-event { font-size: 13px; font-weight: 600; color: var(--neutral-800); line-height: 18px; }
.tl-time { font-size: 12px; font-weight: 600; color: var(--neutral-500); text-align: right; white-space: nowrap; }

/* ---------- Needs attention panel ---------- */

.attention-panel {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 376px;
  max-height: min(660px, calc(100vh - 78px));
  z-index: 20;
  overflow-y: auto;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  box-shadow: var(--shadow-popover);
  padding: 14px 16px 16px;
  transform-origin: top right;
  animation: notif-pop 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes notif-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .attention-panel { animation: none; } }

.attention-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.attention-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.attention-head-sub {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--neutral-500);
}

.issue {
  padding: 12px 0;
  border-top: 1px solid var(--neutral-100);
}

.issue.is-expanded {
  padding: 12px;
  margin: 0 -8px;
  border: 1px solid var(--orient-200);
  border-radius: 0;
  background: var(--orient-50);
}

.issue.is-assigned {
  padding: 12px;
  margin: 0 -8px;
  border: 1px solid var(--warning-border);
  border-radius: 0;
  background: var(--warning-bg);
}

.issue.is-assigned + .issue {
  border-top: 0;
}

.issue.is-assigned.is-expanded {
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.issue-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.issue-rank {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  background: var(--neutral-100);
  color: var(--neutral-600);
}

.issue[data-severity="critical"] .issue-rank {
  background: var(--critical-bg);
  color: var(--critical-strong);
}

.issue[data-severity="high"] .issue-rank {
  background: var(--warning-bg);
  color: var(--warning-strong);
}

.issue-target {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
}

.issue-wait {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--critical-fg);
}

.issue[data-severity="high"] .issue-wait {
  color: var(--warning-strong);
}

.issue[data-severity="medium"] .issue-wait {
  color: var(--neutral-500);
}

.issue.is-assigned .issue-wait {
  color: var(--warning-strong);
}

.issue-problem {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-800);
}

.issue-consequence {
  margin: 2px 0 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-600);
}

.issue-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.issue-owner {
  min-width: 0;
}

.issue-owner .avatar {
  width: 24px;
  height: 24px;
}

.action-preview {
  margin-top: 10px;
  padding: 12px;
  border-radius: 0;
  background: var(--neutral-0);
  border: 1px solid var(--orient-200);
}

.action-preview > div:not(.action-preview-actions) {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--neutral-100);
}

.action-preview span {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-500);
}

.action-preview strong {
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-800);
}

.action-preview p {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-700);
}

.action-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.attention-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 28px 18px;
  border: 1px dashed var(--success-border);
  border-radius: 0;
  background: var(--success-bg);
  color: var(--success-strong);
  text-align: center;
}

.attention-empty svg.lucide {
  width: 24px;
  height: 24px;
}

.attention-empty h3,
.attention-empty p {
  margin: 0;
}

.attention-empty h3 {
  font-size: 14px;
}

.attention-empty p {
  max-width: 28ch;
  font-size: 12px;
  line-height: 16px;
}

.attention-audit {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--neutral-100);
}

.attention-audit h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-600);
}

.attention-audit ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.attention-audit li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--neutral-100);
  font-size: 12px;
  color: var(--neutral-600);
}

.attention-audit li:first-child {
  border-top: 0;
}

.attention-audit .drawer-footer-link {
  width: auto;
  margin: 0;
  padding: 4px 8px;
}

/* ---------- Toasts ---------- */

.toast-region {
  position: fixed;
  top: 74px;
  right: 20px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  padding: 12px 14px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-800);
  font-size: 13px;
  font-weight: 550;
  box-shadow: var(--shadow-popover);
  animation: toast-in-right 0.2s ease;
  pointer-events: auto;
}

.toast svg.lucide {
  flex: none;
  color: var(--success-strong);
}

.toast > span {
  min-width: 0;
  flex: 1;
}

.toast-action {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-50);
  color: var(--orient-700);
  font-size: 12px;
  font-weight: 700;
}

.toast-action:hover {
  background: var(--neutral-100);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-in-right {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- Expert Workflow Upgrades ---------- */

.worklist.is-drawer-compact .worklist-head,
.worklist.is-drawer-compact .wl-row {
  grid-template-columns: var(--wl-check) 150px 122px 76px 74px 78px minmax(134px, 1fr) 34px 118px;
}

.floor-command-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.floor-command {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(96px, 0.45fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  text-align: left;
}

.floor-command:hover {
  border-color: var(--orient-200);
  background: var(--orient-50);
}

.floor-command[data-tone="critical"] {
  border-color: var(--critical-border);
  background: var(--critical-bg);
}

.floor-command[data-tone="high"] {
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.floor-command-time {
  display: grid;
  place-items: center;
  width: 42px;
  height: 34px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-800);
  font-size: 12px;
  font-weight: 700;
}

.floor-command strong,
.floor-command em,
.floor-command b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-command strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 16px;
  font-weight: 750;
  white-space: normal;
}

.floor-command em {
  margin-top: 1px;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 600;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.floor-command b {
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 750;
  text-align: right;
  white-space: normal;
}

.floor-map {
  display: grid;
  gap: 10px;
}

.floor-map-axis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bay-grid {
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-50);
}

.bay-card {
  position: relative;
  min-height: 248px;
  background: var(--neutral-0);
}

.bay-card[data-tone="critical"],
.bay-card[data-tone="warning"],
.bay-card[data-tone="success"] {
  background: var(--neutral-0);
}

.bay-head .bay-badge {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.floor-car {
  gap: 8px;
  min-height: 172px;
}

.floor-car.is-compact {
  min-height: 0;
}

.floor-car-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.floor-risk-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--neutral-600);
}

.floor-risk-line span {
  width: 7px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.floor-risk-line strong {
  overflow: hidden;
  max-width: 104px;
  color: currentColor;
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-risk-line[data-tone="critical"] {
  color: var(--critical-strong);
}

.floor-risk-line[data-tone="warning"] {
  color: var(--warning-strong);
}

.floor-risk-line[data-tone="success"] {
  color: var(--success-strong);
}

.floor-critical {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.floor-critical span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-critical em {
  flex: none;
  color: var(--warning-strong);
  font-style: normal;
}

.floor-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.floor-owner > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-car-status {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.floor-time-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 2px;
}

.floor-time-strip > span {
  grid-template-columns: minmax(0, 1fr);
}

.floor-time-strip svg.lucide {
  display: none;
}

.floor-time-strip span span {
  font-size: 12px;
  line-height: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.floor-card-action {
  margin-top: auto;
}

.floor-card-action small {
  max-width: 52%;
}

.station-head {
  align-items: center;
}

.station-pressure {
  display: grid;
  justify-items: end;
  gap: 1px;
  margin-left: auto;
}

.station-pressure strong {
  color: var(--neutral-900);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 16px;
}

.station-pressure span,
.station-pressure em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 12px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.station-pressure em {
  color: var(--warning-strong);
}

.empty-bay {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 4px;
  width: 100%;
  min-height: 172px;
  padding: 14px;
  border: 1px dashed var(--success-border);
  background: var(--success-bg);
  text-align: left;
}

.empty-bay strong,
.empty-bay span,
.empty-bay em {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-bay strong {
  color: var(--success-strong);
  font-size: 14px;
  line-height: 20px;
}

.empty-bay span,
.empty-bay em {
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
}

.planning-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.planning-hero-actions span {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.planning-hero-actions strong {
  color: var(--critical-strong);
}

.dispatch-sequence,
.carryover-list,
.gate-list {
  display: grid;
}

.dispatch-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 154px;
  gap: 14px;
  align-items: start;
  min-height: 112px;
  padding: 14px 16px;
  border-top: 1px solid var(--neutral-100);
}

.dispatch-card:first-child,
.carryover-card:first-child,
.gate-list span:first-child {
  border-top: 0;
}

.dispatch-order {
  display: grid;
  gap: 6px;
}

.dispatch-order strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-50);
  color: var(--neutral-800);
}

.dispatch-order time {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.dispatch-main {
  min-width: 0;
}

.dispatch-car {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.dispatch-car strong,
.dispatch-car em,
.dispatch-main p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-car strong {
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
}

.dispatch-car em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
}

.dispatch-main p {
  margin: 4px 0 8px;
  color: var(--neutral-700);
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
}

.dispatch-impact {
  display: grid;
  gap: 4px;
}

.dispatch-impact span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  min-width: 0;
}

.dispatch-impact svg.lucide {
  width: 13px;
  height: 12px;
  color: var(--neutral-400);
}

.dispatch-owner {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

.dispatch-owner .person-chip {
  justify-content: flex-start;
}

.dispatch-card[data-tone="critical"] .dispatch-order strong,
.dispatch-card[data-tone="critical"] .dispatch-car strong {
  color: var(--critical-strong);
}

.dispatch-card[data-tone="warning"] .dispatch-order strong,
.dispatch-card[data-tone="warning"] .dispatch-car strong {
  color: var(--warning-strong);
}

.dispatch-card[data-tone="success"] .dispatch-order strong,
.dispatch-card[data-tone="success"] .dispatch-car strong {
  color: var(--success-strong);
}

.gate-list span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  min-height: 62px;
  padding: 12px 16px;
  border-top: 1px solid var(--neutral-100);
}

.gate-list svg.lucide {
  grid-row: 1 / span 2;
  margin-top: 2px;
  color: var(--neutral-500);
}

.gate-list strong,
.gate-list em {
  grid-column: 2;
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.gate-list strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.gate-list em {
  margin-top: 2px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 650;
}

.gate-list span[data-tone="critical"] svg,
.gate-list span[data-tone="critical"] strong {
  color: var(--critical-strong);
}

.gate-list span[data-tone="warning"] svg,
.gate-list span[data-tone="warning"] strong {
  color: var(--warning-strong);
}

.gate-list span[data-tone="success"] svg,
.gate-list span[data-tone="success"] strong {
  color: var(--success-strong);
}

.carryover-card {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 142px;
  align-items: start;
  gap: 14px;
  min-height: 132px;
  padding: 16px;
  border-top: 1px solid var(--neutral-100);
}

.carryover-card > div:first-child {
  min-width: 0;
}

.carryover-card strong,
.carryover-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carryover-card > div:first-child strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.carryover-card > div:first-child span {
  margin-top: 2px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
}

.carryover-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  gap: 10px 16px;
  min-width: 0;
  margin: 0;
}

.carryover-card dt,
.carryover-card dd {
  overflow: visible;
  text-overflow: clip;
}

.carryover-card dt {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.carryover-card dd {
  margin: 2px 0 0;
  color: var(--neutral-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  white-space: normal;
}

.carryover-card[data-tone="critical"] > div:first-child strong {
  color: var(--critical-strong);
}

.close-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(126px, 1fr));
  gap: 8px;
  min-width: 0;
}

.close-checklist span {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 1px 8px;
  min-width: 0;
}

.close-checklist svg.lucide {
  grid-row: 1 / span 2;
  width: 13px;
  height: 12px;
  margin-top: 1px;
}

.close-checklist strong,
.close-checklist em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.close-checklist strong {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 850;
}

.close-checklist em {
  color: var(--neutral-800);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
}

.close-checklist [data-state="done"] svg {
  color: var(--success-strong);
}

.close-checklist [data-state="missing"] svg,
.close-checklist [data-state="missing"] strong,
.close-checklist [data-state="missing"] em {
  color: var(--critical-strong);
}

.close-view .planning-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.46fr);
}

.close-view .planning-grid > .planning-panel:first-child {
  grid-column: 2;
  grid-row: 1;
}

.close-view .planning-grid > .planning-panel-wide {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.close-view .planning-grid > .planning-panel:last-child {
  grid-column: 2;
  grid-row: 2;
}

.morning-plan {
  display: grid;
  gap: 12px;
}

.morning-hero {
  align-items: center;
}

.first-decision,
.close-decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr) 260px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--critical-border);
  border-radius: 0;
  background: var(--critical-bg);
}

.close-decision {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.close-decision[data-tone="success"] {
  border-color: var(--success-border);
  background: var(--success-bg);
}

.first-decision-main,
.first-decision-options,
.first-decision-actions,
.close-decision > div {
  min-width: 0;
}

.decision-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--critical-strong);
  font-size: 12px;
  line-height: 16px;
  font-weight: 850;
}

.close-decision[data-tone="success"] .decision-kicker {
  color: var(--success-strong);
}

.decision-kicker svg.lucide {
  width: 14px;
  height: 14px;
}

.first-decision h3,
.close-decision h3 {
  margin: 4px 0;
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 850;
  text-wrap: pretty;
}

.first-decision p,
.close-decision p {
  max-width: 72ch;
  margin: 0;
  color: var(--neutral-700);
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
}

.first-decision-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.first-decision-options span {
  display: grid;
  gap: 1px;
  min-width: 94px;
  min-height: 44px;
  padding: 8px 8px;
  border: 1px solid rgba(145, 42, 42, 0.18);
  border-radius: 0;
  background: var(--neutral-0);
}

.first-decision-options b,
.first-decision-options strong {
  display: block;
}

.first-decision-options b {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.first-decision-options strong {
  color: var(--neutral-900);
  font-size: 12px;
  line-height: 16px;
  font-weight: 850;
}

.first-decision-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.plan-strip {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

.plan-strip span {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 1px 8px;
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-left: 1px solid var(--neutral-100);
}

.plan-strip span:first-child {
  border-left: 0;
}

.plan-strip b {
  grid-column: 1 / -1;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.plan-strip strong {
  color: var(--neutral-900);
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
}

.plan-strip em {
  overflow: hidden;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.morning-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.morning-left,
.morning-right {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.morning-main {
  min-width: 0;
}

.plan-bay-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.plan-bay {
  display: grid;
  gap: 8px;
  min-width: 0;
  min-height: 104px;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: inherit;
  text-align: left;
}

.plan-bay:hover {
  border-color: var(--orient-200);
  background: var(--orient-50);
}

.plan-bay span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plan-bay strong {
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 18px;
  font-weight: 800;
}

.plan-bay em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 0;
  background: var(--neutral-100);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 800;
}

.plan-bay b,
.plan-bay small {
  overflow: hidden;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-bay b {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.plan-bay i {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 0;
  background: var(--orient-50);
  color: var(--orient-800);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 850;
}

.plan-bay.is-fit {
  border-color: var(--orient-300);
  background: var(--orient-50);
}

.plan-bay[data-tone="success"] {
  border-color: var(--success-border);
  background: var(--neutral-0);
}

.plan-bay[data-tone="success"].is-fit {
  border-color: var(--orient-300);
  background: var(--orient-50);
}

.plan-bay[data-tone="success"] em {
  background: var(--success-bg);
  color: var(--success-strong);
}

.plan-bay[data-tone="warning"] {
  border-color: var(--warning-border);
  background: var(--neutral-0);
}

.plan-bay[data-tone="warning"] em {
  background: var(--warning-bg);
  color: var(--warning-strong);
}

.plan-bay[data-tone="waiting"] {
  border-color: var(--waiting-border);
  background: var(--neutral-0);
}

.plan-bay[data-tone="waiting"] em {
  background: var(--waiting-bg);
  color: var(--waiting-strong);
}

.plan-staff-list {
  display: grid;
}

.plan-staff-list > span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 42px;
  gap: 0 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px 14px;
  border-top: 1px solid var(--neutral-100);
}

.plan-staff-list > span.is-fit {
  background: var(--orient-50);
  box-shadow: inset 0 0 0 1px var(--orient-200);
}

.plan-staff-list > span:first-child {
  border-top: 0;
}

.plan-staff-list .avatar {
  grid-row: 1 / span 2;
}

.plan-staff-list strong,
.plan-staff-list em,
.plan-staff-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-staff-list strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 16px;
  font-weight: 800;
}

.plan-staff-list em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 650;
}

.plan-staff-list b {
  grid-column: 3;
  grid-row: 1;
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  text-align: right;
}

.plan-staff-list small {
  grid-column: 2 / span 2;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.plan-staff-list [data-tone="success"] small {
  color: var(--success-strong);
}

.plan-staff-list > span.is-fit small {
  color: var(--orient-800);
}

.plan-staff-list [data-tone="warning"] small,
.plan-staff-list [data-tone="waiting"] small {
  color: var(--warning-strong);
}

.plan-sections {
  display: grid;
}

.plan-section {
  border-top: 1px solid var(--neutral-100);
}

.plan-section:first-child {
  border-top: 0;
}

.plan-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 12px 16px;
  background: var(--neutral-25);
}

.plan-section-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.plan-section-head svg.lucide {
  width: 15px;
  height: 16px;
  flex: none;
}

.plan-section-head strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 850;
}

.plan-section-head em {
  overflow: hidden;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-section[data-tone="critical"] .plan-section-head {
  background: var(--critical-bg);
}

.plan-section[data-tone="critical"] .plan-section-head svg,
.plan-section[data-tone="critical"] .plan-section-head strong {
  color: var(--critical-strong);
}

.plan-section[data-tone="warning"] .plan-section-head {
  background: var(--warning-bg);
}

.plan-section[data-tone="warning"] .plan-section-head svg,
.plan-section[data-tone="warning"] .plan-section-head strong {
  color: var(--warning-strong);
}

.plan-section[data-tone="waiting"] .plan-section-head {
  background: var(--waiting-bg);
}

.plan-section[data-tone="waiting"] .plan-section-head svg,
.plan-section[data-tone="waiting"] .plan-section-head strong {
  color: var(--waiting-strong);
}

.plan-work-rows {
  display: grid;
}

.plan-work-row {
  display: grid;
  grid-template-columns: 20px minmax(240px, 1fr) minmax(220px, 0.72fr) 126px;
  gap: 12px;
  align-items: center;
  min-height: 86px;
  padding: 12px 16px;
  border-top: 1px solid var(--neutral-100);
}

.plan-work-row:first-child {
  border-top: 0;
}

.plan-work-row.is-selected {
  position: relative;
  z-index: 0;
  margin: 0 8px;
  border: 1px solid var(--orient-200);
  border-radius: 0;
  background: var(--orient-50);
}

.plan-work-row.is-selected + .plan-work-row {
  border-top-color: transparent;
}

.plan-row-handle {
  color: var(--neutral-300);
}

.plan-row-handle svg.lucide {
  width: 15px;
  height: 16px;
}

.plan-row-main,
.plan-row-recommend,
.plan-row-action {
  min-width: 0;
}

.plan-row-title {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 3px 8px;
  min-width: 0;
}

.plan-row-title strong,
.plan-row-title em,
.plan-row-job,
.plan-row-owner,
.plan-row-meta b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-row-title strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 850;
}

.plan-row-title em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
}

.plan-row-job {
  display: block;
  margin-top: 4px;
  color: var(--neutral-800);
  font-size: 13px;
  line-height: 18px;
  font-weight: 750;
}

.plan-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 4px;
}

.plan-row-meta time {
  color: var(--neutral-900);
  font-size: 12px;
  line-height: 16px;
  font-weight: 850;
}

.plan-row-meta b {
  color: var(--critical-strong);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.plan-row-recommend {
  display: grid;
  gap: 4px;
}

.plan-row-recommend > span {
  color: var(--neutral-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.plan-row-owner {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
}

.plan-bay-rec {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.plan-bay-rec em,
.plan-bay-rec strong {
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 800;
}

.plan-bay-rec .bay-ref {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--orient-200);
  border-radius: 0;
  background: var(--orient-50);
  color: var(--orient-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 850;
}

.plan-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.plan-evidence em {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 0;
  background: var(--neutral-50);
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
}

.plan-evidence svg.lucide {
  width: 11px;
  height: 12px;
  color: var(--success-strong);
}

.plan-recommendation-block {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

.plan-recommendation-block strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 850;
}

.plan-recommendation-block em {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 650;
}

.plan-row-action {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.plan-row-action time {
  color: var(--neutral-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 850;
  text-align: right;
}

.plan-row-action .btn {
  width: 100%;
}

.arrival-list,
.pickup-promise-list {
  display: grid;
}

.arrival-list button,
.pickup-promise-list button {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--neutral-100);
  background: transparent;
  color: inherit;
  text-align: left;
}

.arrival-list button:first-child,
.pickup-promise-list button:first-child {
  border-top: 0;
}

.arrival-list button:hover,
.pickup-promise-list button:hover {
  background: var(--neutral-50);
}

.arrival-list time,
.pickup-promise-list time {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 850;
}

.arrival-list span,
.pickup-promise-list span {
  min-width: 0;
}

.arrival-list strong,
.arrival-list em,
.pickup-promise-list strong,
.pickup-promise-list em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arrival-list strong,
.pickup-promise-list strong {
  color: var(--neutral-900);
  font-size: 12px;
  line-height: 16px;
  font-weight: 850;
}

.arrival-list em,
.pickup-promise-list em {
  margin-top: 2px;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
  white-space: normal;
}

.arrival-list b,
.pickup-promise-list b {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.arrival-list [data-tone="critical"] time,
.arrival-list [data-tone="critical"] b,
.pickup-promise-list [data-tone="critical"] time,
.pickup-promise-list [data-tone="critical"] b {
  color: var(--critical-strong);
}

.arrival-list [data-tone="warning"] b,
.arrival-list [data-tone="waiting"] b,
.pickup-promise-list [data-tone="warning"] b,
.pickup-promise-list [data-tone="waiting"] b {
  color: var(--warning-strong);
}

.arrival-list [data-tone="success"] b,
.pickup-promise-list [data-tone="success"] b {
  color: var(--success-strong);
}

/* ---------- Plan cockpit layout ---------- */

.plan-cockpit {
  display: grid;
  gap: 16px;
}

/* ---------- Plan & Dispatch v2 (unified with Run the Floor) ---------- */

.plan-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.plan-kpi {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 4px 10px;
  padding: 12px 14px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-low);
}

.plan-kpi-icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: var(--neutral-50);
  color: var(--neutral-600);
}

.plan-kpi-icon svg.lucide {
  width: 17px;
  height: 16px;
}

.plan-kpi[data-tone="critical"] .plan-kpi-icon { background: var(--critical-bg); color: var(--critical-strong); }
.plan-kpi[data-tone="warning"] .plan-kpi-icon { background: var(--warning-bg); color: var(--warning-strong); }
.plan-kpi[data-tone="waiting"] .plan-kpi-icon { background: var(--waiting-bg); color: var(--waiting-strong); }
.plan-kpi[data-tone="success"] .plan-kpi-icon { background: var(--success-bg); color: var(--success-strong); }

.plan-kpi-label {
  grid-column: 1;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.plan-kpi-value {
  grid-column: 1;
  color: var(--neutral-900);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
}

.plan-kpi-sub {
  grid-column: 1 / -1;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.plan-kpi .plan-load-bar {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.plan-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.plan-main-grid {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.plan-move-rail {
  min-width: 0;
}

.plan-move-rail .move-spine {
  position: sticky;
  top: 0;
  grid-template-columns: minmax(0, 1fr);
}

.plan-move-rail .move-grid {
  grid-template-columns: minmax(0, 1fr);
}

.plan-move-rail .move-spine-head {
  min-height: 72px;
}

.plan-pl-row.is-selected {
  --row-bg: var(--neutral-25);
  background: var(--row-bg);
  box-shadow: inset 0 0 0 1px var(--orient-200);
}

.plan-progress-list .plan-pl-row {
  grid-template-columns: 24px minmax(210px, 0.92fr) minmax(0, 1.4fr);
  gap: 12px;
}

.plan-progress-list .plan-pl-row .pl-meta {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 118px minmax(145px, 0.9fr) 128px;
  gap: 10px;
  justify-content: stretch;
  width: 100%;
}

.plan-progress-list .plan-pl-row .pl-status,
.plan-progress-list .plan-pl-row .pl-owner {
  display: none;
}

.plan-progress-list .plan-pl-row .pl-workstream,
.plan-progress-list .plan-pl-row .pl-timing,
.plan-progress-list .plan-pl-row .pl-risk,
.plan-progress-list .plan-pl-row .pl-action {
  width: 100%;
  min-width: 0;
}

.plan-progress-list .plan-pl-row .pl-workstream {
  justify-content: flex-start;
}

.plan-progress-list .plan-pl-row .pl-workstream span {
  min-width: 0;
}

.plan-progress-list .plan-pl-row .pl-timing {
  justify-content: flex-start;
  gap: 6px;
}

.plan-progress-list .plan-pl-row .pl-risk {
  justify-content: flex-start;
}

.plan-progress-list .plan-pl-row .pl-action {
  width: auto;
}

.plan-progress-list .plan-pl-row .pl-flow-label {
  height: 24px;
  padding: 0 8px;
  border-radius: 0;
  background: var(--neutral-50);
}

.plan-progress-list .plan-pl-row .pl-flow-label[data-tone="waiting"] {
  background: var(--waiting-bg);
}

.plan-progress-list .plan-pl-row .pl-flow-label[data-tone="active"] {
  background: var(--indigo-50);
}

.plan-progress-list .plan-pl-row .pl-flow-label[data-tone="success"] {
  background: var(--success-bg);
}

.plan-list-mode {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.plan-floor-mode {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(360px, 1fr) minmax(260px, 0.42fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.plan-floor-mode + .plan-rail {
  display: none;
}

.plan-floor-column,
.plan-assist-panel {
  min-width: 0;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-low);
}

.plan-floor-column {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.plan-floor-column.is-wide {
  min-height: 100%;
}

.plan-bays-large {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plan-bays-large .plan-bay {
  min-height: 116px;
  text-align: left;
}

.plan-assist-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.plan-assist-head {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.plan-assist-head > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 0;
  background: var(--orient-50);
  color: var(--orient-700);
}

.plan-assist-head svg.lucide {
  width: 17px;
  height: 16px;
}

.plan-assist-head h3,
.plan-assist-head p {
  margin: 0;
}

.plan-assist-head h3 {
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 750;
}

.plan-assist-head p {
  margin-top: 2px;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.plan-assist-grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-200);
}

.plan-assist-grid div {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: var(--neutral-25);
}

.plan-assist-grid strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 750;
}

.plan-assist-grid span {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.plan-list-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.plan-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.plan-list-head h3 {
  margin: 0;
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.plan-list-head span {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-align: right;
}

.plan-progress-list {
  min-width: 0;
}

.plan-pl-row .pl-status svg.lucide {
  width: 14px;
  height: 14px;
  color: var(--neutral-400);
}

.avatar-empty {
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--neutral-300);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-500);
  font-size: 12px;
  font-weight: 700;
}

/* Capacity band (below the full-width list) */
.plan-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 12px;
  min-width: 0;
}

.plan-rail-card {
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: var(--shadow-low);
}

.plan-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--neutral-100);
}

.plan-rail-head h3 {
  margin: 0;
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.plan-rail-head span {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.plan-bays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 12px;
}

.plan-bay {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

.plan-bay[data-tone="success"] { border-color: var(--success-border); background: var(--success-bg); }
.plan-bay[data-tone="warning"] { border-color: var(--warning-border); background: var(--warning-bg); }
.plan-bay[data-tone="waiting"] { border-color: var(--waiting-border); background: var(--waiting-bg); }
.plan-bay.is-fit {
  border-color: var(--orient-300);
  background: var(--orient-50);
}

.plan-bay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.plan-bay-top strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

.plan-bay-status {
  padding: 1px 8px;
  border-radius: 0;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.plan-bay-status[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); }
.plan-bay-status[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); }
.plan-bay-status[data-tone="waiting"] { background: var(--waiting-bg); color: var(--waiting-strong); }

.plan-bay-car {
  color: var(--neutral-800);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
}

.plan-bay-note {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .plan-rail {
    grid-template-columns: minmax(0, 1fr);
  }
}

.plan-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.plan-metric-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px 8px;
  min-width: 0;
  min-height: 126px;
  padding: 14px 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: inherit;
  text-align: left;
}

.plan-metric-trend {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  color: var(--neutral-600);
}

.plan-metric-trend svg.lucide {
  width: 14px;
  height: 14px;
}

.plan-metric-trend[data-tone="success"] {
  color: var(--success-strong);
}

.plan-metric-trend[data-tone="warning"] {
  color: var(--warning-strong);
}

.plan-metric-trend[data-tone="critical"] {
  color: var(--critical-strong);
}

.plan-metric-card > span {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plan-metric-card > span strong {
  overflow: hidden;
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-metric-card svg.lucide {
  width: 18px;
  height: 18px;
  color: var(--neutral-500);
}

.plan-metric-card > b {
  grid-column: 1;
  color: var(--neutral-900);
  font-size: 28px;
  line-height: 34px;
  font-weight: 850;
}

.plan-metric-card > em {
  align-self: center;
  justify-self: start;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 0;
  background: var(--neutral-100);
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 850;
}

.plan-metric-card > small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-metric-card[data-tone="critical"] > em,
.plan-metric-card[data-tone="critical"] svg {
  color: var(--critical-strong);
}

.plan-metric-card[data-tone="critical"] > em {
  background: var(--critical-bg);
}

.plan-metric-card[data-tone="success"] > em,
.plan-metric-card[data-tone="success"] svg {
  color: var(--success-strong);
}

.plan-metric-card[data-tone="success"] > em {
  background: var(--success-bg);
}

.plan-metric-card[data-tone="warning"] > em,
.plan-metric-card[data-tone="warning"] svg {
  color: var(--warning-strong);
}

.plan-metric-card[data-tone="warning"] > em {
  background: var(--warning-bg);
}

.plan-metric-card[data-tone="waiting"] > em,
.plan-metric-card[data-tone="waiting"] svg {
  color: var(--waiting-strong);
}

.plan-metric-card[data-tone="waiting"] > em {
  background: var(--waiting-bg);
}

.plan-load-bar {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 0;
  background: var(--neutral-100);
}

.plan-load-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--orient-600);
}

.plan-board-grid {
  display: grid;
  grid-template-columns: 344px minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: stretch;
}

.plan-need-panel,
.plan-today-panel,
.plan-capacity-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

.plan-need-panel,
.plan-today-panel {
  min-height: 620px;
}

.plan-capacity-panel {
  display: grid;
  align-content: start;
  gap: 18px;
  padding-bottom: 14px;
}

.plan-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-100);
}

.plan-panel-head h3 {
  margin: 0;
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 850;
}

.plan-panel-head > span,
.plan-panel-head button {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.plan-panel-head button,
.plan-list-controls button {
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: var(--neutral-50);
  color: var(--neutral-700);
}

.plan-panel-head button {
  padding: 0 10px;
}

.plan-count {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: var(--critical-bg);
  color: var(--critical-strong) !important;
}

.plan-need-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.plan-need-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}

.plan-need-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.plan-need-card strong {
  overflow: hidden;
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-need-card em {
  flex: none;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 0;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 850;
}

.plan-need-card p {
  margin: 0;
  color: var(--neutral-600);
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
}

.plan-need-card .btn {
  justify-self: start;
}

.plan-need-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--success-strong);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.plan-need-done svg.lucide {
  width: 15px;
  height: 16px;
}

.plan-need-card.is-done {
  border-color: var(--success-border);
  background: var(--success-bg);
}

.plan-need-card[data-tone="critical"] em,
.plan-car-row[data-tone="critical"] .plan-row-alert {
  color: var(--critical-strong);
}

.plan-need-card[data-tone="critical"] em {
  background: var(--critical-bg);
}

.plan-need-card[data-tone="warning"] em {
  color: var(--warning-strong);
  background: var(--warning-bg);
}

.plan-need-card[data-tone="waiting"] em {
  color: var(--waiting-strong);
  background: var(--waiting-bg);
}

.plan-need-card[data-tone="success"] em {
  background: var(--success-bg);
  color: var(--success-strong);
}

.plan-list-controls {
  display: flex;
  gap: 8px;
}

.plan-list-controls button {
  padding: 0 12px;
}

.plan-car-groups {
  display: grid;
  padding: 10px 12px 92px;
}

.plan-car-group {
  display: grid;
  gap: 8px;
}

.plan-car-group + .plan-car-group {
  margin-top: 10px;
}

.plan-car-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: var(--neutral-50);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.plan-car-group-head:hover {
  background: var(--neutral-100);
}

.plan-group-caret {
  width: 16px;
  height: 16px;
  color: var(--neutral-500);
  transition: transform 160ms ease;
}

.plan-car-group.is-collapsed .plan-group-caret {
  transform: rotate(-90deg);
}

.plan-car-group.is-collapsed .plan-car-list {
  display: none;
}

.plan-car-group-head b {
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 850;
}

.plan-car-group-head em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 800;
}

.plan-car-list {
  display: grid;
  gap: 8px;
}

.plan-car-row {
  display: grid;
  grid-template-columns: 22px 14px 104px minmax(0, 1fr) 52px 58px 30px;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--neutral-25);
  color: inherit;
  text-align: left;
}

.plan-car-row:hover {
  border-color: var(--neutral-200);
  background: var(--neutral-50);
}

.plan-car-row.is-selected {
  border-color: var(--orient-200);
  background: var(--orient-50);
}

.plan-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--neutral-300);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-0);
}

.plan-car-row.is-selected .plan-check {
  border-color: var(--orient-600);
  background: var(--orient-600);
}

.plan-check svg.lucide {
  width: 13px;
  height: 12px;
}

.plan-row-alert {
  display: grid;
  place-items: center;
  color: var(--neutral-400);
  font-weight: 850;
}

.plan-car-row > strong,
.plan-task b,
.plan-task em,
.plan-car-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-car-row > strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.plan-car-row.is-assigned {
  background: var(--neutral-0);
}

.plan-car-row.is-assigned .plan-row-alert {
  color: var(--success-fg);
}

.plan-car-row.is-assigned .plan-row-alert svg.lucide {
  width: 14px;
  height: 14px;
}

.plan-task {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

.plan-task b {
  max-width: 100%;
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
}

.plan-task em,
.plan-car-row small {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
}

.plan-promise {
  justify-self: end;
  color: var(--neutral-800);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.plan-bay-chip,
.plan-lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

.plan-lead {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: var(--neutral-100);
}

.plan-lead[data-empty="true"] {
  border-style: dashed;
  border-color: var(--neutral-300);
  background: var(--neutral-0);
  color: var(--neutral-500);
}

.plan-lead[data-assigned="true"] {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-strong);
}

.plan-car-row small {
  display: none;
}

.plan-bulk-action {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0;
  padding: 10px;
  border-radius: 0;
  background: var(--neutral-900);
  color: var(--neutral-0);
  box-shadow: var(--shadow-popover);
}

.plan-bulk-action strong {
  padding: 0 10px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 850;
}

.plan-bulk-action button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
  color: var(--neutral-0);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  cursor: pointer;
}

.plan-bulk-action button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.plan-bulk-clear {
  width: 32px;
  padding: 0 !important;
  justify-content: center;
}

.plan-mini-bays {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.plan-mini-bay {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: inherit;
  text-align: left;
}

.plan-mini-bay span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plan-mini-bay strong {
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 850;
}

.plan-mini-bay em {
  color: var(--neutral-500);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 850;
}

.plan-mini-bay b,
.plan-mini-bay small {
  overflow: hidden;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-mini-bay i {
  color: var(--orient-800);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 850;
}

.plan-mini-bay[data-tone="success"] {
  border-color: var(--success-border);
}

.plan-mini-bay[data-tone="warning"] {
  border-color: var(--warning-border);
}

.plan-mini-bay[data-tone="waiting"] {
  border-color: var(--waiting-border);
}

.plan-mini-bay.is-fit {
  border-color: var(--orient-300);
  background: var(--orient-50);
}

.plan-load-list {
  display: grid;
  gap: 10px;
  padding: 14px 14px 0;
}

.plan-load-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  color: inherit;
  text-align: left;
}

.plan-load-row.is-fit {
  border-color: var(--orient-200);
  background: var(--orient-50);
}

.plan-load-row strong,
.plan-load-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-load-row strong {
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 18px;
  font-weight: 850;
}

.plan-load-row span {
  height: 6px;
  overflow: hidden;
  border-radius: 0;
  background: var(--neutral-100);
}

.plan-load-row span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--orient-600);
}

.plan-load-row[data-tone="warning"] span i {
  background: var(--warning-fg);
}

.plan-load-row[data-tone="waiting"] span i {
  background: var(--waiting-fg);
}

.plan-load-row em {
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 850;
  text-align: right;
}

.plan-capacity-note {
  margin: 10px 16px 0;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

/* "What this does" — scannable: a lead line + labelled fact rows, no heavy box. */
.action-proof {
  margin-top: 14px;
  padding: 12px 12px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
}
.action-proof[data-tone="critical"] { border-color: var(--critical-border); background: var(--critical-bg); }
.action-proof[data-tone="warning"],
.action-proof[data-tone="waiting"] { border-color: var(--warning-border); background: var(--warning-bg); }
/* "What this does" is a plain explainer — it describes the action, so it stays a calm
   hairline card (no blue/tinted fill competing with the situation block). */
.action-proof[data-tone="info"] { border-color: var(--neutral-200); background: var(--neutral-0); }
.action-proof-title {
  display: flex; align-items: center; gap: 5px;
  margin: 0 0 4px;
  color: var(--neutral-500);
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.action-proof[data-tone="info"] .action-proof-title { color: var(--neutral-500); }
.action-proof-title svg.lucide { width: 13px; height: 13px; color: var(--neutral-400); flex: none; }
.action-proof[data-tone="info"] .action-proof-facts { border-top-color: var(--neutral-200); }
.action-proof-lead {
  margin: 0 0 8px;
  color: var(--neutral-800);
  font-size: 13px; line-height: 1.4; font-weight: 600;
}
.action-proof-facts { display: grid; gap: 6px; margin: 0; padding-top: 8px; border-top: 1px solid var(--neutral-150, var(--neutral-200)); }
.action-proof-facts > div { display: flex; align-items: baseline; gap: 12px; }
.action-proof-facts dt { flex: none; white-space: nowrap; color: var(--neutral-500); font-size: 12px; font-weight: 600; }
.action-proof-facts dd { flex: 1; min-width: 0; margin: 0; color: var(--neutral-800); font-size: 12px; font-weight: 700; text-align: right; }

/* Customer-approval flow card */
.cust-flow {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px; padding: 12px;
  border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0);
}
.cust-flow[data-state="approved"] { border-color: var(--success-border); background: var(--success-bg); }
.cust-flow[data-state="declined"] { border-color: var(--critical-border); background: var(--critical-bg); }
.cust-flow-row { display: flex; align-items: flex-start; gap: 10px; }
.cust-flow-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 0; background: var(--neutral-100); color: var(--neutral-600); }
.cust-flow-icon svg.lucide { width: 15px; height: 16px; }
.cust-flow-icon[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-fg); }
.cust-flow-icon[data-tone="waiting"] { background: var(--warning-bg); color: var(--warning-fg); }
.cust-flow-icon[data-tone="success"] { background: var(--success-bg); color: var(--success-fg); }
.cust-flow-icon[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-fg); }
.cust-flow-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cust-flow-copy b { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.cust-flow-copy span { font-size: 12px; color: var(--neutral-600); line-height: 1.4; }
.cust-flow-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.cust-flow-acts .btn svg.lucide { width: 13px; height: 12px; }
.spin { animation: bay-spin 0.8s linear infinite; }
@keyframes bay-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .toast,
  .wl-group svg.lucide {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1160px) {
  .overview-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .overview-kpi:nth-child(-n + 3) {
    border-bottom: 1px solid var(--neutral-100);
  }

  .overview-kpi:nth-child(3n + 1) {
    border-left: 0;
  }

  .overview-body {
    flex-direction: column;
    overflow-y: auto;
  }

  .overview-floor,
  .overview-work {
    flex: 1 1 auto;
    min-height: 460px;
  }

  .canvas.is-overview .drawer {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
  }

  .drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    box-shadow: var(--shadow-popover);
  }

  .floor-grid {
    grid-template-columns: 1fr;
  }

  .kanban-board,
  .canvas.drawer-open .kanban-board {
    grid-template-columns: repeat(3, minmax(210px, 1fr));
  }

  .station-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-hero {
    align-items: flex-start;
  }

  .planning-hero-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .plan-strip {
    flex-wrap: wrap;
  }

  .plan-strip span {
    flex: 1 1 180px;
  }

  .plan-strip em {
    white-space: normal;
  }

  .morning-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .morning-main {
    order: 1;
  }

  .morning-left {
    order: 2;
  }

  .morning-right {
    order: 3;
  }

  .morning-left,
  .morning-right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .morning-right .planning-panel:last-child {
    grid-column: 1 / -1;
  }

  .first-decision {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .first-decision-main {
    grid-column: 1 / -1;
  }

  .first-decision-options {
    grid-column: 1;
  }

  .first-decision-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .plan-work-row {
    grid-template-columns: 20px minmax(0, 1fr) minmax(220px, 0.7fr) 128px;
  }

  .plan-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plan-main-grid {
    grid-template-columns: minmax(240px, 0.32fr) minmax(0, 1fr);
  }

  .plan-floor-mode {
    grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  }

  .plan-floor-mode .plan-assist-panel {
    grid-column: 1 / -1;
  }

  .live-floor-layout {
    grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
    grid-template-areas:
      "arrivals bays"
      "detail bays"
      "moves queues"
      "load load";
  }

  .plan-board-grid {
    grid-template-columns: minmax(300px, 0.38fr) minmax(0, 1fr);
  }

  .plan-capacity-panel {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  }

  .plan-car-row {
    grid-template-columns: 22px 14px 98px minmax(0, 1fr) 50px 52px 30px;
  }

  .plan-car-row small {
    display: none;
  }

  .plan-row-title {
    grid-template-columns: minmax(92px, max-content) minmax(0, 1fr);
  }

  .plan-row-job {
    white-space: normal;
  }

  .close-view .planning-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .close-view .planning-grid > .planning-panel:first-child,
  .close-view .planning-grid > .planning-panel-wide,
  .close-view .planning-grid > .planning-panel:last-child {
    grid-column: auto;
    grid-row: auto;
  }

  .carryover-card {
    grid-template-columns: minmax(150px, 0.38fr) minmax(0, 1fr) 132px;
  }

  .close-list span {
    white-space: normal;
  }
}

@media (max-width: 1000px) {
  .overview-left-head,
  .overview-floor-head {
    flex-direction: column;
  }

  .overview-mini-stats,
  .overview-floor-stats {
    width: 100%;
  }

  .overview-bay-grid,
  .overview-queue-kanban {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-status .status-block:not(.is-risk) {
    display: none;
  }

  .topbar {
    gap: 12px;
  }

  .pl-overview {
    align-items: flex-start;
    flex-direction: column;
  }

  .pl-stats {
    width: 100%;
    min-width: 0;
  }

  .move-spine {
    grid-template-columns: minmax(0, 1fr);
  }

  .move-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pl-row {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas:
      "select main"
      "select meta";
    gap: 8px 12px;
  }

  .pl-select {
    grid-area: select;
  }

  .pl-main {
    grid-area: main;
  }

  .pl-meta {
    grid-area: meta;
    display: grid;
    grid-template-columns: max-content max-content max-content minmax(120px, 1fr) 34px 124px;
    justify-content: stretch;
    gap: 8px;
    width: 100%;
  }

  .pl-timing,
  .pl-risk,
  .pl-workstream,
  .pl-status {
    display: flex;
  }

  .split-view {
    grid-template-columns: minmax(0, 1fr);
  }

  .kanban-board,
  .canvas.drawer-open .kanban-board {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
  }

  .plan-floor-mode,
  .live-floor-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .live-floor-layout {
    grid-template-areas:
      "arrivals"
      "bays"
      "detail"
      "moves"
      "queues"
      "load";
  }

  .live-queue-kanban,
  .live-bay-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .split-issue {
    grid-template-columns: 22px minmax(160px, 1.2fr) 94px minmax(120px, 0.7fr) 114px;
  }

  .split-issue-owner {
    display: none;
  }
}

@media (max-width: 780px) {
  .overview-bay-grid,
  .overview-queue-kanban {
    grid-template-columns: minmax(0, 1fr);
  }

  .canvas.is-overview .drawer {
    left: 12px;
    width: auto;
  }

  .side-rail {
    display: none;
  }

  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
  }

  .topbar-identity {
    min-width: 0;
  }

  .topbar-identity h1,
  .topbar-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mode-tabs {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .plan-strip,
  .morning-left,
  .morning-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-metrics,
  .plan-main-grid,
  .plan-floor-mode,
  .plan-board-grid,
  .plan-capacity-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-bays-large,
  .live-bays .bay-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-move-rail .move-spine {
    position: relative;
    top: auto;
  }

  .plan-need-panel,
  .plan-today-panel {
    min-height: auto;
  }

  .plan-car-row {
    grid-template-columns: 22px 14px minmax(88px, 0.5fr) minmax(0, 1fr) auto;
  }

  .plan-bay-chip,
  .plan-lead {
    display: none;
  }

  .plan-task {
    display: flex;
    gap: 1px;
  }

  .plan-bulk-action {
    max-width: calc(100vw - 32px);
    flex-wrap: wrap;
  }

  .first-decision-options {
    align-items: stretch;
  }

  .first-decision-options span {
    flex: 1 1 100%;
  }

  .plan-work-row,
  .carryover-card,
  .first-decision,
  .close-decision {
    grid-template-columns: minmax(0, 1fr);
  }

  .first-decision-main,
  .first-decision-options,
  .first-decision-actions {
    grid-column: auto;
  }

  .plan-row-action,
  .first-decision-actions {
    flex-direction: column;
  }

  .plan-row-action time {
    text-align: left;
  }

  .mode-tabs button {
    height: 44px;
    padding: 0 10px;
    flex: 1;
    white-space: nowrap;
  }

  .view-tabs button,
  .icon-button,
  .attention-button,
  .wl-group,
  .btn {
    min-height: 44px;
  }

  .icon-button {
    width: 44px;
    min-width: 44px;
  }

  .view-bar {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 16px;
  }

  .view-bar-tools {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  .attention-button {
    min-width: 148px;
    justify-content: center;
  }

  .search-box {
    min-width: 0;
  }

  .search-box input {
    width: 100%;
    min-width: 0;
  }

  .view-root {
    padding: 12px;
  }

  .progress-hover {
    display: none;
  }

  .planning-hero {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }

  .planning-hero-actions {
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
  }

  .planning-hero-actions .btn {
    width: 100%;
  }

  .disabled-reason {
    text-align: left;
  }

  .move-spine {
    position: relative;
    top: auto;
  }

  .move-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .move-card,
  .move-spine.is-dense .move-card {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas:
      "rank main"
      "rank recovery"
      "rank proof";
  }

  .move-proof {
    grid-area: proof;
    justify-self: start;
  }

  .move-spine.is-dense .move-proof {
    display: flex;
  }

  .move-action,
  .move-spine.is-dense .move-action {
    display: none;
  }

  .floor-overview {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .floor-stats {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .floor-zone {
    padding: 12px;
  }

  .floor-zone-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .bay-grid,
  .station-grid {
    grid-template-columns: 1fr;
  }

  .bay-head,
  .floor-car-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .worklist {
    height: auto;
    border-radius: 0;
  }

  .worklist-scroll {
    overflow: visible;
  }

  .worklist-head {
    display: none;
  }

  .wl-group {
    position: static;
    min-height: 44px;
    padding: 10px 12px;
  }

  .wl-group-note {
    display: none;
  }

  .wl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "car risk"
      "workflow workflow"
      "job job"
      "loc loc"
      "promise predicted"
      "owner action";
    align-items: start;
    gap: 10px 12px;
    width: 100%;
    min-width: 0;
    padding: 14px 12px;
  }

  .wl-pin,
  .wl-col-workflow.wl-pin,
  .wl-pin-right {
    position: static;
    z-index: auto;
    align-self: auto;
    background: transparent;
    box-shadow: none;
  }

  .worklist-scroll.is-scrolled .wl-col-workflow.wl-pin::after {
    display: none;
  }

  .wl-col-check {
    display: none;
  }

  .wl-car {
    grid-area: car;
  }

  .wl-col-workflow {
    grid-area: workflow;
  }

  .wl-job {
    grid-area: job;
  }

  .wl-loc {
    grid-area: loc;
  }

  .wl-promise {
    grid-area: promise;
  }

  .wl-predicted {
    grid-area: predicted;
    align-items: flex-end;
    text-align: right;
  }

  .wl-risk {
    grid-area: risk;
    align-self: start;
    justify-content: flex-end;
    max-width: 132px;
    font-size: 12px;
  }

  .wl-owner {
    grid-area: owner;
  }

  .wl-action {
    grid-area: action;
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
  }

  .btn-row-action {
    min-width: 88px;
  }

  .action-note {
    max-width: 118px;
    text-align: right;
  }

  .progress-list-view {
    gap: 12px;
  }

  .pl-overview {
    padding: 12px;
  }

  .pl-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pl-group {
    grid-template-columns: 16px 18px auto 24px;
    min-height: 44px;
    padding: 10px 12px;
  }

  .pl-group em {
    display: none;
  }

  .pl-row,
  .canvas.drawer-open .pl-row {
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-areas:
      "state main"
      "state meta";
    align-items: start;
    gap: 8px 10px;
    padding: 12px 12px;
  }

  .pl-select {
    display: none;
  }

  .pl-state,
  .list-status-icon {
    grid-area: state;
    padding-top: 1px;
  }

  .pl-main {
    grid-area: main;
    min-width: 0;
  }

  .pl-meta,
  .canvas.drawer-open .pl-meta {
    grid-area: meta;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
    width: 100%;
    padding-left: 0;
  }

  .pl-status,
  .pl-workstream,
  .pl-timing,
  .pl-risk {
    display: flex;
    min-width: 0;
  }

  .pl-action {
    grid-column: 1 / -1;
    width: 100%;
    align-items: stretch;
  }

  .pl-action > span {
    display: none;
  }

  .pl-owner {
    display: none;
  }

  .pl-workstream span,
  .pl-workstream em,
  .pl-risk strong,
  .pl-risk span {
    white-space: normal;
  }

  .split-issue {
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-areas:
      "icon main"
      "icon times"
      "icon risk"
      "icon action";
    align-items: start;
  }

  .split-issue > .list-status-icon {
    grid-area: icon;
  }

  .split-issue-main {
    grid-area: main;
  }

  .split-issue-times {
    grid-area: times;
    justify-content: start;
  }

  .split-issue-risk {
    grid-area: risk;
  }

  .split-issue .btn-row-action {
    grid-area: action;
    width: 100%;
  }

  .split-bay-grid,
  .kanban-board,
  .canvas.drawer-open .kanban-board,
  .plan-bays {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-step-path {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .pl-step {
    max-width: 100%;
  }

  .drawer-times {
    grid-template-columns: 1fr;
  }

  .drawer-times > div + div {
    border-left: 0;
    border-top: 1px solid var(--neutral-200);
  }

  .drawer-secondary {
    grid-template-columns: 1fr;
  }

  .action-trail {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .action-trail .btn {
    grid-column: 1 / -1;
  }

  .action-preview > div:not(.action-preview-actions) {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .action-preview-actions .btn {
    width: 100%;
  }

  .drawer,
  .attention-panel {
    width: min(400px, calc(100vw - 16px));
  }

  .toast-region {
    right: 12px;
    left: 12px;
    align-items: stretch;
    transform: none;
  }

  .toast {
    width: 100%;
    max-width: none;
    align-items: flex-start;
  }
}

/* ============================================================ *
 * Batch: work-list grouping, multi-select, position, see-all, *
 * cars board/layout — 2026-07-22                              *
 * ============================================================ */

/* Work-list grouping switch (Journey / Workflow / Decision) */
.worklist-group-switch {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border-radius: 0;
  background: var(--neutral-50);
  box-shadow: inset 0 0 0 1px var(--neutral-150, var(--neutral-100));
}
.worklist-group-switch .seg-pill { border-radius: 0; box-shadow: var(--shadow-low); }
.worklist-group-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-600);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.worklist-group-btn svg.lucide { width: 14px; height: 14px; }
.worklist-group-btn:hover { color: var(--neutral-800); }
.worklist-group-btn.is-active {
  background: transparent;
  color: var(--orient-700);
  box-shadow: none;
}
@container worklist (max-width: 560px) {
  .worklist-group-btn span { display: none; }
  .worklist-group-btn { padding: 0 8px; }
}

/* Position chip on a work-list row: where the car physically is right now */
.overview-row-pos {
  flex: none;
  display: inline-flex;
  align-items: center;
  max-width: 116px;
  padding: 2px 8px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-25);
  color: var(--neutral-650);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overview-row-pos svg.lucide { width: 12px; height: 12px; flex: none; color: var(--neutral-400); }
/* Position is context, not status — kept neutral gray regardless of tone so it
   doesn't compete with the issue pill's colour. */
@container worklist (max-width: 620px) { .wl-col-pos { display: none; } }

/* Group head: a bulk-select checkbox in the SAME left column as the row checkboxes, then the
   collapse button. The header box sits directly above the row boxes so the whole column reads as one
   selection control (select the group, then act on it). Box matches .overview-row-check exactly. */
.overview-group-head { display: flex; align-items: center; padding-left: 20px; border-bottom: 1px solid var(--neutral-100); }
.overview-group-head .overview-group { flex: 1 1 auto; padding-left: 10px; }
.overview-group-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--neutral-300);
  background: var(--neutral-0);
  color: var(--neutral-0);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.overview-group-check:hover { border-color: var(--orient-400); }
.overview-group-check svg.lucide { width: 12px; height: 12px; opacity: 0; }
.overview-group-check.is-on { background: var(--orient-600); border-color: var(--orient-600); }
.overview-group-check.is-on svg.lucide { opacity: 1; color: #fff; }
.overview-group-check.is-part { border-color: var(--neutral-400); }
.overview-group-check.is-part svg.lucide { opacity: 1; color: var(--neutral-600); }

/* Per-row multi-select checkbox */
.overview-row-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--neutral-300);
  border-radius: 0;
  background: var(--neutral-0);
  color: var(--neutral-0);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.overview-row-check svg.lucide { width: 12px; height: 12px; opacity: 0; }
.overview-row-check:hover { border-color: var(--orient-400); }
.overview-row-check.is-on { background: var(--orient-600); border-color: var(--orient-600); }
.overview-row-check.is-on svg.lucide { opacity: 1; color: #fff; }
/* Tri-state header select-all: "some selected" shows a neutral minus (not a full check). */
.overview-row-check.is-part { border-color: var(--neutral-400); }
.overview-row-check.is-part svg.lucide { opacity: 1; color: var(--neutral-600); }
.table-check-all { cursor: pointer; }
.table-check-all:hover { border-color: var(--orient-400); }
.overview-list-row.is-selectable { cursor: pointer; }
/* Soft tint only (no per-row ring) — the ring boxed each selected row, so adjacent picks read as
   separate cards with a gap; a plain tint lets a run of selected rows read as one continuous block. */
.overview-list-row.is-checked { background: var(--orient-25); }
/* Always-present row checkbox sits before the status icon with a tight gutter. */
.overview-list-row.has-check { padding-left: 20px; }
.overview-list-row.has-check .overview-row-check { margin-right: 1px; }

/* Floating multi-select island (Linear-style, bottom-centre overlay) */
.bulk-island {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
}
.bulk-island[hidden] { display: none; }
.bulk-island-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: 0 20px 48px -16px rgba(19, 24, 33, 0.28), 0 6px 16px -8px rgba(19, 24, 33, 0.18);
  pointer-events: auto;
  animation: bulk-island-pop 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes bulk-island-pop {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bulk-island-inner { animation: none; } }
.bulk-island-count { font-size: 13px; font-weight: 600; color: var(--neutral-600); white-space: nowrap; }
.bulk-island-count b { color: var(--neutral-900); font-variant-numeric: tabular-nums; }
.bulk-island-divider { width: 1px; height: 20px; background: var(--neutral-200); }
.bulk-island-actions { display: flex; align-items: center; gap: 4px; }
.bulk-island-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.bulk-island-btn svg.lucide { width: 15px; height: 16px; color: var(--neutral-500); }
.bulk-island-btn:hover { background: var(--neutral-100); }
.bulk-island-btn b { color: var(--neutral-400); font-variant-numeric: tabular-nums; }
.bulk-island-btn.is-primary { background: var(--orient-600); color: #fff; }
.bulk-island-btn.is-primary svg.lucide { color: rgba(255,255,255,0.85); }
.bulk-island-btn.is-primary b { color: rgba(255,255,255,0.8); }
.bulk-island-btn.is-primary:hover { background: var(--orient-500); }
.bulk-island-btn[disabled] { opacity: 0.6; cursor: default; }
.bulk-island-btn .spin { animation: bay-spin 0.7s linear infinite; }
.bulk-island-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-400);
  cursor: pointer;
}
.bulk-island-close:hover { background: var(--neutral-100); color: var(--neutral-700); }
.bulk-island-close svg.lucide { width: 16px; height: 16px; }
.bulk-island-back {
  display: grid; place-items: center; width: 28px; height: 30px;
  border: 0; border-radius: 0; background: transparent; color: var(--neutral-500); cursor: pointer;
}
.bulk-island-back:hover { background: var(--neutral-100); color: var(--neutral-800); }
.bulk-island-back svg.lucide { width: 16px; height: 16px; }
.bulk-island-chip {
  height: 30px; padding: 0 12px; border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-0); color: var(--neutral-700); font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.bulk-island-chip:hover { border-color: var(--orient-400); background: var(--orient-50); color: var(--orient-700); }

/* "See all compatible" side panel — full-bleed to cancel the parent panel's 18px
   inset so the header and every row share one consistent 18px gutter. */
.assign-seeall { display: flex; flex-direction: column; height: 100%; margin: 0 -18px; }
.assign-seeall-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--neutral-100);
  background: var(--neutral-0);
}
.assign-seeall-back { align-self: flex-start; }
.assign-seeall-head h3 { margin: 0; font-size: 14px; font-weight: 750; color: var(--neutral-900); }
.assign-seeall-head p { margin: 2px 0 0; font-size: 12px; color: var(--neutral-500); }
.assign-seeall-list { display: flex; flex-direction: column; }
.assign-seeall-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid var(--neutral-100);
  background: var(--neutral-0);
  text-align: left;
}
.assign-seeall-row:hover { background: var(--neutral-25); }
.assign-seeall-acts { display: flex; align-items: center; gap: 4px; }
.assign-seeall-acts .btn-sm { height: 28px; padding: 0 12px; }
.assign-seeall-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.assign-seeall-top { display: flex; align-items: baseline; gap: 8px; }
.assign-seeall-top b { font-size: 13px; font-weight: 750; color: var(--neutral-900); }
.assign-seeall-top span { font-size: 12px; color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assign-seeall-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--neutral-600); }
.assign-seeall-fit { color: var(--neutral-500); }
.assign-seeall-fit[data-tone="success"] { color: var(--success-strong); }
.assign-seeall-promise { display: flex; flex-direction: column; align-items: flex-end; }
.assign-seeall-promise em { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--neutral-400); font-style: normal; }
.assign-seeall-promise b { font-size: 13px; font-weight: 700; color: var(--neutral-800); }

/* Cars page: layout switch (Table / Board) */
.cars-layout-switch { position: relative; display: inline-flex; padding: 2px; border-radius: 0; background: var(--neutral-100); }
.cars-layout-switch .seg-pill { border-radius: 0; box-shadow: var(--shadow-low); }
.cars-layout-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--neutral-600);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.cars-layout-btn svg.lucide { width: 14px; height: 14px; }
.cars-layout-btn:hover { color: var(--neutral-800); }
.cars-layout-btn.is-active { background: transparent; color: var(--orient-700); box-shadow: none; }

/* Cars board */
.cars-board-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.cars-board-wrap { padding: 2px; }
.cars-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(256px, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 100%;
}
.cars-board.is-decision { grid-auto-columns: minmax(272px, 1fr); }

/* Cars table multi-select column */
.cars-check-col { width: 44px; min-width: 44px; text-align: center; padding-left: 0; padding-right: 0; }
.cars-table td.cars-check-col .overview-row-check { margin: 0 auto; }
.cars-table.is-selectable .data-row { cursor: pointer; }
.cars-table .data-row.is-checked > td { background: var(--orient-50); }

/* Cars detail renders inline, aligned to the table height (not a full-height
   floating drawer) — adopts the overview side-panel pattern. */
/* Detail shares a single hairline seam with the table — no gap, no fade, no boxed panel.
   The table keeps fixed column widths and scrolls horizontally under the seam. */
.cars-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 0; }
.cars-body:has(.cars-detail) .cars-board-scroll { padding-right: 0; }
.cars-main { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cars-detail.overview-side {
  position: static;
  flex: none;
  width: 366px;
  max-height: none;
  /* The Cars body is bounded (the table scrolls internally), so the drawer stretches to that
     body height — it must NOT take the full-viewport min-height used on the scrolling Command
     page, or it overflows past the table's bottom edge. */
  min-height: 0;
  align-self: stretch;
  overflow-y: auto;
  border: 0;
  border-left: 1px solid var(--neutral-200);
  border-top: 1px solid var(--neutral-200);
  border-bottom: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
}
@media (max-width: 1080px) {
  .cars-detail.overview-side { width: 320px; }
}

/* Activity feed (notifications overhaul): flat, typed items, one action each */
.feed-section { margin-top: 6px; }
.feed-section + .feed-section { margin-top: 14px; }
.feed-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.feed-section-label b {
  min-width: 18px;
  padding: 0 4px;
  border-radius: 0;
  background: var(--neutral-100);
  color: var(--neutral-600);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Flat rows separated by hairline dividers (no cards) — denser, less padding. */
.feed-item {
  display: flex;
  gap: 10px;
  padding: 12px 2px 12px 0;
  border-bottom: 1px solid var(--neutral-100);
  background: transparent;
}
.feed-item:last-child { border-bottom: 0; }
.feed-unread {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--orient-500);
}
.feed-item.is-read .feed-unread { background: transparent; }
.feed-item.is-read { opacity: 0.62; }
.feed-item.is-read .feed-title { font-weight: 600; }
.feed-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 28px;
  border-radius: 0;
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.feed-icon svg.lucide { width: 14px; height: 14px; }
.feed-icon[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-fg); }
.feed-icon[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-fg); }
.feed-icon[data-tone="active"] { background: var(--indigo-50); color: var(--indigo-600); }
.feed-icon[data-tone="success"] { background: var(--success-bg); color: var(--success-fg); }
.feed-body { flex: 1 1 auto; min-width: 0; }
.feed-top { display: flex; align-items: center; gap: 8px; }
.feed-kind {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.feed-target { font-size: 12px; font-weight: 700; color: var(--neutral-800); }
.feed-time { margin-left: auto; font-size: 12px; color: var(--neutral-400); white-space: nowrap; }
.feed-title { margin: 6px 0 0; font-size: 13px; font-weight: 650; color: var(--neutral-900); line-height: 1.35; }
.feed-context { margin: 3px 0 0; font-size: 12px; color: var(--neutral-600); line-height: 1.4; }
.feed-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.feed-owner { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-foot .btn.is-done { color: var(--success-strong); }
.feed-foot .btn.is-done svg.lucide { color: var(--success-fg); }

/* Feed head: Mark-all-read / all-read chip (replaces the panel close button) */
.feed-markall {
  border: 0;
  background: transparent;
  color: var(--orient-600);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.feed-markall:hover { color: var(--orient-700); text-decoration: underline; }
.feed-allread { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--neutral-400); }
.feed-allread svg.lucide { width: 14px; height: 14px; }

/* Bell → cross toggle */
#notif-button.is-open { background: var(--neutral-100); color: var(--neutral-800); }

/* Highlight-on-page: pulse the affected work-list row when a feed action fires */
@keyframes row-flash {
  0% { background: var(--orient-100); box-shadow: inset 0 0 0 2px var(--orient-300); }
  100% { background: var(--neutral-0); box-shadow: inset 0 0 0 2px transparent; }
}
.overview-list-row.row-flash { animation: row-flash 1.6s ease-out; }
@keyframes row-flash-cell {
  0% { background: var(--orient-100); }
  100% { background: transparent; }
}
.data-row.row-flash > td { animation: row-flash-cell 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .overview-list-row.row-flash { animation: none; box-shadow: inset 0 0 0 2px var(--orient-300); }
  .data-row.row-flash > td { animation: none; }
}

/* Feed: clickable card body (highlights the car) + processing/slide-out on action */
.feed-body.is-clickable { cursor: pointer; }
.feed-body.is-clickable:hover .feed-title { color: var(--orient-700); }
.feed-foot .btn.is-processing { color: var(--neutral-500); }
.feed-foot .btn.is-processing svg.lucide { color: var(--neutral-400); }
.feed-item.is-removing {
  overflow: hidden;
  animation: feed-slide-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes feed-slide-out {
  from { opacity: 1; transform: none; max-height: 200px; }
  to { opacity: 0; transform: translateX(16px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .feed-item.is-removing { animation: none; opacity: 0; } }
.toast.is-loading svg.lucide.spin { animation: bay-spin 0.8s linear infinite; }

/* Cars Views dropdown (replaces the saved-view pill row) */
.cars-menu-view { min-width: 232px; }
.cars-menu-label {
  margin: 3px 4px 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--neutral-400);
}
.cars-menu-view .cars-menu-item { gap: 8px; }
.cars-menu-view .cars-menu-item > svg.lucide { width: 14px; height: 14px; color: var(--neutral-400); flex: none; }
.cars-menu-item-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cars-menu-count {
  flex: none; min-width: 18px; padding: 0 4px; border-radius: 0;
  background: var(--neutral-100); color: var(--neutral-500);
  font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.cars-menu-sep { height: 1px; margin: 4px 2px; background: var(--neutral-100); }
.cars-menu-saved-row { display: flex; align-items: center; gap: 2px; }
.cars-menu-saved-row .cars-menu-item { flex: 1 1 auto; }
.cars-menu-remove {
  flex: none; display: grid; place-items: center; width: 26px; height: 30px;
  border: 0; border-radius: 0; background: transparent; color: var(--neutral-400); cursor: pointer;
}
.cars-menu-remove:hover { background: var(--neutral-100); color: var(--critical-fg); }
.cars-menu-remove svg.lucide { width: 14px; height: 14px; }
.cars-menu-action { color: var(--orient-700); font-weight: 650; }
.cars-menu-action svg.lucide { width: 14px; height: 14px; color: var(--orient-600); }

/* --- Scenario activity stack (top-left demo notifications) --- */
.scenario-notifs {
  position: fixed;
  top: 68px;
  right: 22px;
  left: auto;
  /* Above the expanded detail modal (z 70) so an incoming advisor reply (e.g. "customer
     approved") is tappable even while the manager has the modal open. */
  z-index: 78;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: 340px;
  pointer-events: none;
  transition: top 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.snotif {
  pointer-events: auto;
  width: 100%;
  display: flex;
  gap: 12px;
  padding: 13px 14px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  box-shadow: 0 18px 40px -20px rgba(20, 30, 40, 0.35);
  animation: snotif-in 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes snotif-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.snotif-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--orient-100); color: var(--orient-700); display: grid; place-items: center; font-size: 12px; font-weight: 750; }
.snotif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.snotif-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--neutral-600); }
.snotif-top strong { color: var(--neutral-900); font-weight: 700; }
.snotif-top em { margin-left: auto; font-style: normal; color: var(--neutral-400); font-size: 12px; }
.snotif-car { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.snotif-plate { font-size: 14px; font-weight: 750; color: var(--neutral-900); }
.snotif-veh { font-size: 12px; color: var(--neutral-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snotif-actions { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.snotif-assign { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 0; background: var(--orient-600); color: #fff; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.snotif-assign svg.lucide { width: 15px; height: 15px; }
.snotif-assign:hover { background: var(--orient-700); }
.snotif-later { height: 32px; padding: 0 10px; border: 0; background: none; color: var(--neutral-500); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.snotif-later:hover { color: var(--neutral-700); }
.snotif-plate { white-space: nowrap; flex: none; }
.snotif-veh { flex: 1 1 auto; }

/* Notification card — recommendation line + one-tap assign */
.snotif-rec { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--orient-700); background: var(--orient-50); border-radius: 0; padding: 4px 8px; }
.snotif-rec svg.lucide { width: 13px; height: 13px; }
.snotif-rec b { font-weight: 750; }
.snotif-rec[data-tone="full"] { color: var(--warning-strong); background: var(--warning-bg); }
.snotif-assign { flex: 1 1 auto; justify-content: center; }
.snotif-change { flex: none; width: 32px; height: 32px; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0); color: var(--neutral-600); display: grid; place-items: center; cursor: pointer; }
.snotif-change svg.lucide { width: 15px; height: 15px; }
.snotif-change:hover { background: var(--neutral-50); }

/* "Up next" pool rows (overview assign band) */
.assign-cand.pool-row { display: grid; grid-template-columns: 24px 112px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 9px 14px; background: transparent; border: 0; text-align: left; }
.assign-cand.pool-row + .assign-cand.pool-row { border-top: 1px solid var(--neutral-100); }
.pool-rec { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--orient-700); white-space: nowrap; }
.pool-rec svg.lucide { width: 13px; height: 13px; }
.pool-acts { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }

/* --- Notification card, restyled (info-only, tap-through) --- */
.snotif { position: relative; display: block; padding: 0; }
.snotif-main { display: flex; flex-direction: column; gap: 5px; padding: 13px 40px 13px 14px; cursor: pointer; border-radius: 0; }
.snotif-main:hover { background: var(--neutral-25); }
.snotif-eyebrow { display: flex; align-items: center; gap: 8px; }
.snotif-badge { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orient-700); background: var(--orient-50); border: 1px solid var(--orient-200); border-radius: 0; padding: 2px 7px; }
.snotif-eyebrow em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--neutral-400); }
.snotif .snotif-plate { font-size: 15px; font-weight: 800; color: var(--neutral-900); letter-spacing: -0.01em; }
.snotif .snotif-veh { font-size: 13px; color: var(--neutral-600); }
.snotif-suggest { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--orient-700); margin-top: 1px; }
.snotif-suggest svg.lucide { width: 13px; height: 13px; }
.snotif-suggest[data-tone="full"] { color: var(--warning-strong); }
.snotif-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; background: none; border-radius: 0; color: var(--neutral-400); display: grid; place-items: center; cursor: pointer; }
.snotif-x:hover { background: var(--neutral-100); color: var(--neutral-700); }
.snotif-x svg.lucide { width: 14px; height: 14px; }

/* --- Bell notification center (Turo-style; parts reserved for Master) --- */
.ncenter { display: flex; flex-direction: column; max-height: min(70vh, 560px); }
.ncenter-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.ncenter-head strong { font-size: 16px; font-weight: 750; color: var(--neutral-900); }
.ncenter-tabs { display: flex; gap: 4px; padding: 0 12px 8px; border-bottom: 1px solid var(--neutral-100); }
.ncenter-tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 0; background: none; color: var(--neutral-600); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.ncenter-tab:hover { background: var(--neutral-50); }
.ncenter-tab.is-active { background: var(--neutral-100); color: var(--neutral-900); }
.ncenter-tab b { font-size: 12px; font-weight: 700; color: var(--neutral-500); }
.ncenter-tab.is-active b { color: var(--neutral-700); }
.ncenter-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ncenter-item { position: relative; display: flex; gap: 10px; padding: 11px 12px 11px 22px; border-radius: 0; border: 1px solid transparent; cursor: pointer; }
.ncenter-item:hover { background: var(--neutral-50); }
.ncenter-udot { position: absolute; left: 9px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.ncenter-item.is-unread .ncenter-udot { background: var(--orient-500); }
.ncenter-item.is-unread { background: var(--orient-25, var(--neutral-25)); }
.ncenter-item-top { display: flex; align-items: center; gap: 8px; }
.ncenter-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-500); }
.ncenter-item-top em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--neutral-400); }
.ncenter-plate { font-size: 14px; font-weight: 800; color: var(--neutral-900); margin-top: 2px; }
.ncenter-veh { font-size: 12px; color: var(--neutral-600); margin-top: 1px; }
/* Parts (Master product) — a purple stroke distinguishes them in the All tab */
.ncenter-item.is-part { border-color: var(--indigo-500); background: var(--indigo-50); }
.ncenter-item.is-part .ncenter-eyebrow { color: var(--indigo-700); }
.ncenter-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; color: var(--neutral-400); font-size: 13px; }
.ncenter-empty svg.lucide { width: 22px; height: 22px; }

/* Notification-center tabs (added to the original menu chrome) */
.notif-tabs { display: flex; gap: 4px; padding: 4px 16px 10px; border-bottom: 1px solid var(--neutral-100); }
.notif-tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 0; background: none; color: var(--neutral-600); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.notif-tab:hover { background: var(--neutral-50); }
.notif-tab.is-active { background: var(--neutral-100); color: var(--neutral-900); }
.notif-tab b { font-size: 12px; font-weight: 700; color: var(--neutral-500); }
.notif-tab.is-active b { color: var(--neutral-700); }
/* Read job-card items dim and drop their unread dot (history) */
.feed-item.is-read { opacity: 0.6; }
.feed-item.is-read .feed-unread { opacity: 0; }
/* Parts (Master product) — a purple stroke sets them apart in the All tab */
.feed-item.is-part { border: 1px solid var(--indigo-500); border-radius: 0; background: var(--indigo-50); margin: 4px 0; }
.feed-item.is-part .feed-kind { color: var(--indigo-700); }
/* Up-next rows are clickable → open the assign drawer */
.assign-cand.pool-row { cursor: pointer; }
.assign-cand.pool-row:hover { background: var(--neutral-50); }

/* Arriving & intake — bulk-assign bar */
.arrival-bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; margin: 2px 0; background: var(--orient-50); border-top: 1px solid var(--orient-100); border-bottom: 1px solid var(--orient-100); }
.arrival-bulk-count { font-size: 13px; font-weight: 600; color: var(--neutral-700); }
.arrival-bulk-count b { font-weight: 800; color: var(--orient-700); }
.arrival-bulk-actions { display: inline-flex; align-items: center; gap: 8px; }

/* Flow 2 — blocked-bay hold-cost panel. Calm white card so it doesn't read as a
   second red alarm next to "Needs action"; colour is an accent, not a flood. */
.hold-cost { margin-top: 14px; padding: 12px; border-radius: 0; border: 1px solid var(--neutral-200); background: var(--neutral-0); }
.hold-cost[data-tone="critical"] { border-color: var(--critical-border); }
.hold-cost-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hold-cost-metric { display: flex; flex-direction: column; gap: 3px; }
.hold-cost-label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-500); }
.hold-cost-val { font-size: 30px; font-weight: 800; color: var(--neutral-900); letter-spacing: -0.02em; line-height: 1; }
/* Trend as a status pill (amber → red), vertically centred against the metric. */
.hold-cost-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 0; font-size: 12px; font-weight: 700; background: var(--warning-bg); color: var(--warning-strong); border: 1px solid var(--warning-border); }
.hold-cost[data-tone="critical"] .hold-cost-pill { background: var(--critical-bg); color: var(--critical-strong); border-color: var(--critical-border); }
.hold-cost-pill svg.lucide { width: 13px; height: 13px; }
.hold-cost-why { margin: 8px 0 10px; font-size: 13px; line-height: 18px; color: var(--neutral-650); }
.hold-cost-why b { color: var(--neutral-900); font-weight: 700; }
.hold-cost-rec { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 0; background: var(--neutral-50); border: 1px solid var(--neutral-150); font-size: 13px; font-weight: 650; color: var(--neutral-900); }
.hold-cost-rec svg.lucide { width: 15px; height: 15px; color: var(--warning-strong); flex: none; }
.hold-cost[data-tone="critical"] .hold-cost-rec svg.lucide { color: var(--critical-strong); }

/* Pickup outlook: ONE component, four tonal variants so every car's timing reads in one
   language — On track (success), Time to act (warning/critical), Recovery window running
   (warning) and closed (critical). The bar fills as the situation gets more urgent. */
.pickup-outlook { margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.pickup-outlook-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pickup-outlook-cap { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.pickup-outlook-cap svg.lucide { width: 12px; height: 12px; }
.pickup-outlook-val { font-size: 13px; font-weight: 800; }
.pickup-outlook-track { height: 6px; border-radius: 0; background: var(--neutral-150); overflow: hidden; }
.pickup-outlook-fill { display: block; height: 100%; border-radius: 0; transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.pickup-outlook-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--neutral-600); }
.pickup-outlook-note b { color: var(--neutral-900); font-weight: 700; }
.pickup-outlook[data-tone="success"] .pickup-outlook-cap,
.pickup-outlook[data-tone="success"] .pickup-outlook-val { color: var(--success-strong); }
.pickup-outlook[data-tone="success"] .pickup-outlook-fill { background: var(--success-fg); }
.pickup-outlook[data-tone="warning"] .pickup-outlook-cap,
.pickup-outlook[data-tone="warning"] .pickup-outlook-val { color: var(--warning-strong); }
.pickup-outlook[data-tone="warning"] .pickup-outlook-fill { background: var(--warning-strong); }
.pickup-outlook[data-tone="critical"] .pickup-outlook-cap,
.pickup-outlook[data-tone="critical"] .pickup-outlook-val { color: var(--critical-strong); }
.pickup-outlook[data-tone="critical"] .pickup-outlook-fill { background: var(--critical-fg); }
@media (prefers-reduced-motion: reduce) { .pickup-outlook-fill { transition: none; } }

/* Horizontal pickup timeline: markers on a real hours axis (now / predicted / promise, the
   revised move, or the recovery window). Same tone system as the outlook; currentColor drives
   the promise/deadline marks + the primary label, the band carries the light tonal tint. */
.ptl { margin: 5px 0 2px; }
.ptl-lbls { position: relative; height: 15px; }
.ptl-lbl { position: absolute; bottom: 0; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 13px; }
.ptl-lbl-now { color: var(--neutral-450, var(--neutral-500)); }
.ptl-lbl-primary { color: currentColor; }
.ptl-axis { position: relative; height: 22px; }
.ptl-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; border-radius: 0; background: var(--neutral-200); transform: translateY(-50%); }
.ptl-band { position: absolute; top: 50%; height: 8px; border-radius: 0; transform: translateY(-50%); transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1), width 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.ptl-mark { position: absolute; top: 50%; }
.ptl-mark-pred { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-0); border: 2px solid var(--neutral-400); transform: translate(-50%, -50%); }
.ptl-mark-promise, .ptl-mark-revised { width: 11px; height: 11px; background: currentColor; border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
.ptl-mark-was { width: 9px; height: 9px; background: transparent; border: 1.5px dashed var(--neutral-400); border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
.ptl-mark-deadline { width: 3px; height: 15px; background: currentColor; border-radius: 0; transform: translate(-50%, -50%); }
/* "Now" is a playhead: a short stem dropping from the label to a filled dot ON the axis line
   (Mobbin delivery-tracker pattern), not a bar that dangles past the line and collides with the
   label. Contained within the top half of the axis, so it never spills into the ticks. */
.ptl-now { position: absolute; top: 0; width: 1.5px; height: 11px; background: var(--neutral-300); transform: translateX(-50%); transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.ptl-now::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-900); box-shadow: 0 0 0 2px var(--neutral-0); }
.ptl-ticks { position: relative; height: 13px; margin-top: 3px; }
.ptl-tick { position: absolute; top: 0; font-size: 12px; font-weight: 600; color: var(--neutral-400); white-space: nowrap; line-height: 13px; }
.ptl[data-tone="success"] { color: var(--success-fg); }
.ptl[data-tone="success"] .ptl-band { background: var(--success-bg); }
.ptl[data-tone="warning"] { color: var(--warning-strong); }
.ptl[data-tone="warning"] .ptl-band { background: var(--warning-bg); }
.ptl[data-tone="critical"] { color: var(--critical-fg); }
.ptl[data-tone="critical"] .ptl-band { background: var(--critical-bg); }
@media (prefers-reduced-motion: reduce) { .ptl-band, .ptl-now { transition: none; } }

/* Flow 2 — "New work found" evidence: the extra work + the inspection photo the advisor
   sent the customer + who's chasing it. Calm neutral card; it's decision context, not an alarm. */
.approval-evidence { margin-top: 14px; padding: 12px; border-radius: 0; border: 1px solid var(--neutral-200); background: var(--neutral-0); }
.ae-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-600); }
.ae-eyebrow svg.lucide { width: 13px; height: 13px; color: var(--orient-600); flex: none; }
.approval-evidence-body { display: flex; gap: 12px; align-items: center; }
.ae-photo { flex: none; width: 80px; height: 64px; margin: 0; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ae-photo.is-empty { background: var(--neutral-50); border: 1px dashed var(--neutral-200); color: var(--neutral-400); }
.ae-photo.is-empty svg.lucide { width: 18px; height: 18px; }
.ae-photo.is-empty figcaption { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--neutral-500); }
.ae-photo.has-photo { border: 1px solid var(--neutral-200); }
.ae-photo.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ae-work { margin: 0; font-size: 14px; font-weight: 700; line-height: 19px; color: var(--neutral-900); }
/* Estimated added time — highlighted so the manager clocks the time cost at a glance. */
.ae-work-sub { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin: 3px 0 0; padding: 3px 9px; border-radius: 0; background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-strong); font-size: 12px; font-weight: 700; }
.ae-work-sub svg.lucide { width: 13px; height: 13px; }
.ae-foot { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--neutral-150); display: flex; flex-direction: column; gap: 3px; }
.ae-foot-who { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: var(--neutral-700); }
.ae-foot-who b { color: var(--neutral-900); font-weight: 700; }
.ae-foot-who svg.lucide { width: 13px; height: 13px; color: var(--neutral-400); flex: none; }
.ae-foot-status { margin: 0; padding-left: 19px; font-size: 12px; font-weight: 600; color: var(--neutral-500); }
/* The status line doubles as a disclosure for the full timestamped attempt log. */
.ae-attempts-toggle { display: flex; align-items: center; gap: 4px; width: 100%; padding: 2px 0 2px 19px; background: none; border: 0; font: inherit; text-align: left; color: var(--neutral-500); cursor: pointer; border-radius: 0; }
.ae-attempts-toggle:hover { color: var(--neutral-700); }
.ae-attempts-toggle > span { font-size: 12px; font-weight: 600; }
.ae-attempts-chev { width: 13px; height: 13px; flex: none; color: var(--neutral-400); transition: transform 0.18s ease; }
.ae-attempts-toggle[aria-expanded="true"] .ae-attempts-chev { transform: rotate(180deg); }

/* Contact-attempt log — a small timestamped audit trail of the advisor's chase. */
.attempt-log { margin-top: 10px; padding: 10px 11px; border-radius: 0; background: var(--neutral-25); border: 1px solid var(--neutral-150); }
.attempt-log-head { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral-600); }
.attempt-log-head svg.lucide { width: 13px; height: 13px; color: var(--neutral-500); flex: none; }
.attempt-log-head .atl-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; background: var(--neutral-100); color: var(--neutral-600); font-size: 12px; font-weight: 700; letter-spacing: 0; }
/* Connector drawn per-row from this dot's centre down to the next dot's centre
   (top: dot-centre + height:100% == exactly the row's height reaches the next dot),
   so rows with sub-text don't leave the line overshooting past the last dot. The dots'
   opaque rings cut it into clean segments. */
.atl-list { list-style: none; margin: 0; padding: 0; }
.atl-row { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.atl-row::before { content: ""; position: absolute; left: 7px; top: 12px; height: 100%; width: 2px; background: var(--neutral-200); }
.atl-row:last-child::before { display: none; }
.atl-node { position: relative; z-index: 1; flex: none; width: 16px; display: flex; justify-content: center; margin-top: 3px; }
.atl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral-300); box-shadow: 0 0 0 3px var(--neutral-25); }
.atl-dot[data-tone="warning"] { background: var(--warning-strong); }
.atl-dot[data-tone="success"] { background: var(--success-strong); }
.atl-dot[data-tone="muted"] { background: var(--neutral-300); }
/* Result sits INLINE after the label (one line) now that the section is wider — falls to a
   second line only if the row is ever too narrow. */
.atl-body { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 0; row-gap: 2px; }
.atl-label { font-size: 13px; font-weight: 650; color: var(--neutral-800); }
.atl-result { font-size: 12px; font-weight: 600; color: var(--neutral-500); }
.atl-result::before { content: "·"; margin: 0 7px; color: var(--neutral-300); font-weight: 700; }
.atl-result[data-tone="warning"] { color: var(--warning-strong); }
.atl-result[data-tone="success"] { color: var(--success-strong); }
.atl-time { flex: none; font-size: 12px; font-weight: 600; color: var(--neutral-500); }

/* ── Expanded car-detail modal ─────────────────────────────────────────────
   Full-screen overlay that re-lays the detail into two columns (decision | evidence)
   so the manager sees everything without scrolling a long single column. */
/* Full-page detail: a full-height destination (breadcrumb + header + 3-col body) that fills the
   content area BESIDE the app's real side-rail, so the rail's collapse toggle + the presenter band
   stay reachable. `left` tracks the rail width (64px collapsed / 212px expanded). */
.detail-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 64px; z-index: 70; padding: 0; transition: left 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
body:has(.app-shell.is-rail-expanded) .detail-modal { left: 212px; }
.detail-modal[hidden] { display: none; }
.dm-page { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--neutral-0); border-left: 1px solid var(--neutral-150); animation: dm-page-in 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dm-page-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dm-page { animation: none; } }
.dm-page-main { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }
/* Breadcrumb */
.dm-page-crumb { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 54px; padding: 0 26px; border-bottom: 1px solid var(--neutral-150); }
.dm-crumb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dm-crumb-back { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0); color: var(--neutral-600); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.dm-crumb-back:hover { background: var(--neutral-50); color: var(--neutral-800); }
.dm-crumb-back svg.lucide { width: 16px; height: 16px; }
.dm-crumb-trail { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; }
.dm-crumb-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--neutral-500); cursor: pointer; }
.dm-crumb-link:hover { color: var(--neutral-800); }
.dm-crumb-sep { color: var(--neutral-300); }
.dm-crumb-here { color: var(--neutral-900); font-weight: 700; }
.dm-crumb-right { display: flex; align-items: center; gap: 12px; flex: none; }
.dm-crumb-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--success-border); background: var(--success-bg); border-radius: 0; font-size: 12px; font-weight: 700; color: var(--success-strong); }
.dm-crumb-dot { width: 7px; height: 7px; border-radius: 0; background: var(--success-fg); }
.dm-crumb-time { font-size: 14px; font-weight: 600; color: var(--neutral-700); }
.dm-crumb-sep { color: var(--neutral-300); }
.dm-crumb-date { font-size: 13px; font-weight: 600; color: var(--neutral-600); white-space: nowrap; }
/* Bell + avatar mirror the Command topbar so the detail chrome is consistent with the main pages. */
.dm-crumb-right { gap: 10px; }
.dm-crumb-div { width: 1px; height: 22px; background: var(--neutral-200); flex: none; }
.dm-crumb-notif { width: 34px; height: 34px; flex: none; }
.dm-crumb-avatar { width: 32px; height: 32px; flex: none; }
/* 2-line header + right-aligned decision actions */
.dm-page-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 26px; border-bottom: 1px solid var(--neutral-150); }
.dm-page-id { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.dm-page-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm-page-meta .dm-kicker { margin: 0; }
.dm-page-id .dm-plate-row { margin: 0; }
.dm-page-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.dm-page-actions .btn { min-height: 42px; }
.btn-hold-primary { background: var(--neutral-900); color: var(--neutral-0); border: 1px solid var(--neutral-900); }
.btn-hold-primary:hover { background: var(--neutral-800); border-color: var(--neutral-800); }
.btn-hold-primary svg.lucide { color: var(--neutral-0); }
/* 3-column body — hairline dividers, columns scroll independently (mirrors the old .dm-col) */
.dm-page-body { flex: 1; min-height: 0; display: flex; align-items: stretch; overflow: hidden; }
.dm-pcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; overflow-y: auto; padding: 20px; }
.dm-pleft { width: 340px; flex: none; gap: 12px; background: var(--neutral-25); border-right: 1px solid var(--neutral-150); }
.dm-pcenter { flex: 1; border-right: 1px solid var(--neutral-150); }
.dm-pright { width: 340px; flex: none; }
.dm-page-body.is-2col .dm-pcenter { border-right: 0; }
.dm-page-ping { width: 100%; min-height: 42px; justify-content: center; margin-top: 4px; background: var(--orient-600); color: var(--neutral-0); border: 1px solid var(--orient-600); }
.dm-page-ping:hover { background: var(--orient-700); border-color: var(--orient-700); }
.dm-page-ping svg.lucide { color: var(--neutral-0); }
.dm-page-ping.is-loading { opacity: 0.75; }
/* Sub-mode focused centre (revise / holding / processing / approval) reuses modal content + footer */
.dm-page-focuswrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.dm-page-focus { flex: 1; overflow-y: auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.dm-page-focuswrap .dm-foot { flex: none; }
/* No box-in-box: the column IS the container, so the service timeline / contact attempts /
   part tracker drop their own border + fill so they read as flush sections, not nested cards. */
.dm-pleft .attempt-log, .dm-pright .attempt-log { background: transparent; border: 0; border-radius: 0; padding: 0; margin-top: 0; }
/* Contact attempts is a clean list, no separators between the log rows. */
.dm-pright .call-row { border-bottom: 0; }
/* Evidence photo fills the full width of its column (square), not a fixed 200px thumbnail. */
.dm-pleft .dm-photo.dm-photo-square { max-width: none; width: 100%; }
/* Center hairlines run edge-to-edge (touching the vertical column dividers): cancel the column
   padding on the divider, re-inset the content. */
/* Vitals dividers run the FULL height of the strip — touching the header divider at the top and the
   border-bottom below. The strip is pulled flush to the header line (negative top margin cancels the
   column padding); the 20px/14px breathing space lives inside the cells, so the labels stay aligned
   with the other columns while the cell's border-left spans edge to edge. */
.dm-pcenter > .dm-vitals { margin: -20px -20px 0; padding: 0 20px; }
.dm-pcenter > .dm-vitals .dm-vital { padding-top: 20px; padding-bottom: 14px; }
.dm-pcenter > .dm-jobs-inline { margin: 0 -20px; padding: 12px 20px 0; }
/* Context panel (right column). When it follows the contact log + ping on a blocked car, a hairline
   sets it apart as its own section; when it's the only thing (late / on-track) no divider is needed. */
.dm-pright > .dm-context:not(:first-child) { border-top: 1px solid var(--neutral-150); padding-top: 16px; margin-top: 2px; }
.dm-context .dm-rail-label { margin: 0 0 2px; }
.dm-ctx-list { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-ctx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.dm-ctx-k { margin: 0; font-size: 13px; font-weight: 600; color: var(--neutral-600); }
.dm-ctx-v { margin: 0; font-size: 14px; font-weight: 600; color: var(--neutral-800); text-align: right; }
.dm-ctx-v[data-tone="waiting"] { color: var(--warning-strong); }
.dm-ctx-v[data-tone="success"] { color: var(--success-strong); }
.dm-ctx-v[data-tone="critical"] { color: var(--critical-strong); }
.dm-ctx-v .person { justify-content: flex-end; }
.dm-ctx-person { display: inline-flex; align-items: center; gap: 8px; }
.dm-ctx-person .avatar { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: none; }
.dm-ctx-person .avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Expanded page: tabbed 2-col (+ optional bay-map 3rd col) ──────────────────────────────────
   Header carries every action + the double-chevron bay-map toggle. A tab bar sits under it. The
   body is the active tab panel (fluid) + the persistent "At a glance" decision sidebar (fixed);
   opening the bay map adds a third fixed column. Nothing decision-critical is ever behind a tab. */
.dm-tabs { flex: none; display: flex; align-items: stretch; padding: 0 26px; border-bottom: 1px solid var(--neutral-150); background: var(--neutral-0); }
.dm-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 13px 0; margin-right: 26px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 650; color: var(--neutral-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s ease, border-color 0.15s ease; }
.dm-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--critical-fg); flex: none; margin-left: -2px; }
.dm-tab svg.lucide { width: 16px; height: 16px; color: currentColor; }
.dm-tab:hover { color: var(--neutral-800); }
.dm-tab.is-active { color: var(--orient-700); border-bottom-color: var(--orient-700); }
.dm-tab:focus-visible { outline: 2px solid var(--orient-500); outline-offset: 2px; }

/* Body = the scroller. A full-width dashboard 2-col: the content panel takes ALL remaining width,
   the WHITE decision sidebar is a fixed rail, split by a full-height hairline. Opening the bay map
   adds a third fixed rail. No centring / max-width — the page uses the whole work area. */
.dm-page-body.dm-tabbed { display: block; overflow-y: auto; background: var(--neutral-0); }
.dm-body-inner { display: grid; grid-template-columns: minmax(0, 1fr) 1px 440px; align-items: start; min-height: 100%; }
.dm-body-inner.has-baymap { grid-template-columns: minmax(0, 1fr) 1px 440px 1px 372px; }
.dm-body-rule { align-self: stretch; width: 1px; background: var(--neutral-150); }
.dm-tabpanel { min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 24px 26px 48px; }
/* Sticky reference rail: pinned to the top of the scroll area and capped to the viewport so it's
   ALWAYS visible — if its own content is taller than the viewport it scrolls INTERNALLY (was
   scrolling away near the bottom because the rail was taller than the viewport). No top gap. */
.dm-glance { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 0; background: var(--neutral-0); padding: 24px 0 24px; max-height: calc(100dvh - 200px); overflow: hidden auto; overscroll-behavior: contain; }
.dm-glance::-webkit-scrollbar { width: 8px; }
.dm-glance::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 0; }
.dm-glance::-webkit-scrollbar-thumb:hover { background: var(--neutral-300); }
.dm-baymap-col { position: sticky; top: 0; align-self: start; padding: 28px 30px 40px; }
.dm-baymap-col .baymap { border: 0; background: transparent; padding: 0; }

/* Header actions are compact on this page — the row carries 3-4 controls, so they run smaller than
   the app-wide 42px button box. */
.dm-page-actions .btn:not(.btn-sm) { min-height: 34px; padding: 7px 12px; font-size: 13px; gap: 6px; }
.dm-page-actions .btn svg.lucide { width: 15px; height: 15px; }
/* Header: divider + bay-map double-chevron toggle — BORDERLESS icon-style button (matches the
   Command-page tool buttons), tone only on hover / when open. */
.dm-actions-div { width: 1px; align-self: stretch; margin: 6px 3px; background: var(--neutral-200); }
.dm-baymap-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 650; color: var(--neutral-500); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.dm-baymap-toggle svg.lucide { width: 16px; height: 16px; }
.dm-baymap-toggle:hover { background: var(--neutral-50); color: var(--neutral-800); }
.dm-baymap-toggle.is-open { background: var(--orient-50); color: var(--orient-700); }

/* Header overflow (⋯) menu */
.dm-overflow { position: relative; display: inline-flex; }
.dm-overflow-btn { color: var(--neutral-500); }
.dm-overflow-btn:hover, .dm-overflow-btn.is-active { background: var(--neutral-50); color: var(--neutral-900); }
.dm-menu-scrim { position: fixed; inset: 0; z-index: 40; border: 0; background: transparent; cursor: default; }
.dm-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 41; min-width: 214px; padding: 6px; background: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 1px; animation: dm-menu-in 0.13s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dm-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dm-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 550; color: var(--neutral-800); text-align: left; cursor: pointer; }
.dm-menu-item svg.lucide { width: 16px; height: 16px; color: var(--neutral-500); flex: none; }
.dm-menu-item:hover { background: var(--neutral-50); }
.dm-menu-sep { height: 1px; margin: 5px 0; background: var(--neutral-150); }

/* Note composer (Activity) */
.dmx-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--neutral-200); background: var(--neutral-0); }
.dmx-note-av { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none; background: var(--neutral-200); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--neutral-600); }
.dmx-note-av img { width: 100%; height: 100%; object-fit: cover; }
.dmx-note-input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--neutral-900); }
.dmx-note-input::placeholder { color: var(--neutral-400); }
.dmx-note-input:focus { outline: none; }
.dmx-note-add { flex: none; }
/* Header ping (blocked car's recommended move) — inherits the brand-gradient .btn-primary; the class
   is kept only for the loading state. */
.dm-head-ping svg.lucide { color: var(--neutral-0); }
.dm-head-ping.is-loading { opacity: 0.8; }

/* ── dmx-* page-native components (flat, hairline-on-white, tone by colour not fill) ─────────── */
.dmx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral-400); flex: none; }
.dmx-dot[data-tone="critical"] { background: var(--critical-fg); }
.dmx-dot[data-tone="warning"], .dmx-dot[data-tone="waiting"] { background: var(--warning-fg); }
.dmx-dot[data-tone="success"] { background: var(--success-fg); }
.dmx-person { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.dmx-person-av { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: none; background: var(--neutral-200); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--neutral-600); }
.dmx-person-av img { width: 100%; height: 100%; object-fit: cover; }

.dmx-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dmx-block-head h3 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--neutral-600); }
.dmx-block-meta { font-size: 13px; font-weight: 600; color: var(--neutral-500); }

/* Every section is its own bordered CARD for clear separation (user request). */
.dmx-block { padding: 20px 22px; border: 1px solid var(--neutral-200); background: var(--neutral-0); }
/* Overview two-column: service timeline | jobs (both vertical connected steppers), each its own card */
.dmx-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.dmx-two > .dmx-block { height: 100%; }

/* Overview — the VERDICT card (hero): single unified card — kicker → headline → recommended line →
   a horizontal metric strip (Better Stack / incident.io pattern; no two-column split). */
.dmx-verdict { padding: 24px; border: 1px solid var(--neutral-200); background: var(--neutral-0); }
.dmx-vd-rec { margin: 9px 0 0; font-size: 14px; line-height: 1.5; color: var(--neutral-700); max-width: 68ch; }
.dmx-vd-rec b { color: var(--neutral-900); font-weight: 700; }
.dmx-vd-metrics { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--neutral-200); display: flex; align-items: flex-end; gap: 44px; flex-wrap: wrap; }
.dmx-verdict[data-tone="critical"] .dmx-vd-metrics { border-color: color-mix(in oklch, var(--critical-border) 55%, white); }
.dmx-verdict[data-tone="warning"] .dmx-vd-metrics { border-color: color-mix(in oklch, var(--warning-border) 55%, white); }
.dmx-verdict[data-tone="success"] .dmx-vd-metrics { border-color: color-mix(in oklch, var(--success-border) 55%, white); }
.dmx-vd-metric { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dmx-vd-mcap { font-size: 12px; font-weight: 600; color: var(--neutral-500); }
.dmx-vd-mval { font-size: 17px; font-weight: 700; color: var(--neutral-900); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.dmx-vd-metric.is-hero { margin-right: 6px; }
.dmx-vd-metric.is-hero .dmx-vd-mval { font-size: 27px; font-weight: 750; }
.dmx-vd-metric[data-tone="critical"] .dmx-vd-mval { color: var(--critical-strong); }
.dmx-vd-metric[data-tone="warning"] .dmx-vd-mval { color: var(--warning-strong); }
.dmx-vd-metric[data-tone="success"] .dmx-vd-mval { color: var(--success-strong); }
/* "Track the part" action (parts-hold verdict) → jumps to the Activity part tracker. */
/* Co-located action: a single outlined "Inspect / Track the part" button sits INLINE at the right
   end of the metric strip (same row as Time-to-act / Promise / Predicted), compact and bottom-
   aligned. It opens the Activity detail — it never repeats the header's Revise / Ping levers. */
.dmx-vd-actions { margin-left: auto; align-self: flex-end; display: flex; flex-wrap: wrap; gap: 8px; }
.dmx-vd-act { flex: none; }
.dmx-vd-metric-action { margin-left: auto; align-self: flex-end; }
.dmx-vd-action { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--neutral-200); background: var(--neutral-0); color: var(--neutral-800); font-size: 13px; font-weight: 650; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.dmx-vd-action:hover { border-color: var(--neutral-300); background: var(--neutral-25); }
.dmx-vd-action svg.lucide { width: 15px; height: 15px; color: var(--warning-fg); }
.dmx-vd-action-go { margin-left: 2px; color: var(--neutral-400); }
/* Fills softened ~2 shades toward white (user: alert tints too harsh); success gets the faintest
   wash too so all three states read as consistently, gently tinted cards (not "2 tinted + 1 white"). */
.dmx-verdict[data-tone="critical"] { border-color: color-mix(in oklch, var(--critical-border) 48%, white); background: color-mix(in oklch, var(--critical-bg) 34%, white); }
.dmx-verdict[data-tone="warning"] { border-color: color-mix(in oklch, var(--warning-border) 48%, white); background: color-mix(in oklch, var(--warning-bg) 34%, white); }
.dmx-verdict[data-tone="success"] { border-color: color-mix(in oklch, var(--success-border) 46%, white); background: color-mix(in oklch, var(--success-bg) 28%, white); }
.dmx-vd-kicker { margin: 0 0 9px; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral-500); }
.dmx-vd-ico { width: 15px; height: 15px; flex: none; }
.dmx-vd-ico[data-tone="critical"] { color: var(--critical-fg); }
.dmx-vd-ico[data-tone="warning"] { color: var(--warning-fg); }
.dmx-vd-ico[data-tone="success"] { color: var(--success-fg); }
.dmx-verdict[data-tone="critical"] .dmx-vd-kicker { color: var(--critical-strong); }
.dmx-verdict[data-tone="warning"] .dmx-vd-kicker { color: var(--warning-strong); }
.dmx-verdict[data-tone="success"] .dmx-vd-kicker { color: var(--success-strong); }
.dmx-vd-title { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.22; color: var(--neutral-900); text-wrap: balance; }
.dmx-vd-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--neutral-700); max-width: 66ch; }
.dmx-vd-stats { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--neutral-200); display: flex; align-items: center; gap: 22px; }
.dmx-verdict[data-tone="critical"] .dmx-vd-stats { border-color: var(--critical-border); }
.dmx-verdict[data-tone="warning"] .dmx-vd-stats { border-color: var(--warning-border); }
.dmx-stat { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dmx-stat > span { font-size: 12px; font-weight: 600; color: var(--neutral-500); display: inline-flex; align-items: center; gap: 6px; }
.dmx-stat b { font-size: 26px; font-weight: 750; color: var(--neutral-900); line-height: 1; letter-spacing: -0.01em; }
.dmx-stat b[data-tone="warning"] { color: var(--warning-strong); }
.dmx-stat b[data-tone="critical"] { color: var(--critical-strong); }
.dmx-stat b[data-tone="success"] { color: var(--success-strong); }
.dmx-stat-arrow { width: 18px; height: 18px; color: var(--neutral-300); flex: none; margin-top: 16px; }
.dmx-stat-var { margin-left: auto; align-items: flex-end; text-align: right; }
.dmx-stat-var b { font-size: 15px; font-weight: 700; }
.dmx-stat-var[data-tone="warning"] b { color: var(--warning-strong); }
.dmx-stat-var[data-tone="critical"] b { color: var(--critical-strong); }
.dmx-stat-var[data-tone="success"] b { color: var(--success-strong); }
.dmx-revtag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--success-strong); }

/* Pickup outlook stated in words — big tone number + label, one context line, the recommended move */
.dmx-outlook { margin-top: 16px; }
.dmx-outlook-lead { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dmx-outlook-big { font-size: 27px; font-weight: 750; letter-spacing: -0.02em; line-height: 1; color: var(--neutral-900); }
.dmx-outlook-big[data-tone="warning"] { color: var(--warning-strong); }
.dmx-outlook-big[data-tone="critical"] { color: var(--critical-strong); }
.dmx-outlook-big[data-tone="success"] { color: var(--success-strong); }
.dmx-outlook-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--neutral-500); }
.dmx-outlook-cap svg.lucide { width: 15px; height: 15px; }
.dmx-outlook-sub { margin: 9px 0 0; font-size: 13px; font-weight: 550; color: var(--neutral-600); }
.dmx-outlook-rec { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700); }
.dmx-outlook-rec b { color: var(--neutral-900); font-weight: 700; }

/* Overview — the blocker proof (photo + found work + chase summary) */
.dmx-issue-body { display: grid; grid-template-columns: 168px 1fr; gap: 22px; align-items: stretch; }
/* Photo fills the row height (matches the info column) instead of a fixed square that left a dead
   white gap below the shorter text column (user screenshot). */
.dmx-ev-photo { margin: 0; align-self: stretch; min-height: 148px; overflow: hidden; border: 1px solid var(--neutral-200); background: var(--neutral-50); }
.dmx-ev-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dmx-ev-empty { width: 100%; height: 100%; display: grid; place-items: center; gap: 6px; color: var(--neutral-400); font-size: 12px; }
.dmx-issue-info { padding-top: 2px; display: flex; flex-direction: column; }
.dmx-ev-kicker { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--orient-700); }
.dmx-ev-kicker svg.lucide { width: 15px; height: 15px; }
/* Title + estimate chip on one row (the found work reads as one unit). */
.dmx-ev-headrow { margin: 10px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dmx-ev-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--neutral-900); }
.dmx-ev-est { display: inline-flex; align-items: center; padding: 2px 9px; font-size: 12px; font-weight: 650; color: var(--neutral-600); background: var(--neutral-100); font-variant-numeric: tabular-nums; }
.dmx-ev-finder { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dmx-ev-finder-role { font-size: 13px; color: var(--neutral-500); }
/* Chase footer: status left, action right, separated by a hairline. */
.dmx-issue-chase { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--neutral-150); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dmx-issue-chase-txt { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutral-600); }
.dmx-issue-chase-txt svg.lucide { width: 15px; height: 15px; color: var(--neutral-400); flex: none; }
.dmx-chase-link { display: inline-flex; align-items: center; gap: 4px; margin: -6px; border: 0; background: none; padding: 6px; font: inherit; font-size: 13px; font-weight: 650; color: var(--orient-700); cursor: pointer; flex: none; }
.dmx-chase-link svg.lucide { width: 14px; height: 14px; }
.dmx-chase-link:hover { text-decoration: underline; }

/* Vertical connected stepper — jobs (shares the look of the service timeline) */
.dmx-jobs-bar { height: 4px; background: var(--neutral-150); margin-bottom: 16px; overflow: hidden; }
.dmx-jobs-bar i { display: block; height: 100%; background: var(--orient-600); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.dmx-steps { list-style: none; margin: 0; padding: 0; }
.dmx-step { display: grid; grid-template-columns: 26px 1fr; gap: 13px; min-height: 46px; }
.dmx-step-node { position: relative; align-self: stretch; display: grid; place-items: center; }
.dmx-step-node::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: var(--neutral-200); }
.dmx-step:first-child .dmx-step-node::before { top: 50%; }
.dmx-step:last-child .dmx-step-node::before { bottom: 50%; }
.dmx-step[data-status="done"] .dmx-step-node::before { background: var(--success-border); }
.dmx-step-mark { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-0); border: 2px solid var(--neutral-300); color: var(--neutral-400); }
.dmx-step-mark svg.lucide { width: 13px; height: 13px; }
.dmx-step[data-status="done"] .dmx-step-mark { background: var(--success-fg); border-color: var(--success-fg); color: var(--neutral-0); }
.dmx-step[data-status="active"] .dmx-step-mark, .dmx-step[data-status="resuming"] .dmx-step-mark { border-color: var(--orient-600); color: var(--orient-600); }
.dmx-step[data-status="blocked"] .dmx-step-mark, .dmx-step[data-status="over"] .dmx-step-mark { background: var(--critical-fg); border-color: var(--critical-fg); color: var(--neutral-0); }
.dmx-step-body { align-self: center; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dmx-step-name { font-size: 14px; font-weight: 600; color: var(--neutral-800); }
.dmx-step[data-status="pending"] .dmx-step-name { color: var(--neutral-500); font-weight: 500; }
.dmx-step[data-status="blocked"] .dmx-step-name { font-weight: 700; color: var(--neutral-900); }
.dmx-step-meta { font-size: 13px; color: var(--neutral-500); flex: none; }
.dmx-step[data-status="blocked"] .dmx-step-meta { color: var(--critical-strong); font-weight: 600; }
.dmx-step[data-status="active"] .dmx-step-meta, .dmx-step[data-status="resuming"] .dmx-step-meta { color: var(--orient-700); font-weight: 600; }

/* Horizontal service timeline — dots span the FULL width (first at the left edge, last at the right),
   joined by one continuous line; labels centred under each dot (start/end-clamped at the edges). */
.dmx-htl { display: flex; position: relative; list-style: none; margin: 0; padding: 2px 0 0; }
/* Equal columns, dot + caption CENTRED in each (incl. first/last — was edge-aligned). The connector
   runs per-step from this dot's centre to the next dot's centre, so every caption centres on its dot. */
.dmx-htl-step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; position: relative; }
.dmx-htl-step::after { content: ""; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--success-border); z-index: 0; }
.dmx-htl-step:last-child::after { display: none; }
.dmx-htl-rail { position: relative; z-index: 1; display: flex; align-items: center; height: 24px; }
.dmx-htl-line { display: none; }
.dmx-htl-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--success-fg); border: 2px solid var(--success-fg); color: var(--neutral-0); }
.dmx-htl-dot svg.lucide { width: 13px; height: 13px; }
.dmx-htl-step.is-now .dmx-htl-dot { background: var(--orient-600); border-color: var(--orient-600); }
.dmx-htl-cap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px 0; }
.dmx-htl-cap time { font-size: 12px; font-weight: 600; color: var(--neutral-500); }
.dmx-htl-cap span { font-size: 13.5px; font-weight: 600; color: var(--neutral-700); }
.dmx-htl-step.is-now .dmx-htl-cap time { color: var(--orient-700); }
.dmx-htl-step.is-now .dmx-htl-cap span { color: var(--neutral-900); font-weight: 700; }
@media (max-width: 640px) {
  .dmx-htl { flex-direction: column; gap: 0; align-items: stretch; }
  .dmx-htl-step { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
  .dmx-htl-step::after { display: none; }
  .dmx-htl-cap { align-items: flex-start; text-align: left; padding: 1px 0 0; }
}
/* Path to pickup — forward phase stepper: done = green check, now = teal, upcoming = hollow;
   the rail is a calm neutral (it's a route, not all-complete). */
.dmx-path .dmx-htl-step::after { background: var(--neutral-200); }
/* Brand-only (no green): done = solid teal + check; current = a concentric ring (teal ring + a
   smaller inner dot + a soft outer halo); upcoming = hollow grey. */
.dmx-path .dmx-htl-step.is-done .dmx-htl-dot { background: var(--orient-600); border-color: var(--orient-600); color: var(--neutral-0); }
.dmx-path .dmx-htl-step.is-now .dmx-htl-dot { background: var(--neutral-0); border: 2px solid var(--orient-600); box-shadow: 0 0 0 4px color-mix(in oklch, var(--orient-500) 16%, transparent); }
.dmx-path .dmx-htl-step.is-now .dmx-htl-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--orient-600); }
.dmx-path .dmx-htl-step.is-upcoming .dmx-htl-dot { background: var(--neutral-0); border-color: var(--neutral-300); color: transparent; }
.dmx-path .dmx-htl-step.is-upcoming .dmx-htl-cap span { color: var(--neutral-500); }
.dmx-path .dmx-htl-blank { visibility: hidden; }

/* Activity — vertical event feed (car.timeline): dot + connector rail, event + time.
   Distinct from the Overview horizontal service stepper. */
.dmx-feed { list-style: none; margin: 0; padding: 0; }
.dmx-feed-row { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.dmx-feed-rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.dmx-feed-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-100); color: var(--neutral-500); }
.dmx-feed-dot svg.lucide { width: 14px; height: 14px; }
.dmx-feed-dot[data-tone="success"] { background: var(--success-bg); color: var(--success-fg); }
.dmx-feed-dot[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-fg); }
.dmx-feed-dot[data-tone="active"] { background: var(--orient-50); color: var(--orient-600); }
.dmx-feed-line { flex: 1; width: 2px; min-height: 12px; margin: 2px 0; background: var(--neutral-200); }
.dmx-feed-body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0 18px; min-width: 0; }
.dmx-feed-row:last-child .dmx-feed-body { padding-bottom: 2px; }
.dmx-feed-label { font-size: 14px; font-weight: 600; color: var(--neutral-800); }
.dmx-feed-row.is-now .dmx-feed-label { font-weight: 700; color: var(--neutral-900); }
.dmx-feed-time { font-size: 12.5px; color: var(--neutral-500); flex: none; }
.dmx-feed-row.is-now .dmx-feed-time { color: var(--orient-600); font-weight: 600; }
.dmx-feed-pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--orient-500); }
.dmx-feed-pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--orient-500); opacity: 0.55; animation: dmx-pulse 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .dmx-feed-pulse::after { animation: none; } }

/* Ping repeated at the foot of the Activity chase */
.dmx-ping-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dmx-ping-btn { min-height: 40px; padding: 0 18px; }
.dmx-ping-hint { font-size: 12.5px; color: var(--neutral-500); }
/* Ping riding inline on the "Awaiting approval" log row */
.dmx-log-row.has-trail { grid-template-columns: 34px 1fr auto; align-items: center; column-gap: 14px; }
.dmx-log-trail { align-self: center; }
.dmx-ping-inline { white-space: nowrap; flex: none; }

/* Blocker / Activity — communication log (contact attempts + customer) */
.dmx-log-list { list-style: none; margin: 0; padding: 0; }
.dmx-log-row { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--neutral-150); align-items: start; }
.dmx-log-row:first-child { border-top: 0; }
.dmx-log-ico { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-100); color: var(--neutral-500); margin-top: 1px; }
.dmx-log-ico svg.lucide { width: 14px; height: 14px; }
.dmx-log-ico[data-tone="success"] { background: var(--success-bg); color: var(--success-fg); }
.dmx-log-ico[data-tone="warning"], .dmx-log-ico[data-tone="waiting"] { background: var(--warning-bg); color: var(--warning-fg); }
.dmx-log-ico[data-tone="active"] { background: var(--orient-50); color: var(--orient-600); }
.dmx-log-main { min-width: 0; }
.dmx-log-line { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dmx-log-label { font-size: 14px; font-weight: 600; color: var(--neutral-800); line-height: 1.3; }
.dmx-log-time { font-size: 12px; color: var(--neutral-500); flex: none; font-variant-numeric: tabular-nums; }
.dmx-log-meta { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--neutral-500); }
.dmx-log-meta:empty { display: none; }
.dmx-log-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; padding: 2px 8px; background: var(--neutral-100); color: var(--neutral-600); }
.dmx-log-badge[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); }
.dmx-log-badge[data-tone="warning"], .dmx-log-badge[data-tone="waiting"] { background: var(--warning-bg); color: var(--warning-strong); }
.dmx-log-badge[data-tone="active"] { background: var(--orient-50); color: var(--orient-700); }
.dmx-log-row.is-live .dmx-log-ico { color: var(--orient-600); }
.dmx-log-pulse { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--orient-500); opacity: 0.6; animation: dmx-pulse 1.6s ease-out infinite; }
@keyframes dmx-pulse { 0% { transform: scale(0.72); opacity: 0.7; } 100% { transform: scale(1.18); opacity: 0; } }
.dmx-pending-dots { display: inline-flex; gap: 2px; }
.dmx-pending-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: dmx-dots 1.2s ease-in-out infinite; }
.dmx-pending-dots i:nth-child(2) { animation-delay: 0.2s; }
.dmx-pending-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dmx-dots { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dmx-log-pulse, .dmx-pending-dots i, .dmx-jobs-bar i, .dmx-meter-fill { animation: none; transition: none; } }

/* Activity — service timeline */
.dmx-tl-list { list-style: none; margin: 0; padding: 0; }
.dmx-tl-row { display: grid; grid-template-columns: 48px 20px 1fr; align-items: center; gap: 10px; min-height: 40px; }
.dmx-tl-time { font-size: 12.5px; color: var(--neutral-500); text-align: right; }
.dmx-tl-node { position: relative; align-self: stretch; display: grid; place-items: center; }
.dmx-tl-node::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--neutral-200); transform: translateX(-0.5px); }
.dmx-tl-row:first-child .dmx-tl-node::before { top: 50%; }
.dmx-tl-row:last-child .dmx-tl-node::before { bottom: 50%; }
.dmx-tl-dot { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-0); border: 2px solid var(--neutral-300); }
.dmx-tl-label { font-size: 14px; font-weight: 550; color: var(--neutral-700); }
.dmx-tl-row.is-now .dmx-tl-dot { border-color: var(--orient-600); background: var(--orient-600); }
.dmx-tl-row.is-now .dmx-tl-time { color: var(--orient-700); font-weight: 650; }
.dmx-tl-row.is-now .dmx-tl-label { color: var(--neutral-900); font-weight: 700; }

/* Sidebar (440px) — grouped reference facts, 2-up cells (like the reference dossiers) */
/* Content is inset 30px; each section leads with a FULL-BLEED banded header (icon + label) so the
   groups read as distinct blocks — a subtle fill + edge-to-edge rules, not a thin under-line that
   didn't separate enough (user feedback). */
/* Weav-style section headers: plain bold dark text (sentence case, no fill/icon/uppercase), a
   full-bleed hairline divider ABOVE each group. The header + divider carry the separation. */
.dmx-factgroup { padding: 0 30px; }
.dmx-factgroup + .dmx-factgroup { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--neutral-150); }
.dmx-factgroup-head { margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--neutral-900); }
/* Weav-style facts: ONE row per fact — label LEFT (muted) then the value in a fixed second column,
   BOTH left-aligned (like the Weav reference). Single column of rows, so 3-item groups no longer
   orphan an empty cell like the old 2-col grid did. */
/* Label LEFT (grey, regular) then value in a fixed second column, both left-aligned. Values are
   MEDIUM weight, not bold (they were shouting) — differentiated from labels by colour, Weav-style. */
.dmx-factgrid { margin: 0; display: flex; flex-direction: column; }
.dmx-factcell { display: grid; grid-template-columns: 100px 1fr; align-items: baseline; gap: 14px; min-width: 0; padding: 5px 0; }
.dmx-factcell dt { margin: 0; font-size: 13px; font-weight: 500; color: var(--neutral-500); }
.dmx-factcell dd { margin: 0; min-width: 0; text-align: left; font-size: 14px; font-weight: 500; color: var(--neutral-800); word-break: break-word; }
.dmx-factcell dd .dmx-person { justify-content: flex-start; font-weight: 500; }
.dmx-factcell dd .mono { font-weight: 550; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.dmx-factcell dd[data-tone="waiting"] { color: var(--warning-strong); }
.dmx-factcell dd[data-tone="success"] { color: var(--success-strong); }
.dmx-factcell dd[data-tone="critical"] { color: var(--critical-strong); }
.dmx-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; border: 1px solid color-mix(in oklch, var(--neutral-900) 12%, transparent); }

@media (max-width: 1240px) {
  /* Bay-map column can't fit alongside — collapse has-baymap back to the 2-col workspace (hide the
     second rule + the bay map; the header toggle still works, it just needs more width to show). */
  .dm-body-inner.has-baymap { grid-template-columns: minmax(0, 1fr) 1px 340px; }
  .dm-body-inner.has-baymap > *:nth-child(4), .dm-body-inner.has-baymap > *:nth-child(5) { display: none; }
}
/* Revise trigger reads as a dropdown (chevron + active state while open) */
.dm-revise-chev { width: 15px; height: 15px; margin-left: 2px; color: var(--neutral-400); transition: transform 0.16s ease; }
/* The revise button uses .is-active as its "dropdown open" flag; keep its outline icons stroke-only
   (the global .is-active svg.lucide fill rule is for filled tab/nav icons, not this clock/chevron). */
.dm-revise-btn svg.lucide { fill: none; }
.btn-ghost.dm-revise-btn.is-active { background: var(--neutral-100); border-color: var(--neutral-300); }
.btn-primary.dm-revise-btn .dm-revise-chev { color: rgba(255, 255, 255, 0.72); }
.btn-primary.dm-revise-btn.is-active { background: var(--orient-700); border-color: var(--orient-700); }
.dm-revise-btn.is-active .dm-revise-chev { transform: rotate(180deg); }
/* Revise dropdown — anchored under its button (top/right set in JS), page stays visible behind. */
.dm-pop-wrap { position: fixed; inset: 0; z-index: 12; }
.dm-pop-scrim { position: absolute; inset: 0; border: 0; background: transparent; cursor: default; }
.dm-pop { position: fixed; width: 384px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); display: flex; flex-direction: column; background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: 0; box-shadow: 0 20px 44px -18px rgba(15, 23, 32, 0.4); overflow: hidden; transform-origin: top right; }
.dm-pop-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--neutral-150); }
.dm-pop-title { margin: 0 0 3px; font-size: 14px; font-weight: 700; color: var(--neutral-900); }
.dm-pop-sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-600); }
.dm-page-ping-quiet { margin-top: 4px; }
.dm-pop .revise-slots { padding: 12px 16px; margin: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
/* Uniform-height rows: the sub-label stays on one line (ellipsis if long) so slots never jump when switching. */
.dm-pop .revise-slot { min-height: 48px; }
.dm-pop .revise-slot > span:not(.revise-slot-check) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-pop .dm-foot { flex: none; border-top: 1px solid var(--neutral-150); padding: 12px 16px; }
@keyframes dm-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.dm-pop.dm-swap-in { animation: dm-pop-in 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
/* Holding / result flows — a centred dialog over a dimmed detail (context stays visible behind). */
.dm-overlay { position: fixed; inset: 0; z-index: 12; display: grid; place-items: center; padding: 28px; }
.dm-overlay-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 32, 0.34); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); animation: dm-fade 0.16s ease-out; }
.dm-overlay-dialog { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(760px, 88vh); background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: 0; box-shadow: 0 32px 70px -24px rgba(15, 23, 32, 0.45); overflow: hidden; }
/* Proper modal head: title (left) + close (right) in a header bar with a divider — Mobbin pattern. */
.dm-overlay-head { flex: none; display: flex; align-items: center; gap: 11px; padding: 15px 14px 15px 20px; border-bottom: 1px solid var(--neutral-150); }
.dm-overlay-badge { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--success-fg); color: #fff; }
.dm-overlay-badge[data-tone="neutral"] { background: var(--neutral-100); color: var(--neutral-600); }
.dm-overlay-badge svg.lucide { width: 16px; height: 16px; }
.dm-overlay-title { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--neutral-900); }
.dm-overlay-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.dm-overlay-dialog .dm-foot { flex: none; border-top: 1px solid var(--neutral-150); }
.dm-overlay-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--neutral-200); background: var(--neutral-0); color: var(--neutral-500); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.dm-overlay-close:hover { background: var(--neutral-50); color: var(--neutral-800); }
.dm-overlay-close svg.lucide { width: 17px; height: 17px; }
@keyframes dm-dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }
.dm-overlay-dialog.dm-swap-in { animation: dm-dialog-in 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { .dm-pop.dm-swap-in, .dm-overlay-dialog.dm-swap-in, .dm-overlay-backdrop { animation: none; } }
@keyframes dm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-rise { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }
.dm-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--neutral-150); }
.dm-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-500); }
.dm-kicker[data-tone="critical"] { color: var(--critical-strong); }
.dm-kicker[data-tone="warning"] { color: var(--warning-strong); }
.dm-plate-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm-plate { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 0.01em; color: var(--neutral-900); }
.dm-sub { margin: 5px 0 0; font-size: 13px; color: var(--neutral-600); }
/* Vehicle attributes as pills instead of a middot-run — quicker to parse. */
/* Passive vehicle metadata reads as quiet inline text divided by hairlines — NOT as
   bordered chips, so the only "pill" in the header is the live status. Keeps the
   info-on-surface language and removes the tag-vs-pill ambiguity. */
.dm-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 10px 0 0; }
.dm-tag { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; font-size: 13px; font-weight: 600; color: var(--neutral-600); }
.dm-tag:not(:first-child) { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--neutral-200); }
.dm-tag svg.lucide { width: 13px; height: 13px; color: var(--neutral-400); }
.dm-tag-swatch { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.18); flex: none; }
.dm-tag[data-tone="waiting"] { color: var(--warning-strong); }
.dm-tag[data-tone="waiting"] svg.lucide { color: var(--warning-fg); }
.dm-tag[data-tone="orient"] { color: var(--orient-700); }
.dm-tag[data-tone="orient"] svg.lucide { color: var(--orient-600); }
.dm-tag[data-tone="critical"] { color: var(--critical-strong); }
.dm-tag[data-tone="critical"] svg.lucide { color: var(--critical-fg); }
.dm-tag[data-tone="success"] { color: var(--success-strong); }
.dm-tag[data-tone="success"] svg.lucide { color: var(--success-fg); }
.dm-head-actions { flex: none; display: inline-flex; align-items: center; gap: 4px; }
/* Each column scrolls independently within the fixed body height, so the "New work found"
   evidence stays anchored (its photo/work at the top) while a long list scrolls, and the
   two columns never push each other. */
/* Left rail (media + service timeline) stays sticky/fixed while the right (decision)
   scrolls — each column is its own scroll container within the fixed body height. */
/* Fixed 240px rail (200px photo + 20px padding each side) so the New work found photo +
   caption + advisor + a normal-length service timeline fit without scrolling; the wider
   main carries the decision. */
.dm-body { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; }
.dm-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; overflow-y: auto; padding: 20px; }
.dm-rail { gap: 12px; background: var(--neutral-25); border-right: 1px solid var(--neutral-150); }
.dm-rail-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-600); }
.dm-rail-label svg.lucide { width: 13px; height: 13px; color: var(--orient-600); flex: none; }
.dm-focus { padding: 13px 14px; border-radius: 0; border: 1px solid var(--neutral-200); background: var(--neutral-25); }
.dm-focus[data-tone="critical"] { border-color: var(--critical-border); background: var(--critical-bg); }
.dm-focus[data-tone="warning"] { border-color: var(--warning-border); background: var(--warning-bg); }
.dm-focus[data-tone="success"] { border-color: var(--success-border); background: var(--success-bg); }
.dm-card-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral-500); }
.dm-focus[data-tone="critical"] .dm-card-eyebrow { color: var(--critical-strong); }
.dm-focus-title { display: block; margin: 5px 0 6px; font-size: 16px; font-weight: 750; line-height: 1.3; color: var(--neutral-900); }
.dm-focus-body { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700); }
.dm-main .hold-cost { margin-top: 0; }
/* Needs action + Hold cost read as one connected block: shared outer border, a single
   hairline between them, no gap. The tinted alert sits above the neutral cost detail. */
/* flex:none — as an overflow:hidden scroll container it would otherwise get min-height:0 as a
   flex-column item and collapse to its border. */
.dm-issue-group { flex: none; border: 1px solid var(--neutral-200); border-radius: 0; overflow: hidden; }
.dm-issue-group[data-tone="critical"] { border-color: var(--critical-border); }
.dm-issue-group[data-tone="warning"] { border-color: var(--warning-border); }
.dm-issue-group[data-tone="success"] { border-color: var(--success-border); }
/* Fill reaches the outer stroke: rounding the focus's top corners to the group's radius closes the
   hairline gap where a square fill met the rounded border. */
/* Square the child's corners — the group already clips to its own rounded border via overflow:hidden.
   A child radius (8px) rounds tighter than the group's inner corner (~7px), leaving a white gap. */
.dm-issue-group > .dm-focus { border: 0; border-radius: 0; }
.dm-issue-group > .hold-cost { border: 0; border-radius: 0; border-top: 1px solid var(--neutral-200); }
/* The pickup outlook, when it's the panel under the focus (non-blocked cars), gets the same
   in-card treatment as the hold-cost: flush edges, a divider from the focus, its own padding. */
.dm-issue-group > .pickup-outlook { margin: 0; padding: 12px 14px; border-top: 1px solid var(--neutral-200); }
.dm-issue-group[data-tone="critical"] > .hold-cost,
.dm-issue-group[data-tone="critical"] > .pickup-outlook { border-top-color: var(--critical-border); }
.dm-issue-group[data-tone="warning"] > .hold-cost,
.dm-issue-group[data-tone="warning"] > .pickup-outlook { border-top-color: var(--warning-border); }
.dm-issue-group[data-tone="success"] > .pickup-outlook { border-top-color: var(--success-border); }
/* Actions live in a persistent footer bar (like ClickUp / incident.io), so the primary
   decision is always visible and never floats mid-column above reference data. */
.dm-foot { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--neutral-150); background: var(--neutral-0); }
.dm-foot .btn { min-width: 156px; min-height: 42px; justify-content: center; }
/* Revise dropdown footer: two equal-width buttons filling the row (uniform spacing). */
.dm-foot-split { gap: 12px; }
.dm-foot-split .btn { flex: 1 1 0; min-width: 0; }
/* Comfortable ≥40px targets on the modal's controls (were 36/32/24). */
.dm-head-actions .icon-button { width: 40px; height: 40px; }
.ae-attempts-toggle { min-height: 40px; }
/* Processing state is skippable — the whole panel + a footer "Skip" fast-forward it. */
.dm-processing[data-modal-skip] { cursor: pointer; }
.dm-foot .dm-skip { min-width: 0; margin-right: auto; color: var(--neutral-500); }
.dm-foot .dm-skip:hover { color: var(--neutral-800); background: var(--neutral-50); }
/* Tertiary "Revise promise" — pinned left, quiet, so the primary/secondary actions on the
   right are untouched. */
.dm-foot .dm-revise { min-width: 0; margin-right: auto; color: var(--neutral-600); }
.dm-foot .dm-revise:hover { color: var(--neutral-900); background: var(--neutral-50); }
.dm-revise-block { margin-top: 4px; }
.dm-revise-block .revise-slots { display: flex; flex-direction: column; gap: 8px; }
.btn-ghost { background: var(--neutral-0); border: 1px solid var(--neutral-200); color: var(--neutral-800); }
.btn-ghost:hover { background: var(--neutral-50); border-color: var(--neutral-300); }
.dm-section-head { margin: 0 0 9px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral-600); }
/* Vitals strip — the car's glanceable stats in one row under the header, so the two
   columns below can be a clean decision | evidence pair. */
/* Vitals now live at the top of the scrollable right column (a compact stat row). */
.dm-vitals { flex: none; display: flex; align-items: stretch; gap: 0; padding: 0 0 14px; border-bottom: 1px solid var(--neutral-150); }
.dm-vital { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 0 16px; }
.dm-vital + .dm-vital { border-left: 1px solid var(--neutral-200); }
.dm-vital:first-child { padding-left: 0; }
.dm-vital:last-child { padding-right: 0; }
.dm-vital > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-500); }
.dm-vital > strong { font-size: 15px; font-weight: 700; color: var(--neutral-900); }
.dm-vital > strong[data-tone="critical"] { color: var(--critical-strong); }
.dm-vital > strong[data-tone="warning"] { color: var(--warning-strong); }
.dm-vital > strong[data-tone="success"] { color: var(--success-strong); }
.dm-vital-mech { flex: 1.4; }
.dm-mech { display: inline-flex; align-items: center; gap: 7px; }
.dm-mech strong { font-size: 14px; font-weight: 700; color: var(--neutral-900); }
/* Re-promised pickup after approval — the new time stands out, old shown struck through. */
.dm-revtag { margin-left: 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--success-strong); background: var(--success-bg); border: 1px solid var(--success-border); border-radius: 0; padding: 1px 4px; vertical-align: middle; }
.dm-vital-was { font-size: 12px; font-weight: 600; color: var(--neutral-400); text-decoration: line-through; font-style: normal; }
.avatar-xs { width: 22px; height: 22px; font-size: 12px; }
.avatar-sm { width: 38px; height: 38px; font-size: 13px; }
.avatar.is-person { cursor: default; transition: box-shadow 0.14s ease; }
.avatar.is-person:hover, .avatar.is-person:focus-visible { box-shadow: 0 0 0 2px var(--orient-200); outline: none; }

/* Advisor block — bigger avatar with a two-line label alongside it. */
.dm-advisor { display: flex; align-items: center; gap: 11px; }
.dm-advisor-copy { min-width: 0; }
.dm-advisor-name { margin: 0; font-size: 13px; line-height: 17px; color: var(--neutral-600); }
.dm-advisor-name b { color: var(--neutral-900); font-weight: 700; }
.dm-advisor-sub { margin: 0; font-size: 13px; line-height: 16px; color: var(--neutral-500); }

/* Square (1:1) inspection photo, pinned at the top of the rail. flex:none so the flex
   column doesn't shrink its aspect ratio. */
.dm-photo.dm-photo-square { flex: none; width: 100%; max-width: 200px; height: auto; aspect-ratio: 1 / 1; margin: 0; }
/* Rail: photo first, then the work caption, advisor, and (muted, larger) service timeline. */
.dm-rail-work { display: flex; flex-direction: column; gap: 3px; }
.dm-rail-timeline .attempt-log-head { color: var(--neutral-500); }
.dm-rail .atl-dot { width: 10px; height: 10px; }
.dm-rail .atl-row::before { top: 13px; }
.dm-rail .atl-dot[data-tone="now"] { background: var(--orient-500); }
.dm-rail .atl-label { font-size: 13px; color: var(--neutral-700); }
.dm-rail .atl-time { font-size: 12px; }
/* Keep the right-aligned time close to the label in the wide main column — otherwise a
   full-width row strands the timestamp at the far edge with a large empty gap. Cap the
   section (head + list) so the count badge and the timestamps share the same right edge. */
/* Contact attempts read as a communication LOG (channel icon + result badge), deliberately
   NOT another dot-and-line timeline like the service timeline / jobs stepper. */
.call-list { list-style: none; margin: 0; padding: 0; }
.call-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--neutral-150); }
.call-row:last-child { border-bottom: 0; }
.call-ico { flex: none; width: 30px; height: 30px; border-radius: 0; display: grid; place-items: center; background: var(--neutral-100); color: var(--neutral-500); }
.call-ico svg.lucide { width: 15px; height: 15px; }
.call-ico[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); }
.call-ico[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); }
.call-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.call-line { display: flex; align-items: baseline; gap: 10px; }
.call-label { font-size: 13px; font-weight: 650; color: var(--neutral-800); min-width: 0; }
.call-time { flex: none; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--neutral-500); }
/* Channel/mode line — tells the manager whether it was WhatsApp, a phone call, or email. */
.call-meta { display: flex; align-items: center; gap: 8px; }
.call-chan { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--neutral-500); }
.call-chan svg.lucide { width: 12px; height: 12px; color: var(--neutral-400); }
.call-badge { flex: none; padding: 2px 8px; border-radius: 0; font-size: 12px; font-weight: 700; background: var(--neutral-100); color: var(--neutral-600); }
.call-badge[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); }
.call-badge[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); }
.call-badge[data-tone="active"] { background: var(--indigo-50); color: var(--indigo-700); }
/* Live "advisor is calling now" row — indigo icon with a pulsing ring + blinking badge. */
.call-ico[data-tone="active"] { background: var(--indigo-50); color: var(--indigo-600); position: relative; }
.call-pulse { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--indigo-500); animation: call-pulse 1.5s ease-out infinite; }
@keyframes call-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.55); opacity: 0; } }
.call-badge-live { animation: call-blink 1.3s ease-in-out infinite; }
@keyframes call-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* Terminal unfinished step — "Awaiting customer approval". Hollow dashed marker + a "pending"
   badge with breathing dots so it reads as the one open step, not a completed attempt. */
.call-ico-pending { background: transparent; border: 1.5px dashed var(--warning-strong); color: var(--warning-strong); }
.call-row.is-pending .call-label { color: var(--warning-strong); }
.call-badge-pending { display: inline-flex; align-items: center; gap: 5px; background: var(--warning-bg); color: var(--warning-strong); }
.pending-dots { display: inline-flex; gap: 3px; }
.pending-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: pending-dot 1.4s ease-in-out infinite; }
.pending-dots i:nth-child(2) { animation-delay: 0.2s; }
.pending-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pending-dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .call-pulse, .call-badge-live { animation: none; } .call-pulse { opacity: 0.5; } .pending-dots i { animation: none; opacity: 0.6; } }
/* Part tracker — the parts-side equivalent of the contact log: a delivery-app style stepper
   for the awaited part. Done legs are filled + checked, the current leg pulses, remaining legs
   sit hollow so the manager sees what's still between them and the part being on the car. */
/* Part header: a part-name title, then a spec strip (brand / part-no / supplier) spread across the
   full width so it doesn't pool on the left. No thumbnail (the head's package icon marks it). */
.pt-item { margin: 4px 0 16px; min-width: 0; }
.pt-item-name { display: block; font-size: 15px; font-weight: 700; color: var(--neutral-900); letter-spacing: -0.01em; margin-bottom: 12px; }
.pt-spec { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.pt-spec-cell dt { font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-500); }
.pt-spec-cell dd { margin: 3px 0 0; font-size: 13px; font-weight: 600; color: var(--neutral-800); }
/* Head progress: a small bar + fraction — clearer than a bare "2/5". */
.pt-progress { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.pt-progress-track { width: 44px; height: 5px; background: var(--neutral-150); overflow: hidden; }
.pt-progress-track i { display: block; height: 100%; background: var(--neutral-400); }
.pt-progress b { font-size: 12px; font-weight: 600; color: var(--neutral-500); }
/* On the expanded page the tracker sits among .dmx-block cards — match their box + head so its
   padding is consistent (the base .attempt-log is tighter, for the drawer/overlay surfaces). */
.dm-tabpanel .part-track { margin: 0; padding: 20px 22px; background: var(--neutral-0); border-color: var(--neutral-200); }
.dm-tabpanel .part-track .attempt-log-head { margin-bottom: 12px; font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.pt-list { list-style: none; margin: 0; padding: 0; }
.pt-row { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; }
/* Connector from this node's centre down to the next node. Solid up to the current leg,
   dashed onward to signal the not-yet-happened steps. */
.pt-row::before { content: ""; position: absolute; left: 9px; top: 15px; height: 100%; width: 2px; background: var(--success-fg); }
.pt-row[data-state="active"]::before,
.pt-row[data-state="upcoming"]::before { background: none; border-left: 2px dashed var(--neutral-250, var(--neutral-300)); }
.pt-row:last-child::before { display: none; }
.pt-node { position: relative; z-index: 1; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--neutral-25); }
.pt-node svg.lucide { width: 12px; height: 12px; }
.pt-row[data-state="done"] .pt-node { background: var(--success-fg); color: #fff; }
.pt-row[data-state="active"] .pt-node { background: var(--indigo-50); color: var(--indigo-600); }
.pt-row[data-state="upcoming"] .pt-node { background: var(--neutral-0); border: 1.5px dashed var(--neutral-300); }
.pt-pulse { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--indigo-500); animation: call-pulse 1.6s ease-out infinite; }
.pt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* Step label/time/note match the sibling .dmx-log rows (14px/600 label, 12px mono time, 12.5px note)
   so the tracker's type reads consistent with the cards above and below it. */
.pt-label { font-size: 14px; font-weight: 600; color: var(--neutral-800); line-height: 1.3; }
.pt-time { flex: none; font-size: 12px; color: var(--neutral-500); }
.pt-row[data-state="upcoming"] .pt-label { color: var(--neutral-500); }
.pt-row[data-state="active"] .pt-label { color: var(--indigo-700); font-weight: 700; }
.pt-note { font-size: 12.5px; color: var(--warning-strong); }
@media (prefers-reduced-motion: reduce) { .pt-pulse { animation: none; opacity: 0.5; } }
/* Jobs — a plain always-visible list at the foot of the decision column (it scrolls with
   that column, so it can't crop the evidence card). Borderless to avoid a card pile-up. */
.dm-jobs-inline { padding-top: 12px; border-top: 1px solid var(--neutral-150); }
.dm-evidence-card { padding: 13px 14px; border-radius: 0; border: 1px solid var(--neutral-200); background: var(--neutral-0); }
.dm-photo { width: 100%; height: 136px; margin: 0 0 10px; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.dm-photo.is-empty { background: var(--neutral-50); border: 1px dashed var(--neutral-200); color: var(--neutral-400); }
.dm-photo.is-empty svg.lucide { width: 26px; height: 26px; }
.dm-photo.is-empty figcaption { font-size: 12px; font-weight: 600; color: var(--neutral-500); }
.dm-photo.has-photo { border: 1px solid var(--neutral-200); }
.dm-photo.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-work { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--neutral-900); }
.dm-evidence-who { margin-top: 8px; }
/* In the tinted rail, the timeline sits directly on the surface (no nested box). */
.dm-rail .attempt-log { background: transparent; border: 0; padding: 0; margin-top: 2px; }
.dm-facts { padding: 2px; }
.dm-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; }
.dm-facts-grid > div { display: flex; flex-direction: column; gap: 3px; }
.dm-facts-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dm-facts-grid span { font-size: 12px; font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.04em; }
.dm-facts-grid strong { font-size: 15px; font-weight: 700; color: var(--neutral-900); }
.dm-facts-grid strong[data-tone="critical"] { color: var(--critical-strong); }
.dm-facts-grid strong[data-tone="warning"] { color: var(--warning-strong); }
.dm-facts-grid strong[data-tone="success"] { color: var(--success-strong); }
.dm-jobs { border: 1px solid var(--neutral-150); border-radius: 0; padding: 12px 14px; }
.dm-jobs-list { list-style: none; margin: 0; padding: 0; }
/* Jobs as connected steps: circular check nodes joined by a vertical line. */
/* Per-row connector (center-to-center), nodes are opaque + ringed so they cut it cleanly. */
.dm-step { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.dm-step::before { content: ""; position: absolute; left: 8px; top: 50%; height: 100%; width: 2px; background: var(--neutral-200); }
.dm-step:last-child::before { display: none; }
.dm-step-node { position: relative; z-index: 1; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-0); border: 1.5px solid var(--neutral-300); color: var(--neutral-400); box-shadow: 0 0 0 3px var(--neutral-0); }
.dm-step-node svg.lucide { width: 11px; height: 11px; }
/* Completed step: soft green fill (green-50) + green-600 stroke & check — lighter than a solid fill. */
.dm-step[data-status="done"] .dm-step-node { background: var(--success-bg); border-color: var(--success-fg); color: var(--success-fg); }
.dm-step[data-status="active"] .dm-step-node { border-color: var(--orient-500); color: var(--orient-600); }
.dm-step[data-status="blocked"] .dm-step-node, .dm-step[data-status="over"] .dm-step-node { border-color: var(--critical-strong); color: var(--critical-strong); }
.dm-step[data-status="resuming"] .dm-step-node { background: var(--success-bg); border-color: var(--success-fg); color: var(--success-fg); }
.dm-step[data-status="resuming"] .dm-step-name { color: var(--success-strong); font-weight: 650; }
.dm-step[data-status="resuming"] .dm-step-time { color: var(--success-strong); }
.dm-step-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--neutral-800); }
.dm-step[data-status="done"] .dm-step-name { color: var(--neutral-500); }
/* Upcoming (not-yet-started) steps — e.g. Wash, Final QC queued behind the blocked job. */
.dm-step[data-status="pending"] .dm-step-name { color: var(--neutral-500); }
.dm-step[data-status="pending"] .dm-step-time { color: var(--neutral-500); }
.dm-step-time { flex: none; font-size: 12px; font-weight: 600; color: var(--neutral-500); }

/* Ping acknowledgment banner — sits above the still-visible detail. */
.dm-ack-banner { display: flex; gap: 11px; padding: 13px 14px; border-radius: 0; background: var(--orient-50); border: 1px solid var(--orient-200); }
.dm-ack-badge { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; background: var(--orient-100); color: var(--orient-600); }
.dm-ack-badge svg.lucide { width: 18px; height: 18px; }
.dm-ack-copy { min-width: 0; }
.dm-ack-title { margin: 1px 0 3px; font-size: 15px; font-weight: 750; color: var(--neutral-900); }
.dm-ack-sub { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700); }
.dm-ack-sub b { color: var(--neutral-900); font-weight: 700; }
/* Approved variant — the yes landed live, banner goes green. */
.dm-ack-banner.is-approved { background: var(--success-bg); border-color: var(--success-border, var(--success-200, #a7d8b8)); }
.dm-ack-badge[data-tone="success"] { background: var(--success-100, #d6efdd); color: var(--success-strong); }
/* Resume-work button after a live approval — solid green so the resolved action reads positive. */
.btn-approve { background: linear-gradient(180deg, #1f8a52, #166b3f); color: var(--neutral-0); box-shadow: 0 1px 2px rgba(14, 60, 36, 0.25); }
.btn-approve:hover { background: linear-gradient(180deg, #1c7d4b, #145f38); }

/* ---- Morning brief: full-bleed shift-start band atop the work list, amber action footer, and
   the grouped "what to work on next" modal. Not a floating card — hairline seams only. -------- */
/* Brand gradient: a soft teal wash at the top fading to nothing, so the brief reads as one
   distinct region without feeling harsh. */
.morning-brief { border-bottom: 1px solid var(--neutral-200); background: linear-gradient(180deg, rgba(19, 131, 182, 0.09) 0%, rgba(19, 131, 182, 0) 72%); }
.brief-body { padding: 16px var(--gutter, 20px) 17px; }
.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brief-title { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 17px; font-weight: 750; color: var(--neutral-900); }
.brief-title svg.lucide { width: 20px; height: 20px; color: var(--orient-600); }
.brief-date { font-weight: 550; color: var(--neutral-500); font-size: 13px; }
.brief-head-actions { display: inline-flex; align-items: center; gap: 6px; flex: none; }
/* White pill buttons with a subtle border; hover lifts a small shadow. */
.brief-icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--neutral-200); border-radius: 0; background: var(--neutral-0); color: var(--neutral-500); cursor: pointer; transition: box-shadow .15s ease, color .15s ease, border-color .15s ease; }
.brief-icon-btn:hover { color: var(--neutral-800); border-color: var(--neutral-300); box-shadow: 0 2px 7px -2px rgba(15, 23, 32, .18); }
.brief-icon-btn svg.lucide { width: 16px; height: 16px; }
/* Ghost brand link (not a boxed button) — underlined, orient, weight 600. */
.brief-text-btn { display: inline-flex; align-items: center; gap: 1px; height: 30px; padding: 0 2px; border: 0; background: none; color: var(--orient-600); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .15s ease; }
.brief-text-btn:hover { color: var(--orient-700); }
.brief-text-btn svg.lucide { width: 15px; height: 15px; color: currentColor; }
/* One-line human summary — this is what makes it read as a briefing, not just numbers. */
.brief-summary { margin: 9px 0 0; font-size: 14px; line-height: 1.5; color: var(--neutral-700); max-width: 64ch; }
/* Big-number stats spread across the width, no dividers (not our design language). */
.brief-segments { display: flex; gap: 10px; margin-top: 16px; }
.brief-seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.brief-seg-value { font-size: 22px; font-weight: 800; color: var(--neutral-900); line-height: 1.05; letter-spacing: -.015em; }
.brief-seg-label { font-size: 13px; font-weight: 600; color: var(--neutral-500); }
/* Collapsed strip — the minimized brief left in its place. Label on the left; the actions
   (Reopen · Mark as read) grouped together on the right. */
.morning-strip { display: flex; align-items: center; gap: 10px; padding: 9px var(--gutter, 20px) 10px; border-bottom: 1px solid var(--neutral-200); background: linear-gradient(180deg, rgba(19, 131, 182, 0.06), rgba(19, 131, 182, 0)); }
.morning-strip-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--neutral-800); }
.morning-strip-label svg.lucide { width: 16px; height: 16px; color: var(--orient-600); }
.morning-strip-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.morning-strip-reopen { border: 0; background: none; padding: 4px 4px; font: inherit; font-size: 13px; font-weight: 600; color: var(--orient-600); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .15s ease; }
.morning-strip-reopen:hover { color: var(--orient-700); }
.morning-strip-read { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--neutral-200); background: var(--neutral-0); border-radius: 0; padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 650; color: var(--neutral-700); cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease, color .15s ease; }
.morning-strip-read svg.lucide { width: 14px; height: 14px; color: var(--neutral-400); }
.morning-strip-read:hover { color: var(--neutral-900); border-color: var(--neutral-300); box-shadow: 0 2px 6px -2px rgba(15, 23, 32, .16); }
/* Action footer — full-bleed band, hairline seam above, the whole band clickable. Tone-colored
   (warning by default; orient for informational CTAs like the evening report). Can lead with an
   avatar (the on-leave mechanic) instead of an icon. */
.brief-foot { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px var(--gutter, 20px); border: 0; border-top: 1px solid #f6dca2; background: var(--warning-bg); font: inherit; text-align: left; }
.brief-foot svg.lucide { flex: none; width: 17px; height: 17px; color: var(--warning-strong); }
.brief-foot .avatar { flex: none; }
.brief-foot-text { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--warning-strong); line-height: 1.4; }
.brief-foot-name { font-weight: 800; }
.brief-foot-cta { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 750; color: var(--warning-strong); white-space: nowrap; }
.brief-foot-cta svg.lucide { width: 14px; height: 14px; color: var(--warning-strong); }
.brief-foot.is-action { cursor: pointer; transition: background .15s ease; }
.brief-foot.is-action:hover { background: #fbe6b0; }
.brief-foot.is-action:hover .brief-foot-cta { text-decoration: underline; }
.brief-foot[data-tone="orient"] { border-top-color: var(--orient-200); background: var(--orient-50); }
.brief-foot[data-tone="orient"] svg.lucide, .brief-foot[data-tone="orient"] .brief-foot-text, .brief-foot[data-tone="orient"] .brief-foot-cta, .brief-foot[data-tone="orient"] .brief-foot-cta svg.lucide { color: var(--orient-700); }
.brief-foot[data-tone="orient"].is-action:hover { background: var(--orient-100); }
/* Modal — an editorial morning briefing: an eyebrow, one lead takeaway, the action, then a
   single held priority block + quiet supporting lists. One focal point, generous rhythm. */
.brief-modal { position: fixed; inset: 0; z-index: 72; display: flex; align-items: center; justify-content: center; padding: 32px; }
.brief-modal[hidden] { display: none; }
.brief-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 32, .44); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: brief-fade .18s ease-out; }
.brief-dialog { position: relative; width: min(580px, 100%); max-height: calc(100vh - 64px); overflow: auto; background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: 0; box-shadow: 0 32px 72px -26px rgba(15, 23, 32, .45); animation: brief-rise .24s cubic-bezier(.22,1,.36,1); }
/* Evening report: wider shell + a 2x2 BENTO of cards (blue labels, a featured donut tile). */
.brief-dialog.is-wide { width: min(940px, 100%); }
.brief-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "numbers  numbers"
    "lost     review"
    "carry    carry"
    "tomorrow tomorrow";
  gap: 14px;
  align-items: stretch;
}
.brief-bento-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border: 1px solid var(--neutral-200);
  border-radius: 0;
  background: var(--neutral-0);
  box-shadow: 0 1px 2px rgba(15, 23, 32, .04);
}
.brief-bento-card > .brief-group { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; margin: 0; }
.brief-bento-card .brief-group { animation: none; }
/* Blue section labels across the bento (the group heads). */
/* Every card's label gets a full-bleed hairline under it (touches both card edges), with uniform
   label→rule and rule→content spacing. */
.brief-bento-card .brief-group-head { display: flex; align-items: center; color: var(--orient-600); margin: 0 -18px 13px; padding: 0 18px 10px; border-bottom: 1px solid var(--neutral-150); }
.brief-bento-card .brief-stat-ico { display: none; }

/* Top KPI strip: a slim full-width row of 4 metrics separated by spacing (no dividers). The extra
   selector depth beats the base .brief-stat nth-child border rules so no stray lines leak in. */
.brief-bento-card--numbers { padding: 15px 18px; }
.brief-bento-card--numbers .brief-stats-card { border: 0; border-radius: 0; overflow: visible; grid-template-columns: repeat(4, 1fr); gap: 0 20px; }
.brief-bento-card--numbers .brief-stats-card .brief-stat { padding: 0; border: 0; }
.brief-bento-card--numbers .brief-stat-value { font-size: 23px; }

/* Loss tile: vertically centre the total + bars so it balances the taller review tile beside it. */
.brief-bento-card--lost .brief-loss { flex: 1 1 auto; justify-content: center; }

/* Carry-over: the label separator comes from the shared head rule above; the two cars sit in a
   full-bleed grid split by a vertical rule, so they read as two uniform, parallel items. */
.brief-bento-card--carry { padding-bottom: 0; }
/* Head margin collapses to 0 so the card-box (and the vertical rule) start right at the label rule,
   so the vertical divider touches the horizontal separator with no gap. */
.brief-bento-card--carry .brief-group-head { margin-bottom: 0; }
.brief-bento-card--carry .brief-card-box {
  border: 0; border-radius: 0;
  margin: 0 -18px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
}
.brief-bento-card--carry .brief-card-box .brief-car { padding: 16px 18px; border: 0; }
.brief-bento-card--carry .brief-card-box .brief-car:nth-child(2) { border-left: 1px solid var(--neutral-150); }
.brief-car-more { margin: 0 -18px; padding: 13px 18px 14px; border-top: 1px solid var(--neutral-150); display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--neutral-500); }
.brief-car-more svg.lucide { width: 15px; height: 15px; color: var(--neutral-400); }

/* Wide modal: the lead sentence spans the full width instead of wrapping early. */
.brief-dialog.is-wide .brief-lead { max-width: none; }

@media (max-width: 760px) {
  .brief-bento { grid-template-columns: 1fr; grid-template-areas: "numbers" "lost" "review" "carry" "tomorrow"; }
  .brief-bento-card--numbers .brief-stats-card { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .brief-bento-card--carry .brief-card-box { grid-template-columns: 1fr; }
  .brief-bento-card--carry .brief-card-box .brief-car:nth-child(2) { border-left: 0; border-top: 1px solid var(--neutral-150); }
}
/* Header = a real title (icon + name + date) with the close on the same row; the lead sits below. */
.brief-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 28px 0; }
.brief-dialog-close { flex: none; }
.brief-modal-title { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 750; color: var(--neutral-900); }
.brief-modal-title svg.lucide { width: 20px; height: 20px; color: var(--orient-600); }
.brief-modal-date { font-size: 13px; font-weight: 550; color: var(--neutral-500); }
.brief-lead { margin: 14px 28px 0; font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -.006em; color: var(--neutral-900); max-width: 46ch; text-wrap: balance; }
/* Contained condition band inside the modal (avatar + who's out), CTA-less. */
.brief-foot.is-card { width: auto; margin: 15px 22px 0; padding: 11px 13px; border: 1px solid var(--warning-border); border-radius: 0; }
.brief-dialog-body { padding: 20px 28px 22px; display: flex; flex-direction: column; gap: 18px; }
/* Footer sticks to the bottom of the scrolling dialog; its two actions sit together, bottom-right. */
.brief-dialog-foot { position: sticky; bottom: 0; z-index: 2; padding: 16px 28px; border-top: 1px solid var(--neutral-150, var(--neutral-200)); background: var(--neutral-0); display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.brief-markread-btn { display: inline-flex; align-items: center; gap: 6px; }
.brief-markread-btn svg.lucide { width: 15px; height: 15px; }
.brief-cta-btn { display: inline-flex; align-items: center; gap: 5px; }
.brief-cta-btn svg.lucide { width: 15px; height: 15px; }
.brief-dialog:focus { outline: none; }
/* Visible keyboard focus on every brief control (the buttons otherwise inherit outline:none). */
.brief-icon-btn:focus-visible, .brief-text-btn:focus-visible, .morning-strip-reopen:focus-visible,
.morning-strip-read:focus-visible, .brief-markread-btn:focus-visible, .brief-cta-btn:focus-visible,
.brief-foot.is-action:focus-visible { outline: 2px solid var(--orient-500); outline-offset: 2px; border-radius: 0; }
.brief-group { animation: brief-sec-in .32s both cubic-bezier(.22,1,.36,1); animation-delay: calc(var(--gi, 0) * 65ms + 50ms); }
.brief-group:not(.is-full) { align-self: start; }
.brief-group.is-full { grid-column: 1 / -1; }
.brief-group-head { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 13px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-400); }
.brief-group-head svg.lucide { width: 14px; height: 14px; }
.brief-group-list { list-style: none; margin: 0; padding: 0; }
/* Simple lead + meta item (supporting lists). */
.brief-item { display: grid; gap: 1px; padding: 9px 0; }
.brief-item:first-child { padding-top: 2px; }
.brief-item + .brief-item { border-top: 1px solid var(--neutral-150); }
.brief-item-lead { font-size: 14px; font-weight: 650; color: var(--neutral-900); }
.brief-item-meta { font-size: 13px; line-height: 1.45; color: var(--neutral-500); }
/* Today's pickups — a mini hour-by-hour bar chart of promised pickups (the day's shape). */
/* Dashboard-style mini bar chart: headline total, continuous baseline, peak called out, time axis. */
.brief-pk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brief-pk-head .brief-group-head { margin: 0; }
.brief-pk-total { flex: none; display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--neutral-500); }
.brief-pk-total b { font-size: 16px; font-weight: 750; color: var(--neutral-900); }
.brief-pk-note { margin: 6px 0 16px; font-size: 13px; line-height: 1.5; color: var(--neutral-600); max-width: 52ch; }
.brief-pk { display: flex; align-items: flex-end; gap: 12px; height: 72px; border-bottom: 1px solid var(--neutral-200); }
.brief-pk-col { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.brief-pk-bar { width: 100%; max-width: 30px; min-height: 4px; border-radius: 0; background: var(--orient-200); }
.brief-pk-col.is-peak .brief-pk-bar { background: var(--orient-500); }
.brief-pk-cap { position: absolute; top: -17px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--neutral-400); opacity: 0; }
.brief-pk-col.is-peak .brief-pk-cap { opacity: 1; color: var(--orient-700); }
.brief-pk-axis { display: flex; gap: 12px; margin-top: 8px; }
.brief-pk-axis span { flex: 1 1 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--neutral-400); }
.brief-pk-axis span.is-peak { color: var(--orient-700); font-weight: 700; }
/* Car item — plate + a highlighted promise chip, then the specific pending job (and part status). */
.brief-car { padding: 14px 0; }
.brief-car + .brief-car { border-top: 1px solid var(--neutral-150, var(--neutral-200)); }
.brief-car-top { display: flex; align-items: center; justify-content: flex-start; gap: 9px; }
.brief-car-plate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--neutral-900); }
.brief-car-plate-no { font-weight: 700; letter-spacing: -.01em; }
.brief-car-veh { font-weight: 500; color: var(--neutral-500); }
.brief-promise { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 0; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--orient-50); color: var(--orient-700); }
.brief-promise svg.lucide { width: 12px; height: 12px; }
.brief-promise[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); }
.brief-promise[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-strong); }
.brief-car-job { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--neutral-800); }
.brief-car-joblabel { display: inline-block; margin-right: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--neutral-400); }
.brief-car-part { margin: 9px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--neutral-500); }
.brief-car-part svg.lucide { width: 13px; height: 13px; color: var(--neutral-400); }
/* Car rows sit in a bordered card. */
.brief-card-box { list-style: none; margin: 0; padding: 4px 16px; border: 1px solid var(--neutral-200); border-radius: 0; }
/* Stat card — an icon + big number + label + sub per cell, two-up (wraps for 4). */
/* Stat quadrant: one bordered card, cells split by hairlines (a clean 2×2 grid, evenly aligned). */
.brief-stats-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--neutral-200); border-radius: 0; overflow: hidden; }
/* Metric tile: a clean vertical stack (Mobbin — Vocabulary / Flighty). The icon shares the
   number's top row (optically centred on the hero value, not floating against the label), and
   the label + caption run full width below, so they never truncate against a leading icon. */
.brief-stat { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brief-stat:nth-child(2n) { border-left: 1px solid var(--neutral-150, var(--neutral-200)); }
.brief-stat:nth-child(n+3) { border-top: 1px solid var(--neutral-150, var(--neutral-200)); }
.brief-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.brief-stat-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 0; background: var(--orient-50); color: var(--orient-600); }
.brief-stat-ico svg.lucide { width: 17px; height: 17px; }
.brief-stat-value { font-size: 22px; font-weight: 800; color: var(--neutral-900); line-height: 1; letter-spacing: -.02em; }
.brief-stat-label { font-size: 13px; font-weight: 650; color: var(--neutral-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief-stat-sub { font-size: 12px; color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Day-in-review beats (evening): a win + a watch-item, each with a toned leading glyph. */
.brief-notes { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.brief-note { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--neutral-700); }
.brief-note svg.lucide { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.brief-note[data-tone="good"] svg.lucide { color: var(--success-fg); }
.brief-note[data-tone="watch"] svg.lucide { color: var(--warning-fg); }
/* Evening "Day in review" — Win / Setback / Cause as icon + bold label + a line of detail. The
   colour lives only in a small tinted glyph, so the block stays calm and harmonious. */
.brief-review { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.brief-review-row { display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: start; padding: 13px 0; }
.brief-review-row:first-child { padding-top: 0; }
/* Full-bleed hairline between each Win / Setback / Cause row (touches both card edges). */
.brief-review-row:not(:first-child) { margin: 0 -18px; padding: 13px 18px; border-top: 1px solid var(--neutral-150); }
/* Icon box and the title share a 24px line so the title sits vertically centred on the icon. */
.brief-review-ico { flex: none; width: 24px; height: 24px; border-radius: 0; display: grid; place-items: center; }
.brief-review-ico svg.lucide { width: 14px; height: 14px; }
.brief-review-ico[data-tone="good"] { background: var(--success-bg); color: var(--success-strong); }
.brief-review-ico[data-tone="watch"] { background: var(--warning-bg); color: var(--warning-strong); }
.brief-review-ico[data-tone="neutral"] { background: var(--neutral-100); color: var(--neutral-500); }
.brief-review-body { min-width: 0; }
.brief-review-k { display: block; font-size: 13px; font-weight: 750; line-height: 24px; color: var(--neutral-900); margin-bottom: 1px; }
.brief-review-v { display: block; font-size: 13px; line-height: 1.5; color: var(--neutral-600); }
.brief-review-hl { font-weight: 750; color: var(--neutral-900); }
/* Evening "Where time was lost" — total headline + ranked horizontal bars (durations only). */
.brief-loss { display: flex; flex-direction: column; gap: 13px; }
.brief-loss-total { display: flex; align-items: baseline; gap: 8px; }
.brief-loss-total b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--neutral-900); }
.brief-loss-total span { font-size: 12px; font-weight: 600; color: var(--neutral-500); }
.lossbar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.lossbar { display: grid; grid-template-columns: 128px 1fr 40px; align-items: center; gap: 12px; }
.lossbar-label { font-size: 13px; color: var(--neutral-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lossbar-track { height: 8px; border-radius: 0; background: var(--neutral-150); overflow: hidden; }
.lossbar-fill { display: block; height: 100%; border-radius: 0; background: var(--orient-500); transition: width .45s cubic-bezier(.22,1,.36,1); }
.lossbar-val { text-align: right; font-size: 13px; font-weight: 700; color: var(--neutral-900); }
@media (prefers-reduced-motion: reduce) { .lossbar-fill { transition: none; } }
/* Full-width "Tomorrow" takeaway band (a brand strip, not a card). */
.brief-bento-band { grid-column: 1 / -1; }
.brief-takeaway { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--orient-200); border-radius: 0; background: linear-gradient(160deg, var(--orient-50), rgba(19, 131, 182, .015) 72%); }
.brief-takeaway-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 0; background: var(--orient-600); color: var(--neutral-0); }
.brief-takeaway-ico svg.lucide { width: 17px; height: 17px; }
.brief-takeaway-txt { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700); }
.brief-takeaway-txt b { color: var(--orient-700); font-weight: 750; }
/* Carry-over next action (evening handoff), with an owner prefix. */
.brief-car-next { margin: 8px 0 0; display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 650; color: var(--orient-700); line-height: 1.4; }
.brief-car-next svg.lucide { flex: none; width: 13px; height: 13px; align-self: center; }
.brief-car-owner { font-weight: 750; color: var(--neutral-800); }
.brief-car-dot { color: var(--neutral-400); font-weight: 700; }
/* Closing "first move" beat (morning): a soft brand strip so the brief ends on a clear next action. */
.brief-kickoff { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 0; border: 1px solid var(--orient-200); background: linear-gradient(180deg, var(--orient-50), rgba(19, 131, 182, 0.02)); }
.brief-kickoff-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 0; background: var(--orient-600); color: var(--neutral-0); }
.brief-kickoff-ico svg.lucide { width: 18px; height: 18px; }
.brief-kickoff-txt b { display: block; font-size: 12px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--orient-700); }
.brief-kickoff-txt p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--neutral-800); }
@keyframes brief-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes brief-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes brief-sec-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .brief-backdrop, .brief-dialog, .brief-group { animation: none; } }

/* In-button loading spinner (Ping advisor). */
.btn-spinner { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: dm-spin 0.7s linear infinite; }
.btn.is-loading { opacity: 0.85; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration: 1.6s; } }

/* Staff hovercard — who's doing what right now (mechanic/advisor). */
.person-card { position: fixed; z-index: 90; width: 260px; padding: 13px 14px; border-radius: 0; background: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: 0 14px 34px -12px rgba(15, 23, 32, 0.35); font-family: inherit; animation: dm-fade 0.12s ease-out; }
.person-card[hidden] { display: none; }
.pcard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.pcard-id { flex: 1; min-width: 0; }
.pcard-name { margin: 0; font-size: 14px; font-weight: 700; color: var(--neutral-900); }
.pcard-role { margin: 1px 0 0; font-size: 12px; color: var(--neutral-500); }
.pcard-state { flex: none; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 0; background: var(--neutral-100); color: var(--neutral-600); }
.pcard-state[data-state="free"] { background: var(--success-bg); color: var(--success-strong); }
.pcard-state[data-state="busy"] { background: var(--warning-bg); color: var(--warning-strong); }
.pcard-state[data-state="soon"] { background: var(--orient-50); color: var(--orient-700); }
.pcard-status { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--neutral-700); }
.pcard-load { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pcard-load-label { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--neutral-500); }
.pcard-bar { flex: 1; height: 6px; border-radius: 0; background: var(--neutral-150); overflow: hidden; }
.pcard-bar i { display: block; height: 100%; border-radius: 0; background: var(--orient-500); }
.pcard-bar i[data-full="true"] { background: var(--warning-strong); }
.pcard-load b { flex: none; font-size: 12px; color: var(--neutral-800); }
.pcard-today { margin: 0; font-size: 12px; color: var(--neutral-500); }
@media (max-width: 720px) {
  .detail-modal { padding: 14px; }
  .dm-body { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Move-to-holding confirm + success + ping-ack (in the LEFT modal column) ── */
/* Holding confirm — a clean title + lead + plain consequences list (Mobbin pattern; no tinted
   boxes, no hold/stays pills). */
.dm-hold { display: block; }
.dm-hold-title { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.3; color: var(--neutral-900); padding-right: 40px; }
.dm-hold-lead { margin: 9px 0 0; font-size: 14px; line-height: 1.5; color: var(--neutral-600); }
.dm-hold-list { list-style: none; margin: 20px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.dm-hold-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--neutral-800); }
.dm-hold-list li svg.lucide { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--neutral-400); }
/* Holding SUCCESS — a plain centred success screen (was four differently-shaped tinted boxes). */
.dm-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 4px 2px; }
.dm-done-check { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success-fg); margin-bottom: 16px; }
.dm-done-check svg.lucide { width: 26px; height: 26px; }
.dm-done-title { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -0.01em; color: var(--neutral-900); }
.dm-done-lead { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--neutral-600); max-width: 42ch; }
.dm-done-list { list-style: none; margin: 22px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 13px; text-align: left; width: 100%; max-width: 420px; }
.dm-done-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.5; color: var(--neutral-800); }
.dm-done-list li svg.lucide { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--neutral-400); }
.dm-confirm { display: block; }
.dm-confirm-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.dm-confirm-badge { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; background: var(--warning-bg); color: var(--warning-strong); }
.dm-confirm-badge[data-tone="ok"] { background: var(--orient-50); color: var(--orient-600); }
.dm-confirm-badge svg.lucide { width: 21px; height: 21px; }
.dm-confirm-title { margin: 1px 0 4px; font-size: 18px; font-weight: 750; line-height: 1.3; color: var(--neutral-900); }
.dm-confirm-sub { margin: 0; font-size: 14px; color: var(--neutral-600); }
/* Pickup-promise transition on the holding confirm step: the last promise → "On hold",
   because an unapproved car has no promisable new time yet. */
.dm-holdpromise { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; padding: 12px 14px; border-radius: 0; background: var(--neutral-25); border: 1px solid var(--neutral-150); }
.dm-holdpromise-cap { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral-500); }
.dm-holdpromise-cap svg.lucide { width: 12px; height: 12px; }
.dm-holdpromise-flow { display: flex; align-items: center; gap: 9px; }
.dm-holdpromise-was { font-size: 18px; font-weight: 750; color: var(--neutral-400); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dm-holdpromise-flow svg.lucide { width: 15px; height: 15px; color: var(--neutral-400); }
.dm-holdpromise-new { display: inline-flex; align-items: center; font-size: 13px; font-weight: 750; color: var(--warning-strong); background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 0; padding: 3px 11px; }
.dm-holdpromise-hold { font-size: 18px; font-weight: 750; color: var(--neutral-900); }
.dm-holdpromise-keep { display: inline-flex; align-items: center; margin-left: 10px; font-size: 13px; font-weight: 700; color: var(--success-strong); background: var(--success-bg); border: 1px solid var(--success-border); padding: 3px 11px; }
.dm-holdpromise-note { font-size: 13px; line-height: 1.5; color: var(--neutral-600); }
/* The plain-language explainer of what "approval holding" is — calm blue info box. */
/* Info box: a scannable heading + subtext, not a wall of prose. Key terms bolded. */
.dm-explain { display: flex; gap: 10px; padding: 12px 14px; border-radius: 0; background: var(--orient-50); border: 1px solid var(--orient-200); margin-bottom: 16px; }
.dm-explain svg.lucide { flex: none; width: 16px; height: 16px; color: var(--orient-600); margin-top: 1px; }
.dm-explain-body { min-width: 0; }
.dm-explain-title { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: var(--orient-700); }
.dm-explain-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700); }
.dm-explain-text b { color: var(--neutral-900); font-weight: 700; }
.dm-impact { margin-bottom: 14px; }
.dm-impact-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dm-impact-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.4; color: var(--neutral-700); }
.dm-impact-list li b { color: var(--neutral-900); font-weight: 700; }
.dm-impact-list svg.lucide { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.dm-impact-list li[data-tone="success"] svg.lucide { color: var(--success-strong); }
.dm-impact-list li[data-tone="neutral"] svg.lucide { color: var(--neutral-400); }
.dm-cap { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 0; background: var(--success-bg); border: 1px solid var(--success-border); font-size: 13px; color: var(--neutral-800); }
.dm-cap b { color: var(--neutral-900); font-weight: 700; }
.dm-cap svg.lucide { flex: none; width: 17px; height: 17px; color: var(--success-strong); }
/* Success / payoff step — left-aligned so it sits naturally in the decision column. */
.dm-success { display: block; }
/* Horizontal header — the check badge anchors the title beside it (not orphaned above-left). */
/* Green container wraps the outcome headline (badge + plate + summary). */
.dm-success-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 15px; padding: 14px 15px; border-radius: 0; background: var(--success-bg); border: 1px solid var(--success-border); }
.dm-success-badge { flex: none; width: 40px; height: 40px; margin: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--success-fg); border: 1px solid var(--success-fg); color: #fff; }
.dm-success-badge svg.lucide { width: 22px; height: 22px; }
.dm-success-head .dm-success-lead { color: var(--neutral-700); }
/* Prominent re-promised pickup on the approval success screen. */
.dm-repromise { margin: 0 0 14px; padding: 12px 14px; border-radius: 0; background: var(--orient-100); border: 1px solid var(--orient-200); }
.dm-repromise-row { display: flex; align-items: baseline; gap: 10px; }
.dm-repromise-cap { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orient-700); }
.dm-repromise-cap svg.lucide { width: 13px; height: 13px; }
.dm-repromise-time { font-size: 24px; font-weight: 800; line-height: 1; color: var(--neutral-900); letter-spacing: -0.01em; }
.dm-repromise-was { font-size: 13px; font-weight: 600; color: var(--neutral-500); text-decoration: line-through; }
.dm-repromise-sub { margin: 8px 0 0; display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--neutral-700); }
.dm-repromise-sub svg.lucide { width: 14px; height: 14px; color: var(--orient-600); flex: none; margin-top: 1px; }
.dm-success-headcopy { min-width: 0; padding-top: 1px; }
.dm-success-title { margin: 0 0 5px; font-size: 18px; font-weight: 750; line-height: 1.3; color: var(--neutral-900); }
.dm-success-lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--neutral-600); }
.dm-success-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dm-success-list li { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 0; background: var(--neutral-25); border: 1px solid var(--neutral-150); font-size: 13px; line-height: 1.4; color: var(--neutral-700); }
.dm-success-list li b { color: var(--neutral-900); font-weight: 700; }
.dm-success-list svg.lucide { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--success-strong); }
/* Follow-up reminder note under the holding success (you'll be pinged to bring it back). */
.dm-success-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 11px 13px; border-radius: 0; background: var(--orient-50); border: 1px solid var(--orient-200); font-size: 13px; line-height: 1.45; color: var(--neutral-700); }
.dm-success-note b { color: var(--neutral-900); font-weight: 700; }
.dm-success-note svg.lucide { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--orient-600); }
/* De-boxed follow-ups: plain rows split by a hairline divider (not stacked boxes). */
.dm-success-points { margin-top: 4px; }
.dm-success-point { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 13px 2px; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700); border-top: 1px solid var(--neutral-150); }
.dm-success-point b { color: var(--neutral-900); font-weight: 700; }
.dm-success-point svg.lucide { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--neutral-400); }
.dm-success-point.is-ping svg.lucide { color: var(--orient-600); }
.dm-success-point.is-ping b { color: var(--orient-800); }
/* Flat variant (re-promise success modals): the ONLY box is the blue new-pickup accent — the green
   header and the confirmation rows are de-boxed (badge + text, divider-separated), per "too many boxes". */
.dm-success-flat .dm-success-head { margin-bottom: 16px; padding: 0; background: none; border: none; }
.dm-success-flat .dm-success-point svg.lucide { color: var(--success-strong); }
/* Quiet/tertiary footer button (e.g. Undo, Revise) — sits left, low-emphasis, no stroke.
   Scoped to the ghost+quiet combo so it doesn't strip the border off ordinary .btn-quiet
   secondaries (drawer alternatives, Clear/Cancel, etc.), which keep their outline. */
.btn-ghost.btn-quiet { margin-right: auto; background: none; border: 1px solid transparent; color: var(--neutral-500); min-width: 0 !important; }
.btn-ghost.btn-quiet:hover { color: var(--neutral-800); background: var(--neutral-50); }
/* Decision notification (Flow 2) — critical/red "needs a decision" chrome. Red (not amber) so
   it matches Revon's own language, where "blocked" is critical/red everywhere (work-list pill,
   bay map). Amber stays reserved for recoverable "at risk". Kept as a small accent on an
   otherwise-neutral card (badge + one line), the best-practice toast pattern, not a red flood. */
.snotif-badge.is-decision { display: inline-flex; align-items: center; gap: 4px; background: var(--critical-bg); color: var(--critical-strong); border-color: var(--critical-border); }
.snotif-badge.is-decision svg.lucide { width: 11px; height: 11px; }
.snotif-suggest[data-tone="decide"] { color: var(--critical-strong); }
.snotif-main.is-decision { border-left: none; }
/* Approved notification (Flow 2 happy path) — green "customer approved" chrome. */
.snotif-badge.is-approved { display: inline-flex; align-items: center; gap: 4px; background: var(--success-bg); color: var(--success-strong); border-color: var(--success-border); }
.snotif-badge.is-approved svg.lucide { width: 11px; height: 11px; }
.snotif-suggest[data-tone="ok"] { color: var(--success-strong); }
.snotif-main.is-approved { border-left: none; }

/* Smooth crossfade when the left decision column swaps between modes (only on a real step,
   not on timeline ticks — see renderDetailModal). */
.dm-swap-in { animation: dm-swap 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dm-swap { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dm-swap-in { animation: none; } }

/* Processing / "working…" state */
.dm-processing { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 0; }
.dm-spinner { width: 30px; height: 30px; margin-bottom: 12px; border: 3px solid var(--neutral-200); border-top-color: var(--orient-600); border-radius: 50%; animation: dm-spin 0.7s linear infinite; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dm-spinner { animation-duration: 1.6s; } }
.dm-processing-title { margin: 0 0 5px; font-size: 17px; font-weight: 750; color: var(--neutral-900); }
.dm-processing-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--neutral-600); }
.dm-foot-note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--neutral-500); }
.dm-dot-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--orient-600); animation: dm-pulse 1s ease-in-out infinite; }
@keyframes dm-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dm-dot-pulse { animation: none; } }

/* ── Radius-0 direction ──────────────────────────────────────────────────
   Sharp corners everywhere, INCLUDING the small status/indicator dots — they
   are square now (radius 0 from the base sweep). Only true circles stay round:
   avatars, count badge, and icon / step / check coins. */
.notif-badge,
.topbar-avatar,
.avatar-empty,
.assign-step b,
.ptl-node,
.assign-chip-check,
.reseq-outcome-icon,
.revise-slot-check,
.reseq2-status,
.brief-kickoff-ico,
.brief-stat-ico,
.brief-takeaway-ico,
.dm-ack-badge {
  border-radius: 999px;
}

/* Square status dots carry a hairline stroke a shade darker than their fill so
   the small square reads crisply on tinted pills. */
.sys-dot,
.wl-dot,
.avail-pill .avail-dot,
.staff-dot,
.car-log-dot,
.dm-crumb-dot {
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.16);
}

/* ── Two-font system (mentor: plate vs time felt inconsistent) ───────────
   Everything that was mono but ISN'T a plate → Manrope with tabular figures,
   so counts/times align without a second typeface. */
.mono,
.attention-count,
.urgency-donut b,
.wl-group-count,
.pl-group-count,
.queue-position,
.drawer-risk-chip strong,
.ddb-count,
.drawer-times strong,
.job-meta.is-time,
.issue-target,
.issue-wait,
.station-pressure strong {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

/* Number plates — ONE consistent face across every surface: Geist Mono,
   which reads like an actual plate. Placed after the reset so a plate that
   also carries .mono (e.g. .assign-cand-plate) still resolves to Geist. */
.entering-plate,
.assign-cand-plate,
.assign-car-plate b,
.reseq-plate,
.hold-plate b,
.overview-row-plate,
.tl-plate,
.pl-plate,
.queue-row-plate,
.ncenter-plate,
.snotif-plate,
.dm-plate,
.brief-car-plate-no,
.wf-card-top .plate,
.dc-top .plate,
.wl-car .plate,
.floor-car .plate,
.drawer-plate {
  font-family: var(--font-mono);
  /* Softer + lighter: 2 shades down from ink (neutral-900 → 700) and one weight step
     down (Geist Mono caps at 700 loaded, so 600 reads as the step below). */
  color: var(--neutral-700);
  font-weight: 600;
}

/* ── Batch refinements (2026-08-10) ─────────────────────────────────────── */

/* Notification bell: no box stroke around the icon (reads as a plain icon action).
   Covers the command topbar (#notif-button) and the detail crumb (.dm-crumb-notif). */
#notif-button,
.dm-crumb-notif { border-color: transparent; background: transparent; }
#notif-button:hover,
.dm-crumb-notif:hover { background: var(--neutral-100); }

/* Workflow pill indicator: square (not circular) with a hairline a shade darker
   than its fill, so it reads as a crisp status marker. */
.wf-pill i {
  width: 8px;
  height: 8px;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.24);
}

/* Bay map cards sit flat on the surface: white fill + neutral hairline, so they
   don't pull focus. The status label (and the utilisation meter) carry the colour. */
.baymap-cell[data-tone="blocked"],
.baymap-cell[data-tone="atrisk"],
.baymap-cell[data-tone="active"],
.baymap-cell[data-tone="empty"] {
  background: var(--neutral-0);
  border-color: var(--neutral-200);
}
.baymap-cell[data-tone="empty"] { border-style: dashed; }

/* ── Batch 2 (2026-08-10) ────────────────────────────────────────────────── */

/* C — needs-action rows already sit under a red section header; the per-row
   ⚠/clock glyph is redundant. Drop it, keep the timing text (colour signals severity). */
.wl-risk-ico { display: none; }

/* Add-bay: real primary-button treatment (brand gradient + shadow, darker hover). */
.add-bay-btn {
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  border-color: transparent;
  background: linear-gradient(180deg, var(--orient-800), var(--orient-700));
  box-shadow: var(--shadow-sm);
}
.add-bay-btn:hover {
  border-color: transparent;
  background: linear-gradient(180deg, var(--orient-900), var(--orient-800));
}

/* Remaining status-indicator dots → square (consistency with the rest). */
.queue-group-dot,
.station-tab-dot,
.avail-dot {
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
}
.avail-dot { width: 7px; height: 7px; }

/* ── Unified pill strokes (2026-08-10) ───────────────────────────────────
   Every status pill uses the SAME light stroke as the live-floor bay pills
   (the tone's -border, not the harsh -fg). Worklist dot is flex-centred. */

/* worklist status pills — soften stroke + centre the square dot */
.overview-row-flow { display: inline-flex; align-items: center; gap: 6px; border-color: var(--neutral-300); }
.overview-row-flow::before { margin-right: 0; }
.overview-row-flow[data-tone="critical"] { border-color: var(--critical-border); }
.overview-row-flow[data-tone="warning"] { border-color: var(--warning-border); }
.overview-row-flow[data-tone="active"] { border-color: var(--indigo-200); }
.overview-row-flow[data-tone="waiting"] { border-color: var(--waiting-border); }
.overview-row-flow[data-tone="orient"] { border-color: var(--orient-200); }
.overview-row-flow[data-tone="success"] { border-color: var(--success-border); }

/* cars workflow pills — add the shared stroke */
.wf-pill { border: 1px solid var(--neutral-200); }
.wf-pill[data-tone="critical"] { border-color: var(--critical-border); }
.wf-pill[data-tone="warning"] { border-color: var(--warning-border); }
.wf-pill[data-tone="active"] { border-color: var(--indigo-200); }
.wf-pill[data-tone="waiting"] { border-color: var(--waiting-border); }
.wf-pill[data-tone="success"] { border-color: var(--success-border); }

/* staff availability pills — add the shared stroke */
.avail-pill { border: 1px solid var(--neutral-200); }
.avail-pill[data-tone="indigo"] { border-color: var(--indigo-200); }
.avail-pill[data-tone="success"] { border-color: var(--success-border); }
.avail-pill[data-tone="warning"] { border-color: var(--warning-border); }
.avail-pill[data-tone="neutral"] { border-color: var(--neutral-200); }

/* Labeled Filter dropdown on the work list (replaces the icon-only funnel that hid the action). */
.overview-tool-labeled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: 30px;
  padding: 0 8px 0 10px;
  border-color: var(--neutral-200);
  background: var(--neutral-0);
  color: var(--neutral-700);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.overview-tool-labeled:hover { background: var(--neutral-50); border-color: var(--neutral-300); }
.overview-tool-labeled.is-active { background: var(--orient-50); border-color: var(--orient-200); color: var(--orient-700); }
.overview-tool-labeled svg.lucide { width: 15px; height: 15px; }
.overview-tool-text { white-space: nowrap; }
.overview-tool-caret { width: 14px !important; height: 14px !important; opacity: 0.7; margin-left: 1px; }

/* Empty pill slot on non-needs-action rows: reserves the column width, shows nothing. */
.overview-row-flow.is-empty { border-color: transparent; background: transparent; }
.overview-row-flow.is-empty::before { content: none; }

/* ── Uniform status-pill height (2026-08-10) ─────────────────────────────
   Every status pill matches the work-list row pill exactly: 12px / lh 16 /
   pad 2×8 / 1px border → 22px tall. */
.wf-pill,
.wf-chip,
.avail-pill,
.baymap-status,
.drawer-risk-chip,
.call-badge {
  height: auto;
  min-height: 0;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 16px;
}

/* ── Bay-map collapse (toolbar toggle + animated) ─────────────────────────── */
/* The toggle lives in the work-list toolbar; its double-chevron flips when collapsed. */
.baymap-toggle .lucide { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.overview-page.is-baymap-collapsed .baymap-toggle { background: var(--orient-50); border-color: var(--orient-200); color: var(--orient-700); }
.overview-page.is-baymap-collapsed .baymap-toggle .lucide { transform: rotate(180deg); }
/* The side panel animates to zero width; the work list grows to fill. */
.overview-side { transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease; }
.overview-page.is-baymap-collapsed .overview-side {
  width: 0; min-width: 0; padding: 0; opacity: 0; overflow: hidden; pointer-events: none;
}
/* Pin the bay map at its natural width + left edge so it CLIPS (slides off to the side)
   during the width animation instead of the cards re-wrapping (which read as a vertical
   bottom-to-top shuffle). */
.overview-side > .baymap { width: 384px; box-sizing: border-box; flex: none; align-self: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .overview-side, .baymap-toggle .lucide { transition: none; }
}

/* ── Table view cells ─────────────────────────────────────────────────────── */
.ov-plate { font-family: var(--font-mono); font-weight: 600; color: var(--neutral-700); white-space: nowrap; }
.ov-model { color: var(--neutral-700); }
.ov-risk { font-weight: 700; color: var(--neutral-700); }
.ov-risk[data-tone="critical"] { color: var(--critical-strong); }
.ov-risk[data-tone="warning"] { color: var(--warning-strong); }
.ov-risk[data-tone="success"] { color: var(--success-strong); }

/* ── Status / Severity filter dropdowns (multi-select, pill options) ──────── */
.overview-filter-menu { min-width: 192px; padding: 6px; }
.ofilter-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 6px; border: 0; border-radius: 0; background: none; cursor: pointer; text-align: left; }
.ofilter-opt:hover { background: var(--neutral-25); }
.ofilter-box { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--neutral-300); border-radius: 0; background: var(--neutral-0); color: transparent; }
.ofilter-box svg.lucide { width: 13px; height: 13px; }
.ofilter-opt.is-on .ofilter-box { background: var(--neutral-900); border-color: var(--neutral-900); color: var(--neutral-0); }
.ofilter-alllabel { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.ofilter-all { margin-bottom: 4px; padding-top: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--neutral-150); }
.overview-filter-menu .overview-row-flow { max-width: none; }

/* ── Work-list Table view ────────────────────────────────────────────────── */
.overview-list.is-table { padding: 0; }
.ov-table-wrap { overflow-x: auto; }
.ov-table { width: 100%; border-collapse: collapse; }
.ov-table th { position: sticky; top: 0; z-index: 1; }
.ov-table .overview-row-flow { display: inline-flex; }
.ov-table-owner { width: 48px; }

/* Table view: checkbox col, assignee (avatar + name), subtly tighter columns. */
.ov-table th, .ov-table td { padding: 12px 10px; }
.ov-check-col { width: 44px; padding-left: 20px; padding-right: 4px; }
.ov-table td.ov-check-col { padding-top: 0; padding-bottom: 0; }
.ov-assignee { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ov-assignee-name { font-size: 13px; font-weight: 600; color: var(--neutral-800); white-space: nowrap; }
.ov-table .data-row.is-checked { background: var(--orient-25); }

/* ── Table row status stroke + sticky Plate column (2026-08-11) ──────────── */
/* 2px left stroke in the row's status colour, on the (sticky) first cell. */
.ov-table .data-row td:first-child { box-shadow: inset 4px 0 0 var(--neutral-300); }
.ov-table .data-row[data-tone="critical"] td:first-child { box-shadow: inset 4px 0 0 var(--critical-fg); }
.ov-table .data-row[data-tone="warning"] td:first-child { box-shadow: inset 4px 0 0 var(--warning-fg); }
.ov-table .data-row[data-tone="active"] td:first-child { box-shadow: inset 4px 0 0 var(--indigo-600); }
.ov-table .data-row[data-tone="success"] td:first-child { box-shadow: inset 4px 0 0 var(--success-fg); }
.ov-table .data-row[data-tone="waiting"] td:first-child { box-shadow: inset 4px 0 0 var(--waiting-fg); }
.ov-table .data-row[data-tone="orient"] td:first-child { box-shadow: inset 4px 0 0 var(--orient-500); }
.ov-table .data-row[data-tone="neutral"] td:first-child { box-shadow: inset 4px 0 0 var(--neutral-400); }
/* Freeze checkbox + Plate on horizontal scroll. */
.ov-table td.ov-check-col, .ov-table th.ov-check-col { position: sticky; left: 0; z-index: 2; background: var(--neutral-0); transition: background 0.14s ease; }
.ov-table td.ov-plate, .ov-table th.ov-plate-col { position: sticky; left: 40px; z-index: 2; background: var(--neutral-0); transition: background 0.14s ease; }
.ov-table thead th.ov-check-col, .ov-table thead th.ov-plate-col { z-index: 3; background: var(--neutral-25); }
.ov-table .data-row:hover td.ov-check-col, .ov-table .data-row:hover td.ov-plate { background: var(--neutral-25); }
.ov-table .data-row.is-checked td.ov-check-col, .ov-table .data-row.is-checked td.ov-plate { background: var(--orient-25); }
.ov-table .data-row.is-selected td.ov-check-col, .ov-table .data-row.is-selected td.ov-plate { background: var(--orient-50); }

/* ── Sidebar selection (MATTERS pattern) ───────────────────────────────────
   Active row = a flat soft-grey fill that runs full-rail-width and butts
   against the workspace sheet (no seam) + a 4px brand left-stroke. Expanded:
   the logo mark and every nav icon share one left edge (8px). Collapsed: the
   icon rail centres its glyphs (no logo to align to). */
.shell-body { margin-left: 0; }
.rail-indicator { box-shadow: none; background: var(--neutral-100); }
.rail-button { width: 100%; justify-content: center; }
.rail-button svg.lucide { margin: 0; }
.app-shell.is-rail-expanded .rail-head { padding: 0 8px; }
.app-shell.is-rail-expanded .rail-button { justify-content: flex-start; padding: 0 8px; }
.app-shell.is-rail-expanded .rail-button svg.lucide { margin: 0 12px 0 0; }
.rail-button.is-active { box-shadow: inset 4px 0 0 var(--orient-600); }

/* ── Toolbar: uniform button heights, no divider ──────────────────────────── */
.overview-tool-labeled { height: 32px; }
.baymap-toggle { width: 32px; height: 32px; }

/* Add-mechanic: full primary treatment (brand gradient + shadow + darker hover). */
.staff-add-btn {
  height: 36px;
  border-color: transparent;
  background: linear-gradient(180deg, var(--orient-800), var(--orient-700));
  box-shadow: var(--shadow-sm);
}
.staff-add-btn:hover { border-color: transparent; background: linear-gradient(180deg, var(--orient-900), var(--orient-800)); }

/* Mechanic drawer availability: "On a job" pill + a "Bay 5" location pill (both 22px). */
.sd-avail { gap: 6px; }
.sd-where-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 2px 8px;
  border: 1px solid var(--neutral-200); border-radius: 0;
  background: var(--neutral-50); color: var(--neutral-700);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.sd-where-pill svg.lucide { width: 13px; height: 13px; color: var(--neutral-400); }

/* List group-header tints, ~2 shades lighter (mix white into each -bg). */
.overview-list-section[data-tone="critical"] .overview-group-head { background: color-mix(in oklch, var(--critical-bg), #fff 48%); }
.overview-list-section[data-tone="warning"] .overview-group-head { background: color-mix(in oklch, var(--warning-bg), #fff 48%); }
.overview-list-section[data-tone="waiting"] .overview-group-head { background: color-mix(in oklch, var(--waiting-bg), #fff 48%); }
.overview-list-section[data-tone="active"] .overview-group-head { background: color-mix(in oklch, var(--indigo-50), #fff 48%); }
.overview-list-section[data-tone="orient"] .overview-group-head { background: color-mix(in oklch, var(--orient-50), #fff 48%); }
.overview-list-section[data-tone="success"] .overview-group-head { background: color-mix(in oklch, var(--success-bg), #fff 48%); }

/* Add-mechanic modal: a check icon appears on the selected skills. */
.am-skill { display: inline-flex; align-items: center; gap: 5px; }
.am-skill-check { width: 14px; height: 14px; }
.am-skill:not(.is-on) .am-skill-check { display: none; }

/* Table checkbox: 20px left padding (beat the generic .ov-table td padding). */
.ov-table td.ov-check-col, .ov-table th.ov-check-col { padding-left: 20px; }

/* The situation block is now a single headline line (no subtext) — give it a touch
   more presence as the lead. */
.drawer-focus .drawer-focus-title { font-size: 14px; line-height: 19px; }
/* Hold-cost folded INTO the situation block (replaces the old standalone red box):
   a compact 3-up stat strip separated from the body by a hairline. */
.drawer-focus-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 2px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(83, 90, 102, 0.16);
}
.drawer-focus-stats > span { display: flex; flex-direction: column; gap: 1px; }
.drawer-focus-stats em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--neutral-500); line-height: 15px; }
.drawer-focus-stats b { font-size: 16px; font-weight: 750; color: var(--neutral-900); line-height: 20px; letter-spacing: -0.01em; }
.drawer-focus-stats b[data-tone="critical"] { color: var(--critical-strong); }
.drawer-focus-stats b[data-tone="warning"] { color: var(--warning-strong); }

/* Compact vitals HERO — promise → predicted + variance (the risk read the manager opens
   the car to see), pulled out of the old flat grid and given weight. */
.drawer-vitals {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 11px 12px;
  border: 1px solid var(--neutral-200); background: var(--neutral-25);
}
.dv-flow { display: inline-flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; }
.dv-flow b { font-size: 19px; font-weight: 750; color: var(--neutral-900); letter-spacing: -0.01em; }
.dv-flow b[data-tone="critical"] { color: var(--critical-strong); }
.dv-flow b[data-tone="warning"] { color: var(--warning-strong); }
.dv-flow b[data-tone="success"] { color: var(--success-strong); }
.dv-flow svg.lucide { width: 15px; height: 15px; color: var(--neutral-400); flex: none; }
.dv-delta { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 13px; font-weight: 700; background: var(--neutral-100); color: var(--neutral-700); }
.dv-delta[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-strong); }
.dv-delta[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-strong); }
.dv-delta[data-tone="success"] { background: var(--success-bg); color: var(--success-strong); }

/* Merged vital block — the situation title + variance pill, the promise → predicted clocks
   (each labelled), and the folded hold-cost stats, all in ONE box (was two). The hero read. */
.drawer-vital {
  margin-top: 16px; padding: 16px 16px 17px;
  border: 1px solid var(--neutral-200); background: var(--neutral-25);
}
/* Fills relaxed ~2 shades toward white (user: too harsh) — matches the softened page verdict. */
.drawer-vital[data-tone="critical"] { border-color: color-mix(in oklch, var(--critical-border) 48%, white); background: color-mix(in oklch, var(--critical-bg) 34%, white); }
.drawer-vital[data-tone="warning"], .drawer-vital[data-tone="waiting"] { border-color: color-mix(in oklch, var(--warning-border) 48%, white); background: color-mix(in oklch, var(--warning-bg) 34%, white); }
.drawer-vital[data-tone="success"] { border-color: color-mix(in oklch, var(--success-border) 46%, white); background: color-mix(in oklch, var(--success-bg) 28%, white); }
/* Title then a variance pill BELOW it — was a same-row space-between that squeezed the title into
   an ugly mid-word wrap in the ~440px drawer (user screenshot). */
.dvital-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Greedy fill (wrap), NOT balance: in the ~314px drawer, balance split this headline into two
   short ~50%-width lines and left a big empty gap on the right (user screenshot). Plain wrap fills
   line 1 to the width so the card no longer reads half-empty. */
.dvital-title { font-size: 14.5px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.3; color: var(--neutral-900); text-wrap: wrap; }
.drawer-vital[data-tone="critical"] .dvital-title { color: var(--critical-strong); }
.drawer-vital[data-tone="warning"] .dvital-title, .drawer-vital[data-tone="waiting"] .dvital-title { color: var(--warning-strong); }
.drawer-vital[data-tone="success"] .dvital-title { color: var(--success-strong); }
/* Variance pill gets a tone stroke for contrast against the tinted vital box (user request), + a dot. */
.dvital-delta { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 12.5px; font-weight: 700; background: var(--neutral-0); border: 1px solid var(--neutral-200); color: var(--neutral-700); }
.dvital-delta::before { content: ""; width: 6px; height: 6px; background: currentColor; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.22); flex: none; }
.dvital-delta[data-tone="critical"] { background: var(--neutral-0); border-color: var(--critical-border); color: var(--critical-strong); }
.dvital-delta[data-tone="warning"] { background: var(--neutral-0); border-color: var(--warning-border); color: var(--warning-strong); }
.dvital-delta[data-tone="success"] { background: var(--neutral-0); border-color: var(--success-border); color: var(--success-strong); }
.dvital-times { display: flex; align-items: flex-end; gap: 16px; margin-top: 11px; }
.dvital-time { display: flex; flex-direction: column; gap: 3px; }
.dvital-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral-500); }
.dvital-time b { font-size: 22px; font-weight: 750; line-height: 1; letter-spacing: -0.01em; color: var(--neutral-900); font-variant-numeric: tabular-nums; }
.dvital-time b[data-tone="critical"] { color: var(--critical-strong); }
.dvital-time b[data-tone="warning"] { color: var(--warning-strong); }
.dvital-time b[data-tone="success"] { color: var(--success-strong); }
.dvital-arrow { display: inline-flex; align-items: center; padding-bottom: 3px; }
.dvital-arrow svg.lucide { width: 16px; height: 16px; color: var(--neutral-400); }
.drawer-vital .drawer-focus-stats { margin-top: 12px; border-top-color: rgba(83, 90, 102, 0.16); }
/* Ready-car customer-contact status: neutral "not notified yet" vs green "notified HH:MM". */
.drawer-notify { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--neutral-200); background: var(--neutral-25); font-size: 13px; font-weight: 600; color: var(--neutral-600); }
.drawer-notify.is-done { border-color: color-mix(in oklch, var(--success-border) 55%, white); background: color-mix(in oklch, var(--success-bg) 40%, white); color: var(--neutral-700); }
.drawer-notify-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--neutral-100); color: var(--neutral-500); }
.drawer-notify.is-done .drawer-notify-ic { background: var(--success-bg); color: var(--success-fg); }
.drawer-notify-ic svg.lucide { width: 15px; height: 15px; }
.drawer-notify b { font-weight: 700; color: var(--neutral-800); }

/* Dense inline detail list — label left (muted), value right (tabular), hairline rows.
   The secondary data, kept visible but compact (progressive summarization). */
.drawer-facts { margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.df-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--neutral-100); }
.df-row:first-child { border-top: 0; }
.df-row dt { flex: none; color: var(--neutral-500); font-size: 13px; font-weight: 600; }
.df-row dd { margin: 0; min-width: 0; text-align: right; color: var(--neutral-900); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-row dd[data-tone="critical"] { color: var(--critical-strong); }
.df-row dd[data-tone="warning"] { color: var(--warning-strong); }
.df-row dd[data-tone="waiting"] { color: var(--neutral-700); }
.df-row dd[data-tone="success"] { color: var(--success-strong); }
.df-person { display: inline-flex; align-items: center; gap: 6px; }
.df-person b { font-weight: 650; }

/* Drawer snapshot — icon-led, scannable: a prominent Current job + a grid of icon cells */
.drawer-snap { margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.dsnap-job { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--orient-25); border: 1px solid var(--orient-100); }
.dsnap-jico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--orient-50); color: var(--orient-600); flex: none; }
.dsnap-jico svg.lucide { width: 19px; height: 19px; }
.dsnap-jcopy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dsnap-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orient-700); }
.dsnap-jtitle { font-size: 15px; font-weight: 700; color: var(--neutral-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsnap-jmeta { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.dsnap-jmeta b { font-size: 17px; font-weight: 750; color: var(--neutral-900); line-height: 1; }
.dsnap-jmeta span { font-size: 11px; color: var(--neutral-500); margin-top: 2px; }
.dsnap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--neutral-150); border: 1px solid var(--neutral-150); }
.dsnap-cell { display: flex; align-items: center; gap: 9px; padding: 11px 12px; background: var(--neutral-0); min-width: 0; }
.dsnap-cico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-100); color: var(--neutral-500); flex: none; }
.dsnap-cico svg.lucide { width: 15px; height: 15px; }
.dsnap-cell[data-tone="success"] .dsnap-cico { background: var(--success-bg); color: var(--success-fg); }
.dsnap-cell[data-tone="warning"] .dsnap-cico, .dsnap-cell[data-tone="waiting"] .dsnap-cico { background: var(--warning-bg); color: var(--warning-fg); }
.dsnap-cell[data-tone="critical"] .dsnap-cico { background: var(--critical-bg); color: var(--critical-fg); }
.dsnap-ccopy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dsnap-clabel { font-size: 11px; font-weight: 600; color: var(--neutral-500); }
.dsnap-cval { font-size: 13.5px; font-weight: 650; color: var(--neutral-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsnap-cell[data-tone="success"] .dsnap-cval { color: var(--success-strong); }
.dsnap-cell[data-tone="warning"] .dsnap-cval, .dsnap-cell[data-tone="waiting"] .dsnap-cval { color: var(--warning-strong); }
.dsnap-cell[data-tone="critical"] .dsnap-cval { color: var(--critical-strong); }
.dsnap-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dsnap-person .avatar { width: 20px; height: 20px; flex: none; }
/* A grid with an odd cell count leaves a gap — fill the trailing cell so the border reads clean. */
.dsnap-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Staff nav is out of scope: present but not navigable (no-entry cursor). */
/* Staff is out of scope but should NOT look disabled — it reads as a normal nav item.
   The only tell is on hover: no highlight + a not-allowed cursor (clicking does nothing). */
.rail-button.is-nav-disabled { cursor: not-allowed; }
.rail-button.is-nav-disabled:hover { background: transparent; color: var(--neutral-500); }
.rail-button.is-nav-disabled:hover svg.lucide { color: var(--neutral-500); }

/* ── Analytics: reference-inspired trend pills, gradient bars, tick-ring donut ─── */
/* Trend pill = a filled ROUND arrow badge + delta text on a tinted pill (badge stays
   round per the radius-0 exception for circular affordances; the pill is square). */
.trend-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 4px; border: 1px solid transparent; font-size: 12px; font-weight: 700; white-space: nowrap; }
.trend-ico { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: var(--neutral-0); flex: none; }
.trend-ico svg.lucide { width: 10px; height: 10px; stroke-width: 3.25; }
.trend-pill[data-tone="good"] { background: var(--success-bg); border-color: var(--success-border); color: var(--success-strong); }
.trend-pill[data-tone="good"] .trend-ico { background: var(--success-fg); }
.trend-pill[data-tone="watch"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-strong); }
.trend-pill[data-tone="watch"] .trend-ico { background: var(--warning-fg); }
.trend-pill[data-tone="bad"] { background: var(--critical-bg); border-color: var(--critical-border); color: var(--critical-strong); }
.trend-pill[data-tone="bad"] .trend-ico { background: var(--critical-fg); }
/* The on-time hero's delta reads a touch larger. */
.hero-figure .trend-pill { height: 24px; font-size: 13px; }
.hero-figure .trend-ico { width: 17px; height: 17px; }

/* Bar charts: SUBTLE vertical gradient — strong at the top, fading only ~2 steps (not to
   near-white) so contrast holds but the spectrum isn't extreme. Applies to the on-time
   weekly bars AND the bay-utilization meters. */
.bar-track i, .bar-track i[data-tone="brand"] { background: linear-gradient(180deg, var(--orient-500), var(--orient-200)); }
.ns-week-bar { background: linear-gradient(180deg, var(--orient-400), var(--orient-200)); }
.ns-week-col.is-today .ns-week-bar { background: linear-gradient(180deg, var(--orient-700), var(--orient-400)); }
.baystrip-meter i { background: linear-gradient(180deg, var(--orient-500), var(--orient-200)); }
.baystrip-meter i[data-tone="ok"] { background: linear-gradient(180deg, var(--orient-500), var(--orient-200)); }
.baystrip-meter i[data-tone="high"] { background: linear-gradient(180deg, var(--capacity-high), var(--warning-bg)); }
.baystrip-meter i[data-tone="low"] { background: linear-gradient(180deg, var(--neutral-300), var(--neutral-100)); }

/* Segmented tick-ring donut — distinct multi-colour ticks (not the monochrome teal ramp).
   Square-ended ticks (radius-0) with more air between them; "waiting" = a reference purple. */
.tick-donut line.tick { stroke-width: 2.4; stroke-linecap: butt; }
/* Colours permuted so NO two adjacent slices share a hue family (teal→blue→green→amber→
   purple around the ring) — the old teal/green/indigo trio was blending. */
.tick-donut line[data-tone="success"] { stroke: var(--orient-500); }   /* Parts → teal */
.tick-donut line[data-tone="brand"]   { stroke: var(--chart-blue); }    /* Approval → blue (lightened) */
.tick-donut line[data-tone="active"]  { stroke: var(--success-fg); }   /* Alignment → green */
.tick-donut line[data-tone="warning"] { stroke: var(--warning-fg); }   /* Wash → amber */
.tick-donut line[data-tone="waiting"] { stroke: var(--chart-violet); } /* Mechanic → purple */
.tick-donut line[data-tone="critical"]{ stroke: var(--critical-fg); }
.tick-donut line[data-tone="neutral"] { stroke: var(--neutral-300); }
/* Legend dots match the donut colours exactly. */
.lost-legend .dot[data-tone="success"] { background: var(--orient-500); }
.lost-legend .dot[data-tone="brand"]   { background: var(--chart-blue); }
.lost-legend .dot[data-tone="active"]  { background: var(--success-fg); }
.lost-legend .dot[data-tone="warning"] { background: var(--warning-fg); }
.lost-legend .dot[data-tone="waiting"] { background: var(--chart-violet); }
.lost-legend .dot[data-tone="critical"]{ background: var(--critical-fg); }

/* Analytics stat-tile footer: brings back the full-bleed hairline separator above the
   trend pill, pushes it to the bottom (uniform spacing), and lets the pill hug its content. */
.stat-tile-foot {
  display: flex;
  /* Space above the separator == the 16px top padding (a touch more, for breathing room). */
  margin: 18px -16px 0;
  padding: 14px 16px 0;
  border-top: 1px solid var(--neutral-150, var(--neutral-100));
}
:root { --chart-violet: oklch(0.56 0.17 300); --chart-blue: oklch(0.64 0.115 258); }

/* ================================================================================================
   Motion layer (2026-08-13). Entrances fire on REAL transitions only (JS adds one-shot classes on
   page change / drawer open / tab change — never on in-place re-renders), so nothing re-animates on
   a stray click. Curves are ease-out (arrive fast, settle), durations ≤ 300ms, and every animation
   has a prefers-reduced-motion: reduce fallback. Page-enter + dm-page-in already exist above.
   ================================================================================================ */
@keyframes rv-tab-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes rv-crossfade { from { opacity: 0.25; } to { opacity: 1; } }
/* Mechanic switch: the newly-selected card + its live outcome + the sticky echo crossfade in. */
.assign-fade { animation: rv-crossfade 200ms ease both; }
@media (prefers-reduced-motion: reduce) { .assign-fade { animation: none; } }
@keyframes rv-drawer-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* Tab panel (Overview ⇄ Activity on the expanded page) — fades up only when the tab changes. */
.dm-tab-enter { animation: rv-tab-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Right detail/assign panel — slides in from the right only when a NEW car/arrival opens it
   (class is added by JS to the overview detail aside, the cars-page detail, or the board drawer). */
.drawer-enter { animation: rv-drawer-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Smooth hover on every button (base .btn had no transition) + a tactile press on buttons and
   the card-like clickables (subtle 0.985 scale — physics, not bounce). */
.btn { transition: transform 0.09s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease; }
.btn:not(:disabled):active,
.assign-mech:active, .assign-chip.is-free:active,
.nextup-row[data-assign-plate]:active,
.baymap-cell:active, .dm-tab:active { transform: scale(0.985); }
.assign-mech, .assign-chip, .nextup-row, .baymap-cell, .dm-tab { transition: transform 0.09s ease, border-color 0.12s ease, background 0.12s ease; }

@media (prefers-reduced-motion: reduce) {
  .dm-tab-enter, .drawer-enter { animation: none; }
  .btn:not(:disabled):active, .assign-mech:active, .assign-chip.is-free:active,
  .nextup-row[data-assign-plate]:active, .baymap-cell:active, .dm-tab:active { transform: none; }
}