:root {
  --bg-app: #f4f3f0;         /* warm paper, not blue-grey */
  --side: #0b0d12;           /* the bar: black, and only black */
  --side-2: #171a21;
  --side-ink: #b9c0cc;
  --side-active: #ffffff;    /* the active tab is carried by white, not gold */
  --side-line: #232733;      /* rules and borders inside the bar */
  --side-dim: #6f7682;       /* the bar's quiet words: the logo's subline */
  --panel: #ffffff;
  --panel-2: #faf9f6;        /* a step off the panel: a hovered row, a note */
  --ink: #0f1626;
  --ink-2: #2a3346;          /* a bar in a chart, where full ink shouts */
  --muted: #69768c;
  --line: #e3e0d9;           /* hairlines warmed to sit on paper */
  --line-2: #efede7;
  --brand: #E89A12;          /* electric gold */
  --brand-dark: #C57E0A;
  --brand-soft: #fbe6bd;
  --brand-ink: #1a1204;      /* type printed ON gold, and nowhere else */
  --gold1: #FFDE7A;
  --gold2: #E8941A;
  --storm1: #0b1224;
  --storm2: #060912;
  --green: #15803d;
  --green-bg: #d9f7e3;
  --amber: #b45309;
  --amber-bg: #fef0c7;
  --red: #dc2626;
  --red-bg: #fee2e2;
  --shadow-sm: 0 1px 2px rgba(13,22,38,.06), 0 1px 3px rgba(13,22,38,.06);
  --shadow-md: 0 8px 24px rgba(13,22,38,.10);
  --glow: 0 0 0 1px rgba(232,154,18,.25), 0 8px 26px rgba(232,148,26,.35);
  --radius: 13px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.5 "Segoe UI", -apple-system, Roboto, Helvetica, Arial,
    sans-serif;
  color: var(--ink);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.err { color: var(--red); min-height: 1.2em; margin: 6px 0 0;
  font-weight: 600; }
h1, h2 { margin: 0; letter-spacing: -.01em; }
.data td, .kpi-val, .pre, .suf { font-variant-numeric: tabular-nums; }

/* ---------- Auth (storm) ---------- */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; overflow: hidden;
  position: relative;
  background:
    radial-gradient(900px 500px at 50% -10%, #20335e 0%, transparent 60%),
    linear-gradient(180deg, #0c1430 0%, #05070f 100%);
}
.auth-wrap::before, .auth-wrap::after {
  content: ""; position: absolute; inset: -20%;
  background:
    conic-gradient(from 200deg at 60% 40%,
      transparent 0deg, rgba(232,148,26,.10) 40deg, transparent 80deg);
  animation: storm 9s ease-in-out infinite;
  pointer-events: none;
}
.auth-wrap::after { animation-delay: 4.5s; opacity: .6;
  transform: scaleX(-1); }
@keyframes storm {
  0%, 100% { opacity: .15; }
  45% { opacity: .15; }
  50% { opacity: .55; }
  53% { opacity: .2; }
  56% { opacity: .6; }
  60% { opacity: .15; }
}
.auth-card {
  position: relative; background: #fff; padding: 38px 40px 34px;
  border-radius: 20px; width: 390px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 13px; text-align: center;
  border-top: 4px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, var(--gold1), var(--gold2));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.auth-logo {
  width: 64px; height: 64px; margin: 0 auto 2px;
  filter: drop-shadow(0 6px 16px rgba(232,148,26,.55));
}
.auth-logo svg, .side-brand .logo svg { width: 100%; height: 100%;
  display: block; }
.auth-card h1 { font-size: 24px; font-weight: 900; letter-spacing: .14em;
  color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.auth-card h1 .z-sub { font-size: 11px; font-weight: 800;
  letter-spacing: .42em; color: var(--brand-dark); }
.z-tag { margin: -4px 0 6px; font-size: 12.5px; font-weight: 700;
  color: var(--brand-dark); letter-spacing: .02em; }
.auth-card label { display: flex; flex-direction: column; gap: 6px;
  font-weight: 700; font-size: 12px; text-align: left; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
.auth-card input { padding: 12px; border: 1px solid var(--line);
  border-radius: 11px; font-size: 15px; font-weight: 600; }
.auth-card input:focus { outline: 3px solid var(--brand-soft);
  border-color: var(--brand); }
.forgot-link { color: var(--brand-dark); font-weight: 700;
  font-size: 13px; text-decoration: none; margin-top: -4px; }
.forgot-link:hover { text-decoration: underline; }

.reset-row { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line-2); font-size: 13px; }
.reset-row:last-child { border-bottom: 0; }
.reset-actions { display: flex; gap: 8px; flex: none; }
.temp-pw { margin: 16px 0; padding: 16px; text-align: center;
  font-size: 24px; font-weight: 800; letter-spacing: .08em;
  background: var(--storm1); color: var(--gold1); border-radius: 12px;
  font-variant-numeric: tabular-nums; }

/* ---------- App shell ---------- */
#app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 240px; flex: none;
  background: var(--side);
  color: var(--side-ink); display: flex; flex-direction: column;
  padding: 16px 12px; border-right: 1px solid rgba(255,255,255,.07);
  transition: margin-left .24s ease;
  /* #app clips overflow, so the sidebar scrolls itself on short viewports —
     otherwise the bottom (Sign out) would be unreachable. */
  overflow: hidden auto;
}
/* leave a clear zone at the top-left for the fixed hamburger */
.side-brand { display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 18px; margin-top: 34px; color: #fff; }

/* ---------- Sidebar collapse (hamburger) ---------- */
.nav-toggle {
  position: fixed; top: 13px; left: 13px; z-index: 40;
  width: 42px; height: 36px; display: flex; flex-direction: column;
  justify-content: center; gap: 5px; padding: 0 10px;
  background: #14171f; border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.32);
  transition: background .15s, box-shadow .15s;
}
/* The bar's own grey. The lines were cream (#f0e2b8) -- gold thinned out,
   and still the orange seeping into the bar. The hover is a lifted black,
   not the navy it was: the bar carries no hue at all. */
.nav-toggle span { display: block; height: 2px; border-radius: 2px;
  background: var(--side-ink); }
.nav-toggle:hover { background: #1d212b;
  box-shadow: 0 6px 18px rgba(0,0,0,.4); }
/* Dual light+dark ring so keyboard focus is visible on EITHER backdrop
   (navy sidebar when open, light/dark main when collapsed) — a single
   accent color washes out on one of them. Transparent outline keeps a
   cue in Windows forced-colors mode. */
.nav-toggle:focus-visible { outline: 2px solid transparent; outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #0b1120, 0 4px 14px rgba(0,0,0,.32); }
/* collapsed: sidebar slides out, main reflows to full width */
#app.nav-collapsed .sidebar { margin-left: -240px; }
#app.nav-collapsed .main { padding-left: 64px; }
/* dark mode: both bg's are navy, so lift the chip a shade to stay visible */
html.dark .nav-toggle { background: #1a1e27; border-color: rgba(255,255,255,.3); }
html.dark .nav-toggle:hover { background: #232833; }
/* Respect reduced-motion: no slide, just snap open/closed. The top line
   (P5-5) moves with .main's padding, so it snaps with it. */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .main, .top { transition: none; }
}
/* No glow, and no gold. A lit halo behind the mark was the orange seeping
   into the bar by another route; the gold gradient bolt on a navy tile was
   the same thing without the halo. The bolt is plain white on the bar's
   own black (index.html), as the design draws it. */
.side-brand .logo { width: 26px; height: 26px; flex: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-text b { font-size: 17px; font-weight: 700; line-height: 1;
  color: #fff; letter-spacing: .22em; }
.brand-text i { font-size: 9.5px; font-style: normal; font-weight: 400;
  line-height: 1; margin-top: 4px; letter-spacing: .34em;
  color: var(--side-dim); }
/* The store this Zeus is (P5-10, the design's P:47-51): its name in white
   over its town in the bar's grey, on the bar's lifted black with the
   bar's own hairline. Zeus HQ's picker makes it a column: "Store" in the
   dim capitals the bar's headings use, over a select that is the same
   black with no edge of its own. The design takes the select's outline
   away (`outline: 0`) and rings it in gold; neither is taken here -- the
   bar's white ring (.sidebar :focus-visible) is its focus. */
.bar-store { display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 12px; padding: 8px 11px; background: var(--side-2);
  border: 1px solid var(--side-line); border-radius: 10px;
  font-size: 12.5px; line-height: 1.35; color: var(--side-ink); }
.bar-store-here { min-width: 0; }
.bar-store b { display: block; color: #fff; font-weight: 600; }
.bar-store.hq { flex-direction: column; align-items: stretch; gap: 3px; }
.bar-store-lbl { font-size: 10.5px; line-height: 1; letter-spacing: .14em;
  text-transform: uppercase; color: var(--side-dim); }
.bar-store select { width: 100%; padding: 2px 0; background: var(--side-2);
  color: #fff; border: 0; font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; }
/* Search (P5-8, the design's P:52-54): the bar's one button that is not a
   page -- a magnifier, the words and a Ctrl K key. It is on the black bar,
   so no accent at all: a grey edge, the bar's grey type going white on a
   hover, and the key in the bar's dim grey. The bar's own white ring
   (.sidebar :focus-visible) is its focus. */
.search-btn { display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0 0 12px; padding: 8px 10px; background: transparent;
  border: 1px solid #262a35; border-radius: 9px; color: var(--side-ink);
  font-family: inherit; font-size: 13px; text-align: left;
  white-space: nowrap; cursor: pointer;
  transition: border-color .12s, color .12s; }
.search-btn:hover { border-color: #3a3f4c; color: #fff; }
.search-btn svg { width: 14px; height: 14px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* The words give way, never the key: on a laptop screen the bar scrolls,
   its scrollbar takes a few pixels, and the key was pushed past the bar's
   edge and cut off (seen at 1440x900 for an admin). */
.search-btn .search-words { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; }
.search-btn kbd { flex: none; margin-left: auto; padding: 0 5px; font-family: inherit;
  font-size: 11px; line-height: 1.5; border: 1px solid #333845;
  border-radius: 5px; color: var(--side-dim); }
@media (pointer: coarse) {
  .search-btn { min-height: 44px; }
}
/* In the phone's menu (P5-11) the button keeps its words, and loses the
   Ctrl K a phone has no key for. */
@media (max-width: 880px) {
  .search-btn kbd { display: none; }
}
/* The bar in six groups under small grey headings (P5-2, the design's
   P:55-62): Customers, Zeus, Lot, Insights, Setup, Zeus HQ. A heading is
   the bar's quiet grey, like the logo's subline -- no accent anywhere --
   and applyPerms hides a group with nothing the account can open. The
   rows are tighter than the old 14px/600 at 11px pads, so fourteen tabs
   and six headings take about the room fourteen tabs did; the bar still
   scrolls (.sidebar) on a short screen. */
.side-nav { display: flex; flex-direction: column; gap: 13px; flex: 1;
  margin-top: 4px; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-head { margin: 0 0 3px; padding: 0 10px; font-size: 10.5px;
  font-weight: 600; line-height: 1; letter-spacing: .16em;
  text-transform: uppercase; color: var(--side-dim); }
/* Ask Zeus's item (#nav-ask, P5-6) is drawn as a row like the tabs but is
   not one (index.html says why), so it rides each tab rule by its own
   class. */
.side-nav .tab, .side-nav .nav-ask {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; cursor: pointer;
  color: var(--side-ink); padding: 7px 10px; border-radius: 8px;
  font-family: inherit; font-size: 13.5px; font-weight: 400;
  text-align: left; transition: background .12s, color .12s;
}
/* The tools -- Deal Finder, Equity Radar and Ask Zeus -- stand out by
   weight and a lighter grey, never by a colour: on the desk and in the
   phone's menu alike (P5-11; the icon strip before it kept one grey). It
   sits BEFORE the hover and active rules on purpose: the same specificity,
   so source order lets a hovered or open tool read white like every other
   row. */
.nav-group[data-group="zeus"] .tab,
.nav-group[data-group="zeus"] .nav-ask { font-weight: 600; color: #e7eaf0; }
.side-nav .tab:hover, .side-nav .nav-ask:hover {
  background: #12151c; color: #fff; }
/* The active tab used to be a solid gold pill with a gold glow under it --
   the loudest thing on the screen, for information the desk already has.
   A white rail and white type on a lifted black say the same thing and let
   the bar stay black. No bolder weight: the type does not jump when a tab
   opens. Ask Zeus reads the same while its panel is open (the design's
   P:676), so the bar can show the page AND the panel you are in. */
.side-nav .tab.active, .side-nav .nav-ask[aria-pressed="true"] {
  background: var(--side-2); color: var(--side-active);
  box-shadow: inset 2px 0 0 #fff;
}
.side-nav .tab.active .ic,
.side-nav .nav-ask[aria-pressed="true"] .ic { stroke: #fff; }
/* Keyboard focus inside the bar is a white ring. The design prototype's
   ring is gold everywhere (P:39), which would light the bar up orange on
   every Tab press -- the one part of the design CLAUDE.md overrules. */
.sidebar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.side-nav .ic { width: 16px; height: 16px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; }
/* Tighter rows, but a finger on the floor's iPads still gets 44px -- down
   the left and in the phone's menu (P5-11) alike. */
@media (pointer: coarse) {
  .side-nav .tab, .side-nav .nav-ask { min-height: 44px; }
}
.side-foot { border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.who-line { padding: 0 8px; font-size: 13px; color: #93a4bd;
  text-transform: capitalize; }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; color: #cbd6e6;
  border-color: rgba(255,255,255,.18); }
.btn.ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

/* The phone's bar (P5-11, the design's .mob-bar, P:371-373): black across
   the top at 880px or less (the Responsive block turns it on), with Menu,
   ZEUS and Search. Its bottom edge is the bar's own hairline, neutral like
   everything on the bar (CLAUDE.md: "the mobile bar's bottom border is
   neutral too"). The design pads its top by the safe area (a notched
   phone's clock). Every env(safe-area-inset-*) in this sheet reads 0 until
   index.html's viewport tag asks for the whole screen (viewport-fit=cover),
   which it does not yet -- Safari keeps the page clear of the notch itself
   -- so they are in place for that day, as the Ask panel's are. */
.mob-bar { display: none; align-items: center; gap: 10px; flex: none;
  background: var(--side); color: #fff; padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--side-line); }
.mob-bar b { font-size: 15px; font-weight: 700; line-height: 1;
  letter-spacing: .2em; margin-right: auto; }
/* Menu, Search, and the menu's own Close: the design's bordered button on
   the black, going a shade lighter under a pointer. A plain button on the
   bar, so no accent; the keyboard's ring is the bar's white one. */
.mob-btn { background: none; border: 1px solid #2a2f3a; color: #fff;
  border-radius: 8px; padding: 5px 10px; font-family: inherit;
  font-size: 13px; line-height: 1.4; cursor: pointer; }
.mob-btn:hover { border-color: #3a3f4c; }
.mob-bar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Close is the phone's menu's alone: beside the logo, the only way out of
   a menu that lies over its own Menu button (the design's had none). */
.menu-close { display: none; margin-left: auto; }
/* A finger gets 44px here as everywhere on the floor's iPads. */
@media (pointer: coarse) {
  .mob-btn { min-height: 44px; }
}

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; overflow-y: auto; padding: 26px 30px 40px;
  transition: padding-left .24s ease; }
.page-head { margin-bottom: 18px; }
/* A serif at the top of the screen. Georgia rather than a web font: this
   is the screen a desk stares at all day and it must not wait on, or fall
   back from, a font request to somebody else's server. Regular weight, as
   the design sets it -- a serif carries a title without bold.
   Nothing beside it: there was a gold bar before every title, a gold label
   on every page telling the desk which page it is already on (CLAUDE.md;
   0006's dated section, item 3, "no gold page label"). */
.page-head h1 { font-size: 30px; font-weight: 400; line-height: 1.15;
  letter-spacing: -.01em;
  font-family: Georgia, "Times New Roman", serif; }
.page-head p { margin: 6px 0 0; }

/* The top line (P5-5, the design's .top, P:72-84): the crumb, the
   "Customer is looking" flag, and the Present Mode switch. It runs edge to
   edge across .main under a hairline: it takes .main's padding back as a
   negative margin and pads its own words by the same amount, so the crumb
   starts where the page title does. Tucking the menu away slides .main's
   left padding to 64px; the line slides with it on the same transition, or
   it would stick out past .main while the padding moves. Not fixed and not
   sticky -- it scrolls with the page; P, anywhere, flips Present. */
.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -26px -30px 24px; padding: 11px 30px;
  border-bottom: 1px solid var(--line);
  transition: margin-left .24s ease, padding-left .24s ease; }
#app.nav-collapsed .top { margin-left: -64px; padding-left: 64px; }
.crumb { font-size: 12.5px; color: var(--muted); }
.crumb b { color: var(--ink); font-weight: 600; }
.top .sp { flex: 1; }
/* A state the screen is in, so ink and never gold (CLAUDE.md): the flag
   is an ink pill, shown only while presenting (the Present block below). */
.present-flag { display: none; background: var(--ink); color: var(--panel);
  font-size: 12px; font-weight: 600; line-height: 1.5; border-radius: 7px;
  padding: 3px 9px; }
/* The switch: a button with aria-pressed, a 32x18 track (--line off, ink
   on) and a 14px knob. Ink on, not gold: it changes what the screen shows,
   not the deal. */
.toggle { display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 12.5px; color: var(--muted);
  cursor: pointer; user-select: none; background: none; border: 0;
  padding: 4px; }
.sw { position: relative; flex: none; width: 32px; height: 18px;
  border-radius: 10px; background: var(--line); transition: .15s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: .15s; }
.toggle[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.toggle[aria-pressed="true"] .sw { background: var(--ink); }
.toggle[aria-pressed="true"] .sw::after { left: 16px;
  background: var(--panel); }
/* The switch is what a salesperson presses on the floor iPad before
   turning it round: a finger gets 44px. */
@media (pointer: coarse) {
  .toggle { min-height: 44px; }
}

/* The quick links (BDC Desk F2, index.html's #quick): Recent Customers,
   Deal Finder, Zeus Radar and BDC Alert, to the right of the crumb. A link
   goes to a page and does nothing to a deal, so it is a plain press -- the
   panel, a hairline, ink-2 type, ink when hovered -- and never gold
   (CLAUDE.md: gold is Find Deals, the primary buttons, Ask Zeus). The one
   colour here is the BDC Alert's bubble: the house's red, with its number
   in tabular figures, on the button's top-right corner, ringed in the
   page's own ground so it reads off the button's edge in either theme.
   Every colour is a token the dark theme redefines (or, --red, keeps). */
.quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ql-wrap { position: relative; }
.ql { position: relative; display: inline-flex; align-items: center;
  gap: 6px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  line-height: 1; color: var(--ink-2); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
  cursor: pointer; white-space: nowrap; }
.ql:hover { color: var(--ink); border-color: var(--muted); }
.ql:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ql-ic { width: 16px; height: 16px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; }
.ql-n { position: absolute; top: -7px; right: -7px; min-width: 18px;
  height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg-app); }
/* Recent Customers' menu, under its button and over the page -- under the
   drawers (55), Ask Zeus (61), the search (65) and the phone's menu (70).
   A name in it is `private`, so Present Mode's one blur rule reaches it. */
.ql-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 45;
  width: 300px; max-height: 360px; overflow: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px; }
.ql-cust, .ql-all { display: flex; flex-direction: column;
  align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  font-family: inherit; background: none; border: 0; border-radius: 7px;
  padding: 7px 9px; color: var(--ink); cursor: pointer; }
.ql-cust:hover, .ql-all:hover { background: var(--panel-2); }
.ql-cust:focus-visible, .ql-all:focus-visible {
  outline: 2px solid var(--ink); outline-offset: -2px; }
.ql-cust-name { font-size: 13.5px; font-weight: 600; }
.ql-cust-when { font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.ql-all { margin-top: 4px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); border-top: 1px solid var(--line-2);
  border-radius: 0 0 7px 7px; }
.ql-note { margin: 6px 9px; font-size: 12.5px; color: var(--muted); }
/* A finger gets 44px: the managers desk on iPads on the floor. */
@media (pointer: coarse) {
  .ql { min-height: 44px; min-width: 44px; }
  .ql-cust, .ql-all { min-height: 44px; }
}
/* At 880px or less -- where the bar is a menu (P5-11) -- the links fold
   to icons in the top line, the words off the screen and still in the
   page, so a screen reader reads each link's name (BDC Alert's aria-label
   carries its own, with the number). Recent Customers' menu then hangs
   from the whole line, not its button, so at 390px it cannot run off the
   screen. */
@media (max-width: 880px) {
  .top { position: relative; }
  .quick { gap: 6px; }
  .ql { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .ql-words { position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; }
  .ql-wrap { position: static; }
  .ql-menu { left: 12px; right: 12px; width: auto; }
}

/* KPI tiles */
.kpi-row { display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(4, 1fr); }
.kpi {
  position: relative; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px 18px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .12s, box-shadow .12s;
}
/* No gold stripe across the top: a tile reports a number, and gold is for
   what a person presses. */
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-label { font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; }
.kpi-val { font-size: 29px; font-weight: 800; margin: 7px 0 2px;
  letter-spacing: -.02em; }
.kpi-val.good { color: var(--green); }
.kpi-val.warn { color: var(--amber); }
.kpi-val.accent { color: var(--brand-dark); }
.kpi-sub { font-size: 12px; color: var(--muted); }
/* Reports: responsive stat-card grid + spacing between report cards */
.report-kpis { display: grid; gap: 14px; margin: 4px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
#reports-body .card { margin-bottom: 18px; }
/* Sub-section headings inside the combined Inventory Analysis card */
.report-sub { margin: 22px 0 10px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  border-top: 1px solid var(--line-2); padding-top: 16px; }
.report-sub:first-of-type { margin-top: 8px; border-top: none; padding-top: 0; }
.report-sub .muted { text-transform: none; letter-spacing: 0; }
/* Click-through report rows/cards */
tr.drill { cursor: pointer; }
tr.drill:hover { background: var(--brand-soft); }
tr.drill td:first-child::after { content: " ›"; color: var(--muted); }
.kpi.drill { cursor: pointer; }
.kpi.drill:hover { box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow-md); }

/* Cards */
/* Hairline and space instead of a shadowed box. The shadow was doing the
   separating; a rule does it with less ink and leaves more room for cars. */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; padding: 20px;
  box-shadow: none; margin-bottom: 18px;
}
.card.narrow { max-width: 620px; }
.card-head { display: flex; align-items: center;
  justify-content: space-between; gap: 14px; margin-bottom: 16px;
  flex-wrap: wrap; }
.card-head h2 { font-size: 15px; }
.mode-badge { display: inline-block; margin-left: 10px; padding: 2px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; vertical-align: middle;
  background: var(--storm1); color: var(--gold1); }
.mode-badge.lease { background: var(--green-bg); color: var(--green); }
/* Retail/Lease (and Reports' Both/New/Used): a segmented control. The
   chosen segment is the panel lifted off a paper track, as the design
   draws it (P:146-148). It was gold1 -- and Lease a solid green -- which
   made a choice the desk already made the loudest thing on the card, and
   green is the colour of a deal that FITS. Both segments read the same
   way now; Find Deals beside them is the gold. */
.mode-toggle { display: inline-flex; margin-right: auto;
  background: var(--line-2); border-radius: 9px; padding: 3px; gap: 2px; }
.mode-seg { border: 0; background: transparent; cursor: pointer;
  padding: 5px 12px; border-radius: 7px; font-size: 12.5px;
  font-weight: 600; color: var(--muted);
  transition: background .12s, color .12s; }
.mode-seg:hover { color: var(--ink); }
.mode-seg.active { background: var(--panel); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.12); }
/* Lease bonus-cash eligibility checkboxes */
.lz-bonus-row { display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 18px; margin: 12px 0 0; padding: 10px 12px;
  background: var(--storm1); border: 1px solid var(--line);
  border-radius: 10px; }
.lz-bonus-label { font-weight: 700; font-size: 12px; color: var(--muted); }
.lz-bonus-row .chk { font-size: 13px; }

/* Retail vs Lease mode: show one set of controls, hide the other. */
.lease-only { display: none; }
#tab-finder.lease-mode .retail-only { display: none; }
#tab-finder.lease-mode .lease-only { display: block; }
.card-actions { display: flex; align-items: center; gap: 9px;
  flex-wrap: wrap; }

/* Remove number-input spinners (cleaner currency fields) */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }

/* Param grid — every input bottom-aligned on a shared baseline even
   when labels wrap to different line counts */
.params-grid { display: grid; gap: 18px 16px; align-items: end;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
.params-grid label { position: relative; display: flex;
  flex-direction: column; justify-content: flex-end; gap: 7px;
  min-height: 62px; font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.3; }
.params-grid input, .params-grid select {
  height: 42px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 9px; font-size: 15px; font-weight: 600;
  color: var(--ink); background: #fff; width: 100%;
}
.params-grid select { padding-right: 26px; }
.params-grid input:focus, .params-grid select:focus {
  outline: 3px solid var(--brand-soft); border-color: var(--brand);
}
.params-grid .pre, .params-grid .suf {
  position: absolute; bottom: 0; height: 42px; display: flex;
  align-items: center; color: var(--muted); font-size: 13px;
  font-weight: 700; pointer-events: none; }
.params-grid .pre { left: 12px; }
.params-grid .suf { right: 12px; }
.params-grid label:has(.pre) input { padding-left: 24px; }
.params-grid label:has(.suf) input { padding-right: 42px; }
.params-grid input:disabled { background: #f4f6fa; color: var(--muted);
  cursor: not-allowed; }
/* The buy rate a deal is worked at when it is not the Buy Rate box's own
   figure (buyRateHint). Sentence case under an uppercase label, and grey:
   it explains the box, it is not a control. `[hidden]` is restated: the
   browser's own display:none for it loses to any rule here that sets a
   display, and an empty note would then hold open a line. */
.buy-note { font-size: 11px; font-weight: 600; text-transform: none;
  letter-spacing: 0; line-height: 1.25; color: var(--muted); }
.buy-note[hidden] { display: none; }

.row-actions { display: flex; align-items: center; gap: 12px;
  margin-top: 18px; flex-wrap: wrap; }

/* Attachments on an opened message. A row you can click, because the point
   is getting the file out — the vendor's inventory export arrives this way. */
.msg-attach-h { margin: 12px 0 6px; font-size: 12px; font-weight: 600;
  opacity: .75; }
.msg-attach { display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 6px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; text-decoration: none;
  color: inherit; }
.msg-attach:hover { background: var(--panel); }
.msg-attach .muted { margin-left: auto; font-size: 12px; }

/* Listing copy: each block is a thing you paste somewhere, so each gets its
   own Copy button rather than one for the lot. */
.lc-block { border: 1px solid var(--line); border-radius: 10px;
  margin: 0 0 12px; overflow: hidden; }
.lc-head { display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--panel); font-size: 13px; }
.lc-head .muted { flex: 1; font-size: 12px; }
.lc-body { padding: 10px 12px; font-size: 13px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  max-height: 240px; overflow: auto; }
.lc-body.mono { font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.45; }
.lc-warn { border-left: 3px solid var(--gold1, #e89a12);
  background: var(--panel); padding: 9px 12px; margin: 0 0 12px;
  border-radius: 0 8px 8px 0; font-size: 13px; }

/* Who wrote the words, and the button that changes it. Sits above the copy
   blocks so the answer is read before the text is. */
.lc-write-row { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin: 0 0 12px; }
.lc-write-row .muted { font-size: 13px; }

/* A price that is a book value standing in for one the store never set.
   Deliberately quiet — a dotted underline and the same asterisk the
   substituted-cost column already uses. Loud enough to notice while quoting,
   not so loud it looks like an error on 49 cars at once. */
.est-price { text-decoration: underline dotted; text-underline-offset: 3px;
  opacity: .85; cursor: help; }

/* "Lot last refreshed …" above the inventory table. Colour-coded by how
   much it matters: green is informational, amber wants attention this week,
   red means the lot is stale RIGHT NOW and cars that sold are still showing. */
.sync-state { border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 10px; padding: 11px 16px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.5; background: var(--panel); }
.sync-state em { opacity: .8; }
.sync-state.ok   { border-left-color: var(--green); }
.sync-state.warn { border-left-color: var(--gold1, #e89a12); }
.sync-state.bad  { border-left-color: var(--red); }

/* A form that folds out inside a card it belongs to (Add a teammate), set
   apart from the list below it without becoming a second card. */
.inset-form { border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; margin-bottom: 18px; background: #fbfcfe; }

.rebate-box { margin-top: 16px; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; background: #fbfcfe; }
.rebate-box summary { cursor: pointer; font-weight: 700; font-size: 13px;
  color: var(--ink); }
.rebate-box summary .muted { font-weight: 500; }
.rebate-box .params-grid { margin-top: 14px; }
.reb-grid { display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px; }
.reb-row { display: grid; grid-template-columns: 1fr 140px; gap: 12px;
  align-items: center; }
.reb-row input { height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px; font-size: 14px;
  font-weight: 600; }
.reb-row input:focus { outline: 3px solid var(--brand-soft);
  border-color: var(--brand); }
#cond-filter { height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px; font-size: 14px;
  font-weight: 600; background: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 18px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 9px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .12s, border-color .12s,
  box-shadow .12s, transform .05s; white-space: nowrap;
}
.btn:hover { background: #f6f8fc; border-color: #d6dde8; }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(135deg, var(--gold1), var(--gold2));
  border-color: var(--gold2); color: var(--brand-ink);
  box-shadow: 0 4px 14px rgba(232,148,26,.40);
}
.btn.primary:hover { filter: brightness(1.05);
  box-shadow: var(--glow); transform: translateY(-1px); }
.btn.lg { min-height: 48px; padding: 0 20px; font-size: 15px; }
.btn.danger { color: var(--red); border-color: #f3c9c9; background: #fff; }
.btn.danger:hover { background: var(--red-bg); }
.btn.sm { min-height: 30px; padding: 0 11px; font-size: 12px;
  border-radius: 7px; }

/* ---------- Toolbar / inputs ---------- */
.results-toolbar { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; }
.results-toolbar input:not([type=checkbox]), #inv-filter, .lease-filter {
  height: 42px; padding: 0 13px; border: 1px solid var(--line);
  border-radius: 9px; min-width: 230px; font-size: 14px; }
.results-toolbar input:focus, #inv-filter:focus, .lease-filter:focus {
  outline: 3px solid var(--brand-soft); border-color: var(--brand); }
.lease-filter { width: 100%; box-sizing: border-box; margin: 0 0 12px; }
.chk { display: flex; align-items: center; gap: 7px; font-weight: 600;
  color: var(--muted); font-size: 13px; cursor: pointer; }
/* Ink, not gold: a tick records a choice, and gold means a press
   (zeus-frontend). */
.chk input { width: 15px; height: 15px; accent-color: var(--ink); }

/* ---------- Tables ---------- */
.table-scroll { overflow: auto; max-height: 60vh;
  border: 1px solid var(--line); border-radius: 10px; }
table.data { border-collapse: collapse; width: auto; font-size: 13px; }
table.data th, table.data td { padding: 8px 7px; text-align: right;
  white-space: nowrap; border-bottom: 1px solid var(--line-2); }
/* Digits line up under digits, so $1,410 cannot be read as $14,100 at a
   glance down the column. */
table.data td { font-variant-numeric: tabular-nums; }
table.data th.l, table.data td.l { text-align: left; }
table.data thead th {
  position: sticky; top: 0; background: #12161f; z-index: 1;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #aab6cc; cursor: pointer; user-select: none;
  border-bottom: 1px solid #0f1626;
}
table.data thead th:hover { color: #fff; }
table.data thead th .arr { color: var(--gold1); font-size: 10px; }
table.data tbody tr { transition: background .08s; }
table.data tbody tr:nth-child(even) { background: #faf9f7; }
table.data tbody tr:hover { background: #f1eee7; }
table.data tbody tr.clickable { cursor: pointer; }
table.data td.l { font-weight: 600; }
.stock-link { color: var(--brand-dark); font-weight: 800;
  text-decoration: none; border-bottom: 1px dotted var(--brand); }
.stock-link:hover { color: var(--brand);
  border-bottom-style: solid; }
.pos { color: var(--green); font-weight: 700; }
.neg { color: var(--red); font-weight: 700; }

/* A plain-English answer at the top of a diagnostic. .pos/.neg on their own
   are built for one number in a table cell — on a paragraph they turn the
   whole thing bold and coloured, which is unreadable. Here the colour is a
   rule down the side and the text stays normal. */
.verdict { margin: 12px 0; padding: 4px 0 4px 14px; line-height: 1.5;
  border-left: 3px solid var(--line); }
.verdict.pos, .verdict.neg { font-weight: 400; color: var(--ink); }
.verdict.pos { border-left-color: var(--green); }
.verdict.neg { border-left-color: var(--red); }
.warn-txt { color: var(--amber); font-weight: 700; }
/* Recon status bubble in the results (green ready / amber in-service / red not serviced) */
.recon-dot { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 11px;
  font-weight: 800; line-height: 1; color: #fff; }
.recon-dot.recon-ready { background: var(--green); }
.recon-dot.recon-service { background: var(--amber); }
.recon-dot.recon-none { background: var(--red); }

/* Open-recall flag riding next to the recon bubble in the results */
.recall-flag { display: inline-block; margin-left: 5px; color: var(--red);
  font-weight: 800; cursor: default; }

/* "Lease cash is from a prior month" prompt on the incentive status line */
.stale-warn { display: inline-block; margin-top: 4px; padding: 3px 9px;
  border-radius: 6px; background: var(--amber-bg); color: var(--amber);
  border: 1px solid var(--amber); font-weight: 700; }
#incentive-status.is-stale { color: var(--ink, inherit); }

/* Recall list inside the vehicle detail popup */
#recall-box h4 { margin: 0 0 8px; }
#recall-box .recall-count-open { color: var(--red); font-weight: 700;
  font-size: 12px; }
.recall-item { border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; background: var(--panel); }
.recall-item.open { border-left-color: var(--red); background: var(--red-bg); }
.recall-item.closed { border-left-color: var(--green); }
.recall-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.recall-badge { font-size: 11px; font-weight: 800; padding: 1px 7px;
  border-radius: 999px; white-space: nowrap; }
.recall-badge.open { background: var(--red); color: #fff; }
.recall-badge.closed { background: var(--amber-bg); color: var(--green); }
.recall-desc { margin: 4px 0 0; font-size: 13px; }
.recall-line { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.recall-line strong { color: var(--ink); }

/* Live OEM incentives (reference list in the new-car detail) */
#incentive-box h4 { margin: 0 0 8px; }
.inc-group { margin: 0 0 8px; }
.inc-group-h { font-weight: 800; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin: 6px 0 3px; }
.inc-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.inc-row:last-child { border-bottom: 0; }
.inc-amt { flex: 0 0 96px; font-weight: 800; color: var(--green); }
.inc-name { flex: 1; }
.inc-end { flex: 0 0 auto; font-size: 12px; }
.inc-tag { display: inline-block; font-size: 10px; font-weight: 700;
  padding: 0 6px; border-radius: 999px; background: var(--amber-bg);
  color: var(--amber); vertical-align: middle; }
.inc-tag.ok { background: var(--green-bg); color: var(--green); }
.inc-cash-sum { margin: 2px 0 10px; font-size: 14px; }
.inc-cash-sum strong { color: var(--green); }

/* Conditional-offer pills on each vehicle card (customer must qualify) */
.cond-offers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 8px 0 2px; }
.cond-offers-h { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-right: 2px; }
.cond-pill { display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.cond-pill.is-clickable { cursor: pointer; font-family: inherit; }
.cond-pill.is-clickable:hover { background: #ddd6fe; border-color: #a78bfa; }
.cond-pill.is-clickable.active { background: #6d28d9; color: #fff;
  border-color: #6d28d9; }
.cond-pill.is-clickable.active::before { content: "✓ "; }
.cond-hint { font-size: 11px; }
.veh-rebates { margin: 8px 0 2px; max-width: 640px;
  overflow-wrap: anywhere; }
.reb-web { font-size: 12px; margin-top: 3px; }
.reb-nat { font-size: 13px; margin-bottom: 6px; }
.reb-nat-h { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-right: 4px; }
.reb-nat strong { color: var(--green); }
.wd-cash-note { font-size: 12px; margin: 6px 0 0; }
/* Under the Sale price box when the car has no asking price: the figure
   is a J.D. Power stand-in, which the line on the customer's card says and
   the box did not. A grid row of its own in .wd-inputs, so no margin. */
.wd-price-note { font-size: 12px; margin: -2px 0 2px; }
.reb-audit-row { margin-top: 6px; }
.audit-off { opacity: .45; }
.audit-off td { text-decoration: line-through; text-decoration-color:
  rgba(0,0,0,.25); }

/* Work Deal: interactive per-vehicle desking pop-out */
.wd-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px;
  margin-top: 10px; align-items: start; }
@media (max-width: 640px) { .wd-grid { grid-template-columns: 1fr; } }
/* One column. A desk reads a worksheet DOWN the page in the order the
   deal is built, and two columns break that order in half. Term and
   rate are the deliberate exception -- they pair above the payment. */
.wd-inputs { display: grid; grid-template-columns: 1fr; gap: 4px 12px; }

/* Label BESIDE the box, not above it. Stacked, eleven fields ran past the
   bottom of the modal and the desk had to scroll to reach the tax and the
   products; on one line each they all fit. `.modal-card label` sets
   display:block on every label in a modal and beats a bare `.wd-fld` on
   specificity, so this has to match at least as specifically -- the same
   reason `.wd-check` below is written the way it is. */
.modal-card label.wd-fld, label.wd-fld {
  display: grid; grid-template-columns: 1fr 122px; align-items: center;
  gap: 10px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); }
/* `.modal-card label input` pins every modal box to a 42px height with a
   6px top margin, and the label itself to a 14px bottom margin. Stacked that
   is 62px a field, which is what pushed eleven fields past the bottom of the
   screen. These have to out-specify that rule, not merely follow it. */
.modal-card label.wd-fld { margin-bottom: 0; }
.modal-card label.wd-fld input, .modal-card label.wd-fld select {
  height: 30px; padding: 0 9px; margin-top: 0; font-size: 14px;
  font-weight: 700; text-transform: none; letter-spacing: 0; }
.wd-fld > span { line-height: 1.15; }
.wd-out { background: var(--panel, #f7f8fa); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; }
.wd-pay { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wd-pay-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
.wd-pay-amt { font-size: 26px; font-weight: 800; color: var(--green);
  line-height: 1.05; }
.wd-pay-mo { font-size: 15px; font-weight: 700; color: var(--muted);
  margin-left: 2px; }
.wd-lines.kv { margin: 0; }

/* Inline "field + button" row. Named for the old Tools tab; still used by
   the email test and the incentive probe, so it outlived that tab. The
   uppercasing went with it - it suited plates and VINs, not addresses. */
.tool-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 10px 0; }
.tool-form input { flex: 1; min-width: 90px; }

/* Clickable comp count -> per-dealer 50-mile comps modal */
.mc-comps-btn { background: none; border: none; padding: 0; font: inherit;
  font-weight: 800; color: var(--brand-dark); cursor: pointer;
  text-decoration: underline dotted; }
.mc-comps-btn:hover { color: var(--brand); }

/* Resizable + reorderable result columns. Keep the header STICKY (sticky also
   anchors the absolute resize handle, so we don't fall back to relative — that
   was making the header scroll away). */
#results thead th { position: sticky; top: 0; z-index: 3; cursor: grab; }
#results thead th:active { cursor: grabbing; }
#results thead th.col-dragging { opacity: .45; }
#results thead th.col-drop { outline: 2px dashed var(--gold1);
  outline-offset: -2px; }
body.col-resizing #results thead th { cursor: col-resize; }
#results.cols-fixed { table-layout: fixed; }
#results.cols-fixed th, #results.cols-fixed td { overflow: hidden;
  text-overflow: ellipsis; }
/* The full-width expander row must not be clipped by fixed-column widths. */
#results.cols-fixed .veh-exp td { overflow: visible; text-overflow: clip; }
#results .col-resizer { position: absolute; top: 0; right: 0; width: 9px;
  height: 100%; cursor: col-resize; touch-action: none; user-select: none;
  z-index: 2; }
#results .col-resizer:hover,
body.col-resizing #results .col-resizer { background: var(--gold1); opacity: .5; }
body.col-resizing { cursor: col-resize; user-select: none; }

/* Lease vs Finance comparison */
.lvf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 8px; }
.lvf-col { border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  background: rgba(15,22,38,.04); }   /* subtle light surface; dark-mode below */
.lvf-col.accent { border-color: var(--brand); background: var(--brand-soft); }
.lvf-title { font-weight: 800; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.lvf-pmt { font-size: 30px; font-weight: 800; margin: 4px 0 12px;
  color: var(--ink); }
.lvf-pmt .lvf-mo { font-size: 15px; font-weight: 600; color: var(--muted); }
.lvf-lines { display: grid; grid-template-columns: max-content auto;
  gap: 6px 12px; font-size: 13px; }
.lvf-lines .k { color: var(--muted); }
.lvf-lines .v { font-weight: 600; text-align: right; }
html.dark .lvf-col { background: rgba(255,255,255,.03); }

/* Window sticker (VIN explosion) */
.ws-img { display: block; max-width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; }
.ws-highlights { margin: 4px 0 0; padding-left: 18px; }
.ws-highlights li { margin: 2px 0; font-size: 13px; }

/* NeoVIN factory packages sit in a column to the RIGHT of the used-car specs,
   as wrapping pills, so the whole build reads at a lateral glance. */
.veh-specs-wrap { display: flex; flex-wrap: wrap; gap: 6px 28px;
  align-items: flex-start; }
.vin-decode { flex: 1 1 240px; min-width: 200px; max-width: 560px; }
.vd-col-h { font-weight: 700; font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; }
.vd-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.vd-raw { margin-top: 8px; font-size: 11px; opacity: .7; }
.vd-opt { font-size: 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 8px; white-space: nowrap; }
.vd-opt.has-det { cursor: pointer; border-color: var(--gold1); }
.vd-opt.has-det:hover { background: var(--brand-soft); }
.vd-opt.open { background: var(--brand-soft); border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset; }
.vd-info { font-size: 10px; color: var(--gold1); }
.vd-detail { display: none; margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 8px; background: var(--panel); }
.vd-detail.show { display: block; }
.vd-detail-h { font-weight: 800; font-size: 12px; margin-bottom: 6px; }
.vd-detail-items { display: flex; flex-wrap: wrap; gap: 5px; }
.vd-detail-item { font-size: 12px; background: rgba(15,22,38,.04);
  border-radius: 6px; padding: 1px 8px; }
html.dark .vd-detail-item { background: rgba(255,255,255,.06); }

/* Team page: role badges + tidy action buttons */
.role-badge { display: inline-block; font-size: 11px; font-weight: 800;
  letter-spacing: .02em; padding: 2px 10px; border-radius: 999px; }
.role-badge.admin { background: var(--brand-soft); color: var(--brand); }
.role-badge.bdc { background: var(--green-bg); color: var(--green); }
.role-badge.manager { background: rgba(15,22,38,.06); color: var(--muted); }
.role-badge.sales { background: rgba(15,22,38,.06); color: var(--muted); }
html.dark .role-badge.manager,
html.dark .role-badge.sales { background: rgba(255,255,255,.08); }
.row-actions-cell { white-space: nowrap; }
#users-table td { vertical-align: middle; }

/* Permission-driven chrome. Which TABS are visible is decided in JS
   (applyPerms adds .hidden per permission) — a CSS rule can't express
   "hide everything except one tab" now that access is per-account.
   no-cost  = can't see cost/book/market/gross
   no-edit  = can't add, re-price or mark vehicles sold */
body.no-cost .veh-books { display: none; }
body.no-cost #tab-inventory .page-head p { display: none; }
body.no-edit #tab-inventory .card-actions .btn { display: none; }
/* Simplified New/Used + body-type filter bar for cost-free inventory views. */
#bdc-inv-controls { display: none; }
body.is-bdc #bdc-inv-controls { display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px; margin: 0 0 12px; }

/* ---------- Configurator / Settings grouping ---------- */
/* A heading that introduces a group of cards rather than sitting inside one,
   so a long page reads as sections instead of an undifferentiated stack. */
.config-group-head {
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
  margin: 30px 0 2px; padding-top: 18px;
  border-top: 2px solid var(--line);
}
.config-group-head + .muted { margin: 0 0 14px; }
/* Platform settings: one mailbox and one backup serve every dealership, so
   this group becomes global-admin only once other stores are onboarded. */
.config-platform { margin-top: 8px; }

/* Service credentials (API keys, client secrets, integration passwords).
   Masked visually, but deliberately NOT type="password": browsers pair a
   password field with any email-looking field on the same page and then
   offer to save a login every time ANY button is pressed. These aren't the
   user's password and no password manager should touch them. */
input.secret {
  -webkit-text-security: disc;
  text-security: disc;
  font-family: inherit;
}

/* Set-up progress strip on the Dealership card */
.setup-progress { display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 10px 12px; border-radius: 9px;
  background: var(--amber-bg); color: var(--amber);
  font-size: 13px; font-weight: 600; }
.setup-progress:empty { display: none; }
.setup-count { flex: none; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--amber); color: #fff; border-radius: 999px;
  padding: 1px 9px; font-size: 12px; }
html.dark .setup-progress { background: rgba(180,83,9,.22); }

/* The remaining-steps list shown after New Dealer Set Up */
.setup-list { list-style: none; margin: 14px 0 4px; padding: 0; }
.setup-list li { display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.setup-list li:last-child { border-bottom: 0; }
.setup-list .tick { flex: none; font-weight: 800; width: 1.1em; }
.setup-list li.done .tick { color: var(--green); }
.setup-list li.todo .tick { color: var(--muted); }
.setup-list li.todo strong { color: var(--ink); }

/* Connection groups inside the Configurator */
.conn-head { display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 800; margin: 22px 0 8px;
  padding-top: 14px; border-top: 1px solid var(--line-2); }
.card > .conn-head:first-of-type { border-top: 0; padding-top: 0;
  margin-top: 16px; }
/* A card that OPENS on one, with no h2 above it: Feeds & Vendors, whose
   heading became the page title in P5-12. */
.card > .conn-head:first-child { margin-top: 0; }
.conn-state { font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.conn-state.on  { background: var(--green-bg); color: var(--green); }
.conn-state.off { background: rgba(15,22,38,.07); color: var(--muted); }
html.dark .conn-state.off { background: rgba(255,255,255,.09); }
.store-picker select { width: 100%; }

/* ---------- Inbox ---------- */
.inbox-wrap { display: grid; grid-template-columns: 170px 1fr; gap: 18px;
  align-items: start; }
.inbox-rail { display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--line-2); padding-right: 12px; }
.folder-btn { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font: inherit; font-size: 13.5px;
  font-weight: 600; text-align: left; cursor: pointer; }
.folder-btn:hover { background: var(--line-2); }
.folder-btn.active { background: var(--brand-soft); color: var(--brand-dark);
  font-weight: 800; }
.folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-count { flex: none; background: var(--brand); color: #1c1405;
  border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 800; }
.inbox-rail .btn { margin-top: 8px; }
html.dark .folder-btn:hover { background: rgba(255,255,255,.07); }
html.dark .folder-btn.active { background: rgba(232,154,18,.18);
  color: var(--gold1); }

.inbox-list { display: flex; flex-direction: column; min-width: 0;
  transition: opacity .12s ease; }
/* Fetching. Deliberately subtle and layout-neutral: the rows stay exactly
   where they are, so switching folders doesn't make the page jump. */
.inbox-list.busy { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .inbox-list { transition: none; }
}
.inbox-row { display: grid; grid-template-columns: 175px 1fr 130px 26px;
  gap: 12px; align-items: baseline; padding: 11px 6px; cursor: pointer;
  border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.inbox-del { border: 0; background: transparent; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px;
  border-radius: 6px; visibility: hidden; }
.inbox-row:hover .inbox-del { visibility: visible; }
.inbox-del:hover { background: var(--red-bg); color: var(--red); }
.msg-filing { display: flex; gap: 10px; align-items: center;
  margin-top: 14px; }
.msg-filing select { flex: 1; height: 38px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px; font-size: 13px;
  font-weight: 600; color: var(--ink); background: #fff; }
html.dark .msg-filing select { background: #0f1830; color: var(--ink);
  border-color: var(--line); }
.inbox-row:hover { background: var(--line-2); }
.inbox-row.unread { font-weight: 700; }
.inbox-row.unread .inbox-from::before { content: "\25CF";
  color: var(--brand); margin-right: 6px; font-size: 10px;
  vertical-align: middle; }
.inbox-from { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.inbox-subj { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.inbox-subj .muted { font-weight: 400; }
.inbox-when { text-align: right; white-space: nowrap; font-size: 12.5px; }
@media (max-width: 900px) {
  .inbox-wrap { grid-template-columns: 1fr; }
  .inbox-rail { flex-direction: row; flex-wrap: wrap; border-right: 0;
    border-bottom: 1px solid var(--line-2); padding: 0 0 10px; }
  .inbox-rail .btn { margin-top: 0; width: auto; }
  .inbox-row { grid-template-columns: 1fr 26px; gap: 3px 8px; }
  .inbox-when { text-align: left; }
  .inbox-del { visibility: visible; }
}
/* Message bodies come from outside senders — rendered in a sandboxed frame,
   never injected into the app's own document. */
.msg-body { width: 100%; height: 34vh; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; }
.modal-card textarea { display: block; width: 100%; margin-top: 6px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  font: 14px/1.5 inherit; font-weight: 600; color: var(--ink);
  background: #fff; resize: vertical; }
html.dark .modal-card textarea { background: #0f1830; color: var(--ink);
  border-color: var(--line); }
html.dark .msg-body { background: #f7f8fb; }

/* ---------- User guide dialog ---------- */
.guide-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 4px; }
.guide-head h3 { margin: 0; }
/* Its own scroll box so a long guide doesn't push the Close button off. */
.guide-body { max-height: 62vh; overflow-y: auto; padding-right: 10px;
  margin: 10px 0 4px; font-size: 14px; line-height: 1.6; color: var(--ink); }
/* The dialog header already shows the title. The H1 stays in the HTML so
   the printed sheet and the emailed copy are self-contained. */
.guide-body > h1:first-child { display: none; }
.guide-body h1 { font-size: 19px; margin: 0 0 10px; }
.guide-body h2 { font-size: 15px; margin: 22px 0 8px; color: var(--brand-dark); }
.guide-body h3 { font-size: 14px; margin: 16px 0 6px; }
.guide-body p { margin: 0 0 11px; }
.guide-body ul { margin: 0 0 12px; padding-left: 22px; }
.guide-body li { margin-bottom: 5px; }
.guide-body blockquote { margin: 10px 0; padding: 8px 14px;
  border-left: 3px solid var(--brand); background: rgba(232,154,18,.07);
  color: var(--muted); border-radius: 0 8px 8px 0; }
.guide-body code { background: rgba(15,22,38,.06); padding: 1px 6px;
  border-radius: 5px; font-size: 13px; }
.guide-body hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
html.dark .guide-body code { background: rgba(255,255,255,.09); }

/* Permission checkboxes in the Edit-access dialog. Scoped to .modal-card so
   these beat the stacked "caption above a full-width input" label styling
   above — a checkbox belongs beside its text, not under it. */
.perm-head { margin: 16px 0 8px; font-size: 13px; color: var(--ink); }
.perm-grid { display: grid; gap: 4px 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.modal-card .perm-item { display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 3px 0; font-size: 13px; font-weight: 600;
  color: var(--ink); text-transform: none; letter-spacing: 0;
  cursor: pointer; }
.modal-card .perm-item input[type="checkbox"] {
  display: inline-block; width: 16px; min-width: 16px; height: 16px;
  margin: 0; padding: 0; flex: 0 0 auto; accent-color: var(--ink); }
.modal-card .perm-item input:disabled { cursor: default; }
.modal-card .perm-item input:disabled + span { opacity: .5; }
/* Access the signed-in account cannot pass on. The label carries the reason
   as a title, so the cursor has to say the whole row is the hover target --
   the greying above is on the text and reads as "off", not as "not yours". */
.modal-card .perm-item.perm-locked { cursor: help; }

/* Who changed whose access: a teammate's History and the admin's Access
   log (decision 0012 rule 10). A record, not an action, so no gold: the
   time sits over each line in the muted grey, a hairline between entries,
   and the time's digits in tabular-nums like every other figure. */
.access-log { list-style: none; margin: 0; padding: 0; }
.access-log li { padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.45; color: var(--ink); }
.access-log li:first-child { border-top: 0; padding-top: 0; }
.access-log .access-when { font-size: 11px; font-variant-numeric: tabular-nums;
  margin-bottom: 2px; }
.access-log .access-moved { font-size: 12px; margin-top: 3px; }

/* Sortable-column arrow on data tables (matches the Deal Finder's .arr) */
.sort-arr { color: var(--gold1); font-size: 10px; margin-left: 4px; }

/* Deal context strip — whose deal, where, what tax */
.deal-context { font-size: 13px; font-weight: 600; margin-left: 10px; }

/* Inline field warning (e.g. doc fee over the IL cap) */
.field-warn { display: none; font-size: 11px; font-weight: 700;
  color: var(--red); margin-top: 3px; }
.field-warn.on { display: block; }

/* Print dialog live payment echo */
.pq-echo { font-weight: 700; color: var(--brand-dark); margin: 4px 0 0;
  min-height: 18px; }

/* Search busy state */
#run.busy { opacity: .7; pointer-events: none; position: relative; }
#run.busy::after { content: " …"; }

/* Touch targets for tablet desking (managers work on iPads on the floor) */
@media (pointer: coarse) {
  .btn.sm { min-height: 44px; padding: 0 14px; }
  .exp-toggle, .pin-toggle { min-width: 40px; min-height: 40px;
    font-size: 18px; padding: 6px; }
  .chk input, input[type=checkbox] { width: 22px; height: 22px; }
  table.data th, table.data td { padding: 11px 9px; }
  .sort-chips .chip, .type-chips .chip { padding: 9px 14px; }
  select, input:not([type=checkbox]):not([type=radio]) { min-height: 42px; }
}

/* Rebate qualification checkboxes (retail) */
#retail-rebate-row { margin-top: 12px; }
#rebate-checks { display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 18px; }
#rebate-checks .chk.rb-zero { opacity: .45; }

/* Quick-sort chips + body-type filter chips on the results toolbar */
.sort-chips, .type-chips { display: flex; gap: 6px; }
.sort-chips .chip, .type-chips .chip {
  border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700;
  color: var(--muted); cursor: pointer; }
.sort-chips .chip:hover, .type-chips .chip:hover { border-color: var(--ink); }
html.dark .sort-chips .chip, html.dark .type-chips .chip {
  background: transparent; }
/* A pressed chip is filled in ink and the rest are outlined, as on Equity
   Radar's chips and in the design (P:173). They were gold -- brand-soft on
   the sort chips, solid brand on the type chips -- which made a filter the
   desk already set the loudest thing on the toolbar. The html.dark half is
   load-bearing: `html.dark .sort-chips .chip` above outranks a bare
   `.chip.active`, and without it a pressed chip in the dark theme is
   panel-coloured type on a transparent chip -- invisible (test_shell). */
.sort-chips .chip.active, .type-chips .chip.active,
html.dark .sort-chips .chip.active, html.dark .type-chips .chip.active {
  background: var(--ink); border-color: var(--ink); color: var(--panel); }

/* ---------- Open-deal tabs (multi-deal switcher) ---------- */
.deal-tabs { display: flex; align-items: flex-end; gap: 6px;
  flex-wrap: wrap; margin: 0 0 12px; }
.deal-tab { display: inline-flex; align-items: center; gap: 8px;
  max-width: 260px; padding: 8px 12px; border: 1px solid var(--line);
  border-bottom: none; background: var(--panel); color: var(--muted);
  border-radius: 10px 10px 0 0; font-size: 13px; font-weight: 700;
  cursor: pointer; }
/* Which deal is open is a label, so it is ink: an ink edge and an ink rule
   along the foot of the tab (P:218). It was a gold edge and a gold rule. */
.deal-tab:hover { border-color: var(--ink); color: var(--ink); }
.deal-tab.active { background: var(--card, var(--panel)); color: var(--ink);
  border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.deal-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.deal-tab-x { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 15px;
  line-height: 1; color: var(--muted); }
.deal-tab-x:hover { background: var(--brand-soft); color: var(--brand-dark); }
.deal-tab-add { padding: 8px 12px; border: 1px dashed var(--line);
  background: transparent; color: var(--muted); border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer; }
.deal-tab-add:hover { border-color: var(--brand); color: var(--brand-dark); }
/* A tab opened from Equity Radar's Work deal: a small outlined label in ink.
   It reports where the tab came from -- and that it is not kept -- and
   nobody presses it, so it is not gold. */
.deal-tab-radar { flex: 0 0 auto; padding: 1px 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--muted); }

/* The strip under a Radar tab's title: who the owner is and the two lines to
   check. Ink on the ruled paper, like the notices beside it -- it reports;
   its one button (Back to the list) is a plain one. A full row of the
   wrapping card head, figures lined up. */
.radar-from { flex: 1 1 100%; display: flex; flex-direction: column;
  gap: 4px; margin-top: -4px; padding: 6px 10px;
  border-left: 3px solid var(--ink); font-size: 13px; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.radar-from-line .btn.sm { margin-left: 6px; }
html.dark .deal-tab { background: transparent; }
html.dark .deal-tab.active { background: #0f1830; }

/* Payment matrix in the vehicle popup */
.pm-box { margin-top: 16px; border-top: 1px solid var(--line);
  padding-top: 12px; }
.pm-box h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.pm-table { width: auto; }
.pm-table td.hl { background: var(--brand-soft); font-weight: 800; }
.pm-solve { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; }
.pm-solve input { width: 90px; height: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 8px; }

/* Present Mode — hide dealer-only money while a customer is watching */
body.present .dealer-col { display: none !important; }
/* Same columns, hidden for accounts without see.cost. The server already
   withholds the values; this stops empty "Cost"/"Gross" headers implying
   the data is merely missing. */
body.no-cost .dealer-col { display: none !important; }
body.present .veh-books { display: none !important; }
/* The board's "Pmt from: Max sale price" box: with the customer looking the
   Est. Pmt column is always the payment at the price she sees (pmtOf), so
   the box that would fill it with the max sale price's goes too. */
body.present .pmt-basis { display: none !important; }
/* The over-advance mark is a WARNING ABOUT THE PAYMENT BESIDE IT, not a
   dealer figure, so it deliberately survives both rules above -- it used to
   carry `dealer-col` and was therefore hidden from a customer-present screen
   and from every account without see.cost, the two audiences most likely to
   act on the capped payment it warns about. The dollar gap stays withheld;
   the warning does not. */
.oa-mark { color: var(--neg, #b4232a); font-weight: 800; cursor: help; }
/* What Zeus noticed is the desk's, not the customer's: the follow-up note
   is a private word to the desk, and "her Wrangler sold Tuesday" is not a
   line to read over her shoulder. Both copies go -- the strip under the
   deal's title and the lines in the chat's greeting. */
body.present .notice-strip { display: none !important; }
body.present .ask-notices { display: none !important; }
/* ...and so is the line under an answer saying the deal's lender is not on
   the store's list ("reload the page", "Store Setup"): it would sit under
   the newest answer, the one the customer may read (askLenderNote). */
body.present .ask-note { display: none !important; }
/* The top line says so on every screen (P5-5). The switch's own on-state
   is its aria-pressed (the top line's rules): ink, not gold. */
body.present .present-flag { display: inline-block; }
/* Top Gross is a sort by the dealer's money, and the order alone tells the
   customer which car makes the store the most. setPresentMode puts a board
   sorted by it back on Ranked. */
body.present .sort-chips .chip[data-sort="gross"] { display: none !important; }
/* Every OTHER customer's name blurs (three-tools P5-9; decision 0010's
   2026-09-24 answer 4). The renderers mark what this reaches `private` --
   the other deal tabs, Customers and Follow-ups rows, Saved Deals, the
   Inbox, "Who bought it?", Radar's owners and Ask Zeus's older turns -- and
   never the card on the open deal: that is the person at the desk.
   COSMETIC, never containment: the names stay in the page, a screen reader
   reads them and they print. */
body.present .private { filter: blur(6px); pointer-events: none; user-select: none; }

/* Pin & Compare */
.pin-toggle { border: 0; background: none; cursor: pointer; font-size: 14px;
  color: var(--muted); padding: 0 4px; }
.pin-toggle.on { color: var(--gold1); }
.compare-bar { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin: 10px 0 12px; padding: 9px 12px;
  background: var(--brand-soft); border: 1px solid var(--brand);
  border-radius: 10px; }
.cmp-chip { display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; font-size: 12px;
  font-weight: 700; margin-right: 6px; }
.cmp-chip button { border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 12px; }
.cmp-table th, .cmp-table td { white-space: normal; }
.cmp-table thead th { min-width: 150px; }

/* Multi-lender comparison */
.lc-table tr.lc-over td { opacity: .6; }
.lc-table tr.lc-no td { opacity: .5; }
.lc-info { cursor: help; color: var(--muted); font-size: 12px; }

/* F&I product menu */
.fi-grid { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.fi-col { border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  text-align: center; }
.fi-col.accent { border-color: var(--brand); background: var(--brand-soft); }
.fi-label { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); }
.fi-pay { font-size: 22px; font-weight: 800; margin: 4px 0 0; }
.fi-pay .fi-mo { font-size: 12px; font-weight: 600; color: var(--muted); }
.fi-delta { font-size: 12px; font-weight: 700; color: var(--brand-dark); }
.fi-gross { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* A column at its own max sale price says the price; one the bank won't
   fund at the menu's price says that. */
.fi-at { font-size: 12px; color: var(--muted); }
.fi-over { font-size: 11.5px; font-weight: 700; margin-top: 4px; }
.pm-legend { margin: 6px 0 0; font-size: 12px; }
/* Work Deal's line under the payment, and a printed sheet's, when the bank
   won't fund the deal at its price. */
.wd-oa { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; }
.ps-oa { margin: 10px 0 0; font-size: 12px; }
.empty { text-align: center; color: var(--muted); padding: 38px 10px;
  font-size: 14px; }

.badge { padding: 4px 11px; border-radius: 999px; font-weight: 800;
  font-size: 11.5px; display: inline-block; }
/* Fits, Close and Over are read by shape as much as by colour: Over is
   outlined where the others are filled, so the row still answers for
   anyone who does not see red and green apart. */
.badge.fit { background: #e6f2ec; color: #2f7d5b; }
.badge.close { background: #fbf1dc; color: #9a6b10; }
.badge.over { background: #fff; color: #a33a32; box-shadow: inset 0 0 0 1px #e2c4c1; }
.badge.none { background: #efedE7; color: var(--muted); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(7,11,22,.62);
  backdrop-filter: blur(3px); display: grid; place-items: center;
  z-index: 50; padding: 20px; }
.modal-card { background: #fff; border-radius: 16px; padding: 26px;
  max-width: 640px; width: 100%; max-height: 90vh; overflow: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  border-top: 4px solid var(--brand); }
.modal-card h3 { margin: 0 0 4px; font-size: 19px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px;
  flex-wrap: wrap; margin-top: 22px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 9px 18px;
  margin: 16px 0; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; }
.kv .total { border-top: 2px solid var(--line); padding-top: 10px;
  font-size: 17px; }
/* A note under a line of the car panel, across both columns (detailNote):
   "Bank won't fund it" under the payment it qualifies. In the value column
   it widened that column to the whole sentence and folded every label
   beside it onto two and three lines. */
.kv .kv-note { grid-column: 1 / -1; text-align: right; margin-top: -5px; }
.modal-card label { display: block; font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; margin-bottom: 14px;
  letter-spacing: .04em; }
.modal-card label input, .modal-card label select {
  display: block; width: 100%; height: 42px; padding: 0 12px;
  margin-top: 6px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; }
.modal-card label input:focus,
.modal-card label select:focus { outline: 3px solid var(--brand-soft);
  border-color: var(--brand); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px 16px; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 26px; left: 50%;
  transform: translateX(-50%); background: #0f1626; color: #fff;
  padding: 13px 24px; border-radius: 11px; font-weight: 700; z-index: 80;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); }
/* No gold rule down the side: a toast reports, and nobody presses it. */
.toast.bad { background: var(--red); }

/* ---------- Search: Ctrl K (P5-8, the design's P:346-354) ----------
   One box over every screen: above the drawers (55), the bars (59/60) and
   the Ask Zeus panel (61), under a toast (80) so what a pick says is seen.
   A row is a thing to pick and the chosen one is a state, so no gold: the
   chosen row is the --line-2 fill. The figures in it -- stock numbers,
   cells, days -- line up. */
.palette-wrap { position: fixed; inset: 0; z-index: 65; display: flex;
  justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px; background: rgba(10,12,18,.42); }
.palette { width: min(620px, 100%); background: var(--panel);
  color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md); overflow: hidden; }
.palette input { width: 100%; padding: 16px 18px; border: 0;
  border-bottom: 1px solid var(--line); background: transparent;
  color: var(--ink); font-family: inherit; font-size: 16px; outline: 0; }
.pal-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.pal-list:empty { display: none; }
.pal-sec { padding: 10px 12px 4px; font-size: 10.5px; font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pal-item { display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pal-item:hover { background: var(--panel-2); }
.pal-item.on { background: var(--line-2); }
.pal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.pal-item small { margin-left: auto; flex: none; color: var(--muted);
  font-size: 12px; white-space: nowrap; }
.pal-none { padding: 12px; color: var(--muted); font-size: 13px; }
@media (pointer: coarse) {
  .pal-item { min-height: 44px; }
}

/* ---------- Print customer sheet ---------- */
@media print {
  /* margin:0 drops Chrome's auto header/footer (title, URL, date, page#) */
  @page { size: letter; margin: 0; }
  /* Hide everything except the print sheet from layout, so the (tall)
     app behind it doesn't spill onto blank extra pages. */
  body > *:not(#print-area) { display: none !important; }
  /* !important so this beats the screen-hide rule below it (equal
     specificity, later in source) when the print media query is active. */
  #print-area { display: block !important; position: static;
    padding: 14mm 16mm; color: #000; }
  /* With @page's margin at 0 the inset is that padding, and a page break
     slices it: Equity Radar's call list runs to many pages, and pages 2 on
     began about 2 mm from the paper's edge (headless Chrome, 150 owners).
     Cloned, every page the sheet runs to gets its own. Only the Radar
     sheet: the desk's sheets are one page and stay as they print. */
  #print-area:has(> table.radar-print) {
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .modal-actions, .no-print { display: none !important; }
}
/* Hidden on screen — only rendered when printing. */
#print-area { display: none; font-size: 15px; }
/* Equity Radar's printed list: a sheet walked round the service drive, so
   small type, a rule under every owner, no row split across two pages,
   the heading on every page, and every figure lined up down its column. */
#print-area table.radar-print { width: 100%; border-collapse: collapse;
  font-size: 11px; margin: 8px 0; }
#print-area table.radar-print thead { display: table-header-group; }
#print-area table.radar-print tr { break-inside: avoid; }
#print-area table.radar-print th, #print-area table.radar-print td {
  border-bottom: 1px solid #999; padding: 4px 6px; text-align: left;
  vertical-align: top; }
#print-area table.radar-print thead th { border-bottom: 2px solid #000; }
#print-area table.radar-print .n { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
#print-area .radar-print-foot { font-size: 11px; }
#print-area h2 { margin: 0 0 2px; }
/* Label and figure sit together in one narrow block rather than at opposite
   edges of the page. Spread full-width, the eye has to travel an inch of
   white space to pair "Selling price" with its number, and on a sheet handed
   across a desk that is where a customer loses the thread. The value column
   is fixed and right-aligned so the money still forms a column to add up. */
#print-area .ps-row { display: grid; grid-template-columns: 200px 128px;
  gap: 12px; padding: 5px 0; border-bottom: 1px solid #e2e8f0; }
#print-area .ps-row > span:last-child { text-align: right;
  font-variant-numeric: tabular-nums; }
#print-area .ps-total { font-size: 19px; font-weight: 800;
  border-top: 3px solid #000; margin-top: 8px; padding-top: 10px; }
#print-area table.pgrid { width: 100%; border-collapse: collapse;
  margin-top: 14px; font-size: 14px; }
#print-area table.pgrid th, #print-area table.pgrid td {
  text-align: right; padding: 8px 10px; border-bottom: 1px solid #ccc; }
#print-area table.pgrid th:nth-child(-n+2),
#print-area table.pgrid td:nth-child(-n+2) { text-align: left; }
#print-area table.pgrid thead th { border-bottom: 2px solid #000;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* branded print header (logo + customer) */
#print-area .print-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 3px solid #000; padding-bottom: 10px; margin-bottom: 14px;
  gap: 24px;
}
#print-area .print-head h2 { margin: 0 0 2px; }
#print-area .print-head .cust { font-size: 16px; margin: 4px 0 2px; }
#print-area .dealer-logo { max-height: 64px; max-width: 250px; }
#print-area .dealer-name { text-align: right; font-weight: 800;
  font-size: 18px; line-height: 1.15; letter-spacing: .02em; }
/* the store's address and phone under its name, from the dealer record */
#print-area .dealer-line { display: block; font-weight: 500; font-size: 12px;
  letter-spacing: 0; margin-top: 2px; }

/* vehicle block with thumbnail */
#print-area .veh-block { display: flex; gap: 16px; align-items: center;
  margin-bottom: 6px; }
#print-area .print-thumb { width: 168px; height: 116px; object-fit: cover;
  border-radius: 6px; border: 1px solid #bbb; flex: 0 0 auto; }
#print-area .veh-meta h3 { margin: 0 0 4px; }
#print-area .veh-meta p { margin: 2px 0; }

/* payment matrix (down x term) */
#print-area table.paygrid { width: 100%; border-collapse: collapse;
  margin-top: 10px; table-layout: fixed; }
#print-area table.paygrid th, #print-area table.paygrid td {
  border: 1px solid #999; padding: 9px 8px; text-align: center;
  width: 25%; height: 58px; vertical-align: middle; }
#print-area table.paygrid thead th { border-bottom: 2px solid #000;
  font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
#print-area table.paygrid tbody th { text-align: left; font-weight: 800; }
#print-area table.paygrid tbody td { font-weight: 700; font-size: 16px; }
#print-area table.paygrid .dn { display: block; font-weight: 400;
  font-size: 10px; color: #555; text-transform: uppercase; }

/* bill-of-sale financing terms strip */
#print-area .bos-terms { display: flex; gap: 16px; margin-top: 16px;
  border: 1px solid #999; border-radius: 6px; padding: 12px 14px; }
#print-area .bos-terms > div { flex: 1; display: flex; flex-direction: column;
  gap: 2px; }
#print-area .bos-terms .muted { font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; }
#print-area .bos-terms strong { font-size: 16px; }
#print-area .bos-terms strong.big { font-size: 22px; font-weight: 800; }

/* signature lines */
#print-area .sig-row { display: flex; gap: 48px; margin-top: 46px; }
#print-area .sig { flex: 1; font-size: 12px; color: #333; }
#print-area .sig-line { border-bottom: 1.5px solid #000; height: 36px;
  margin-bottom: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  /* A phone, or an iPad held upright (P5-11, the design's P:357-389, at
     this sheet's 880 rather than the design's 820): the phone's bar across
     the top, and the bar down the left becomes its menu. The icon strip
     it replaces had no room for a heading, a label, the store's name or
     Ask Zeus. */
  #app { flex-direction: column; }
  .mob-bar { display: flex; }
  .menu-close { display: inline-block; }
  /* Off the page until Menu opens it, and then the WHOLE bar -- every
     heading, row, the store box, the search and the foot, drawn as the
     desk draws them -- fixed over the whole screen: above the drawers (55),
     the Ask Zeus panel (61) and the search (65), under a toast (80) so what
     a pick says is seen. app.js shuts it before any of those opens
     (navMenuClose), so it never hides one. Padded by the safe area, the
     design's, which reads 0 for now (the phone bar's rule above says why). */
  .sidebar { display: none; }
  body.menu-open .sidebar { display: flex; position: fixed; inset: 0;
    z-index: 70; width: auto; flex-direction: column; border-right: 0;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px
      calc(16px + env(safe-area-inset-bottom, 0px)); }
  /* No hamburger above it to keep clear of. */
  .side-brand { margin-top: 0; padding: 0 8px 16px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .main { padding: 18px; }
  /* The top line takes back .main's 18px here, as it takes back 26/30 on
     a desktop, with the design's 10px narrow pads above and below. */
  .top { margin: -18px -18px 18px; padding: 10px 18px; }
  /* The menu is Menu's here, so the collapse feature is off: Ctrl/Cmd+B
     stays inert at this width (navNarrow, app.js), and the bar is not
     pushed off the screen by a collapse remembered from the desk.
     transition:none so crossing the 880px breakpoint while collapsed doesn't
     animate the margin/padding change as an accidental slide. */
  .nav-toggle { display: none; }
  .sidebar, .main, .top { transition: none; }
  #app.nav-collapsed .sidebar { margin-left: 0; }
  #app.nav-collapsed .main { padding-left: 18px; }
  #app.nav-collapsed .top { margin-left: -18px; padding-left: 18px; }
}

/* ---------- Settings tab — theme buttons ---------- */
.theme-row { display: flex; gap: 10px; margin-top: 12px;
  flex-wrap: wrap; }
.theme-btn { min-width: 110px; }

/* ---------- Dark mode (.dark applied by JS on <html>) -------------- */
/* --side-line, --side-dim and --brand-ink are not here on purpose: the bar
   is black in both themes and the gold does not change, so neither do they. */
html.dark {
  --bg-app: #0a1124;
  --panel: #131b30;
  --panel-2: #172039;
  --ink: #e6ebf6;
  --ink-2: #c3cde2;
  --muted: #9aaace;
  --line: #243152;
  --line-2: #1b2745;
  --brand-soft: rgba(232,154,18,.20);
  --green-bg: rgba(34,197,94,.18);
  --amber-bg: rgba(245,158,11,.20);
  --red-bg: rgba(220,38,38,.22);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
}
html.dark body { color: var(--ink); }
html.dark .auth-card, html.dark .modal-card, html.dark .card,
html.dark .kpi { background: var(--panel); color: var(--ink); }
html.dark .auth-card h1 { color: var(--ink); }
html.dark .params-grid input, html.dark .params-grid select,
html.dark .modal-card label input, html.dark .modal-card label select,
html.dark .auth-card input,
html.dark .reb-row input, html.dark #cond-filter,
html.dark .results-toolbar input:not([type=checkbox]),
html.dark #inv-filter, html.dark .lease-filter {
  background: #0f1830; color: var(--ink); border-color: var(--line);
}
html.dark .params-grid input:disabled {
  background: #1a2238; color: #6e7c95; }
html.dark .btn { background: var(--panel); color: var(--ink);
  border-color: var(--line); }
html.dark .btn:hover { background: #1c2540; border-color: #2a3658; }
/* Primary buttons (Work Deal, Calculate, etc.): html.dark .btn above was
   overriding the gold gradient with a dark panel, leaving dark text on a dark
   fill (invisible). Re-assert the gold fill so they read in dark mode. */
html.dark .btn.primary {
  background: linear-gradient(135deg, var(--gold1), var(--gold2));
  border-color: var(--gold2); color: var(--brand-ink);
  box-shadow: 0 3px 12px rgba(232,148,26,.30);
}
html.dark .btn.primary:hover { filter: brightness(1.06); }
html.dark .btn.ghost { background: transparent; border-color: var(--line);
  color: var(--muted); }
html.dark .btn.ghost:hover { background: rgba(255,255,255,.06); color: #fff; }
/* Its own lighter red: --red (#DC2626) on the dark panel is about 3.6 to 1,
   under the 4.5 small text needs (BDC Desk's Delete, the review of
   2026-09-28); this is about 6 to 1. */
html.dark .btn.danger { background: var(--panel); color: #f87171;
  border-color: #592226; }
html.dark .btn.danger:hover { background: rgba(220,38,38,.18); }

/* Dark-mode scrollbars — the default light OS bars clashed with the theme. */
html.dark { scrollbar-color: #3d4c72 var(--bg-app); scrollbar-width: thin; }
html.dark ::-webkit-scrollbar { width: 12px; height: 12px; }
html.dark ::-webkit-scrollbar-track { background: var(--bg-app); }
html.dark ::-webkit-scrollbar-thumb { background: #3d4c72; border-radius: 7px;
  border: 3px solid var(--bg-app); }
html.dark ::-webkit-scrollbar-thumb:hover { background: #556699; }
html.dark ::-webkit-scrollbar-corner { background: var(--bg-app); }

/* Conditional-offer pills: a dark-friendly translucent violet instead of the
   light lavender chip (which floated oddly on the dark theme). */
html.dark .cond-pill { background: rgba(139,92,246,.18); color: #c9b8fb;
  border-color: rgba(139,92,246,.42); }
html.dark .cond-pill.is-clickable:hover { background: rgba(139,92,246,.32);
  border-color: rgba(167,139,250,.75); }
html.dark .cond-pill.is-clickable.active { background: #7c3aed; color: #fff;
  border-color: #8b5cf6; }
/* Review-modal cash inputs (in a table cell, not a <label>) need the dark
   field styling too. */
html.dark .cr-amt, html.dark .cr-cond {
  background: var(--bg-app); color: var(--ink); border-color: var(--line); }
html.dark .table-scroll { border-color: var(--line); }
html.dark table.data { color: var(--ink); }
html.dark table.data thead th { background: #060c1c;
  color: #aab6cc; border-bottom-color: #060c1c; }
html.dark table.data tbody tr:nth-child(even) { background: #182241; }
html.dark table.data tbody tr:hover { background: rgba(232,154,18,.10); }
html.dark table.data th, html.dark table.data td {
  border-bottom-color: var(--line); }
html.dark .empty { color: var(--muted); }
html.dark .toast { background: #1a2238; }
html.dark .rebate-box { background: #11192e; border-color: var(--line); }
html.dark .inset-form { background: #11192e; border-color: var(--line); }
html.dark .stock-link { color: var(--gold1); }
html.dark .stock-link:hover { color: var(--gold2); }
html.dark .page-head h1 { color: var(--ink); }

/* ---- per-vehicle expander (photo / Carfax / links / specs) ---- */
.exp-toggle {
  border: none; background: transparent; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 2px 5px; margin-right: 4px;
  color: var(--brand); border-radius: 4px; vertical-align: middle;
}
.exp-toggle:hover { background: var(--brand-soft); }
/* The expander lives inside a results-table cell, and table.data td sets
   white-space: nowrap for the number columns -- inherited, it forbade
   every line in this card from wrapping, which is why one long rebate
   sentence could run the whole card off the page. */
tr.veh-exp > td { padding: 0; background: rgba(0,0,0,.025);
  white-space: normal; text-align: left; }
/* Pin the card to the left of the scroll viewport so it stays visible
   and compact even though the results table is far wider than the screen.
   The cap accounts for the sidebar — 100vw includes it, so a card capped
   only against the viewport still ran off the visible area — and tops out
   at 1080px so a big monitor gets a condensed card, not a sprawling one. */
.veh-card {
  position: sticky; left: 0;
  display: flex; gap: 18px; align-items: flex-start;
  padding: 14px 16px; width: fit-content;
  max-width: min(1080px, calc(100vw - 330px));
}
#app.nav-collapsed .veh-card {
  max-width: min(1080px, calc(100vw - 110px));
}
.veh-photo {
  width: 200px; height: 140px; object-fit: cover; border-radius: 8px;
  background: #e9eef5; flex: 0 0 auto; box-shadow: var(--shadow-sm);
}
.veh-photo.noimg {
  display: flex; align-items: center; justify-content: center;
  color: #98a3b5; font-size: 13px; border: 1px dashed #c2cad6;
  box-shadow: none;
}
.veh-card-body { flex: 0 1 auto; min-width: 260px; }
.veh-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
/* The value column WRAPS — max-content columns never do, so one long value
   (a certification name, a rebate sentence) used to force the whole card
   wider than the page. minmax(0, …) is what lets a grid track shrink. */
.veh-specs {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  justify-content: start; gap: 5px 16px; max-width: 400px;
  font-size: 13px; align-items: baseline;
}
.veh-specs .k { color: var(--muted); white-space: nowrap; }
.veh-specs .val { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.veh-books { margin-top: 14px; border-top: 1px solid var(--line);
  padding-top: 10px; }
.veh-books h4 { margin: 8px 0 4px; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.veh-books h4:first-child { margin-top: 0; }

html.dark tr.veh-exp > td { background: rgba(255,255,255,.03); }
html.dark .veh-photo { background: #0f1830; }
html.dark .veh-photo.noimg { border-color: #2a3658; color: #6e7c95; }

/* ---- inline quick-edit cells (Inventory tab) ---- */
td.editable { cursor: pointer; position: relative; }
td.editable:hover { background: var(--brand-soft); border-radius: 4px; }
td.editable:hover::after {
  content: "✎"; font-size: 10px; color: var(--brand);
  position: absolute; top: 2px; right: 3px; opacity: .7;
}
input.cell-edit {
  width: 100%; box-sizing: border-box; padding: 3px 5px;
  font: inherit; text-align: right; border: 1px solid var(--brand);
  border-radius: 4px; background: #fff; color: #111;
}
html.dark input.cell-edit { background: #0f1830; color: var(--ink); }

/* ---- compose attachments ---- */
.attach-row { display: flex; align-items: center; gap: 10px;
  margin-top: 10px; flex-wrap: wrap; }
.attach-list { list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.attach-list:empty { margin: 0; }
.attach-list li { display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border: 1px solid var(--line, #d8dee9);
  border-radius: 6px; font-size: 13px; }
/* The name takes the slack so the size and Remove stay pinned right, and
   a long filename truncates instead of widening the modal. */
.attach-list .name { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* ---- View As bar ----
   Amber, not the brand navy: this is a state the app is temporarily in,
   and it should not read as part of the furniture. Fixed to the top so it
   survives scrolling — the moment it scrolls away is the moment someone
   forgets the numbers on screen aren't their own. */
.viewas-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 9px 16px; background: #B45309; color: #fff;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.viewas-bar .btn.sm {
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.5); font-weight: 600;
}
.viewas-bar .btn.sm:hover { background: rgba(255,255,255,.28); }
/* #app is a 100vh flex container, so make room by SHORTENING it rather
   than padding it — padding would push the sidebar's own scroll off the
   bottom of the window. The hamburger is fixed too, so it moves as well. */
body.viewing-as #app { margin-top: 38px; height: calc(100vh - 38px); }
body.viewing-as .nav-toggle { top: 51px; }
/* Fault alarm, same fixed treatment as View As and for the same reason: an
   alarm you can scroll past is an alarm nobody acts on. Red, not amber —
   this one means something is broken, not merely stale. It sits BELOW the
   View As bar when both are up, so neither hides the other. */
.fault-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 59;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 9px 16px; background: #B91C1C; color: #fff;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.fault-bar .btn.sm {
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.5); font-weight: 600;
}
.fault-bar .btn.sm:hover { background: rgba(255,255,255,.28); }
body.has-fault #app { margin-top: 38px; height: calc(100vh - 38px); }
body.has-fault .nav-toggle { top: 51px; }
/* Both at once: stack them and take the height of two. */
body.viewing-as .fault-bar { top: 38px; }
body.viewing-as.has-fault #app { margin-top: 76px; height: calc(100vh - 76px); }
body.viewing-as.has-fault .nav-toggle { top: 89px; }

@media (max-width: 700px) {
  .viewas-bar { font-size: 12px; gap: 10px; padding: 8px 10px; }
  .fault-bar { font-size: 12px; gap: 10px; padding: 8px 10px; }
}

/* Specification figures the AI supplied from its own knowledge of the model
   line rather than from the feed. Deliberately a list and not a paragraph:
   three sentences to check against a window sticker is a job someone will
   actually do, a wall of text is one they will skip. */
.lc-check { border-left: 3px solid var(--gold1, #e89a12);
  background: var(--panel); padding: 10px 12px; margin: 0 0 12px;
  border-radius: 0 8px 8px 0; font-size: 13px; }
.lc-check p { margin: 4px 0 8px; font-size: 12px; }
.lc-check ul { margin: 0; padding-left: 18px; }
.lc-check li { margin: 3px 0; }


/* Everything that is not the vAuto description. Built and correct, but not
   what anyone opens this panel for. */
.lc-more { margin-top: 6px; }
.lc-more > summary { cursor: pointer; font-size: 13px; font-weight: 600;
  padding: 8px 0; color: var(--muted, #6b7280); }
.lc-more > summary:hover { color: inherit; }
.lc-more[open] > summary { margin-bottom: 8px; }

/* ---------- Ask Zeus ----------
   Fixed, outside the tabs: the question a rep has does not arrive while they
   happen to be on the right screen. Since P5-6 a panel the full height of
   the screen on the right (the design's, P:314-344), opened by the gold
   button or the bar's item; body.az-open is its open state for the sheet,
   kept in step with the panel's own `hidden` by askOpen. */
:root { --az-w: 408px; }
/* The gold button: a press, so gold. It steps away while the panel is
   open, and stands off a drawer's corner (the drawer section below). */
.ask-fab { position: fixed; right: 24px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 24px; padding: 11px 18px 11px 14px;
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700;
  line-height: 1; color: var(--brand-ink);
  background: linear-gradient(180deg, var(--gold2, #f5b731), var(--gold1, #e89a12));
  box-shadow: 0 8px 24px rgba(232,148,26,.35); }
.ask-fab svg { width: 16px; height: 16px; flex: none; }
.ask-fab:hover { filter: brightness(1.06); }
body.az-open .ask-fab { display: none; }

/* A rule on its left edge and a shadow so soft it only lifts the panel off
   a white page. z-index over the drawers (55), which never share its edge
   (app.js: askOpen, askStepAside), and over nothing else that is up:
   modal-up puts it away below. */
.ask-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: var(--az-w); max-width: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); color: var(--ink);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 30px rgba(13,22,38,.06); }
.ask-panel.hidden { display: none; }
/* Wider than 1280px the page moves over for it; 1280px or less it lies
   over the page, since a laptop has no room for the worksheet beside it.
   By margin, not the design's padding: .main scrolls itself, and padding
   would leave the page's scrollbar under the panel. The page keeps its
   own 30px, so its words stop short of the panel's rule as they stop
   short of the screen's edge. app.js asks the same width (askMedia). */
@media (min-width: 1281px) {
  body.az-open .main { margin-right: var(--az-w); }
}
/* Lying over the page, the panel covered the right end of the top line --
   the Present switch, on a laptop and a floor iPad in landscape, which
   have no P key to fall back on. So there the line takes the panel's room,
   plus .main's own right padding (30px), as it takes an open drawer's
   (below). Docked, .main's margin has moved the line already; at 880 or
   less the panel is the whole screen. */
@media (min-width: 881px) and (max-width: 1280px) {
  body.az-open .top { padding-right: calc(var(--az-w) + 30px); }
}
/* A phone or an iPad held upright: the whole width, at the phone bar's
   880 (P5-11) rather than the design's 820 -- one width for the phone, not
   two, and a 408px panel over an 834px iPad left half a page to read. */
@media (max-width: 880px) {
  .ask-panel { width: 100%; }
  .ask-fab { right: 16px; }
}
/* The View As and fault bars are fixed on top (38px each) and shorten #app
   to make room; the panel starts below them rather than covering their
   right end. */
body.viewing-as .ask-panel, body.has-fault .ask-panel { top: 38px; }
body.viewing-as.has-fault .ask-panel { top: 76px; }
/* Out of the way while a box is up: the panel and the pill float above
   every modal, and an open panel sat on the New Deal box's Start button.
   modal() sets the class and closeModal() clears it, so the panel's own
   open state is untouched and it is back the moment the box closes --
   Work Deal included. The page stays where it is under the box. */
body.modal-up .ask-panel, body.modal-up .ask-fab { display: none; }
.ask-head { display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px 10px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line); }
.ask-title { display: flex; align-items: center; gap: 8px; }
/* The page titles' serif, a size down. */
.ask-title strong { font-family: Georgia, "Times New Roman", serif;
  font-size: 19px; font-weight: 400; line-height: 1.2; }
.ask-title .btn { margin-left: auto; }
.ask-head .muted { font-size: 11px; }
/* Present Mode's word in the panel's head (P5-9; the design's safe-badge,
   P:342): ink, because it reports and nobody presses it. Only while
   presenting. */
.ask-safe { display: none; align-self: flex-start; font-size: 11.5px;
  font-weight: 600; background: var(--ink); color: var(--panel);
  border-radius: 6px; padding: 1px 7px; }
body.present .ask-safe { display: inline-block; }
/* The design's mark is gold (P:181); on a heading that is a label, so ink,
   with the bolt in the panel's colour. */
.zmark { display: inline-grid; place-items: center; flex: none;
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--ink); color: var(--panel); }
.zmark svg { width: 11px; height: 11px; }
/* .btn.ghost is drawn for the black bar (#cbd6e6 type): on the panel it
   was next to invisible. Muted type on a hairline, in both themes. */
.ask-panel .btn.ghost { background: transparent; color: var(--muted);
  border-color: var(--line); }
.ask-panel .btn.ghost:hover { background: var(--panel-2); color: var(--ink); }

.ask-log { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; }
.ask-msg { font-size: 13.5px; line-height: 1.5; padding: 9px 12px;
  border-radius: 12px; max-width: 92%; white-space: pre-wrap;
  overflow-wrap: anywhere; }
/* Your own line is ink, as in the design (P:326). It was gold: every
   question the rep typed was dressed as the press on the screen. The gold
   in this panel is the Ask button. */
.ask-msg.me { align-self: flex-end; background: var(--ink);
  color: var(--panel); border-bottom-right-radius: 4px; }
/* Zeus's line is the design's bubble (P:327): a step off the panel with a
   hairline, in the panel's ink. It was var(--chip, #f3f4f6), a token never
   defined, so the dark theme drew its light ink on #f3f4f6. */
.ask-msg.bot { align-self: flex-start; background: var(--panel-2);
  border: 1px solid var(--line-2); border-bottom-left-radius: 4px; }
.ask-msg.bot ul { margin: 6px 0 6px 18px; padding: 0; }
.ask-msg.bot li { margin: 2px 0; }
/* A line of the page's own under an answer (askLenderNote): why a tier the
   question named was not priced, and what to do. Grey, not a warning: the
   answer above it is right for the deal as it stands. */
.ask-msg .ask-note { margin: 6px 0 0; font-size: 12.5px; white-space: normal; }
.ask-msg.thinking { opacity: .65; font-style: italic; }
/* An answer Zeus refused to stand behind. Deliberately not styled as an
   error: nothing broke, a number just could not be traced. The design's
   amber refusal line (P:336), not gold: nobody presses it. */
.ask-msg.held { border-left: 3px solid var(--amber);
  background: var(--amber-bg); }

.ask-form { display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--line, #e5e7eb); }
.ask-form textarea { flex: 1 1 auto; resize: none; font: inherit;
  font-size: 13.5px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line, #e5e7eb); background: inherit; color: inherit; }
.ask-form .btn { align-self: flex-end; }

.ask-jump { align-self: flex-start; margin-top: -4px; }

/* The deal-details form the assistant puts up before it searches. Its
   button is the press; the box is ink-ruled, like the same-cell question
   on the card. */
.ask-form-inline { align-self: stretch; display: grid; gap: 8px;
  padding: 11px 12px; border-radius: 12px;
  background: var(--panel-2);
  border-left: 3px solid var(--ink); }
.ask-form-inline label { display: grid; grid-template-columns: 1fr 128px;
  align-items: center; gap: 10px; font-size: 13px; }
.ask-form-inline input, .ask-form-inline select {
  font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--panel, #fff); color: inherit; }
.ask-form-actions { display: flex; gap: 8px; margin-top: 2px; }

/* Markup rather than a plain reply: pre-wrap would print the template's own
   indentation as line breaks. */
.ask-msg.ask-rich { white-space: normal; }
.ask-msg.ask-rich p { margin: 0 0 8px; }
.ask-msg.ask-rich p:last-child { margin-bottom: 0; }

/* A draft Zeus wrote for a customer (three-tools P2-3): the design's draft
   block. The words sit on the panel in a box of their own, to edit; the
   checks under it on --panel-2, each ruled on the left -- ink for a check
   that passed, amber for one to act on, a hairline for a note. Never
   green: the prototype's green consent tick implied a permission Zeus does
   not hold. Copy is a plain button -- gold in this panel is Ask. */
.ask-msg.ask-draft-msg { align-self: stretch; max-width: none;
  display: grid; gap: 8px; }
.ask-draft-head { margin: 0; font-weight: 600; }
.ask-draft-text, .ask-draft-subject { font: inherit; font-size: 13.5px;
  line-height: 1.45; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); width: 100%; box-sizing: border-box; }
.ask-draft-text { resize: vertical; min-height: 120px; }
.ask-draft-checks { list-style: none; margin: 0; padding: 8px 10px;
  border-radius: 9px; background: var(--panel-2);
  border: 1px solid var(--line-2); display: grid; gap: 5px; }
.ask-msg.bot .ask-draft-checks { margin: 0; padding: 8px 10px; }
.ask-check { font-size: 12.5px; line-height: 1.45; padding-left: 8px;
  border-left: 3px solid transparent; }
.ask-check-ok { border-left-color: var(--ink); }
.ask-check-warn { border-left-color: var(--amber); }
.ask-check-note { border-left-color: var(--line); color: var(--muted); }
.ask-draft-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* A stock number the assistant named. Looks like the text it sits in until
   you go near it -- a chat full of buttons reads as an advert. */
.ask-veh { font: inherit; font-weight: 700; color: inherit; cursor: pointer;
  background: none; border: 0; border-bottom: 1px dashed currentColor;
  padding: 0; margin: 0; }
.ask-veh:hover, .ask-veh:focus-visible {
  background: var(--gold1, #e89a12); color: #201500; border-radius: 4px;
  border-bottom-color: transparent; }

/* Feed comparison: a list to read, not a table to sort. */
.cmp-list { margin: 4px 0 14px; padding-left: 18px; font-size: 13px; }
.cmp-list li { margin: 2px 0; }

/* ---------- Folding the setup pages ----------
   23 cards on the Configurator and almost every visit changes one thing.
   The card keeps its border and padding; only the contents fold away, so a
   shut card still reads as a card rather than as a stray line of text. */
.card-fold { border: 0; margin: 0; padding: 0; }
.card-fold > .card-summary { list-style: none; cursor: pointer;
  display: block; margin: 0; padding: 0; position: relative;
  padding-right: 26px; }
.card-fold > .card-summary::-webkit-details-marker { display: none; }
.card-fold > .card-summary::after { content: "▾"; position: absolute;
  right: 2px; top: 2px; font-size: 13px; opacity: .5;
  transition: transform .15s ease; }
.card-fold[open] > .card-summary::after { transform: rotate(180deg); }
.card-fold > .card-summary:hover::after { opacity: 1; }
.card-fold > .card-summary > .card-head,
.card-fold > .card-summary > h2 { margin-bottom: 0; }
/* A shut card is one line; an open one keeps the spacing it always had. */
.card-fold-body { padding-top: 12px; }
.card-fold:not([open]) + * { margin-top: 0; }
.card-summary:focus-visible { outline: 2px solid var(--gold1, #e89a12);
  outline-offset: 3px; border-radius: 6px; }

/* What Ask Zeus narrowed the table to. Loud enough to explain an empty
   table, quiet enough not to look like an error. */
.ask-filter-note { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border-radius: 9px;
  line-height: 1.5;
  font-size: 13px; background: rgba(232,154,18,.12);
  border-left: 3px solid var(--gold1, #e89a12); }
.ask-filter-note.hidden { display: none; }

/* Wholesale, straight off the vendor feed. Grey rather than red: it is not
   a problem, it is a car that is not for retail. */
.badge.ws { background: #6b7280; color: #fff; }

/* The last recon pull. A failure has to LOOK different from a quiet one --
   a sheet that stopped fetching used to read exactly like a slow week. */
#recon-last.recon-bad { color: var(--red); font-weight: 600; }

/* The opening line of the chat: one true thing about the lot. Set apart so
   it reads as an observation rather than as the start of an answer. */
.ask-fact { margin: 2px 0 0; padding-left: 10px; font-size: 13px;
  color: var(--muted); border-left: 2px solid var(--line); }

/* "Asking about Maria": whose card the questions on this tab go with. A
   label, so it is muted ink and nothing else -- gold is for a button. */
.ask-who { font-size: 12px; padding: 0 4px; align-self: flex-start; }

/* "Looking at: ..." under the panel's title (P5-7, the design's .ctx,
   P:320-323): the page, the deal tab or the car the conversation is
   about. A label, so ink on the hairline fill and never gold; the words
   are cut short rather than wrapped, and the x (a car's only) is muted. */
.ask-ctx { display: flex; min-width: 0; }
.ask-ctx:empty { display: none; }
.ask-ctx-chip { display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; font-size: 12px; background: var(--line-2);
  color: var(--ink); border-radius: 7px; padding: 2px 4px 2px 8px; }
.ask-ctx-text { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.ask-ctx-x { border: 0; background: transparent; color: var(--muted);
  cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1; }
.ask-ctx-x:hover { color: var(--ink); }
/* Questions a press away, above the box (P:171-172, 337): outlined chips
   on the panel. A press, but a light one -- the gold here is Ask. */
.ask-sugg { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.ask-sugg .chip { border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); border-radius: 20px; padding: 4px 11px;
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ask-sugg .chip:hover { border-color: var(--muted); }
@media (pointer: coarse) {
  .ask-sugg .chip { min-height: 44px; padding: 0 14px; }
}

/* Where "Show in Deal Finder" lands you. The button used to close the chat
   and nothing else whenever you were already on this tab, which is the tab
   the app opens on -- so it read as broken. */
@keyframes zeus-jumped {
  0%   { box-shadow: 0 0 0 3px rgba(232,154,18,.55); }
  100% { box-shadow: 0 0 0 3px rgba(232,154,18,0); }
}
.jumped { animation: zeus-jumped 1.1s ease-out 1; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .jumped { animation: none; } }

/* The report-a-problem row under the chat box. Quiet by design -- it should
   be findable the moment something is wrong and invisible the rest of the
   time. */
.ask-foot { display: flex; justify-content: flex-end; padding: 0 10px 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.ask-foot .btn { font-size: 12px; opacity: .75; }
.ask-foot .btn:hover { opacity: 1; }

/* Reported problems. The context is a pre block because it is pasted
   somewhere else to be acted on, and reflowing it loses the shape. */
.issue { border-left: 3px solid var(--gold1, #e89a12); padding: 6px 0 6px 10px;
  margin: 0 0 8px; }
.issue.done { border-left-color: var(--muted); opacity: .6; }
.issue summary { cursor: pointer; }
.issue summary .muted { font-weight: 400; margin-left: 6px; font-size: 12px; }
.issue-ctx { white-space: pre-wrap; font-size: 12px; margin: 8px 0;
  padding: 8px; border-radius: 8px; background: rgba(127,127,127,.10);
  max-height: 320px; overflow: auto; }

/* ---------- photo lightbox ----------
   One overlay for every screen that shows a vehicle photo. Deliberately a
   dark room in both themes: the photo is the page. */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 12, 22, .93);
  display: flex; align-items: center; justify-content: center;
}
.lightbox.hidden { display: none; }
.lightbox img {
  max-width: 92vw; max-height: 86vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 12px 48px rgba(0, 0, 0, .55);
  background: #101828;
}
.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  font-size: 34px; line-height: 1; padding: 16px 14px;
  background: rgba(255, 255, 255, .1); color: #fff; border: 0;
  border-radius: 10px; cursor: pointer; user-select: none;
}
.lb-nav:hover { background: rgba(255, 255, 255, .22); }
.lb-nav:focus-visible, .lb-close:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-close {
  position: fixed; top: 14px; right: 18px; font-size: 26px; line-height: 1;
  background: rgba(255, 255, 255, .1); color: #fff; border: 0;
  border-radius: 10px; padding: 10px 14px; cursor: pointer;
}
.lb-close:hover { background: rgba(255, 255, 255, .22); }
.lb-count {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: #e6ecf5; font-size: 13px; letter-spacing: .04em;
  background: rgba(255, 255, 255, .1); padding: 4px 12px;
  border-radius: 999px;
}
.veh-photo.lb-openable { cursor: zoom-in; }
body.lb-open { overflow: hidden; }

/* ---------- Zeus HQ: Accounting + Stores (is_global only) ---------- */
.inline-form { display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; margin-top: 12px; }
.acct-totals { display: flex; gap: 22px; flex-wrap: wrap;
  align-items: baseline; font-size: 15px; padding: 4px 0; }
.acct-totals strong { font-size: 18px; }
.acct-neg { color: #c0392b; }
tr.ledger-off td { opacity: .55; }
.hq-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.hq-row:last-child { border-bottom: none; }
.hq-store { border-bottom: 1px solid var(--line-2); }
.hq-store:last-child { border-bottom: none; }
.hq-store .hq-row { border-bottom: none; }
.hq-vendors { margin: 0 0 12px 18px; padding: 8px 12px;
  background: var(--bg-app); border-radius: 8px; }
.hq-vendor { display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--line); }
.hq-vendor:last-of-type { border-bottom: none; }

/* A lead that never got emailed is somebody waiting for a reply, so it reads
   as an action rather than as a status. The reason is on the Vendors tab's
   feed board under "contact" -- this is the row you act on. */
.lead-unsent { color: var(--red); font-style: normal; font-weight: 600; }

/* ---------- Work Deal: the desking screen ------------------------------
   Grouped the way a desk reads a deal -- vehicle, trade, terms, back end --
   rather than as one column of number boxes. */
.wd-modes { display: flex; gap: 0; margin: 14px 0 4px; }
.wd-mode {
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  font: 600 13px/1 inherit; padding: 9px 18px; cursor: pointer;
}
.wd-mode:first-child { border-radius: 8px 0 0 8px; }
.wd-mode:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.wd-mode.on { background: var(--side); color: #fff; border-color: var(--side); }
.wd-mode[disabled] { opacity: .45; cursor: not-allowed; }

.wd-group h4 {
  margin: 16px 0 8px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.wd-group h4:first-child { margin-top: 0; }
.wd-group.hidden { display: none; }

.wd-check.inline { margin: 0; font-size: 13px; }

.wd-vin { font-size: 12px; }

/* The rate sheet readout: what the manufacturer says for this term. */
.wd-prog {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg-app); border: 1px solid var(--line-2); font-size: 13px;
}
.wd-prog .k { color: var(--muted); margin-right: 4px; }
.wd-prog strong { margin-right: 14px; font-variant-numeric: tabular-nums; }

/* An itemised line sits under its total, indented and quieter -- it is the
   working, not the number the customer reads. */
.wd-lines .k.sub, .wd-lines .v.sub {
  font-size: 12px; color: var(--muted); padding-left: 12px;
}

.wd-pm { margin-top: 16px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.wd-pm summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.wd-pm[open] summary { margin-bottom: 10px; }

/* The grid's own headings ARE the inputs -- the desk types over the column
   it wants to move rather than filling in a form beside the table. So each
   box has to read as the heading it replaced: it inherits the header's own
   colour and weight and carries no chrome until you touch it, and only then
   does it look like something you can type in.

   `.modal-card label input` pins every box in a modal to 42px with a 6px top
   margin, and these live inside a modal, so the reset has to out-specify it
   rather than merely follow it -- (0,2,1) here against that rule's (0,2,0),
   the same care `.wd-fld` needs one floor down. */
.modal-card .pm-edit input, .pm-edit input {
  height: 24px; margin: 0; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: inherit; font: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; text-transform: inherit; text-align: center;
  cursor: pointer; }
/* An input has no intrinsic content width, so `width: 100%` in an auto-layout
   table hands the table the whole container: measured, the same grid went
   from 232px to 645px and the columns spread right across the modal. These
   are sized to the longest heading each axis can hold instead -- "120 mo" and
   "$250,000", the bounds in WD_AXIS. */
.modal-card .pm-edit input[data-axis="terms"],
.pm-edit input[data-axis="terms"] { width: 62px; }
.modal-card .pm-edit input[data-axis="downs"],
.pm-edit input[data-axis="downs"] { width: 78px; }
.pm-edit thead input { color: #fff; }        /* the header row is graphite */
.pm-edit th.l input { text-align: left; }
.modal-card .pm-edit input:hover, .pm-edit input:hover {
  border-color: rgba(127, 127, 127, .55); }
.modal-card .pm-edit input:focus, .pm-edit input:focus {
  outline: none; cursor: text; background: var(--bg-app, #fff);
  color: var(--ink); border-color: var(--brand, #c8912a); }
/* A heading is editable, so say so where a pointer cannot -- the cell keeps
   its own hit area and the box fills it. */
.pm-edit th { padding: 0; }
.pm-edit thead th.l, .pm-edit th:not(:has(input)) { padding: 8px 10px; }
.pm-edit th:has(input) { padding: 6px 8px; }

.wd-print-opts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2);
}
.wd-print-opts .label-sm {
  font: 700 11px/1 inherit; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

/* An itemised fee on the printed sheet. */
.ps-row.ps-sub { font-size: 12px; color: #555; padding-left: 14px; }
.ps-h { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase;
        letter-spacing: .1em; color: #555; }

/* .wd-inputs is already a two-column grid. Grouping the fields under Vehicle
   / Trade / Terms put a div between it and its children, which made each
   GROUP the grid item and stacked everything into one column. `contents`
   dissolves the wrapper for layout while keeping it for showing and hiding.
   The hidden rule still wins on specificity, so the lease pane still hides. */
.wd-group { display: contents; }
.wd-group h4 { grid-column: 1 / -1; }

/* A checkbox is not a number box: it must not inherit the stacked label and
   full-width input that .wd-fld gives every other control here. */
/* .modal-card label sets display:block on every label in a modal, so this
   has to match at least as specifically to stay a row rather than stacking
   the box above its own text. */
.modal-card label.wd-check, label.wd-check {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0; font-size: 14px;
  font-weight: 500; color: var(--ink); cursor: pointer;
}
.wd-check input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 16px; flex: 0 0 16px;
  padding: 0; margin: 0;
}
/* The rate-sheet readout is a statement about the whole deal, not a field. */
.wd-prog { grid-column: 1 / -1; }

/* Work Deal: term and rate sit directly above the payment they produce, so
   the two numbers a desk moves most are never scrolled away from the answer. */
.wd-outwrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wd-termrate { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* These two are already side by side and narrow, so they keep the stacked
   label -- a beside-label here would squeeze the box to nothing. */
.modal-card .wd-termrate label.wd-fld, .wd-termrate label.wd-fld {
  display: flex; flex-direction: column; gap: 2px; margin: 0; }
.modal-card .wd-termrate label.wd-fld input {
  height: 34px; font-size: 16px; padding: 0 9px; margin-top: 0; }

/* The fee total reads as one of the stacked lines, not as an input, because
   it is computed from the schedule and is not the desk's to type. */
.wd-fee-line {
  display: grid; grid-template-columns: 1fr 122px; align-items: center;
  gap: 10px; padding: 4px 0; min-height: 30px;
  /* Reads as one of the labelled rows above and below it, not as a stray
     sentence -- it is the same kind of thing, just not the desk's to type. */
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted);
}
.wd-fee-line span:last-child { font-variant-numeric: tabular-nums;
  text-align: right; font-weight: 700; font-size: 14px;
  text-transform: none; letter-spacing: 0; color: var(--ink); }

/* The worked-deal readout is twenty-odd lines now that fees and taxes are
   itemised, so it -- not the input stack -- is what decides whether the desk
   has to scroll. `.kv`'s 9px row gap is right for a sparse card and wrong
   for a dense worksheet, so this tightens the rows here only. */
.wd-lines.kv { margin: 0; gap: 3px 14px; font-size: 13px; }
.wd-lines .k.sub, .wd-lines .v.sub { font-size: 11px; }
.wd-lines .total { padding-top: 7px; font-size: 15px; }

/* Five checkboxes on one line, not three and a wrap. */
.wd-print-opts { margin-top: 12px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 4px 14px; }
.modal-card label.wd-check.inline, label.wd-check.inline {
  font-size: 12px; gap: 5px; margin: 0; }
.wd-pm { margin-top: 10px; padding-top: 9px; }
.modal-card .modal-actions { margin-top: 14px; }
.modal-card .wd-vin { margin-bottom: 8px; }

/* Work Deal is the densest modal in the app, so it gets a tighter frame than
   the sparse ones. Scoped with :has so no other modal changes; a browser
   without :has simply keeps the roomier default, which still works. */
.modal-card:has(.wd-grid) { padding: 18px 20px; max-width: 700px; }
.modal-card:has(.wd-grid) .wd-grid { gap: 12px; }
.modal-card:has(.wd-grid) .wd-modes { margin-bottom: 8px; }
.modal-card:has(.wd-grid) h3 { font-size: 17px; }

/* The printed sheet's two panels: what the car costs, and what it costs a
   month at each way of buying it. Side by side, a customer compares them
   without turning the page; stacked, the grid was a footnote to a column
   they had already stopped reading. */
#print-area .ps-cols { display: grid; gap: 16px; align-items: start;
  grid-template-columns: auto auto; justify-content: start; margin: 14px 0; }
#print-area .ps-cols-one { grid-template-columns: auto; }
#print-area .ps-box { border: 1px solid #94a3b8; border-radius: 8px;
  padding: 10px 14px 12px; break-inside: avoid; }
#print-area .ps-box .ps-h { margin: 0 0 6px; }
#print-area .ps-box .ps-row:last-child { border-bottom: 0; }

/* The payment grid, printed. It is `.data.pm-table` on screen, which is the
   app's table styling and not a document's, so it is restated here. */
#print-area .ps-box-grid table { border-collapse: collapse; font-size: 13px;
  width: 100%; }
#print-area .ps-box-grid th, #print-area .ps-box-grid td {
  padding: 6px 10px; text-align: right; border-bottom: 1px solid #dbe1e8;
  font-variant-numeric: tabular-nums; }
#print-area .ps-box-grid thead th { border-bottom: 2px solid #000;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
#print-area .ps-box-grid th.l { text-align: left; }
#print-area .ps-box-grid tbody th { font-weight: 700; }
/* The cell the deal is actually on, so the desk can point at it. */
#print-area .ps-box-grid td.hl { font-weight: 800; background: #f1f5f9;
  outline: 2px solid #000; outline-offset: -2px; }

/* ---------- The customer's card: a drawer on the deal (decision 0006) ----
   A panel with a rule on its left edge, not a shadow; paper ground; dates
   in tabular figures; gold only on Save and Done. Full width on a phone. */
:root { --cd-w: 400px; }
.customer-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 55;
  width: min(var(--cd-w), 100vw); display: flex; flex-direction: column;
  background: var(--panel); color: var(--ink);
  border-left: 1px solid var(--line); box-shadow: none; }
.customer-drawer.hidden { display: none; }
/* Docked, not floated, on a desk monitor: while the drawer is open the
   worksheet reflows beside it (the card used to cover Save Deal, Customer
   and Find Deals), and Ask Zeus moves off the drawer's corner. A phone
   keeps the full-width overlay below, where there is no "beside". */
@media (min-width: 641px) {
  body.cd-open #tab-finder { padding-right: var(--cd-w); }
  /* The gold button off the drawer's corner, as far from it as it stands
     from the screen's edge. The open panel does not move: it and a drawer
     share the right edge, and the drawer takes the panel's left where both
     fit (below). */
  body.cd-open .ask-fab { right: calc(var(--cd-w) + 24px); }
  /* The top line (P5-5) is outside #tab-finder and ran on under the
     drawer: the Present switch at its right end was covered by the card's
     head, on a named customer's deal, the moment Present matters most. It
     takes the drawer's room too, plus .main's right padding (30px here,
     18px at 880 or less, below), so the switch stands as far from the
     drawer as it does from the edge with the drawer shut. */
  body.cd-open .top { padding-right: calc(var(--cd-w) + 30px); }
}
@media (min-width: 641px) and (max-width: 880px) {
  body.cd-open .top { padding-right: calc(var(--cd-w) + 18px); }
}
/* A drawer and the Ask Zeus panel on one right edge (P5-6). Side by side
   they need the bar (240) + the drawer (400) + the panel (408) + a
   worksheet somebody can use: about 1,750px. From 1751px the drawer sits
   to the panel's left -- and the worksheet and the top line, which take
   the drawer's room inside .main, are already clear of the panel by
   .main's margin. Below that, opening one puts the other away (app.js:
   askOpen, askStepAside, which ask this same width through askMedia). */
@media (min-width: 1751px) {
  body.az-open .customer-drawer { right: var(--az-w); }
}
/* The head and the foot of the drawer pad by the safe area, the design's
   .drawer-h and .drawer-f (P5-11). The insets read 0 until the viewport
   tag asks for the whole screen (the phone bar's rule says why). */
.cd-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line);
  padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.cd-head h3 { margin: 0; font-size: 18px; font-weight: 700;
  font-family: Georgia, "Times New Roman", serif; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cd-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.cd-body label { display: block; font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 12px; }
.cd-body label input, .cd-body label select, .cd-body label textarea,
.cd-fu-row input { display: block; width: 100%; height: 40px; padding: 0 12px;
  margin-top: 6px; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: #fff; min-width: 0; }
.cd-body label textarea { height: auto; padding: 8px 12px; resize: vertical;
  font-weight: 500; }
.cd-body label input:focus, .cd-body label select:focus,
.cd-body label textarea:focus, .cd-fu-row input:focus {
  outline: 3px solid var(--brand-soft); border-color: var(--brand); }
.cd-body h4 { margin: 18px 0 8px; padding-top: 14px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border-top: 1px solid var(--line-2); }
.cd-hint { font-size: 12px; margin: -6px 0 12px; }
.cd-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cd-error { color: var(--red); font-weight: 700; font-size: 13px;
  margin: 0 0 12px; }
/* A question, not a press: the rule is ink, never gold. */
.cd-same { border: 1px solid var(--line); border-left: 3px solid var(--ink);
  border-radius: 8px; padding: 8px 10px; margin: -4px 0 12px; font-size: 13px;
  font-weight: 600; }
.cd-same-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* A consent box is a sentence with a tick, not a field with a label. It has
   to out-specify two rules above: `.cd-body label` (0,1,1) would set it in
   uppercase 11px muted, and `.cd-body label input` (0,1,2) would render the
   checkbox as a 40px-tall full-width box under its own text. Same problem
   and same shape as .wd-check, which says so in its own comment.
   accent-color is --ink and NOT --brand: gold means a press, and a tick
   recording what somebody said is not a press. The button-only gold test
   cannot see a checkbox, which is why this one has a test of its own. */
.cd-body label.cd-consent, label.cd-consent {
  display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
  text-transform: none; letter-spacing: 0; font-size: 13px;
  font-weight: 600; color: var(--ink); cursor: pointer; margin-bottom: 6px;
}
.cd-consent input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 16px; flex: 0 0 16px;
  padding: 0; margin: 2px 0 0; accent-color: var(--ink);
}
.cd-consent input[type="checkbox"]:disabled { cursor: not-allowed; }
.cd-body label.cd-consent:has(input:disabled) { color: var(--muted);
  cursor: not-allowed; }
/* Not optional: the rule above is (0,2,1) and beats the global 22px
   touch-target rule (0,1,1), so without this the box silently shrinks back
   to 16px for the managers working these cards on an iPad. */
@media (pointer: coarse) {
  .cd-consent input[type="checkbox"] {
    width: 22px; height: 22px; min-width: 22px; flex: 0 0 22px; }
}
.cd-fu-row { display: grid; grid-template-columns: 150px 1fr; gap: 8px;
  margin-bottom: 8px; }
.cd-fu-row input { margin-top: 0; }
.cd-fu-current, .customer-timeline, .cd-fu-row input[type=date],
#cd-bought { font-variant-numeric: tabular-nums; }
.cd-fu-current { font-size: 13px; margin: 0 0 8px; }
.cd-ask { margin: 14px 0 6px; font-size: 13px; }
.cd-ask a { color: var(--muted); text-decoration: underline; }
.customer-timeline { font-size: 13px; }
.customer-timeline:empty { display: none; }
/* One thing Zeus did per row: the sentence, then who and when under it in
   the store's own stamp. A hairline between rows, no rule on the first. */
.cd-tl-row { padding: 8px 0; border-top: 1px solid var(--line-2); }
.cd-tl-row:first-child { border-top: 0; padding-top: 0; }
.cd-tl-line { font-weight: 600; line-height: 1.35; }
.cd-tl-who { font-size: 12px; margin-top: 2px; }
.cd-tl-empty { margin: 0; }
/* Who looked: one line a row, who and when, under the same hairline the
   history above it uses. tabular-nums because it is a column of stamps and
   a column of stamps has to line up. */
.cd-reads-list { font-size: 12px; font-variant-numeric: tabular-nums; }
.cd-read-row { padding: 5px 0; border-top: 1px solid var(--line-2); }
.cd-read-row:first-child { border-top: 0; padding-top: 0; }

/* Remove: red, never gold. Gold means a person WANTS to press it, and the
   one press in here that cannot be taken back is not that. Behind its own
   rule at the foot of the drawer, with what it leaves behind in full above
   the button rather than tucked into a tooltip. */
.cd-remove { margin-top: 24px; padding-top: 14px;
  border-top: 1px solid var(--line-2); }
.cd-remove h4 { margin: 0 0 8px; padding-top: 0; border-top: 0; }
.cd-remove p { font-size: 12px; line-height: 1.5; margin: 0 0 10px; }
/* The deal titles that still carry the name: something to go and do, not
   part of the press, so it is ink-ruled like the same-cell question and
   never red -- red in here belongs to the one thing that cannot be undone. */
.cd-remove-named { border-left: 3px solid var(--ink);
  padding: 2px 0 2px 10px; }

/* The Configurator's Customer cards card: the people on file, counted by
   the server. tabular-nums for the same reason every data cell has it --
   412 must not read as 4,120 when the number changes under you. */
.ck-count { margin: 12px 0 0; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; }
/* A number Zeus will not take has to LOOK refused. min/max only stop the
   arrows, so 5 can be typed under the 30-day floor: the box is :invalid the
   moment it is, and with no state for that the card sat there reading 5 as
   though the store kept cards five days. An id beats .params-grid
   input:focus, so the red stays on screen while it is still being typed. */
#ck-days:invalid { border-color: var(--red); background: var(--red-bg); }
/* The two presses here that cannot be taken back say they are working: the
   handlers disable the button and change the word, and this is what makes
   the disabled half of that visible -- .btn has no disabled state of its
   own, so mid-delete it looked exactly as pressable as before. Same
   declarations as #ms-go:disabled, which is how this app already says
   "not now". */
#ck-run:disabled, #cd-remove:disabled { opacity: .55; box-shadow: none;
  cursor: default; transform: none; }

/* "Who bought it?": a list of the cards the car was quoted to, one radio a
   row, and the one gold button is Mark sold. The row the active tab's
   customer is on gets an ink rule, the same as the same-cell question --
   pointed out, never chosen for the desk. These out-specify the modal's
   uppercase 11px label rule, which would shout the customer's name. */
.ms-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0;
  max-height: 45vh; overflow-y: auto; }
.modal-card .ms-row { display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink);
  text-transform: none; letter-spacing: 0; cursor: pointer; }
.modal-card .ms-row input[type="radio"] { display: inline-block; width: 16px;
  min-width: 16px; height: 16px; margin: 2px 0 0; padding: 0;
  flex: 0 0 auto; accent-color: var(--ink); }
.modal-card .ms-row .muted { font-size: 12px; font-weight: 500; }
.modal-card .ms-row.ms-here { border-left: 3px solid var(--ink); }
/* Until an answer is picked the press is not available, and a gold button
   that looks pressable and does nothing is a button the desk mashes. */
#ms-go:disabled { opacity: .55; box-shadow: none; cursor: default;
  transform: none; }
@media (max-width: 640px) {
  .customer-drawer { width: 100vw; }
  .cd-fu-row { grid-template-columns: 1fr; }
}
html.dark .cd-body label input, html.dark .cd-body label select,
html.dark .cd-body label textarea, html.dark .cd-fu-row input {
  background: #0f1830; color: var(--ink); border-color: var(--line); }

/* The "Who is this?" link on a Walk-in tab's strip. */
.deal-who { margin-left: 8px; color: inherit; text-decoration: underline;
  font-weight: 600; }

/* What Zeus noticed, under the deal's title: one line per thing, the words
   the server wrote, and two plain links -- "Find the next one" and "Seen".
   Muted ink on both: neither is the card's action, so neither is gold. A
   full row of the wrapping card head, and each line stacks on a phone.
   Tabular figures, because a stock number and a time sit in every line. */
.notice-strip { flex: 1 1 100%; display: flex; flex-direction: column;
  gap: 4px; margin-top: -4px; font-size: 13px; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.notice-strip:empty { display: none; }
.notice-line { display: flex; gap: 12px; align-items: baseline;
  flex-wrap: wrap; }
/* The text takes its own width and no more, so the links sit at the end
   of the sentence: grown to fill the row, they were flung to the far edge
   of a desk-width card, 800px from the words they belong to. */
.notice-line .notice-text { flex: 0 1 auto; }
.notice-link { color: var(--muted); text-decoration: underline;
  font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .notice-line { flex-direction: column; gap: 2px; }
  .notice-line .notice-text { flex-basis: auto; }
}
/* The same lines in the chat's greeting, after the fact. */
.ask-notices { margin-top: 8px; font-variant-numeric: tabular-nums; }
.ask-notices .ask-notices-head { font-size: 12px; margin: 0 0 2px; }
.ask-notices .notice-line { margin: 0 0 4px; }

/* Cards on file, offered under the name box as the desk types. */
.cust-matches { list-style: none; margin: -8px 0 12px; padding: 0;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  max-height: 220px; overflow-y: auto; }
.cust-matches:empty { display: none; }
.cust-matches li { display: flex; gap: 10px; align-items: baseline;
  flex-wrap: wrap; padding: 8px 12px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--line-2); }
.cust-matches li:last-child { border-bottom: 0; }
.cust-matches li .muted { font-weight: 500;
  font-variant-numeric: tabular-nums; }
.cust-matches li[aria-selected="true"], .cust-matches li:hover {
  background: var(--bg-app); }
.cust-matches li.cm-new { color: var(--muted); font-weight: 600; }
.nd-picked { font-size: 12px; margin: -8px 0 12px;
  font-variant-numeric: tabular-nums; }

/* Follow-ups due, above the saved deals. A list and not a table: a row is
   a person, a car and a line somebody typed, and the one press on it is
   the one that clears it. A hairline between rows and none on the first,
   the same rule the card's history uses. Tabular figures because a stock
   number and a day sit in every row. */
.fu-list { font-size: 13px; font-variant-numeric: tabular-nums; }
.fu-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--line-2); }
.fu-row:first-child { border-top: 0; padding-top: 0; }
.fu-who { flex: 1 1 auto; }
.fu-name { font-weight: 700; }
.fu-car { color: var(--muted); margin-left: 8px; }
/* The note on its own line under the name, and who set it under that. */
.fu-note, .fu-by { display: block; }
.fu-note { margin-top: 2px; line-height: 1.35; }
.fu-by { font-size: 12px; margin-top: 2px; }
/* Nothing due, the list is cut, and the card could not be read: three
   lines, one size, none of them a row. */
.fu-empty, .fu-more, .fu-problem { margin: 0; line-height: 1.35; }
.fu-more { padding-bottom: 9px; }
.fu-why { margin: 4px 0 0; font-size: 12px; }

/* The people on file. Six columns is wider than a phone, so the TABLE
   scrolls sideways inside its card rather than the page taking the
   sidebar with it. */
.cust-scroll { overflow-x: auto; }
.cust-when { font-size: 12px; margin-top: 2px; }
/* Every cell here that holds a sentence rather than a figure: the stored
   line, the follow-up note, and the line that says the list could not be
   read. `table.data td` sets white-space: nowrap for the money columns,
   and inherited it made ONE long sentence wider than the card, scrolled
   the table sideways and pushed "Open a deal" -- the row's only press --
   off the right-hand edge at an ordinary desk width. The same inherited
   fault the per-vehicle expander records above, fixed the same way. */
#cust-table td.wrap { white-space: normal; }
@media (max-width: 640px) {
  /* Stacked, the baseline alignment that lines Done up with the name on a
     desk monitor would centre the button under it instead. */
  .fu-row { flex-direction: column; gap: 4px; align-items: flex-start; }
}

/* ---------- The trade drawer (decision 0008) -----------------------------
   The same panel as the card: it reuses .customer-drawer, .cd-head and
   .cd-body wholesale, so there is one drawer shape on this screen and not
   two that drift. What is new is the line segments, the two-up rows, and
   the market table. Gold only on Save, the way the card has it. */
.td-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.td-seg { border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer; letter-spacing: .02em; }
.td-seg:hover { border-color: var(--ink); }
/* The open line is ink on paper, not gold: which trade you are looking at
   is a label, and gold is for what you can press. Same rule as the bar. */
.td-seg.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.td-add { border-style: dashed; color: var(--muted); }
.td-row { display: flex; gap: 10px; }
.td-row label { flex: 1 1 0; min-width: 0; }
/* Made of two numbers the reader just typed, so it is not a dealer figure
   and carries no gate. Upside down is named rather than left as a minus. */
.td-equity { font-weight: 800; font-size: 15px; margin: -4px 0 14px;
  font-variant-numeric: tabular-nums; }
.td-equity.bad { color: var(--red); }
.td-market-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.td-market-table td { padding: 6px 0; border-bottom: 1px solid var(--line-2);
  font-size: 13px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; }
.td-market-table td.l { text-align: left; font-weight: 600;
  color: var(--muted); font-variant-numeric: normal; }
.td-book { font-size: 13px; margin: 8px 0 0; }

/* Equity Radar (its own tab): the Focus screen Derek chose (0009's section
   of 2026-09-29; radar-design/SPEC.md). One ruled card with the count, the
   list's line and the presses; a second with the chips, the find box and
   the list. Gold is on the presses that do something -- Upload owner list
   on the empty page, Price trades, Save in the settings -- and nowhere else:
   the chips, the mode switch, Work deal and the labels are ink. */
.radar-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.radar-mode { margin-right: 0; }
.radar-mode .mode-seg { font-size: 13px; padding: 6px 14px; }
.radar-card { position: relative; padding: 16px 20px; }
.radar-top { display: flex; align-items: center; gap: 0 22px; min-width: 0; }
.radar-bignum { display: flex; flex-direction: column; flex: none;
  padding-right: 22px; border-right: 1px solid var(--line); }
.radar-bignum b { font-size: 34px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.radar-bignum span { margin-top: 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.radar-top-main { flex: 1; min-width: 0; }
.radar-kept { display: flex; flex-wrap: wrap; align-items: center;
  gap: 3px 7px; font-size: 13.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.radar-kept b { color: var(--ink); font-weight: 600; }
.radar-kept .radar-g { white-space: nowrap; }
.radar-kept .radar-dotsep { color: var(--line); font-weight: 700; }
.radar-kept-acts { display: inline-flex; gap: 14px; margin-left: auto; }
.radar-empty { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.radar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; }
.radar-top .radar-empty + .radar-acts { margin-top: 0; }
.radar-acts .radar-sp { flex: 1; }
.radar-sample { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-top: 12px; font-size: 13px; }
/* Links in ink: they show or open, and change no deal. Clear list is red:
   it takes the list off for everyone. */
.radar-link { background: none; border: 0; padding: 0; font: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.radar-link:hover { color: var(--ink-2); }
/* A finger's 44px on the floor's iPads for every quiet press here, by a
   larger tap area rather than a taller line: the words stay where they
   sit. */
@media (pointer: coarse) {
  .radar-link, .radar-shared { position: relative; }
  .radar-link::after, .radar-shared::after { content: ""; position: absolute;
    left: -6px; right: -6px; top: 50%; height: 44px;
    transform: translateY(-50%); }
}
.radar-link:disabled { color: var(--muted); cursor: default; }
.radar-link.danger { color: var(--red); }
.radar-shared { display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 9px; border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.radar-shared:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.radar-i-in { display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border: 1.3px solid currentColor;
  border-radius: 50%; font-size: 9px; font-weight: 800; line-height: 1; }
.radar-i-in::after { content: "i"; }
/* Run again, split: the press and its caret. The dot says something waits
   for it -- ink, a label, never gold. */
.radar-split { display: inline-flex; }
.radar-split > .btn:first-child { border-top-right-radius: 0;
  border-bottom-right-radius: 0; }
.radar-split > .radar-caret { border-top-left-radius: 0;
  border-bottom-left-radius: 0; margin-left: -1px; padding: 0 8px;
  font-size: 10px; }
.radar-dot { display: inline-block; width: 7px; height: 7px; margin-left: 7px;
  border-radius: 50%; background: var(--ink); vertical-align: 1px; }
.radar-badge { display: inline-block; min-width: 20px; height: 20px;
  margin-left: 6px; padding: 0 6px; border-radius: 10px;
  background: var(--line-2); line-height: 20px; text-align: center;
  font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* Price trades while it works: the count, and a bar along the foot, in ink,
   laid OVER the button's own box (radarPrice): the button stays in the row,
   unseen (.radar-held), so the row keeps its width through the run and
   Run again and Export never move. A face beside the button's place, sized
   by its own words, came out ~60px wider than "Price trades · 116 lookups"
   (measured at 1600px, 2026-09-30). With no button to lie over -- none is
   drawn -- the face takes the place itself. */
.radar-price-slot { display: inline-flex; position: relative; }
.radar-price-slot #radar-price.radar-held { visibility: hidden; }
.radar-progress { display: inline-flex; align-items: center;
  justify-content: center; min-height: 30px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel-2); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.radar-price-slot .radar-progress { position: absolute; inset: 0;
  min-height: 0; box-sizing: border-box; padding-bottom: 5px; }
.radar-price-slot:has(#radar-price.hidden) .radar-progress {
  position: relative; inset: auto; min-height: 30px; }
.radar-progress > span { overflow: hidden; text-overflow: ellipsis; }
.radar-progress i { position: absolute; left: 10px; right: 10px; bottom: 4px;
  height: 2px; border-radius: 1px; background: var(--line);
  overflow: hidden; }
.radar-progress i b { display: block; height: 100%; width: 0;
  background: var(--ink); transition: width .25s; }
/* The service drive's line, while a service list is on this page. */
.radar-service-line { display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 12px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
/* One news line. Hidden when every sentence in it is empty, or put away
   with x until one of them changes. */
.radar-news { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 10px; margin-top: 12px; padding: 7px 10px 7px 12px;
  border-left: 3px solid var(--ink); background: var(--panel-2);
  font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.radar-news:not(:has(.radar-say:not(.hidden):not(:empty))),
.radar-news.dismissed { display: none; }
.radar-news .radar-say:empty { display: none; }
.radar-news-x { margin-left: auto; border: 0; background: none;
  font-size: 16px; line-height: 1; color: var(--muted); cursor: pointer; }
.radar-news-x:hover { color: var(--ink); }
/* The one popover, hung from the press that opened it. */
.radar-pop { position: absolute; z-index: 30; min-width: 250px;
  max-width: calc(100vw - 32px); padding: 8px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-md); font-size: 13px; }
.radar-pane { display: flex; flex-direction: column; gap: 10px;
  padding: 4px 4px 2px; }
.radar-pane p { margin: 0; max-width: 320px; }
.radar-pane label { display: flex; align-items: center;
  justify-content: space-between; gap: 10px; font-weight: 600; }
.radar-pane select, .radar-pane input { height: 32px; width: auto;
  font-variant-numeric: tabular-nums; }
.radar-pane input[type="date"] { width: 150px; }
.radar-menu { gap: 4px; padding: 0; }
.radar-pane .radar-phone { display: none; }
.radar-ic { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px; }
.radar-acts .radar-ic + .radar-word { margin-left: 6px; }
.radar-mi { display: flex; align-items: center; gap: 10px; padding: 4px;
  border-radius: 7px; }
.radar-mi:hover { background: var(--panel-2); }
.radar-mi .btn { min-width: 170px; justify-content: flex-start; }
.radar-mi .muted { font-size: 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* ---- The list card ---- */
.radar-list-card { padding: 16px 16px 18px; }
.radar-tools { margin: 0 0 12px; }
.radar-chiprow { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin: 0 0 10px; }
.radar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.radar-chips .chip { border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px;
  font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.radar-chips .chip:hover { border-color: var(--ink); }
.radar-chips .chip.active { background: var(--ink); border-color: var(--ink);
  color: var(--panel); }
.radar-chips .chip.zero { color: var(--muted); border-style: dashed; }
/* A thin rule before Left off: what is to call, then what is not. */
.radar-chips .chip[data-code="left_off"] { margin-left: 12px;
  position: relative; }
.radar-chips .chip[data-code="left_off"]::before { content: "";
  position: absolute; left: -10px; top: 5px; bottom: 5px; width: 1px;
  background: var(--line); }
.radar-zeros { font-size: 12px; font-weight: 500; color: var(--muted); }
.radar-offchips { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin: -2px 0 10px; font-size: 12px; color: var(--muted); }
.radar-offchips .chip { border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--ink); cursor: pointer;
  font-variant-numeric: tabular-nums; }
.radar-offchips .chip.active { background: var(--ink); border-color: var(--ink);
  color: var(--panel); }
@media (pointer: coarse) {
  .radar-chips .chip, .radar-offchips .chip { padding: 9px 14px;
    min-height: 44px; }
}
.radar-find { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px; font-size: 13px; }
.radar-find-box { position: relative; flex: 1 1 240px; max-width: 360px;
  min-width: 0; }
.radar-find-box input[type="search"], .radar-sort select,
.radar-pane select, .radar-pane input { height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px; font: inherit;
  font-size: 13.5px; color: var(--ink); background: var(--panel); }
.radar-find-box input[type="search"] { width: 100%; padding-right: 30px; }
.radar-find-box input[type="search"]:focus, .radar-sort select:focus,
.radar-pane select:focus, .radar-pane input:focus {
  /* Ink, like .ql's: a box being typed in is not a press, so no gold. */
  outline: 2px solid var(--ink); outline-offset: -2px;
  border-color: var(--ink); }
.radar-find-box kbd { position: absolute; right: 9px; top: 50%;
  transform: translateY(-50%); font: inherit; font-size: 11px;
  line-height: 1.5; padding: 0 5px; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; color: var(--muted);
  background: var(--panel); pointer-events: none; }
.radar-sort { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.radar-sort select { width: auto; color: var(--ink); }
.radar-countbox { margin-left: auto; display: inline-flex; align-items: center;
  gap: 6px; }
.radar-count { font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
/* Nobody in the view (radarSayNobody): a sentence where the table would be,
   on a line of its own under the find box and in ink -- not a muted count
   squeezed against the right end of the find row. */
.radar-countbox:has(.radar-count.radar-nobody) { flex: 1 1 100%;
  margin-left: 0; }
.radar-count.radar-nobody { display: block; padding: 14px 0 4px;
  font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.radar-countbox .btn.sm { min-width: 30px; padding: 0 8px; }
.radar-pager { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: 10px; margin: 12px 0 0; font-size: 13px;
  font-variant-numeric: tabular-nums; }

/* The table: nine columns, one line of figures and a second of small
   words, budgeted to fit 1280 with the bar's 240 (SPEC 4.3) -- the words
   wrap, the figures do not, and the page never scrolls sideways; between
   1101 and 1279 the card's own .cust-scroll may. */
#radar-table { width: 100%; }
#radar-table td { font-variant-numeric: tabular-nums; vertical-align: top;
  padding: 10px 6px; }
#radar-table td.l { font-weight: 400; }
#radar-table thead th { cursor: default; padding: 8px 6px; }
#radar-table tbody tr:nth-child(even) { background: transparent; }
#radar-table tbody tr.radar-row { cursor: pointer; }
#radar-table tbody tr.radar-row:hover { background: var(--panel-2); }
#radar-table tbody tr.radar-row.radar-open { background: var(--panel-2); }
#radar-table tbody tr.radar-row.radar-open > td:first-child,
#radar-table tbody tr.radar-detail > td { box-shadow: inset 3px 0 0 var(--ink); }
/* The words wrap -- a name, a car, a sentence -- and the figures do not. */
#radar-table td.radar-c-who, #radar-table td.radar-c-drives,
#radar-table td.radar-c-put, #radar-table tr.radar-detail td {
  white-space: normal; }
#radar-table td.radar-c-who { min-width: 120px; font-weight: 600;
  color: var(--ink); }
#radar-table td.radar-c-drives { min-width: 120px; max-width: 200px; }
#radar-table td.radar-c-put { min-width: 120px; max-width: 240px; }
#radar-table td.radar-c-acts { white-space: nowrap; text-align: right; }
#radar-table th.radar-c-tog, #radar-table td.radar-c-tog { width: 30px;
  padding-right: 0; }
.radar-tog { display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-width: 26px; height: 26px; padding: 0; border: 1px solid var(--line);
  border-radius: 7px; background: var(--panel); color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.radar-tog:hover { border-color: var(--ink); }
.radar-chev { display: inline-block; width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; }
.radar-tog[aria-expanded="true"] .radar-chev { transform: rotate(45deg); }
/* Words a screen reader says and the desk's eye does not need: the icon
   and the chevron carry them. */
.radar-vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
/* The table's scroll box is where those labels are placed: without a
   positioned box they are placed against the page, and a table wider than
   its box (the service columns on, at 1280) took the whole app sideways
   with it (the third review of the Focus screen). */
#radar-list-view { position: relative; }
/* --muted, the theme's own grey. */
#radar-table tr.radar-off td { color: var(--muted); }
#radar-table tr.radar-called td.radar-c-who { color: var(--muted); }
#radar-table .radar-sub { margin-top: 2px; font-size: 12px; font-weight: 400;
  color: var(--muted); }
/* A reason is a label: outlined ink, never gold. Left off is hatched. */
.radar-pill { display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink); white-space: nowrap; }
.radar-pill.off { color: var(--muted); box-shadow: inset 0 0 0 1px var(--muted);
  background: repeating-linear-gradient(135deg, transparent 0 4px,
    var(--line-2) 4px 5px); }
/* Stretched, Check payoff and Likely match: LABELS, outlined in ink. They
   report, nobody presses them, so they are not gold, and they read by
   their outline as well as their word. */
#radar-table .radar-tag, .radar-call .radar-tag { display: inline-block;
  margin-top: 3px; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  font-weight: 700; color: var(--ink); box-shadow: inset 0 0 0 1px var(--muted);
  font-variant-numeric: normal; white-space: nowrap; }
#radar-table td.radar-c-who .radar-tag { margin-left: 6px; }
.radar-was { color: var(--muted); }
.radar-arr { margin: 0 4px; color: var(--muted); }
.radar-new { font-weight: 700; }
/* The saving is filled (it fits); more is outlined -- the house's
   Fits-filled, Over-outlined rule, readable without telling red from
   green. */
.radar-save { display: inline-block; margin-top: 3px; padding: 1px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--green); background: var(--green-bg); }
.radar-worse { display: inline-block; margin-top: 3px; font-size: 11.5px;
  color: var(--muted); }
/* Under the payments, right-aligned, each on its own line. */
#radar-table td.radar-c-pay .radar-save, #radar-table td.radar-c-pay .radar-worse,
#radar-table td.radar-c-pay .radar-tag, #radar-table td.radar-c-eq .radar-tag {
  display: table; margin-left: auto; }
.radar-neg { color: var(--red); }
.radar-none { color: var(--muted); font-style: italic; }
/* Work deal: this owner to a deal tab -- a plain small button, never gold
   (radarWorkButton says why). */
#radar-table .radar-work { display: inline-flex; }
#radar-table .radar-c-acts > * { vertical-align: middle; }
#radar-table .radar-c-acts .radar-work + .radar-draft { margin-left: 6px; }
/* Draft text on a row: an icon in ink -- it writes words to copy and sends
   nothing -- its words for a screen reader and, on a phone card, for the
   eye. */
#radar-table .radar-draft { display: inline-flex; align-items: center;
  justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  color: var(--ink); cursor: pointer; font: inherit; font-size: 12px;
  font-weight: 600; text-decoration: none; }
#radar-table .radar-draft:hover { border-color: var(--ink); }
/* A speech bubble, drawn by a mask in the ink's own colour. */
#radar-table .radar-draft::before { content: ""; width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (pointer: coarse) {
  #radar-table .radar-draft { min-height: 44px; min-width: 44px; }
}
/* The number to tap: ink and bold, never gold -- it dials, it changes no
   deal on the list -- on one line so a number never breaks in two. */
#radar-table a.radar-tel, .radar-call a.radar-tel { color: var(--ink);
  font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
  text-decoration: none; }
#radar-table a.radar-tel:hover, .radar-call a.radar-tel:hover {
  text-decoration: underline; }
@media (pointer: coarse) {
  #radar-table a.radar-tel { display: inline-block; padding: 10px 0; }
}
.radar-ptype { margin-left: 5px; font-size: 12px; font-weight: 400;
  color: var(--muted); }
/* Called: a shared mark, ink, small -- it reports who rang them. */
/* A block of words, not a flex box: on a narrow card it wraps between
   words instead of squeezing "Called · Tasha, 10:12 AM" into a column. */
.radar-called-said { display: block; margin-top: 3px; font-size: 11.5px;
  font-weight: 600; color: var(--ink-2); }
.radar-called-said::before { content: "\2713"; margin-right: 4px; }
.radar-mark { margin-top: 3px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-2); }
.radar-sub .radar-mark { margin: 0; }
/* The number, its kind and Mark called: one line where it fits, and a
   clean break where it does not. */
#radar-table td.radar-c-who .radar-sub { display: flex; flex-wrap: wrap;
  align-items: baseline; column-gap: 8px; }
#radar-table td.radar-c-who .radar-sub .radar-ptype { margin-left: -3px; }
.radar-unmark { margin-left: 8px; font-size: 11px; color: var(--muted); }
/* The row Details opens: three columns and a foot. */
#radar-table tr.radar-detail td { padding: 6px 16px 16px 40px;
  background: var(--panel-2); font-size: 13px; text-align: left;
  cursor: default; }
.radar-dgrid { display: grid; grid-template-columns: 1.35fr 1fr 1fr;
  gap: 24px; }
.radar-dh { margin: 0 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.radar-whylines p { margin: 0 0 8px; line-height: 1.5; }
.radar-reach { margin-top: 10px; line-height: 1.8; }
.radar-reach .radar-dh { margin-top: 12px; }
.radar-dl { display: grid; grid-template-columns: max-content 1fr;
  gap: 7px 14px; margin: 0; }
.radar-dl dt { color: var(--muted); }
.radar-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.radar-dl dd small { display: block; font-weight: 400; font-size: 12px;
  color: var(--muted); line-height: 1.4; }
.radar-cars { margin: 0; padding: 0; list-style: none; }
.radar-cars li { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--line-2); }
.radar-cars li > span { flex: 1; min-width: 0; }
.radar-dfoot { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 18px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line); }
.radar-dfoot .muted { margin-left: auto; font-size: 12px; }
/* Ask Zeus why and Draft text in the opened row: links in ink -- they ask,
   they change nothing on the list. */
#radar-table .radar-ask, .radar-call .radar-ask, .radar-dfoot .radar-ask {
  padding: 0; border: 0; background: none; color: var(--ink); font: inherit;
  font-size: 12.5px; font-weight: 600; text-decoration: underline;
  cursor: pointer; }
@media (pointer: coarse) {
  #radar-table .radar-ask { min-height: 44px; }
}
.radar-empty-q { padding: 18px 0; color: var(--muted); }

/* ---- Call mode: one owner at a time ---- */
.radar-call { display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px; align-items: start; }
.radar-cc { border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel); padding: 20px 26px 22px; min-width: 0; }
.radar-cc-top { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 14px; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.radar-prog { flex: 1; min-width: 80px; height: 4px; border-radius: 2px;
  background: var(--line-2); overflow: hidden; }
.radar-prog b { display: block; height: 100%; background: var(--ink); }
.radar-cc-name { margin: 16px 0 6px; font-family: Georgia, "Times New Roman",
  serif; font-size: 32px; font-weight: 400; line-height: 1.1; }
.radar-cc-car { margin: 0 0 8px; font-size: 14.5px; color: var(--ink-2); }
.radar-cc-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.radar-cc-contact { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 16px; margin: 14px 0 0; font-size: 13.5px; }
.radar-call a.radar-tel.radar-big { font-size: 24px; font-weight: 700; }
.radar-cc-offer { margin: 18px 0; padding: 2px 0 2px 14px; max-width: 760px;
  border-left: 3px solid var(--ink); font-size: 17px; line-height: 1.5; }
.radar-cc-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.radar-cc-nums > div { padding: 10px 12px; border-left: 1px solid var(--line-2);
  min-width: 0; }
.radar-cc-nums > div:first-child { border-left: 0; padding-left: 0; }
.radar-cc-nums span { display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.radar-cc-nums b { display: block; margin-top: 3px; font-size: 19px;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
/* Under Put them in: how close the car is, or why there is none. */
.radar-cc-nums small { display: block; margin-top: 3px; font-size: 12.5px;
  line-height: 1.35; color: var(--ink-2); }
.radar-cc-nums small.radar-none { margin-top: 5px; font-size: 13.5px;
  color: var(--muted); }
.radar-cc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 18px; }
.radar-cc-acts .radar-sp { flex: 1; }
.radar-cc-acts kbd { margin-left: 8px; font: inherit; font-size: 11px;
  padding: 0 5px; border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); line-height: 1.5; }
.radar-cc-more { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px; margin-top: 12px; }
.radar-cc-detail { margin-top: 14px; padding: 14px 16px;
  background: var(--panel-2); border-left: 3px solid var(--ink); }
.radar-next { border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel); }
.radar-next h5 { margin: 0; padding: 11px 14px; font-size: 11px;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); }
.radar-next-row { display: block; width: 100%; padding: 9px 14px; border: 0;
  border-bottom: 1px solid var(--line-2); background: none; font: inherit;
  text-align: left; color: var(--ink); cursor: pointer; }
.radar-next-row:hover { background: var(--panel-2); }
.radar-next-row b { display: block; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radar-next-row span { font-size: 12px; color: var(--muted); }
.radar-next-row.called b { color: var(--muted); }

/* ---- The drawers: File notes and Radar settings ---- */
.radar-drawer .cd-body { font-size: 13px; }
.radar-drawer .cd-body h4:first-child { margin-top: 0; padding-top: 0;
  border-top: 0; }
.radar-note { font-size: 13px; margin: 0 0 8px; }
.radar-summary { font-size: 13px; margin: 0 0 8px;
  font-variant-numeric: tabular-nums; }
.radar-summary .radar-sum-line + .radar-sum-line { margin-top: 4px; }
/* The column report: a ruled note, not a card and not gold. */
.radar-columns { font-size: 13px; margin: 0 0 10px; padding: 6px 0 6px 12px;
  border-left: 2px solid var(--line); }
.radar-columns p { margin: 0 0 4px; }
.radar-columns p.radar-cols-h { font-weight: 700; color: var(--ink);
  margin-top: 8px; }
.radar-columns p.radar-cols-h:first-child { margin-top: 0; }
.radar-columns ul { margin: 4px 0 0; padding-left: 18px; }
.radar-columns li { margin: 0 0 2px; }
.radar-tabs { display: flex; gap: 4px; padding: 8px 18px 0;
  border-bottom: 1px solid var(--line); }
.radar-tab { border: 0; border-bottom: 2px solid transparent; background: none;
  padding: 6px 8px 8px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; }
.radar-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
/* Radar's hide: the settings drawer's pane not showing, and the demo's
   sample presses once a list is up. NEVER `.radar-off` -- that is a
   left-off owner's row, drawn greyed (`tr.radar-off td`), and a hide
   under its name took every left-off owner off the screen. */
.radar-hide { display: none !important; }
/* Radar settings: the store's figures, in ink -- only Save changes
   anything, and Save is the drawer's one gold press. */
#radar-settings .radar-set-h h3 { margin: 0; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.radar-set-h { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px;
  padding-top: 12px; border-top: 1px solid var(--line-2); }
.radar-set-h:first-of-type { border-top: 0; }
.radar-i { width: 18px; height: 18px; padding: 0; border: 1px solid var(--line);
  border-radius: 50%; background: var(--panel); font: inherit; font-size: 11px;
  font-weight: 700; line-height: 16px; color: var(--muted); cursor: help; }
.radar-set { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
#radar-settings .cd-body .radar-set label { text-transform: none;
  letter-spacing: 0; font-size: 12.5px; color: var(--ink-2); }
#radar-settings input { font-variant-numeric: tabular-nums; }
.radar-save-row { display: flex; align-items: center; gap: 12px;
  margin-top: 10px; font-size: 12px; }
.radar-runs { margin: 0; }
#radar-runs-table td { font-variant-numeric: tabular-nums; }
/* A drawer takes the right edge (body.radar-drawer-up, radarDrawerOpen):
   Ask Zeus steps off its corner and the top line takes its room, so the
   Present switch stands beside it -- as body.cd-open does for the
   customer's card. Only while Radar is the page: the drawer lives in its
   section, and one left open waits there for the way back. */
@media (min-width: 641px) {
  body.radar-drawer-up:has(#tab-radar:not(.hidden)) .ask-fab {
    right: calc(var(--cd-w) + 24px); }
  body.radar-drawer-up:has(#tab-radar:not(.hidden)) .top {
    padding-right: calc(var(--cd-w) + 30px); }
}
@media (min-width: 641px) and (max-width: 880px) {
  body.radar-drawer-up:has(#tab-radar:not(.hidden)) .top {
    padding-right: calc(var(--cd-w) + 18px); }
}

/* ---- Phone and tablet: each owner a card (1100px and below) ----
   The same rows restyled, no second renderer. */
@media (max-width: 1100px) {
  .radar-top { flex-direction: column; align-items: stretch; }
  .radar-bignum { flex-direction: row; align-items: baseline; gap: 8px;
    padding: 0 0 10px; margin-bottom: 10px; border-right: 0;
    border-bottom: 1px solid var(--line); }
  .radar-bignum b { font-size: 28px; }
  .radar-kept-acts { margin-left: auto; }
  .radar-chiprow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px; }
  .radar-chips { flex-wrap: nowrap; }
  .radar-find-box { flex-basis: 100%; max-width: none; }
  .radar-find-box kbd { display: none; }
  #radar-table, #radar-table tbody { display: block; width: 100%; }
  #radar-table thead { display: none; }
  #radar-table tbody tr.radar-row { display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who reason" "drives drives" "put put" "pay eq"
      "acts acts";
    gap: 6px 10px; margin: 0 0 10px; padding: 12px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
  #radar-table tbody tr.radar-row.radar-open { border-radius: 6px 6px 0 0;
    margin-bottom: 0; }
  #radar-table tbody tr.radar-row > td { display: block; padding: 0;
    border: 0; text-align: left; white-space: normal; box-shadow: none !important;
    min-width: 0; max-width: none; }
  #radar-table tbody tr.radar-row.radar-svcrow {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "when adv ro ro" "who who who reason"
      "drives drives drives drives" "put put put put" "pay pay pay eq"
      "acts acts acts acts"; }
  #radar-table td.radar-c-when { grid-area: when; font-weight: 700; }
  #radar-table td.radar-c-adv { grid-area: adv; }
  #radar-table td.radar-c-ro { grid-area: ro; }
  .radar-acts #radar-service-pick { display: none; }
  .radar-pane .radar-phone { display: inline-flex; }
  .radar-acts .radar-word { display: none; }
  .radar-acts #radar-price { flex: 1 1 100%; }
  .radar-price-slot { flex: 1 1 100%; }
  .radar-price-slot .btn, .radar-price-slot .radar-progress { width: 100%; }
  #radar-table td.radar-c-who { grid-area: who; }
  #radar-table td.radar-c-reason { grid-area: reason; text-align: right !important; }
  #radar-table td.radar-c-drives { grid-area: drives; }
  #radar-table td.radar-c-drives::before { content: "Drives "; color: var(--muted); }
  #radar-table td.radar-c-put { grid-area: put; }
  #radar-table td.radar-c-put::before { content: "Put them in "; color: var(--muted); }
  #radar-table td.radar-c-pay { grid-area: pay; }
  #radar-table td.radar-c-eq { grid-area: eq; text-align: right !important; }
  #radar-table td.radar-c-eq::before { content: "Equity "; color: var(--muted);
    font-weight: 400; }
  #radar-table td.radar-c-gross { display: none !important; }
  #radar-table td.radar-c-tog { grid-area: acts; justify-self: end; width: auto;
    z-index: 1; }
  #radar-table td.radar-c-acts { grid-area: acts; display: flex !important;
    gap: 8px; align-items: center; }
  /* On a card the chevron reads Details and Draft text says its words,
     each a finger's 44px. */
  #radar-table td.radar-c-tog .radar-tog { height: 44px; padding: 0 14px; }
  #radar-table td.radar-c-tog .radar-vh { position: static; width: auto;
    height: auto; clip: auto; }
  #radar-table td.radar-c-acts .radar-draft { width: auto; height: 44px;
    padding: 0 14px; }
  #radar-table td.radar-c-acts .radar-draft::before { display: none; }
  #radar-table td.radar-c-acts .radar-draft .radar-vh { position: static;
    width: auto; height: auto; clip: auto; }
  #radar-table td.radar-c-acts .radar-work { min-height: 44px; }
  /* One 44px line: the touch rule's padding on top of it made it 64. */
  #radar-table td.radar-c-who a.radar-tel { display: inline-block;
    min-height: 44px; line-height: 44px; padding: 0; font-size: 15px; }
  /* On a card the pill may take two lines, so a long reason ("Same
     payment, newer car") leaves the name, the number and Called their
     width. */
  #radar-table tbody tr.radar-row > td.radar-c-reason { max-width: 150px; }
  #radar-table td.radar-c-reason .radar-pill { white-space: normal;
    text-align: center; border-radius: 10px; }
  #radar-table tbody tr.radar-detail { display: block; margin: 0 0 10px;
    border: 1px solid var(--line); border-top: 1px dashed var(--line);
    border-radius: 0 0 6px 6px; }
  #radar-table tbody tr.radar-detail > td { display: block;
    padding: 12px !important; box-shadow: none; }
  .radar-dgrid { grid-template-columns: 1fr; gap: 16px; }
  .radar-dfoot .muted { margin-left: 0; width: 100%; }
  .radar-call { grid-template-columns: 1fr; }
  .radar-next { display: none; }
}
@media (max-width: 640px) {
  .radar-head { margin-bottom: 12px; }
  .radar-head h1 { font-size: 27px; }
  .radar-card, .radar-list-card { padding: 14px 12px; }
  .radar-card { margin-bottom: 12px; }
  .radar-bignum { padding-bottom: 6px; margin-bottom: 8px; }
  /* One row of four presses under the gold Price trades: Run again,
     Export, File notes and Radar settings (their icons). */
  .radar-acts { gap: 6px; }
  .radar-acts .radar-sp { display: none; }
  .radar-acts .radar-notes { margin-left: auto; }
  .radar-acts .btn.sm { padding: 0 9px; }
  /* Sort and the count on one line, under the find box. */
  .radar-sort select { max-width: 124px; }
  .radar-countbox { margin-left: auto; }
  .radar-cc { padding: 16px 14px 0; }
  .radar-cc-name { font-size: 28px; }
  .radar-cc-nums { grid-template-columns: 1fr 1fr; }
  .radar-cc-nums > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .radar-cc-nums > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .radar-cc-acts { position: sticky; bottom: 0; z-index: 5;
    margin: 16px -14px 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--panel); border-top: 1px solid var(--line); }
  .radar-cc-acts .btn { flex: 1 1 0; min-height: 44px; }
  .radar-cc-acts kbd, .radar-cc-acts .radar-sp { display: none; }
  body.radar-calling .radar-acts, body.radar-calling .radar-bignum { display: none; }
  /* The pinned bar runs the screen's width along its foot, where Ask
     Zeus's gold button floats: at 390x844 the button lay over Next, and a
     tap on Next opened Ask Zeus (measured by elementFromPoint, 2026-09-30).
     So while Call mode is on Zeus Radar the button steps away; Ask Zeus why
     on the card, and the menu, still open the panel. Only on the Radar
     tab: body.radar-calling outlives a switch to another tab. */
  body.radar-calling:has(#tab-radar:not(.hidden)) .ask-fab { display: none; }
  .radar-pager { justify-content: space-between; }
}

/* How many owners on the Radar list held on the page can trade into a car,
   on the car rows elsewhere -- the Deal Finder, Inventory, Lot Health
   (three-tools P1-3). A count reports, and pressing it only opens a list,
   so the chip is ink and outlined, never gold; the figures line up down the
   column. Present hides the column and the line: the list behind them names
   other customers. */
.radar-col { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.present .radar-col { display: none !important; }
body.present .radar-lot { display: none !important; }
.radar-car { border: 1px solid var(--ink); background: transparent;
  color: var(--ink); border-radius: 999px; padding: 1px 8px; font: inherit;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.radar-car:hover { background: var(--line-2); }
.radar-car .radar-closest { font-size: 11px; font-weight: 500;
  color: var(--muted); }
.radar-car-none { color: var(--muted); font-variant-numeric: tabular-nums; }
/* Lot Health's aged cars (60 days or more) say so first, in bold. */
.radar-aged { font-weight: 800; }
@media (pointer: coarse) {
  .radar-car { min-height: 44px; padding: 6px 12px; }
}
.radar-lot { font-size: 13px; margin: 0 0 8px;
  font-variant-numeric: tabular-nums; }
/* A car's buyer list: one owner a line, closest first, the figures lined
   up; its labels are the Radar table's outlined ink ones, its buttons plain.
   Present hides the names and says why. */
.radar-buyers-list { margin: 8px 0; padding-left: 22px; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.radar-buyer { margin: 0 0 10px; }
.radar-buyer .radar-buyer-who { display: flex; flex-wrap: wrap;
  align-items: center; gap: 4px 10px; }
.radar-buyer a.radar-tel { color: var(--ink); font-weight: 600;
  white-space: nowrap; }
.radar-buyer .radar-sub { font-size: 12px; color: var(--muted); }
.radar-buyer .radar-tag { display: inline-block; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--ink); box-shadow: inset 0 0 0 1px var(--muted); }
.radar-buyer-acts { display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px; }
.radar-buyers-hid { display: none; }
body.present .radar-buyers { display: none !important; }
body.present .radar-buyers-hid { display: block; }

/* Aged cars on Equity Radar (three-tools P1-4): a card a car on the lot 60
   days or more -- a rule, not a shadow, as every card here -- with its
   figures lined up. The age is the one red on it, in bold: the reason the
   card is there. The owners' chips report who fits, so they are ink and
   outlined, the one picked for Work deal filled in ink (the Radar chips'
   rule), and none is gold; Work deal is the list's plain button. Present
   hides the cards and says why: the owners under them are other
   customers. */
.radar-aged-list { display: flex; flex-direction: column; gap: 8px;
  margin: 0 0 8px; }
.radar-aged-card { border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); padding: 8px 12px; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.radar-aged-head { display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 14px; }
.radar-aged-car { font-weight: 700; color: var(--ink); }
.radar-aged-age { color: var(--red); font-weight: 800; }
.radar-aged-head .radar-work { margin-left: auto; }
.radar-aged-said { margin: 6px 0 4px; font-size: 12px; color: var(--muted); }
.radar-aged-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.radar-aged-chips .radar-owner { border: 1px solid var(--line);
  background: var(--panel); border-radius: 999px; padding: 3px 10px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.radar-aged-chips button.radar-owner { cursor: pointer; }
.radar-aged-chips button.radar-owner:hover { border-color: var(--ink); }
.radar-aged-chips .radar-owner.active { background: var(--ink);
  border-color: var(--ink); color: var(--panel); }
.radar-aged-more { margin: 4px 0 0; font-size: 12px; }
@media (pointer: coarse) {
  .radar-aged-chips button.radar-owner { min-height: 44px; padding: 6px 12px; }
}
.radar-aged-hid { display: none; }
body.present .radar-aged-list { display: none !important; }
body.present .radar-aged-hid { display: block; }

/* An owner's row reached from Today's Show on the list (P5-3): marked in
   ink, not gold -- it says where you are -- until the list is next drawn. */
#radar-table tr.radar-found td { background: var(--line-2); }
#radar-table tr.radar-found td:first-child {
  box-shadow: inset 3px 0 0 var(--ink); }

/* ---------- Today (three-tools P5-3) ----------
   The design's first screen (P:187-200) where CLAUDE.md allows it: the
   greeting in the page titles' Georgia at the design's 34px (27px on a
   phone), a grid of 1.65fr and 1fr that folds to one column at 1100px,
   cards with a rule and no shadow (the .card they are), figures in
   tabular type. Gold only on Find Deals, the desk box's one press: the
   reason pill is ink, a count is ink, a late feed's dot is amber and an
   aged car's age is red -- states, not presses. The desk box's figures
   are the design's big fields, 20px/650, with an ink edge when typed in
   (the Deal Finder's own boxes still ring gold -- the long tail P5-1 left). */
.page-head h1.hello { font-size: 34px; }
@media (max-width: 820px) { .page-head h1.hello { font-size: 27px; } }
.today-grid { display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 0 18px; align-items: start; }
@media (max-width: 1100px) {
  .today-grid { grid-template-columns: minmax(0, 1fr); }
}
.today-col { min-width: 0; }
.today-card .card-head { margin-bottom: 12px; }
.today-h-sub { font-size: 12.5px; font-weight: 400; margin-left: 8px; }
.today-said { margin: 0; font-size: 13.5px; }
.today-fu-line { margin: 0; display: flex; align-items: baseline;
  gap: 10px; flex-wrap: wrap; }
.today-count { font-size: 29px; font-weight: 650; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }
.today-count:empty { display: none; }
.today-aged-list { list-style: none; margin: 10px 0 0; padding: 0; }
.today-aged-row { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line-2);
  font-size: 13px; font-variant-numeric: tabular-nums; }
.today-stock { font-weight: 700; }
.today-car { flex: 1 1 180px; min-width: 0; }
.today-age { color: var(--red); font-weight: 700; }
.today-quick { display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.today-quick label { display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); }
.today-inp { display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); overflow: hidden; }
.today-inp:focus-within { border-color: var(--ink); }
.today-inp .pre { padding-left: 11px; color: var(--muted); font-size: 16px;
  font-weight: 600; letter-spacing: 0; }
.today-quick input, .today-quick select { border: 0; outline: 0;
  background: transparent; color: var(--ink); font-family: inherit;
  font-weight: 650; letter-spacing: 0; text-transform: none; width: 100%;
  min-width: 0; font-variant-numeric: tabular-nums; }
.today-quick input { font-size: 20px; padding: 7px 11px; }
.today-quick select { font-size: 16px; padding: 10px 11px; }
#today-find { grid-column: 1 / -1; min-height: 46px; font-size: 15px; }
@media (max-width: 480px) {
  .today-quick { grid-template-columns: minmax(0, 1fr); }
}
.today-calls { display: flex; flex-direction: column; }
.today-call { display: grid; grid-template-columns: minmax(150px, 1.1fr)
  minmax(120px, .9fr) minmax(180px, 1.3fr) auto; gap: 6px 14px;
  align-items: center; padding: 11px 0; border-top: 1px solid var(--line-2);
  font-size: 13px; }
.today-call b { font-weight: 650; }
.today-call small { display: block; color: var(--muted); font-size: 12px; }
.today-call-why { display: flex; flex-wrap: wrap; gap: 5px; }
.today-pill { display: inline-flex; align-items: center; font-size: 11.5px;
  font-weight: 650; padding: 1px 8px; border-radius: 20px;
  white-space: nowrap; line-height: 1.6; background: var(--ink);
  color: var(--panel); }
.today-pill.soft { background: var(--line-2); color: var(--muted); }
.today-call-car { font-variant-numeric: tabular-nums; }
.today-call-acts { display: flex; gap: 6px; justify-content: flex-end;
  flex-wrap: wrap; }
@media (max-width: 1100px) {
  .today-call { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .today-call-acts { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .today-call { grid-template-columns: minmax(0, 1fr); }
}
.today-feeds { display: flex; flex-wrap: wrap; gap: 8px; }
.today-feed { display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 9px; padding: 5px 10px;
  font-size: 12.5px; background: var(--panel);
  font-variant-numeric: tabular-nums; }
.today-feed b { font-weight: 600; }
.today-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--green); }
.today-dot.late { background: var(--amber); }
#today-empty { margin: 4px 0 0; }

/* ---------- BDC Desk: the Desk Board (decision 0011) -----------------------
   The prototype's board (docs/specs/bdc-desk/reference/bdc-desk-board.html)
   on Zeus's own ground: the paper, the panel, the ink, the hairlines and
   Georgia for the sheet's title come from the tokens above, so the board
   is Zeus in both themes. What the board adds are the colours of its two
   SIDES -- the BDC's blue and the desk's brown -- and the canary of the
   desk's carbon copy, the two-part sheet the tool is for (SPEC section 8),
   plus the status colours of a wait timer. The desk's colour is a brown,
   never Zeus's gold: gold is a thing a person presses (CLAUDE.md), and the
   board's presses wear Zeus's own `btn primary`. Every class starts bd-, so
   no rule here reaches the rest of Zeus and none of Zeus's reaches in by
   accident (.toggle, .pill and .chip are Zeus's words already). Anything
   tickable is ink. tests/test_bdc_desk_ui.py holds the gold, the dark
   values and the phone widths. */
.bdc-desk {
  --bd-bdc: #2349a6;
  --bd-bdc-ink: #ffffff;
  --bd-bdc-soft: #e3eafa;
  --bd-desk: #7a4a0c;
  --bd-desk-soft: #f6e6c4;
  --bd-canary: #fff8dc;
  --bd-canary-rule: #e6d39a;
  --bd-ok: #1d7648;
  --bd-ok-soft: #ddf1e5;
  --bd-warn: #955700;
  --bd-warn-soft: #fdefd3;
  --bd-hot: #c0281b;
  --bd-hot-soft: #fce4e1;
  --bd-rule-2: #cfc9bd;
  --bd-field: #ffffff;
  --bd-focus: #2349a6;
  --bd-scrim: rgba(14, 18, 24, .40);
  --bd-lift: -12px 0 40px rgba(20, 26, 34, .18);
  --bd-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink);
}
html.dark .bdc-desk {
  --bd-bdc: #89a6ff;
  --bd-bdc-ink: #0b1020;
  --bd-bdc-soft: #1b2542;
  --bd-desk: #d2a679;
  --bd-desk-soft: #3a2d12;
  --bd-canary: #1f1b10;
  --bd-canary-rule: #4a3e1c;
  --bd-ok: #5bc993;
  --bd-ok-soft: #14301f;
  --bd-warn: #e3ab62;
  --bd-warn-soft: #3a2d12;
  --bd-hot: #ff7b6d;
  --bd-hot-soft: #3e1a16;
  --bd-rule-2: #34436b;
  --bd-field: #0f1830;
  --bd-focus: #89a6ff;
  --bd-scrim: rgba(0, 0, 0, .55);
  --bd-lift: -12px 0 40px rgba(0, 0, 0, .5);
  --bd-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.bd-sr { position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0; }
.bd-mono { font-family: var(--bd-mono); }
.bd-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.bdc-desk :focus-visible { outline: 2px solid var(--bd-focus); outline-offset: 2px; }

/* The tools under the title: live, the chime, Team, New deal sheet. */
.bd-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin: 0 0 4px; }
.bd-bar-sp { flex: 1; }
.bd-live { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bd-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.bd-live i.on { background: var(--bd-ok); box-shadow: 0 0 0 3px var(--bd-ok-soft); }
.bd-live i.wait { background: var(--bd-warn); }
.bd-live i.off { background: var(--bd-hot); }
.bd-icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--bd-rule-2); background: var(--panel);
  color: var(--muted); flex: none; padding: 0; cursor: pointer; }
.bd-icon-btn:hover { color: var(--ink); border-color: var(--muted); }
.bd-icon-btn[aria-pressed="true"] { color: var(--ink); background: var(--panel-2);
  border-color: var(--muted); }
.bd-linkbtn { background: none; border: 0; padding: 0; color: var(--bd-bdc);
  font: inherit; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.bd-linkbtn.danger { color: var(--bd-hot); }

/* Today at a glance. */
.bd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; padding: 12px 0 4px; }
.bd-stat { background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px 11px; display: flex;
  flex-direction: column; gap: 3px; min-width: 0; }
.bd-stat-l { font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); display: flex;
  align-items: center; gap: 7px; }
.bd-stat-l i { width: 9px; height: 9px; border-radius: 2px;
  background: var(--bd-c, var(--muted)); flex: none; }
.bd-stat.desk { --bd-c: var(--bd-desk); }
.bd-stat.bdc { --bd-c: var(--bd-bdc); }
.bd-stat.appt { --bd-c: var(--bd-ok); }
.bd-stat.sold { --bd-c: var(--ink); }
.bd-stat-n { font-size: 28px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; }
.bd-stat-s { font-size: 12.5px; color: var(--muted); display: flex;
  align-items: center; gap: 6px; flex-wrap: wrap; min-height: 22px; }
@media (max-width: 760px) {
  .bd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-stat-n { font-size: 24px; }
}

/* The find box, the manager chips, Only mine. A pressed chip is ink: it
   says which filter is on, it does not act. */
.bd-filters { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px; padding: 12px 0 4px; }
.bd-search { position: relative; flex: 1 1 220px; max-width: 340px; }
.bd-search svg { position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.bd-search input { width: 100%; height: 36px; padding: 0 12px 0 34px;
  border: 1px solid var(--bd-rule-2); border-radius: 8px;
  background: var(--bd-field); color: var(--ink); font: inherit; }
.bd-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-pill { min-height: 32px; padding: 0 12px; border-radius: 16px;
  border: 1px solid var(--bd-rule-2); background: var(--panel); color: var(--ink);
  font: inherit; font-weight: 500; font-size: 13.5px; cursor: pointer; }
.bd-pill[aria-pressed="true"] { background: var(--ink); color: var(--panel);
  border-color: var(--ink); }
.bd-pill:disabled { opacity: .5; cursor: not-allowed; }

.bd-banners { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.bd-banners:empty { display: none; }
.bd-banner { display: flex; align-items: center; justify-content: space-between;
  gap: 10px 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px;
  border: 1px dashed var(--bd-rule-2); background: var(--panel); font-size: 14px; }
.bd-banner.warn { border-style: solid; border-color: var(--bd-warn);
  background: var(--bd-warn-soft); }

/* The three lanes. */
.bd-lane-tabs { display: none; }
.bd-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; padding: 14px 0 24px; align-items: start; }
.bd-lane { min-width: 0; }
.bd-lane.desk { --bd-lane: var(--bd-desk); }
.bd-lane.bdc { --bd-lane: var(--bd-bdc); }
.bd-lane.booked { --bd-lane: var(--bd-ok); }
.bd-lane-head { display: flex; align-items: center; gap: 9px;
  padding: 2px 2px 10px; border-bottom: 2px solid var(--bd-lane);
  margin-bottom: 12px; }
.bd-lane-head h2 { margin: 0; font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; }
.bd-count { font: 500 12px/1 var(--bd-mono); padding: 3px 7px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  font-variant-numeric: tabular-nums; }
.bd-lane-note { margin-left: auto; font-size: 12px; color: var(--muted); }
.bd-cards { display: flex; flex-direction: column; gap: 10px; }
.bd-empty { margin: 0; padding: 18px 14px; border: 1px dashed var(--bd-rule-2);
  border-radius: 10px; color: var(--muted); text-align: center; font-size: 13.5px; }
.bd-skel { height: 96px; border-radius: 10px; border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%);
  background-size: 200% 100%; animation: bd-sk 1.4s ease-in-out infinite; }
@keyframes bd-sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
/* A phone, or an iPad held upright: one lane at a time, picked by tabs. */
@media (max-width: 860px) {
  .bd-lane-tabs { display: flex; gap: 6px; overflow-x: auto; padding-top: 14px; }
  .bd-lane-tab { flex: 1 0 auto; display: inline-flex; align-items: center;
    justify-content: center; gap: 7px; min-height: 40px; padding: 0 12px;
    border-radius: 9px; border: 1px solid var(--bd-rule-2); background: var(--panel);
    color: var(--ink); font: inherit; font-size: 13px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
    cursor: pointer; }
  .bd-lane-tab[aria-selected="true"] { background: var(--ink); color: var(--panel);
    border-color: var(--ink); }
  .bd-lane-tab[aria-selected="true"] .bd-count { background: transparent;
    color: inherit; border-color: currentColor; }
  .bd-board { grid-template-columns: minmax(0, 1fr); }
  .bd-board[data-lane="desk"] .bd-lane:not(.desk),
  .bd-board[data-lane="bdc"] .bd-lane:not(.bdc),
  .bd-board[data-lane="booked"] .bd-lane:not(.booked) { display: none; }
  .bd-lane-note { display: none; }
}

/* A deal's card. */
.bd-card { background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; cursor: pointer; display: flex;
  flex-direction: column; gap: 6px; min-width: 0; }
.bd-card:hover { border-color: var(--bd-rule-2); }
.bd-card.hot { border-color: var(--bd-hot); box-shadow: inset 0 0 0 1px var(--bd-hot); }
.bd-c-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.bd-c-name { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.15;
  min-width: 0; overflow-wrap: anywhere; margin-right: auto; }
.bd-ref { font: 500 12px/1 var(--bd-mono); color: var(--muted); white-space: nowrap; }
.bd-c-veh { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.bd-cond { display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 3px 5px;
  border-radius: 4px; border: 1px solid var(--bd-rule-2); margin-right: 6px;
  vertical-align: 1px; color: var(--ink); }
.bd-stk { font: 500 12.5px var(--bd-mono); color: var(--muted); white-space: nowrap; }
.bd-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bd-chip { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 7px; border-radius: 5px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.bd-c-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  font-size: 13.5px; }
.bd-stage { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); }
.bd-appt { font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-appt.due { color: var(--bd-warn); }
.bd-c-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 13px; color: var(--muted); }
.bd-route { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-wait { font: 500 12px/1 var(--bd-mono); padding: 4px 7px; border-radius: 6px;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-w-ok { background: var(--bd-ok-soft); color: var(--bd-ok); }
.bd-w-warn { background: var(--bd-warn-soft); color: var(--bd-warn); }
.bd-w-bad { background: var(--bd-hot-soft); color: var(--bd-hot); }
.bd-c-last { margin: 2px 0 0; padding-top: 7px; border-top: 1px dashed var(--line);
  font-size: 13px; color: var(--muted); overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.bd-c-last b { color: var(--ink); font-weight: 600; }
.bd-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 6px; border-radius: 4px; white-space: nowrap; }
.bd-tag.ex { background: var(--panel-2); border: 1px dashed var(--bd-rule-2);
  color: var(--muted); }
.bd-tag.hot { background: var(--bd-hot); color: var(--panel); }
.bd-flash { animation: bd-flash 1.8s ease-out 1; }
@keyframes bd-flash { 0% { box-shadow: 0 0 0 3px var(--bd-focus); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  .bd-flash, .bd-skel { animation: none; }
}

/* Closed: Today or the last 30 days. */
.bd-closed { padding: 6px 0 40px; }
.bd-closed-h { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  margin-bottom: 10px; }
.bd-closed-h h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; }
.bd-closed-sum { font-size: 13px; color: var(--muted); }
.bd-rows { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; }
.bd-row { display: grid; grid-template-columns: 8em 7em minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1.3fr);
  gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line);
  cursor: pointer; font-size: 13.5px; }
.bd-row:first-child { border-top: 0; }
.bd-row:hover { background: var(--panel-2); }
.bd-r-time { font: 500 12.5px var(--bd-mono); color: var(--muted);
  font-variant-numeric: tabular-nums; }
.bd-r-stage { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; }
.bd-r-stage.s-sold { color: var(--bd-ok); }
.bd-r-stage.s-lost, .bd-r-stage.s-noshow, .bd-r-stage.s-archived { color: var(--muted); }
.bd-r-name { font-weight: 600; overflow-wrap: anywhere; }
.bd-r-veh, .bd-r-route { color: var(--muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
@media (max-width: 760px) {
  .bd-row { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; }
  .bd-r-name { grid-column: 1; grid-row: 1; }
  .bd-r-stage { grid-column: 2; grid-row: 1; }
  .bd-r-veh, .bd-r-route, .bd-r-time { grid-column: 1 / -1; }
}

/* Segmented controls: whose move it is, the closed list's range. The
   chosen side is that side's colour; a chosen range is ink. */
.bd-seg { display: inline-flex; border: 1px solid var(--bd-rule-2); border-radius: 9px;
  overflow: hidden; background: var(--panel); flex: none; }
.bd-seg button { border: 0; border-right: 1px solid var(--line); background: transparent;
  color: var(--ink); min-height: 34px; padding: 0 13px; font: inherit; font-weight: 600;
  font-size: 13.5px; cursor: pointer; }
.bd-seg button:last-child { border-right: 0; }
.bd-seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.bd-seg.ball button[data-v="desk"][aria-pressed="true"] { background: var(--bd-desk);
  color: var(--panel); }
.bd-seg.ball button[data-v="bdc"][aria-pressed="true"] { background: var(--bd-bdc);
  color: var(--bd-bdc-ink); }
.bd-seg button:disabled { cursor: not-allowed; opacity: .6; }
.bd-seg.sm button { min-height: 30px; padding: 0 11px; font-size: 13px; }

/* The deal sheet's layer: INSIDE the board's page (index.html), so it is
   hidden with the page. Over Ask Zeus (61) and under the search (65) and
   the phone's menu (70): the sheet is a dialog, and a question for Zeus
   waits until it is shut. */
.bd-layer { position: fixed; inset: 0; z-index: 62; display: flex;
  justify-content: flex-end; }
.bd-scrim { position: absolute; inset: 0; background: var(--bd-scrim); }
.bd-drawer { position: relative; display: flex; flex-direction: column;
  width: min(1120px, 100%); height: 100%; background: var(--bg-app);
  box-shadow: var(--bd-lift); padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px); animation: bd-slide .2s ease-out;
  overscroll-behavior: contain; }
.bd-drawer.narrow { width: min(560px, 100%); }
@keyframes bd-slide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bd-drawer { animation: none; }
}
.bd-d-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.bd-d-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
  min-width: 0; margin-right: auto; }
/* The sheet's title is a customer's name, set as a page title is: Georgia,
   a system face, regular weight. */
.bd-d-title h2 { margin: 0; font-family: Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.bd-d-title h2:focus { outline: none; }
.bd-d-tools { display: flex; align-items: center; gap: 8px; }
.bd-d-tools .btn svg { margin-right: 6px; }
.bd-d-scroll { flex: 1; overflow: auto; padding: 0 20px 32px; overscroll-behavior: contain; }
@media (max-width: 560px) {
  .bd-d-head { padding: 10px 16px; }
  .bd-d-scroll { padding: 0 16px 28px; }
  .bd-d-title h2 { font-size: 22px; }
  .bd-d-tools .btn span { display: none; }
  .bd-d-tools .btn svg { margin-right: 0; }
}
.bd-d-status { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 4px; }
.bd-st-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.bd-st-l { font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); min-width: 5.5em; }
.bd-st-wait, .bd-st-mgr { font-size: 13.5px; color: var(--muted); display: inline-flex;
  align-items: center; gap: 6px; }
.bd-st-mgr b { color: var(--ink); }
.bd-stages { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-stages .bd-pill[aria-pressed="true"].st-sold { background: var(--bd-ok);
  border-color: var(--bd-ok); color: var(--panel); }
.bd-st-meta { margin: 0; font-size: 12.5px; color: var(--muted); }
.bd-jump { display: none; }
.bd-d-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 18px; align-items: start; padding-top: 12px; }
@media (max-width: 1020px) {
  .bd-d-body { grid-template-columns: minmax(0, 1fr); }
  .bd-jump { display: flex; gap: 16px; }
}

/* The two-part sheet: the BDC's copy on top, the desk's carbon copy under
   the perforation -- the point of the tool (SPEC section 8). */
.bd-sheet { border: 1px solid var(--bd-rule-2); border-radius: 12px; overflow: hidden;
  background: var(--panel); }
.bd-copy { padding: 16px 18px 18px; container-type: inline-size; }
.bd-copy-desk { background: var(--bd-canary); }
.bd-copy-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin-bottom: 14px; }
.bd-copy-h h3 { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.bd-copy-h h3::before { content: ""; width: 10px; height: 10px; border-radius: 2px;
  background: currentColor; }
.bd-copy-bdc .bd-copy-h h3 { color: var(--bd-bdc); }
.bd-copy-desk .bd-copy-h h3 { color: var(--bd-desk); }
.bd-copy-meta { font-size: 13px; color: var(--muted); }
.bd-copy-h .bd-linkbtn { margin-left: auto; }
.bd-perf { position: relative; height: 20px;
  background: linear-gradient(to bottom, var(--panel) 50%, var(--bd-canary) 50%); }
.bd-perf::before { content: ""; position: absolute; left: 18px; right: 18px;
  top: calc(50% - 1px); border-top: 2px dashed var(--bd-rule-2); }
.bd-perf span { position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%; background: var(--bg-app); border: 1px solid var(--bd-rule-2); }
.bd-perf span:first-child { left: -10px; }
.bd-perf span:last-child { right: -10px; }
.bd-sec { padding: 14px 0; border-top: 1px solid var(--line); }
.bd-copy-h + .bd-sec, .bd-sec:first-child { border-top: 0; padding-top: 0; }
.bd-copy-desk .bd-sec { border-top-color: var(--bd-canary-rule); }
.bd-sec-t { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.bd-ask { margin: 0; font-size: 16px; line-height: 1.45; white-space: pre-wrap;
  overflow-wrap: anywhere; }
.bd-sec-ask .bd-chips { margin-bottom: 10px; }
.bd-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px 18px; margin: 0; }
.bd-kv > div { min-width: 0; }
.bd-kv .full { grid-column: 1 / -1; }
.bd-kv dt { font-size: 12px; color: var(--muted); }
.bd-kv dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere;
  white-space: pre-wrap; font-variant-numeric: tabular-nums; }
.bd-kv a { color: var(--bd-bdc); font-weight: 600; }
.bd-kv-line { margin: 12px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.bd-kv-line span { display: block; color: var(--muted); font-size: 12px; }
.bd-stale { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  padding: 8px 12px; margin-bottom: 12px; border-radius: 8px;
  background: var(--bd-warn-soft); color: var(--bd-warn); font-weight: 600;
  font-size: 13.5px; }

/* The four-square: price, trade, down, payment, in the desk's colour. */
.bd-fsq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 2px solid var(--bd-desk); border-radius: 10px; overflow: hidden;
  background: var(--panel); }
.bd-fsq > div { padding: 10px 12px 12px; min-width: 0; }
.bd-fsq > div:nth-child(-n+2) { border-bottom: 2px solid var(--bd-desk); }
.bd-fsq > div:nth-child(odd) { border-right: 2px solid var(--bd-desk); }
.bd-fsq h4 { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bd-desk); }
.bd-fsq h4 label { cursor: pointer; }
.bd-big { font-size: 24px; font-weight: 650; line-height: 1.05;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bd-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.bd-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.bd-pair { display: flex; align-items: center; gap: 6px; }
.bd-pair .bd-money { flex: 1; min-width: 0; }
.bd-term { display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 13px; color: var(--muted); }
/* Heavier than .bd-fsq input below, as the prototype's .fsq .term input. */
.bd-fsq .bd-term input { width: 70px; }
@container (max-width: 430px) {
  .bd-big { font-size: 20px; }
  .bd-pair { flex-direction: column; align-items: stretch; }
  .bd-pair > span { display: none; }
}

/* The forms: the BDC copy, the desk copy, a new sheet. */
.bd-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 12px 14px; }
.bd-fgrid.mt { margin-top: 12px; }
.bd-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0;
  padding: 0; border: 0; }
.bd-fld.full { grid-column: 1 / -1; }
.bd-fld > label, .bd-fld > legend { font-size: 12.5px; font-weight: 600;
  color: var(--muted); padding: 0; }
fieldset.bd-fld > legend { float: left; width: 100%; margin-bottom: 5px; }
fieldset.bd-fld > legend + * { clear: both; }
.bd-req { color: var(--bd-hot); }
.bd-fld input:not([type=checkbox]):not([type=radio]), .bd-fld select, .bd-fld textarea,
.bd-fsq input, .bd-team-add input, .bd-team-add select { width: 100%; min-height: 38px;
  padding: 7px 10px; border: 1px solid var(--bd-rule-2); border-radius: 7px;
  background: var(--bd-field); color: var(--ink); font: inherit; font-size: 14.5px; }
.bd-fld textarea { min-height: 60px; resize: vertical; line-height: 1.4; }
.bd-fld input:focus, .bd-fld select:focus, .bd-fld textarea:focus, .bd-fsq input:focus,
.bd-composer textarea:focus, .bd-team-add input:focus, .bd-search input:focus {
  outline: 2px solid var(--bd-focus); outline-offset: 0; border-color: var(--bd-focus); }
/* As specific as the input rule above, or its `font: inherit` wins and the
   Stock # box reads in the page's proportional face (browser review,
   round 1). */
.bd-fld input.bd-mono:not([type=checkbox]):not([type=radio]) {
  font-family: var(--bd-mono); font-size: 14px;
  font-variant-numeric: tabular-nums; }
/* The line under Stock #: what the lot said about the number in the box
   (Derek, 2026-09-28). Words, not a press, so no gold -- and no colour of
   gold's hue either: the board's amber warning was #e3ab62 in dark mode,
   gold beside the gold Send to desk button, so a sold, held or wholesale
   car, or a refusal, reads in the board's red. The year and stock number
   in it line up like every other figure on screen.
   It is the grid's own item, spanning the row: after the row that holds
   Stock #, Color and Availability (order), and right under the box on a
   phone, where the grid is one column. The on/off box after it in the
   markup -- Open to similar units -- goes after it too, or in a
   three-column grid it took the row under Stock # and the line sat a row
   lower (browser review, round 2).
   It keeps one line's height even while empty, and is never taken out of
   the flow: round 1 hid it the way .bd-sr hides a label, and its first
   words -- "Looking that car up…", as the click on Save BDC copy left
   Stock # -- pushed the button 25 px down between mouse-down and mouse-up,
   and the click was lost (browser review, round 2). The words now arrive
   in space already there, and the live region is in the accessibility
   tree all along. */
.bd-stock-note { margin: 0; font-size: 12.5px; line-height: 1.35;
  min-height: 1.35em; color: var(--muted); font-variant-numeric: tabular-nums; }
.bd-fgrid > .bd-stock-note { grid-column: 1 / -1; order: 1; margin-top: -4px; }
.bd-fgrid > .bd-stock-note ~ .bd-fld.tog { order: 2; }
.bd-stock-note.ok { color: var(--ink); }
.bd-stock-note.warn { color: var(--bd-hot); font-weight: 600; }
@media (max-width: 560px) {
  .bd-fgrid > .bd-stock-note { order: 0; }
}
.bd-money { position: relative; }
.bd-money > span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; }
.bd-money input { padding-left: 22px !important; font-variant-numeric: tabular-nums; }
.bd-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-opt { position: relative; display: inline-flex; }
.bd-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; }
.bd-opt span { display: inline-flex; align-items: center; min-height: 34px;
  padding: 0 12px; border-radius: 8px; border: 1px solid var(--bd-rule-2);
  background: var(--panel); font-weight: 500; font-size: 14px; }
.bd-opt input:checked + span { background: var(--ink); color: var(--panel);
  border-color: var(--ink); }
.bd-opt input:focus-visible + span { outline: 2px solid var(--bd-focus); outline-offset: 2px; }
.bd-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 16px; }
.bd-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; cursor: pointer; }
.bd-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink);
  flex: none; }
.bd-fld.tog { justify-content: flex-end; }
.bd-toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 600;
  cursor: pointer; min-height: 38px; }
.bd-toggle input { width: 19px; height: 19px; margin: 0; accent-color: var(--ink); flex: none; }
.bd-toggle.sm { min-height: 0; font-size: 13.5px; font-weight: 500; }
.bd-dep { display: contents; }
.bd-dep.off { display: none; }
.bd-form-foot { display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 10px; padding-top: 14px; }
.bd-err { margin: 0 auto 0 0; color: var(--bd-hot); font-weight: 600; font-size: 13.5px; }
.bd-d-foot { flex: none; display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 10px; padding: 12px 20px; background: var(--panel);
  border-top: 1px solid var(--line); }
@media (max-width: 560px) {
  .bd-d-foot { padding: 10px 16px; }
}
.bd-bring { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 7px 16px; }
.bd-bring li { display: flex; gap: 9px; align-items: flex-start; }
.bd-bring li::before { content: ""; flex: none; width: 15px; height: 15px;
  margin-top: 3px; border-radius: 3px; border: 2px solid var(--bd-desk); }
.bd-newform .bd-sheet { margin-top: 14px; }
.bd-newform .bd-banner { margin-top: 14px; }

/* The thread. */
.bd-thread { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 1021px) {
  .bd-thread { position: sticky; top: 12px; max-height: calc(100vh - 110px); }
}
.bd-thread-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); }
.bd-thread-h h3 { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; }
.bd-thread-h .bd-count:empty { display: none; }
.bd-msgs { list-style: none; margin: 0; padding: 14px; display: flex;
  flex-direction: column; gap: 10px; overflow: auto; flex: 1; min-height: 150px; }
@media (max-width: 1020px) {
  .bd-msgs { max-height: 440px; }
}
.bd-msg { max-width: 88%; display: flex; flex-direction: column; gap: 3px; }
.bd-msg.bdc { align-self: flex-start; }
.bd-msg.desk { align-self: flex-end; align-items: flex-end; }
.bd-who-l { font-size: 12px; color: var(--muted); }
.bd-who-l b { color: var(--ink); font-weight: 600; }
.bd-bubble { padding: 8px 11px; border-radius: 10px; white-space: pre-wrap;
  overflow-wrap: anywhere; font-size: 14px; }
.bd-msg.bdc .bd-bubble { background: var(--bd-bdc-soft); border-top-left-radius: 3px; }
.bd-msg.desk .bd-bubble { background: var(--bd-desk-soft); border-top-right-radius: 3px; }
.bd-evt { align-self: center; max-width: 92%; font-size: 12px; color: var(--muted);
  text-align: center; }
.bd-evt b { font-weight: 600; color: var(--ink-2); }
.bd-composer { border-top: 1px solid var(--line); padding: 10px 12px 12px; display: flex;
  flex-direction: column; gap: 8px; }
.bd-composer textarea { width: 100%; min-height: 64px; padding: 8px 10px;
  border: 1px solid var(--bd-rule-2); border-radius: 8px; background: var(--bd-field);
  color: var(--ink); resize: vertical; font: inherit; font-size: 14.5px; }
.bd-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-quick button { font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 14px;
  border: 1px solid var(--bd-rule-2); background: var(--panel-2); color: var(--muted);
  cursor: pointer; }
.bd-quick button:hover { color: var(--ink); border-color: var(--muted); }
.bd-c-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; }
.bd-hint { margin: 0; font-size: 12px; color: var(--muted); }
.bd-copybox { margin-top: 14px; padding: 12px; border: 1px solid var(--bd-rule-2);
  border-radius: 10px; background: var(--panel); display: flex; flex-direction: column;
  gap: 8px; }
.bd-copybox textarea { width: 100%; min-height: 220px; font: 13px/1.45 var(--bd-mono);
  padding: 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel-2); color: var(--ink); }

/* Team: the roster, for Manage team & permissions. */
.bd-team > p { margin: 16px 0 0; color: var(--muted); }
.bd-team .bd-sec { padding: 16px 0; }
.bd-team .bd-sec p { margin: 0 0 10px; }
.bd-tlist { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); }
.bd-tlist li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 9px 12px; border-top: 1px solid var(--line); }
.bd-tlist li:first-child { border-top: 0; }
.bd-tlist li > span:first-child { font-weight: 600; margin-right: auto; }
.bd-team-add { display: flex; gap: 8px; flex-wrap: wrap; }
.bd-team-add input, .bd-team-add select { flex: 1 1 150px; width: auto; min-width: 0; }

/* A finger on the floor's iPads gets 44px, as everywhere (the global
   coarse rule's 22px tick box is re-declared here: the board's own rules
   come after it and would otherwise cancel it -- zeus-frontend). */
@media (pointer: coarse) {
  .bd-check input, .bd-toggle input { width: 22px; height: 22px; }
  .bd-pill, .bd-seg button, .bd-lane-tab, .bd-quick button, .bd-icon-btn,
  .bd-opt span { min-height: 44px; }
  .bd-icon-btn { width: 44px; }
}

/* Your brief (three-tools P2-4; the design's brief, P:188-193): each line a
   3px rail in the line's colour, a 22px number column, the words and the
   presses. A rail REPORTS, so it is red, amber, green or ink and never
   gold (CLAUDE.md: gold is a press); the presses are plain small buttons.
   The by-line sits in the head with the ink Z mark (.zmark, the panel's).
   On a phone the presses go under the words. */
.today-by { display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); }
.today-brief { list-style: none; margin: 0; padding: 0; }
.today-brief-row { display: grid;
  grid-template-columns: 3px 22px minmax(0, 1fr) auto; gap: 6px 10px;
  align-items: start; padding: 10px 0; border-top: 1px solid var(--line-2); }
.today-brief-row:first-child { border-top: 0; padding-top: 2px; }
.today-brief-rail { align-self: stretch; width: 3px; border-radius: 2px;
  background: var(--line); }
.today-brief-rail.red { background: var(--red); }
.today-brief-rail.amber { background: var(--amber); }
.today-brief-rail.green { background: var(--green); }
.today-brief-rail.ink { background: var(--ink-2); }
.today-brief-n { font-size: 12px; font-weight: 600; line-height: 22px;
  color: var(--muted); text-align: center;
  font-variant-numeric: tabular-nums; }
.today-brief-text { margin: 0; font-size: 13.5px; line-height: 22px;
  min-width: 0; font-variant-numeric: tabular-nums; }
.today-brief-gross { display: block; font-size: 12.5px; line-height: 1.5;
  color: var(--muted); }
.today-brief-acts { display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end; }
@media (max-width: 560px) {
  .today-brief-row { grid-template-columns: 3px 22px minmax(0, 1fr); }
  .today-brief-acts { grid-column: 3; justify-content: flex-start; }
}