: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 */
  --panel: #ffffff;
  --ink: #0f1626;
  --muted: #69768c;
  --line: #e3e0d9;           /* hairlines warmed to sit on paper */
  --line-2: #efede7;
  --brand: #E89A12;          /* electric gold */
  --brand-dark: #C57E0A;
  --brand-soft: #fbe6bd;
  --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: 11px;
  padding: 6px 8px 18px; margin-top: 34px; }

/* ---------- 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;
}
.nav-toggle span { display: block; height: 2px; border-radius: 2px;
  background: #f0e2b8; }
.nav-toggle:hover { background: #16223f;
  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 */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .main { transition: none; }
}
/* No glow. A lit halo behind the mark is the orange seeping into the bar
   by another route, and it is the first thing the eye catches. */
.side-brand .logo { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text b { font-size: 17px; font-weight: 900; color: #fff;
  letter-spacing: .12em; }
.brand-text i { font-size: 9.5px; font-style: normal; font-weight: 800;
  letter-spacing: .28em; color: #7c8698; }
.side-nav { display: flex; flex-direction: column; gap: 3px; flex: 1;
  margin-top: 4px; }
.side-nav .tab {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: transparent; border: 0; cursor: pointer;
  color: var(--side-ink); padding: 11px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; text-align: left;
  transition: background .12s, color .12s;
}
.side-nav .tab:hover { background: rgba(255,255,255,.06); 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 say the same thing and let the bar stay
   black. */
.side-nav .tab.active {
  background: rgba(255,255,255,.09);
  color: #fff; font-weight: 700;
  box-shadow: inset 2px 0 0 rgba(255,255,255,.9);
}
.side-nav .tab.active .ic { stroke: #fff; }
.side-nav .ic { width: 19px; height: 19px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
.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; }

/* ---------- 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. */
.page-head h1 { font-size: 30px; font-weight: 600; letter-spacing: -.015em;
  font-family: Georgia, "Times New Roman", serif;
  display: inline-flex; align-items: center; gap: 12px; }
.page-head h1::before {
  content: ""; width: 6px; height: 24px; border-radius: 3px;
  background: linear-gradient(180deg, var(--gold1), var(--gold2));
}
.page-head p { margin: 6px 0 0; }

/* 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;
}
.kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg,
    var(--gold1), var(--gold2)); opacity: .85; }
.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 toggle pill (segmented control) */
.mode-toggle { display: inline-flex; margin-right: auto;
  background: var(--storm1); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; gap: 2px; }
.mode-seg { border: 0; background: transparent; cursor: pointer;
  padding: 5px 16px; border-radius: 999px; font-size: 12px;
  font-weight: 800; letter-spacing: .04em; color: var(--muted);
  transition: background .12s, color .12s; }
.mode-seg:hover { color: var(--ink); }
.mode-seg.active { background: var(--gold1); color: #1a1206; }
.mode-seg[data-mode="lease"].active { background: var(--green);
  color: #06210f; }
/* 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; }

.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: #1c1405;
  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; }
.chk input { width: 15px; height: 15px; accent-color: var(--brand); }

/* ---------- 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; }
.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; }
.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(--brand); }
.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; }

/* 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(--brand); }
.sort-chips .chip.active { background: var(--brand-soft);
  border-color: var(--brand); color: var(--brand-dark); }
html.dark .sort-chips .chip, html.dark .type-chips .chip {
  background: transparent; }
/* Type chips are a multi-select "show only" filter — a solid gold fill with
   dark text makes it clear they stack (vs the single-select sort chips) and
   stays legible in both themes. The gold --brand is fixed across themes, so
   the label must be a fixed dark ink; the html.dark rule re-asserts the fill
   to win over the transparent inactive rule above. */
.type-chips .chip.active,
html.dark .type-chips .chip.active {
  background: var(--brand); border-color: var(--brand); color: #241a05; }

/* ---------- 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; }
.deal-tab:hover { border-color: var(--brand); color: var(--ink); }
.deal-tab.active { background: var(--card, var(--panel)); color: var(--ink);
  border-color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }
.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); }
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 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; }
#present-toggle.on { background: var(--brand-soft);
  border-color: var(--brand); color: var(--brand-dark); font-weight: 800; }

/* 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; }
.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; }
.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);
  border-left: 4px solid var(--brand); }
.toast.bad { background: var(--red); border-left-color: #7f1d1d; }

/* ---------- 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; }
  .modal-actions, .no-print { display: none !important; }
}
/* Hidden on screen — only rendered when printing. */
#print-area { display: none; font-size: 15px; }
#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; }

/* 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) {
  #app { flex-direction: column; }
  .sidebar { width: auto; flex-direction: row; align-items: center;
    padding: 8px 10px; overflow-x: auto; border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08); }
  .side-brand { padding: 6px 10px; margin-top: 0; }
  .brand-text { display: none; }
  .side-nav { flex-direction: row; flex: 1; margin-top: 0; }
  .side-nav .tab span { display: none; }
  .side-nav .tab { padding: 10px; }
  .side-foot { border: 0; padding: 0; flex-direction: row; }
  .who-line { display: none; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .main { padding: 18px; }
  /* the top-bar nav can't slide off — turn the collapse feature off here.
     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 { transition: none; }
  #app.nav-collapsed .sidebar { margin-left: 0; }
  #app.nav-collapsed .main { 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>) -------------- */
html.dark {
  --bg-app: #0a1124;
  --panel: #131b30;
  --ink: #e6ebf6;
  --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: #1c1405;
  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; }
html.dark .btn.danger { background: var(--panel); color: var(--red);
  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. */
.ask-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60;
  border: 0; border-radius: 999px; padding: 12px 20px; cursor: pointer;
  font: 600 14px/1 inherit; color: #201500;
  background: linear-gradient(180deg, var(--gold2, #f5b731), var(--gold1, #e89a12));
  box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.ask-fab:hover { filter: brightness(1.06); }

.ask-panel { position: fixed; right: 20px; bottom: 20px; z-index: 61;
  width: min(430px, calc(100vw - 40px)); max-height: min(640px, 82vh);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel, #fff); color: inherit;
  border: 1px solid var(--line, #e5e7eb); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.32); }
.ask-panel.hidden { display: none; }
.ask-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--line, #e5e7eb); }
.ask-head .muted { font-size: 11px; flex: 1 1 100%; }
.ask-head .btn { margin-left: auto; }

.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; }
.ask-msg.me { align-self: flex-end; background: var(--gold1, #e89a12);
  color: #201500; border-bottom-right-radius: 4px; }
.ask-msg.bot { align-self: flex-start; background: var(--chip, #f3f4f6);
  border-bottom-left-radius: 4px; }
.ask-msg.bot ul { margin: 6px 0 6px 18px; padding: 0; }
.ask-msg.bot li { margin: 2px 0; }
.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. */
.ask-msg.held { border-left: 3px solid var(--gold1, #e89a12);
  background: rgba(232,154,18,.10); }

.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. */
.ask-form-inline { align-self: stretch; display: grid; gap: 8px;
  padding: 11px 12px; border-radius: 12px;
  background: var(--chip, #f3f4f6);
  border-left: 3px solid var(--gold1, #e89a12); }
.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 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(--gold1, #e89a12); }

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