/* ==========================================================================
   SecureWebX Financing CRM - "The Ledger Console" design system
   --------------------------------------------------------------------------
   Concept: a precise, trustworthy financial back-office instrument.
   Signature move: ledger-grade data tables (fine 1px rules, tabular numerals),
   a single refined deep-green accent over cool slate neutrals.
   Hand-authored tokens + component layer ported from /home/_designlab.
   No build step: this single file is the production stylesheet.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Cool slate neutral ramp (not pure gray - slight blue temperature) */
  --slate-25:  #fafbfc;
  --slate-50:  #f5f7fa;
  --slate-100: #eef1f5;
  --slate-200: #e2e7ee;
  --slate-300: #cbd3df;
  --slate-400: #9aa6b8;
  --slate-500: #6b7889;
  --slate-600: #4d5969;
  --slate-700: #38424f;
  --slate-800: #232c37;
  --slate-900: #151c24;

  /* Brand accent - refined deep green (carried from legacy #259457) */
  --green-50:  #e9f6ef;
  --green-100: #c9ead8;
  --green-200: #94d6b3;
  --green-400: #34a96c;
  --green-500: #1f8f57;   /* primary */
  --green-600: #197a49;
  --green-700: #13603a;

  /* Semantic status hues (for pipeline pills - accessible, not color-only) */
  --info-50:  #e8f1fc;  --info-500:  #2563c9;  --info-700:  #1b4894;
  --warn-50:  #fdf3e2;  --warn-500:  #b9740a;  --warn-700:  #8a560a;
  --danger-50:#fdecec;  --danger-500:#c63434;  --danger-700:#9a2727;
  --violet-50:#f0ecfb;  --violet-500:#6d44c9;  --violet-700:#52329a;

  /* Semantic assignments */
  --bg:            var(--slate-50);
  --surface:       #ffffff;
  --surface-2:     var(--slate-25);
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --text:          var(--slate-900);
  --text-soft:     var(--slate-600);
  --text-muted:    var(--slate-500);
  --accent:        var(--green-500);
  --accent-hover:  var(--green-600);
  --accent-quiet:  var(--green-50);
  --ring:          color-mix(in srgb, var(--green-500) 35%, transparent);

  /* Type */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (1.20 minor third, 16px base) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.875rem;  /* 14 - app density default */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */

  /* Spacing - 4/8px system */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-8: 3rem;    --sp-10: 4rem;

  /* Radii */
  --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;

  /* Elevation - quiet, layered, cool-tinted */
  --shadow-xs: 0 1px 2px rgba(21,28,36,.05);
  --shadow-sm: 0 1px 3px rgba(21,28,36,.07), 0 1px 2px rgba(21,28,36,.04);
  --shadow-md: 0 4px 12px rgba(21,28,36,.08), 0 2px 4px rgba(21,28,36,.04);
  --shadow-lg: 0 12px 32px rgba(21,28,36,.14);

  --topbar-h: 56px;
  --sidebar-w: 248px;

  /* Dark chrome tokens (sidebar + topbar). The signature SecureWebX split is a
     dark navigation frame wrapping the light workspace. Kept in the same family
     as the --glass-* auth tokens so the shell and the login screens read as one
     system. Brighter greens read better over the dark glow than --green-500. */
  --chrome-bg:      #0e1116;
  --chrome-surface: rgba(255,255,255,.04);
  --chrome-border:  rgba(255,255,255,.09);
  --chrome-hair:    rgba(255,255,255,.07);
  --chrome-text-1:  #f4f6f8;
  --chrome-text-2:  rgba(244,246,248,.60);
  --chrome-text-3:  rgba(244,246,248,.45);
  --chrome-glow:    rgba(31,143,87,.28);
  --chrome-accent:  #7fe0aa;
  --chrome-accent-bg: rgba(31,143,87,.18);

  /* Glass surface tokens (dark glassmorphism, currently used on auth screens,
     intended to roll out app-wide). Brighter greens read better over the dark
     glow than the light-theme --green-500. */
  --glass-bg:        #0e0f13;
  --glass-glow:      rgba(34, 197, 94, 0.20);
  --glass-surface:   rgba(255, 255, 255, 0.035);
  --glass-border:    rgba(255, 255, 255, 0.08);
  --glass-input:     rgba(255, 255, 255, 0.04);
  --glass-input-bd:  rgba(255, 255, 255, 0.10);
  --glass-text:      #f4f5f7;
  --glass-text-soft: rgba(244, 245, 247, 0.6);
  --glass-text-mute: rgba(244, 245, 247, 0.5);
  --glass-green:     #16a34a;
  --glass-green-lt:  #22c55e;
  --glass-green-hv:  #1cb452;
  --glass-ring:      0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Visible focus ring everywhere (a11y) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   3. App shell - topbar + sidebar + content
   -------------------------------------------------------------------------- */
.app { min-height: 100vh; }
/* The dark topbar begins only after the white sidebar ends (left: --sidebar-w),
   so the dark frame never overlaps the light navigation column. */
.topbar {
  position: fixed; top: 0; right: 0; left: var(--sidebar-w); height: var(--topbar-h); z-index: 40;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--chrome-bg);
  background-image: radial-gradient(ellipse 70% 140% at 0% -30%, var(--chrome-glow), transparent 60%);
  border-bottom: 1px solid var(--chrome-hair);
  color: var(--chrome-text-1);
}
.topbar .spacer { flex: 1; }
.topbar .topbar-user { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--chrome-text-2); }
.topbar .menu-toggle { color: var(--chrome-text-2); }
.topbar .menu-toggle:hover { background: var(--chrome-surface); color: var(--chrome-text-1); }
.topbar .topbar-user .btn-ghost { color: var(--chrome-text-2); }
.topbar .topbar-user .btn-ghost:hover { background: var(--chrome-surface); color: var(--chrome-text-1); }
.avatar {
  width: 30px; height: 30px; border-radius: var(--r-full); background: var(--slate-200);
  color: var(--slate-700); display: grid; place-items: center; font-weight: 600; font-size: var(--fs-xs);
}
.topbar .avatar { background: var(--chrome-accent-bg); color: var(--chrome-accent); border: 1px solid var(--chrome-border); }

/* Left-pinned identity: avatar + stacked name / company name. */
.topbar .topbar-identity { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.topbar .identity-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.topbar .identity-name { font-size: var(--fs-sm); font-weight: 600; color: var(--chrome-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .identity-company { font-size: var(--fs-xs); color: var(--chrome-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Active destination (e.g. Mailbox) surfaced as a topbar button. */
.topbar .topbar-user .btn-ghost.active { background: var(--chrome-accent-bg); color: var(--chrome-accent); }

/* Sidebar - dark chrome, full height, left-aligned white logo on top, footer on bottom.
   z-index 50 is intentionally ABOVE the topbar (40): on desktop they sit side by
   side (sidebar left of the topbar, no overlap), but on phones the sidebar becomes
   a slide-in drawer that must render over the full-width topbar. The tap-to-close
   .scrim sits at z-index 20, between the content and the drawer. */
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); z-index: 50;
  background: var(--chrome-bg);
  background-image: radial-gradient(circle at 50% -4%, var(--chrome-glow), transparent 52%);
  border-right: 1px solid var(--chrome-hair);
  display: flex; flex-direction: column; overflow: hidden;
}
.sidebar-brand {
  /* Logo left-aligned so it lines up with the nav icons below
     (sidebar-nav 12px + nav-link 12px = 24px = --sp-5). */
  display: flex; align-items: center; justify-content: flex-start; flex: none;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
}
.sidebar-brand:hover { text-decoration: none; }
/* margin-top (not padding-top) pushes it down 5px WITHOUT shrinking it: with the
   global box-sizing:border-box, padding-top would have eaten into the 56px height. */
.sidebar-brand .sidebar-logo { height: 56px; width: auto; max-width: 100%; display: block; margin-top: 5px; }
.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-3) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.sidebar-foot { flex: none; padding: var(--sp-4) var(--sp-3); font-size: var(--fs-xs); color: var(--glass-text-mute); line-height: 1.4; text-align: center; }
.sidebar-foot a { color: var(--glass-text-mute); }
.sidebar-foot a:hover { color: var(--glass-text-soft); }

.sidebar .nav-group-label {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--chrome-text-3); padding: var(--sp-4) var(--sp-3) var(--sp-2);
  /* A light-gray rule under the section heading separates it from its items,
     so stacked sections (Financing, Insurance, Transportation, …) read clearly. */
  border-bottom: 1px solid var(--chrome-border);
  margin-bottom: var(--sp-2);
}
.sidebar-nav .nav-group-label:first-child { padding-top: var(--sp-1); }
.nav-link {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  color: var(--chrome-text-2); font-weight: 500; font-size: var(--fs-base);
  transition: background .12s ease, color .12s ease;
}
.nav-link:hover { background: var(--chrome-surface); color: var(--chrome-text-1); text-decoration: none; }
/* Base icon sizing — without this, an .ico outside a sized container (.btn, .nav-link,
   .alert, …) falls back to the browser's default ~300x150px and blows out the layout.
   Context-specific rules below are more specific and still override this. */
.ico { width: 18px; height: 18px; flex: none; vertical-align: -0.18em; display: inline-block; }
.nav-link .ico { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-link.active { background: var(--chrome-accent-bg); color: var(--chrome-accent); font-weight: 600; }
.nav-link.active .ico { opacity: 1; }
.nav-link.active::before {           /* signature: left accent rail */
  content: ""; position: absolute; left: -3px; top: 6px; bottom: 6px; width: 3px;
  background: var(--accent); border-radius: var(--r-full);
}
.nav-link .count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--chrome-text-3); }

/* Unread / new-count bubbles on the sidebar nav + the topbar Mailbox button.
   Default: a light-gray "0" bubble. When there is something new it turns red with
   white text so the count reads at a glance. On the sidebar the bubble is pushed
   to the far right of the row; in the topbar it sits just after the label. */
.nav-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; line-height: 1;
  background: var(--slate-200); color: var(--slate-700);
}
/* When there is something new the bubble turns red and pulses a ripple ring to
   draw the eye — same motion as the "New" pill. The count itself never animates
   its position, only the surrounding glow. */
.nav-badge.is-new { background: var(--danger-500); color: #fff; animation: new-pulse 1.8s ease-out infinite; }
/* In the topbar the bubble follows the Mailbox label rather than being pushed to
   the far right of a full-width row. */
.topbar .nav-badge { margin-left: 6px; min-width: 18px; height: 18px; }

/* Pulsating "New" pill next to a fresh application (applicant name) or an unread
   Mailbox conversation (correspondent name). Red bubble, white text, with a ripple
   ring that radiates out to catch the eye. Ring motion is disabled for users who
   prefer reduced motion; the red pill still stands out. */
.new-pill {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 8px; padding: 2px 8px; border-radius: var(--r-full);
  background: var(--danger-500); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  animation: new-pulse 1.8s ease-out infinite;
}
@keyframes new-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(198, 52, 52, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(198, 52, 52, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 52, 52, 0); }
}
@media (prefers-reduced-motion: reduce) { .new-pill { animation: none; } }

/* Pulsating "Decision" pill: a lender responded (info request / approve /
   decline) on a shared submission and nobody on the team has opened the
   application since. Same shape and motion as .new-pill, purple instead of
   red so the two notification types read distinctly at a glance. */
.decision-pill {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 8px; padding: 2px 8px; border-radius: var(--r-full);
  background: var(--violet-500); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  animation: decision-pulse 1.8s ease-out infinite;
}
@keyframes decision-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(109, 68, 201, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(109, 68, 201, 0); }
  100% { box-shadow: 0 0 0 0 rgba(109, 68, 201, 0); }
}
@media (prefers-reduced-motion: reduce) { .decision-pill { animation: none; } }

/* Context line above a customer conversation opened from the Mailbox. */
.conv-context { margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }

.content { margin-left: var(--sidebar-w); padding-top: var(--topbar-h); min-height: 100vh; }
.content-inner { padding: var(--sp-6) var(--sp-6) var(--sp-10); width: 100%; }

/* Master-admin ghost login: a red bar that stays under the topbar while
   scrolling, always offering a one-click return to the admin console. */
.ghost-bar {
  position: sticky; top: var(--topbar-h); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: #e11d2a; color: #fff;
  padding: 8px 8px 8px 14px; border-radius: var(--r-md);
  margin-bottom: var(--sp-4); font-size: var(--fs-sm); font-weight: 600;
  box-shadow: 0 2px 10px rgba(225, 29, 42, .35);
}
.ghost-bar-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ghost-bar-text svg { width: 16px; height: 16px; flex: none; }
.ghost-bar-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: #fff; color: #b3121f; border: none; border-radius: var(--r-sm);
  padding: 6px 12px; font-weight: 700; font-size: var(--fs-xs); cursor: pointer;
}
.ghost-bar-btn svg { width: 14px; height: 14px; }
.ghost-bar-btn:hover { background: #ffe5e7; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-head .titles h1 { margin-bottom: 2px; }
.page-head .titles p { color: var(--text-muted); font-size: var(--fs-base); }
.page-head-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.breadcrumb { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-2); }
.breadcrumb a { color: var(--text-soft); }
.breadcrumb .sep { color: var(--slate-300); }

/* --------------------------------------------------------------------------
   4. Cards, stats, surfaces
   -------------------------------------------------------------------------- */
/* .card is always a light/white surface (var(--surface)), even on a page that
   otherwise uses the dark auth-glass theme (e.g. the public /psetup partner
   setup page nests .card/.pi-card/.pi-fields inside .auth-card). Re-scope the
   glass text tokens to their light-theme equivalents here so any auth-styled
   label/hint/title nested inside resolves to dark-on-white instead of
   inheriting the near-white text meant for the dark glass background -
   otherwise titles and field labels on those pages are nearly invisible. */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  color: var(--text);
  --glass-text: var(--text);
  --glass-text-soft: var(--text-soft);
  --glass-text-mute: var(--text-muted);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.card-head h3 { font-size: var(--fs-md); }
.card-body { padding: var(--sp-5); }
.card-body.flush { padding: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-xs); position: relative; overflow: hidden;
}
.stat .label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: var(--sp-2); }
.stat .value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.02em; margin-top: var(--sp-2); }
.stat .sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.stat .ico { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 20px; height: 20px; color: var(--slate-300); }

/* KPI card - a stat with a tinted icon chip on top. Layers on .stat/.card.
   Default tint is the brand green; status-tinted variants reuse semantic hues. */
.kpi { display: flex; flex-direction: column; }
.kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.kpi .kpi-chip {
  width: 38px; height: 38px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center; background: var(--green-50); color: var(--green-600);
}
.kpi .kpi-chip .ico { width: 20px; height: 20px; position: static; color: inherit; }
.kpi .label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; }
.kpi .value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; margin-top: var(--sp-1); }
.kpi .sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.kpi-chip.tint-info   { background: var(--info-50);   color: var(--info-700); }
.kpi-chip.tint-warn   { background: var(--warn-50);   color: var(--warn-700); }
.kpi-chip.tint-danger { background: var(--danger-50); color: var(--danger-700); }
.kpi-chip.tint-neutral{ background: var(--slate-100); color: var(--slate-600); }

/* Pipeline bar - segmented horizontal bar driven by real status counts.
   IMPORTANT: each segment's color comes from the status row's `color` value
   (statuses.color in the DB) via the class `seg-<color>`. The same `<color>`
   tokens also drive `.badge-<color>` (see Fmt::statusBadge), so a status and its
   pipeline segment always match. If a new status color is ever seeded, add both a
   `.seg-<color>` and a `.badge-<color>` rule below or it falls back to the neutral
   fill (defined on `.seg`) and a transparent badge. */
.pipebar { display: flex; height: 9px; border-radius: var(--r-full); overflow: hidden; background: var(--slate-100); margin-bottom: var(--sp-5); }
.pipebar .seg { height: 100%; min-width: 0; background: var(--slate-300); }  /* neutral fallback for unknown status colors */
.pipebar .seg + .seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.6); }
.seg-green   { background: var(--green-500); }
.seg-info    { background: var(--info-500); }
.seg-warn    { background: var(--warn-500); }
.seg-danger  { background: var(--danger-500); }
.seg-violet  { background: var(--violet-500); }
.seg-neutral { background: var(--slate-300); }

/* ---- Dashboard: compact KPIs, mini bar chart, product mix ---------------- */
.stat-grid-compact { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--sp-3); }
.stat-grid-compact .stat { padding: var(--sp-4); }
.stat-grid-compact .stat .value { font-size: var(--fs-2xl); margin-top: 2px; }
.stat-grid-compact .stat .label { font-weight: 600; }
.delta { font-size: var(--fs-xs); font-weight: 600; }
.delta-up { color: var(--green-600); } .delta-down { color: var(--danger-700); } .delta-flat { color: var(--text-muted); }

.chart-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-5); align-items: stretch; margin-bottom: var(--sp-5); }
.chart-grid > * { min-width: 0; }

/* Pure-CSS bar chart (no JS/lib): each column grows from the baseline; the bar
   height is set inline as a percentage of the column's tallest day. */
.barchart { display: flex; align-items: flex-end; gap: 5px; height: 168px; }
.barchart .col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.barchart .bar-wrap { width: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.barchart .bar { width: 64%; max-width: 24px; min-height: 3px; background: var(--info-500); border-radius: 4px 4px 0 0; transition: background .12s ease; }
.barchart .col:hover .bar { background: var(--info-700); }
.barchart .bx { font-size: 10px; color: var(--text-muted); white-space: nowrap; line-height: 1; }
.barchart .bn { font-size: 10px; color: var(--text-soft); font-variant-numeric: tabular-nums; line-height: 1; }

.mix-row { display: flex; align-items: center; gap: var(--sp-3); padding: 7px 0; }
.mix-row .mix-label { flex: 0 0 42%; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-row .mix-track { flex: 1; height: 8px; background: var(--slate-100); border-radius: var(--r-full); overflow: hidden; }
.mix-row .mix-fill { height: 100%; background: var(--violet-500); border-radius: var(--r-full); }
.mix-row .mix-n { font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--text-muted); min-width: 30px; text-align: right; }

/* --------------------------------------------------------------------------
   5. Tables - the ledger signature
   -------------------------------------------------------------------------- */
.table-wrap { width: 100%; overflow-x: auto; }
/* Audit log scrolls inside its own box (with a sticky header) so a long ledger
   doesn't stretch the page — only a handful of rows show at once. */
.ledger-scroll { max-height: 26rem; overflow: auto; }
.ledger-scroll table.ledger thead th { z-index: 2; }
@media print { .ledger-scroll { max-height: none; overflow: visible; } }
table.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
table.ledger thead th {
  text-align: left; font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-strong);
  background: var(--surface-2); white-space: nowrap; position: sticky; top: 0;
}
table.ledger tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
table.ledger tbody tr { transition: background .1s ease; }
table.ledger tbody tr:hover { background: var(--slate-25); }
table.ledger tbody tr[data-href] { cursor: pointer; }   /* keyboard-accessible row links (see app.js) */
table.ledger tbody tr:last-child td { border-bottom: none; }
table.ledger td.num, table.ledger th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.ledger .primary-cell { font-weight: 600; color: var(--text); }
table.ledger .muted { color: var(--text-muted); }
.cell-stack { display: flex; flex-direction: column; line-height: 1.35; }
.cell-stack small { color: var(--text-muted); font-size: var(--fs-xs); }
/* A TD must STAY display:table-cell: flex drops it out of the table model, and
   two adjacent non-table-cell TDs (Applicant | Vehicle on the applications
   ledger) get merged by the browser into ONE anonymous cell, shifting every
   later column left. Block children give the identical stacked layout. */
td.cell-stack { display: table-cell; }
td.cell-stack > * { display: block; }
/* Received column: date on top, time (dealership-local) muted below it. */
.cell-date { white-space: nowrap; line-height: 1.35; }
.cell-date .cd-date { display: block; color: var(--text); font-variant-numeric: tabular-nums; }
.cell-date .cd-time { display: block; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Applications ledger: center the four summary columns (Amount, Status, Assigned,
   Received) both ways and give them roomier, even horizontal padding so they read
   as a balanced block instead of crowding on the right. vertical-align:middle is
   already set on ledger cells above, which handles the vertical centering. */
table.ledger-apps th:nth-last-child(-n+4),
table.ledger-apps td:nth-last-child(-n+4) {
  text-align: center;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}
/* Amount is right-aligned in a normal ledger; center it here with the others. */
table.ledger-apps td.num,
table.ledger-apps th.num { text-align: center; }
/* Worksheets ledger: center the Type, Price, Down, Payment, Structure and
   Updated columns (marked .ctr). The extra table class raises specificity so
   this wins over the right-aligned .num rule for the money columns. */
table.ledger.ledger-ws td.ctr,
table.ledger.ledger-ws th.ctr { text-align: center; }
div.row-actions { display: flex; gap: var(--sp-1); justify-content: flex-end; }
/* Same table-model rule as td.cell-stack above: display:flex on a TD drops it
   out of the table layout, so its border-bottom no longer lines up with the
   rest of the row (the "choppy row line" bug on every actions column). Action
   TDs stay real table cells; the buttons flow inline, right-aligned. */
td.row-actions { text-align: right; white-space: nowrap; width: 1%; }
td.row-actions > .btn, td.row-actions > form { display: inline-flex; vertical-align: middle; }
td.row-actions > * + * { margin-left: var(--sp-1); }
td.row-actions form { vertical-align: middle; }

/* Pagination — reusable table footer. Summary on the left, a pill pager on the
   right (Prev · numbered pages with … gaps · Next). Sits at the foot of a card. */
.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border);
}
.pagination-info { font-size: var(--fs-sm); color: var(--text-muted); }
.pagination-info strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pagination-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pagination-list li { display: flex; }
.page-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-soft);
  font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums;
  text-decoration: none; transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.page-btn:hover { background: var(--slate-25); border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.page-btn.is-current { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.page-btn.is-disabled { color: var(--slate-300); cursor: not-allowed; }
.page-btn.is-disabled:hover { background: var(--surface); border-color: var(--border); color: var(--slate-300); }
.page-btn .ico { width: 16px; height: 16px; }
.page-step { padding: 0 12px; }
.page-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 34px; color: var(--text-muted); }
@media (max-width: 640px) {
  /* Collapse the numbered pages on phones; Prev / Next plus the summary line
     (which states the exact range) keep the pager usable in a narrow column. */
  .pagination-list li:not(:first-child):not(:last-child) { display: none; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0 var(--sp-4); height: 38px; border-radius: var(--r-md);
  font-weight: 600; font-size: var(--fs-base); border: 1px solid transparent;
  cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .04s ease, box-shadow .12s ease;
  white-space: nowrap; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--accent-hover); text-decoration: none; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--slate-50); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--slate-100); color: var(--text); text-decoration: none; }
.btn-danger { background: var(--surface); color: var(--danger-700); border-color: color-mix(in srgb, var(--danger-500) 35%, var(--border)); }
.btn-danger:hover { background: var(--danger-50); text-decoration: none; }
.btn-info { background: var(--info-500); color: #fff; box-shadow: var(--shadow-xs); }
.btn-info:hover { background: var(--info-700); text-decoration: none; }
.btn-dark { background: #111827; color: #fff; border-color: #111827; box-shadow: var(--shadow-xs); }
.btn-dark:hover { background: #000; border-color: #000; color: #fff; text-decoration: none; }
.btn-orange { background: #f97316; color: #fff; border-color: #f97316; box-shadow: var(--shadow-xs); }
.btn-orange:hover { background: #ea580c; border-color: #ea580c; color: #fff; text-decoration: none; }
.btn-orange:disabled { opacity: .65; cursor: default; }

/* Per-type application webhooks (full + abandoned) on the right of the Company
   details head: each row has its own URL + Test button; rows stack vertically,
   right-aligned, so the two feeds read as clearly separate hooks. */
.webhook-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.webhook-head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.webhook-head .webhook-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.webhook-head .webhook-url {
  font-size: var(--fs-xs); color: var(--text-soft);
  max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.webhook-head .webhook-result { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.webhook-head .webhook-result.ok  { color: var(--green-700); }
.webhook-head .webhook-result.err { color: var(--danger-700); }
@media (max-width: 640px) {
  .card-head:has(.webhook-head) { flex-wrap: wrap; }
  .webhook-head .webhook-url { max-width: 180px; }
}
.btn-sm { height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-icon { width: 32px; height: 32px; padding: 0; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   7. Badges & status pills
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; border: 1px solid transparent;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-neutral { background: var(--slate-100); color: var(--slate-700); }
.badge-green   { background: var(--green-50);  color: var(--green-700); }
.badge-info    { background: var(--info-50);   color: var(--info-700); }
.badge-warn    { background: var(--warn-50);   color: var(--warn-700); }
.badge-danger  { background: var(--danger-50); color: var(--danger-700); }
.badge-violet  { background: var(--violet-50); color: var(--violet-700); }
.badge-outline { background: transparent; border-color: var(--border-strong); color: var(--text-soft); }
.chip-type { font-family: var(--font-mono); font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-5); }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field > label { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.field .hint { font-size: var(--fs-xs); color: var(--text-muted); }
.field .req { color: var(--danger-500); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-base);
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); transition: border-color .12s ease, box-shadow .12s ease;
}
.textarea { height: auto; padding: var(--sp-3); min-height: 92px; resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate-400); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.input::placeholder, .textarea::placeholder { color: var(--slate-400); }
/* On touch devices, force every form control to >=16px so iOS never zooms on
   focus. Desktop keeps the 14px ledger density (this only targets coarse pointers). */
@media (pointer: coarse) {
  .input, .select, .textarea { font-size: 16px; }
}
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger-500); }
.field-error { color: var(--danger-700); font-size: var(--fs-xs); }
.input-mono { font-family: var(--font-mono); }
.form-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; padding-top: var(--sp-2); }
.input-copy { display: flex; }
.input-copy .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-copy .btn { height: 40px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; }
.checkrow { display: flex; align-items: center; gap: var(--sp-2); }
.checkrow input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }

/* Repeatable point-of-contact rows on the partner form. */
.contact-row { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius, 8px); margin-bottom: var(--sp-3); background: var(--surface-2, transparent); }
.contact-row-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-2); }

/* CSS-only toggle switch (no JS). Wraps a real checkbox for accessibility. */
.switch { position: relative; display: inline-flex; width: 44px; height: 26px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; border-radius: var(--r-full); background: var(--border-strong); transition: background .18s ease; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(21,28,36,.3); transition: transform .18s ease; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track .knob { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Segmented control - mutually exclusive options in a single pill group. */
.segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.segmented button { border: none; background: transparent; cursor: pointer; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-sm); color: var(--text-muted); transition: background .12s ease, color .12s ease; }
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--slate-100); color: var(--text); }

/* Tab strip - underline-style page tabs. */
.tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); }
.tabs .tab { padding: var(--sp-3) 2px; border: none; background: none; cursor: pointer; font-weight: 600; font-size: var(--fs-base); color: var(--text-muted); border-bottom: 2px solid transparent; transition: color .12s ease, border-color .12s ease; text-decoration: none; }
.tabs .tab:hover { color: var(--text); text-decoration: none; }
.tabs .tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* --------------------------------------------------------------------------
   Segmented tab switcher (.seg-tabs) — the raised-pill pattern used for
   list-view switches (Companies: Active / Archive) and filter rows. A slate
   track holds pill tabs; the active pill is raised on a white surface with
   the brand-green text, and every tab carries a high-contrast count chip
   (no gray-on-gray numerals). Keyboard focus gets the standard ring.
   -------------------------------------------------------------------------- */
.seg-tabs {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; background: var(--slate-100);
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: var(--sp-5);
  max-width: 100%; overflow-x: auto;                 /* many filters on narrow screens */
}
.seg-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: none; border-radius: 7px;
  background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-base); line-height: 1;
  color: var(--text-soft); text-decoration: none; white-space: nowrap;
  transition: color .12s ease, background .12s ease, box-shadow .12s ease;
}
.seg-tab .ico { width: 16px; height: 16px; flex: none; }
.seg-tab:hover { color: var(--text); text-decoration: none; background: rgba(255, 255, 255, .6); }
.seg-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.seg-tab.active {
  background: var(--surface); color: var(--green-700);
  box-shadow: 0 1px 2px rgba(21, 28, 36, .10), 0 0 0 1px var(--slate-200);
}
.seg-tab.active:hover { background: var(--surface); }
.seg-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--slate-200); color: var(--slate-700);
}
.seg-tab.active .seg-count { background: var(--green-50); color: var(--green-700); }
@media (max-width: 640px) {
  .seg-tab { padding: 7px 11px; }
}

/* --------------------------------------------------------------------------
   9. Alerts / toasts
   -------------------------------------------------------------------------- */
.alert { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-base); margin-bottom: var(--sp-4); border: 1px solid transparent; }
.alert .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alert-success { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); }
.alert-error   { background: var(--danger-50); color: var(--danger-700); border-color: color-mix(in srgb, var(--danger-500) 25%, transparent); }
.alert-info    { background: var(--info-50); color: var(--info-700); }

/* --------------------------------------------------------------------------
   10. Auth screens - dark glassmorphism, single centered card
   -------------------------------------------------------------------------- */
body.auth-glass {
  min-height: 100vh;          /* fallback for browsers without dvh */
  min-height: 100dvh;         /* tracks mobile toolbar show/hide - no phantom scroll */
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--glass-bg);
  background-image: radial-gradient(circle at 50% -8%, var(--glass-glow), transparent 55%);
  background-repeat: no-repeat;
  color: var(--glass-text);
  overflow-x: hidden;         /* kill the reCAPTCHA-badge / sub-pixel horizontal scrollbar */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* Sticky-footer scaffold: the wrapper grows to fill the viewport so the footer
   rests at the bottom on short pages and after the content on tall ones. */
.auth-glass .page-wrapper { flex: 1; display: flex; flex-direction: column; }
.auth-glass .content-area {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 20px env(safe-area-inset-right) 20px env(safe-area-inset-left);
}
.auth-wrap { width: 100%; display: flex; justify-content: center; padding: var(--sp-6); }
/* Lender share page: pinned top-right so a lender stepping away from a shared
   desk can lock the page back to the access-code gate in one click, from
   anywhere on the (potentially long) document/decision page. */
.auth-logout { position: fixed; top: 18px; right: 18px; z-index: 40; margin: 0; }
.auth-logout-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--glass-surface); border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--glass-text-soft); font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.auth-logout-btn svg { width: 14px; height: 14px; }
.auth-logout-btn:hover { background: var(--glass-input); color: var(--glass-text); }
.auth-logout-btn:focus-visible { outline: none; box-shadow: var(--glass-ring); }
@media (max-width: 480px) { .auth-logout { top: 10px; right: 10px; } .auth-logout-btn span { display: none; } }
.site-footer {
  flex-shrink: 0; background: transparent;
  font-size: var(--fs-xs); color: var(--glass-text-mute);
  line-height: 1.4; text-align: center;
  padding: 12px 8px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));   /* clear the home indicator in the app webview */
  margin-top: 16px;
}
.site-footer a { color: var(--glass-text-soft); }
.site-footer a:focus-visible { outline: none; box-shadow: var(--glass-ring); border-radius: var(--r-sm); }
.footer-separator { padding: 0 4px; }
.auth-stack { display: flex; flex-direction: column; align-items: center; width: 100%; }
.auth-below-link { margin: var(--sp-4) 0 0; text-align: center; }
.auth-below-link a {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  color: #ffd9e6; /* very light pink */
  text-decoration: none;
}
.auth-below-link a:hover { color: #ffeaf1; text-decoration: underline; }
/* Centered auth card (login + password-reset flow): all copy is centered for a
   consistent look; only the typed input text stays left for readability. */
.auth-card.auth-centered { text-align: center; }
.auth-card.auth-centered .input,
.auth-card.auth-centered .textarea { text-align: left; }
/* Field labels stay left-aligned, sitting right above their input, even on the
   otherwise-centered auth card. */
.auth-card.auth-centered .field > label { text-align: left; }

/* Forgot-password link: sits directly under the Sign in button, very light
   pink, and on hover simply underlines (no pill/background) - matching the
   "Money Login" link on the master-admin page. Kept tight so it doesn't push
   the reCAPTCHA notice far down the card. */
.auth-forgot { margin-top: var(--sp-2); }
.auth-card .btn-link.auth-forgot-link {
  min-height: 0; padding: 2px 4px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
  color: #ffd9e6; background: none;
}
.auth-card .btn-link.auth-forgot-link:hover,
.auth-card .btn-link.auth-forgot-link:focus-visible {
  background: none; color: #ffeaf1; text-decoration: underline;
}
.auth-card .btn-link.auth-forgot-link:disabled { color: var(--glass-text-mute); text-decoration: none; }

/* Password-reset modules swap in place inside the same card. */
.auth-module[hidden] { display: none; }
.auth-error {
  margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: #ffc9c9; text-align: center;
}
.auth-resend-line { margin-top: var(--sp-3); text-align: center; }
.auth-card {
  width: 100%; max-width: 384px;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 28px 30px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.auth-brand { display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5); }
.auth-brand .brand-logo { height: 72px; width: auto; max-width: 100%; display: block; }
.auth-card .eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--glass-green-lt); }
.auth-card h1 { font-size: var(--fs-xl); color: var(--glass-text); margin: var(--sp-1) 0 var(--sp-2); letter-spacing: -0.02em; }
.auth-card .lead { color: var(--glass-text-mute); margin-bottom: var(--sp-5); }
.auth-card .field { margin-bottom: var(--sp-3); }
.auth-card .field > label { font-weight: 600; font-size: var(--fs-base); color: var(--glass-text-soft); }
.auth-card .field .hint { font-size: var(--fs-xs); color: var(--glass-text-mute); }
.auth-card .input {
  height: 46px; background: var(--glass-input); border: 1px solid var(--glass-input-bd);
  color: var(--glass-text); border-radius: var(--r-md);
  /* 16px: at any smaller size iOS Safari/WebView auto-zooms the page on focus.
     Do NOT lower this without also disabling zoom (which we don't, for a11y). */
  font-size: var(--fs-md);
  -webkit-appearance: none; appearance: none;   /* strip iOS inner shadow / rounded native chrome */
}
.auth-card .input::placeholder { color: rgba(244, 245, 247, 0.32); }
.auth-card .input:hover { border-color: rgba(255, 255, 255, 0.2); }
.auth-card .input:focus { outline: none; border-color: var(--glass-green-lt); box-shadow: var(--glass-ring); }
/* Autofill: keep the dark glass look instead of the browser's white/yellow fill
   (which would render light text on a light box = unreadable on this card). */
.auth-card .input:-webkit-autofill,
.auth-card .input:-webkit-autofill:hover,
.auth-card .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--glass-text);
  caret-color: var(--glass-text);
  -webkit-box-shadow: 0 0 0 1000px #15171d inset;
  box-shadow: 0 0 0 1000px #15171d inset;
  transition: background-color 9999s ease-out 0s;
}
.auth-card .btn { width: 100%; height: 46px; margin-top: var(--sp-2); }
.auth-card .btn-primary { background: var(--glass-green); color: #fff; box-shadow: none; }
.auth-card .btn-primary:hover { background: var(--glass-green-hv); }
.auth-foot { margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--glass-text-mute); text-align: center; }
.auth-foot a { color: var(--glass-text-soft); }
/* reCAPTCHA legal notice sits close under the forgot link, not floated far down. */
.auth-foot-rc { margin-top: var(--sp-4); }

/* ---- Lender share (public /lshare) ---------------------------------------- */
/* Gate: everything centered before the lender enters their access code. */
.auth-card.lshare-gate { text-align: center; }
.auth-card.lshare-gate .field > label { display: block; }
.auth-card.lshare-gate .field .hint { text-align: center; }

/* Verified view: a wide, paper-sized sheet with a clean, structured layout.
   Solid surfaces (no backdrop-filter, no stacked translucency) so nested panels
   read cleanly instead of the muddy "checkerboard" of overlapping transparencies. */
.auth-card.lshare-view {
  max-width: 880px; text-align: left; padding: 40px 46px;
  background: #12171c;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  /* Scoped token overrides: every descendant that paints var(--glass-surface)
     (panels, doc buttons, choices, responses) now uses a solid elevated color. */
  --glass-surface: #1b2127;
  --glass-border: rgba(255, 255, 255, 0.09);
}
.lshare-head { text-align: center; padding-bottom: 22px; margin-bottom: 4px; border-bottom: 1px solid var(--glass-border); }
.lshare-head h1 { margin: var(--sp-1) 0 var(--sp-2); }
.lshare-head .lead { margin: 0 auto; max-width: 62ch; }

.lshare-section { margin-top: 26px; }
.lshare-section-title, .lshare-panel h2 {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--glass-green-lt); margin: 0 0 14px;
}
.lshare-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lshare-doc-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  padding: 14px 16px; color: var(--glass-text);
  transition: border-color .14s ease, background .14s ease, transform .05s ease;
}
.lshare-doc-btn:hover { border-color: var(--glass-green-lt); background: rgba(255, 255, 255, .05); }
.lshare-doc-btn:active { transform: translateY(1px); }
.lshare-doc-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(34, 197, 94, .14); color: var(--glass-green-lt); }
.lshare-doc-ic .ico { width: 20px; height: 20px; }
.lshare-doc-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lshare-doc-name { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lshare-doc-sub { font-size: .74rem; color: var(--glass-text-mute); }
.lshare-doc-eye { flex: none; color: var(--glass-text-mute); }
.lshare-doc-eye .ico { width: 18px; height: 18px; }
.lshare-doc-btn:hover .lshare-doc-eye { color: var(--glass-green-lt); }
/* Full-width variant (the credit application): one document per row, spanning the
   whole card, and the file name wraps instead of truncating so the lender can read
   the full client name + application number from the file name. */
.lshare-docs-wide { grid-template-columns: 1fr; }
.lshare-docs-wide .lshare-doc-name { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }

.lshare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 26px; align-items: start; }
.lshare-panel { background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 20px 22px; }
.lshare-panel-sub { color: var(--glass-text-mute); font-size: .78rem; margin: -6px 0 12px; }
.lshare-kv { font-size: .86rem; color: var(--glass-text); margin-bottom: 6px; display: flex; gap: 10px; justify-content: space-between; }
.lshare-kv > span { color: var(--glass-text-soft); }
.lshare-list { margin: 4px 0 8px; padding-left: 18px; font-size: .84rem; color: var(--glass-text); }
.lshare-list li { margin-bottom: 3px; }
.lshare-muted { color: var(--glass-text-mute); }
.lshare-note { color: var(--glass-text-mute); font-size: .72rem; line-height: 1.5; margin: 10px 0 0; }
.lshare-table { width: 100%; border-collapse: collapse; font-size: .86rem; color: var(--glass-text); }
.lshare-table td { padding: 6px 0; border-top: 1px solid var(--glass-border); }
.lshare-table tr:first-child td { border-top: 0; }
.lshare-table td:first-child { color: var(--glass-text-soft); }
.lshare-table .num { text-align: right; }
.lshare-table .ltv { color: var(--glass-green-lt); padding-left: 16px; white-space: nowrap; }
.lshare-check { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--glass-border); }
.lshare-check:first-of-type { border-top: 0; }
.lshare-check-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--glass-text-mute); }
.lshare-check-dot.is-clear { background: var(--glass-green-lt); }
.lshare-check-dot.is-alert { background: #ff6b6b; }
.lshare-check-name { font-size: .84rem; font-weight: 600; color: var(--glass-text); }
.lshare-check-sum { font-size: .78rem; color: var(--glass-text-mute); }

@media (max-width: 640px) {
  .auth-card.lshare-view { padding: 24px 20px; }
  .lshare-grid { grid-template-columns: 1fr; }
}

/* Lender decision: request info / approve / decline, with comment + upload. */
.lshare-decision { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--glass-border); }
.lshare-responses { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.lshare-resp { background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 12px 14px; }
.lshare-resp-head { display: flex; align-items: center; gap: 10px; }
.lshare-resp-badge { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: var(--r-full); }
.lshare-resp-badge.is-warn { background: rgba(234, 179, 8, .16); color: #fde68a; }
.lshare-resp-badge.is-green { background: rgba(34, 197, 94, .16); color: #bbf7d0; }
.lshare-resp-badge.is-danger { background: rgba(239, 68, 68, .16); color: #fecaca; }
/* "Sent to lender" (received) stipulations map to is-info; is-neutral is the
   fallback. Both need a pill so they don't render as bare text on the checklist. */
.lshare-resp-badge.is-info { background: rgba(59, 130, 246, .18); color: #bfdbfe; }
.lshare-resp-badge.is-neutral { background: rgba(148, 163, 184, .18); color: #e2e8f0; }
.lshare-resp-when { font-size: .74rem; color: var(--glass-text-mute); }
.lshare-resp-comment { font-size: .86rem; color: var(--glass-text); margin-top: 6px; white-space: pre-wrap; }
.lshare-resp-doc { font-size: .82rem; color: var(--glass-text-soft); margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.lshare-resp-doc .ico { width: 15px; height: 15px; }

.lshare-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.lshare-choice { display: block; cursor: pointer; background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 14px 16px; transition: border-color .14s ease, background .14s ease; }
.lshare-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.lshare-choice-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--glass-text); font-size: .92rem; }
.lshare-choice-title .ico { width: 18px; height: 18px; flex: none; }
.lshare-choice-sub { display: block; font-size: .76rem; color: var(--glass-text-mute); margin-top: 5px; }
.lshare-choice:hover { border-color: var(--glass-green-lt); }
.lshare-choice:has(input:checked) { border-color: var(--glass-green-lt); background: rgba(34, 197, 94, .10); }
.lshare-choice.is-decline:has(input:checked) { border-color: #ff8f8f; background: rgba(239, 68, 68, .12); }
.lshare-choice:has(input:focus-visible) { outline: 2px solid var(--glass-green-lt); outline-offset: 2px; }

.lshare-decide-form .field { margin-bottom: 16px; }
.lshare-decide-form .field > label { display: block; font-weight: 600; font-size: .86rem; color: var(--glass-text-soft); margin-bottom: 6px; }
.auth-card .lshare-textarea { height: auto; min-height: 96px; resize: vertical; line-height: 1.5; padding: 10px 12px; }
.auth-card .lshare-file { height: auto; padding: 9px 12px; }
.lshare-decide-form .hint { font-size: .74rem; color: var(--glass-text-mute); margin-top: 6px; }
/* Lender's "send documents to the dealership" upload row (multi-file). */
.lshare-upload-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.lshare-upload-form .lshare-file { flex: 1; min-width: 220px; }
.lshare-upload .hint { font-size: .74rem; color: var(--glass-text-mute); margin-top: 2px; }
/* Native <select> popups render on an OS-default WHITE list; on the dark lender-
   share theme the inherited near-white option text is invisible. Force dark-on-
   white options so the dropdown items are readable when the list is open. */
.auth-card select.input option { color: #14181d; background: #ffffff; }
.auth-resend { margin-top: var(--sp-4); text-align: center; }

/* Six-box one-time-code entry */
.otp-row { display: flex; gap: 10px; }
.otp-box {
  flex: 1; min-width: 0; height: 54px; text-align: center;
  background: var(--glass-input); border: 1px solid var(--glass-input-bd);
  border-radius: var(--r-md); color: var(--glass-text);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl); font-weight: 600;
  -webkit-appearance: none; appearance: none;
}
.otp-box::-webkit-outer-spin-button, .otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp-box:hover { border-color: rgba(255, 255, 255, 0.2); }
.otp-box:focus { outline: none; border-color: var(--glass-green-lt); box-shadow: var(--glass-ring); }

/* Flash alerts restyled for the dark glass surface */
.auth-card .alert { background: rgba(255, 255, 255, 0.04); border-color: var(--glass-border); color: var(--glass-text); }
.auth-card .alert-success { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); color: #b9f4cf; }
.auth-card .alert-error { background: rgba(220, 80, 80, 0.14); border-color: rgba(220, 80, 80, 0.4); color: #ffc9c9; }
.auth-card .alert-info { background: rgba(80, 140, 220, 0.14); border-color: rgba(80, 140, 220, 0.4); color: #cfe1ff; }

.btn-link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 40px; padding: var(--sp-2) var(--sp-4);
  background: none; border: none; border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--accent); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn-link:hover { background: var(--green-50); color: var(--green-700); }
.btn-link:active { background: var(--green-100); }
.btn-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.auth-card .btn-link { width: auto; color: var(--glass-green-lt); }
.auth-card .btn-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--glass-text); }
.auth-card .btn-link:disabled { color: var(--glass-text-mute); background: none; cursor: default; }

/* --------------------------------------------------------------------------
   11. Empty / loading states
   -------------------------------------------------------------------------- */
.empty { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--text-muted); }
/* Empty-state hero icon: rendered at its native 24px (where the 1.8 stroke stays
   crisp instead of thin) inside a soft circular badge, block-centered. display:block
   overrides the base .ico inline-block + vertical-align so it sits dead-centre with no
   baseline drift; content-box keeps the glyph 24px while the padding forms the badge.
   The DIRECT-CHILD combinator is load-bearing: it targets only the hero glyph and NOT
   the .ico inside the empty state's own CTA button (that stays a normal 16px .btn .ico
   — otherwise this badge would land on the button icon, since .empty .ico and .btn .ico
   have equal specificity and this later rule would win). */
.empty > .ico {
  display: block; box-sizing: content-box;
  width: 24px; height: 24px; padding: 15px;
  margin: 0 auto var(--sp-4);
  color: var(--slate-400); background: var(--slate-100);
  border-radius: var(--r-full);
}
.empty h3 { color: var(--text); margin-bottom: var(--sp-2); }
.empty p { max-width: 44ch; margin: 0 auto var(--sp-5); }
.skeleton { background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 37%, var(--slate-100) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); height: 14px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --------------------------------------------------------------------------
   12. Detail layout, notes, timeline
   -------------------------------------------------------------------------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
/* Grid/flex items default to min-width:auto, which lets a wide child (a data table,
   a long apply-link URL) push the column past the viewport and raise a page-level
   horizontal scrollbar. Forcing min-width:0 lets the column shrink so the overflow
   is contained inside the card's own .table-wrap (overflow-x:auto) instead. */
.detail-grid > *, .wrap-grid > * { min-width: 0; }
/* Applicant name inside the Customer card, with the "Send an Email" pill beside it. */
.cust-name { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.cust-name-text { font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
/* Pill-style deep-link to the customer's Mailbox conversation. */
.email-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-full);
  background: var(--accent-quiet); color: var(--accent-hover);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.email-pill:hover { background: var(--accent); color: #fff; text-decoration: none; }
.email-pill .ico { width: 14px; height: 14px; }
/* Subsection heading inside the Customer card (e.g. the integrated Notes). */
.cust-subhead { font-size: var(--fs-base); font-weight: 700; color: var(--text); margin: 0 0 var(--sp-3); }
/* "Add note" keeps its input collapsed (details/summary) until the button is clicked. */
.note-add > summary { list-style: none; cursor: pointer; width: fit-content; }
.note-add > summary::-webkit-details-marker { display: none; }
.note-add[open] > summary { margin-bottom: var(--sp-3); }
.note-add-form { margin: 0; }

/* Notes — a compact vertical timeline. Heading + collapsed "Add note" share one
   row; the composer only drops to a full-width row of its own once opened. */
.notes-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.notes-head .cust-subhead { margin: 0; }
.notes-head .note-add { margin-left: auto; }
.notes-head:has(.note-add[open]) { align-items: flex-start; }
.notes-head:has(.note-add[open]) .note-add { flex: 1 1 100%; margin-left: 0; }
.notes-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--surface-2); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: 600; vertical-align: 2px;
}
.notes-empty { margin: 0; }
.note-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
/* Continuous rail linking the dots, trimmed to sit between first and last node. */
.note-timeline::before { content: ""; position: absolute; left: 5px; top: 7px; bottom: 7px; width: 2px; background: var(--border); }
.note-tl-item { position: relative; padding: 0 0 var(--sp-4) var(--sp-5); }
.note-tl-item:last-child { padding-bottom: 0; }
/* Node dot: a hollow ring in the accent color, punched over the rail. */
.note-tl-item::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--accent);
  box-sizing: border-box; z-index: 1;
}
.note-tl-meta { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.note-tl-author { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.note-tl-time { font-size: var(--fs-xs); color: var(--text-muted); }
.note-tl-text { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
/* Send to lender: partner + expiry side by side (expiry stays narrow). */
.share-fields { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 640px) { .share-fields { grid-template-columns: 1fr; } }
/* Each lender submission is its own card (own message, own documents, decisions). */
.lender-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-4); background: var(--surface); box-shadow: var(--shadow-xs); }
.lender-card:last-child { margin-bottom: 0; }
.lender-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.lender-card-name { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.lender-card-badges { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.lender-card-meta { display: flex; flex-wrap: wrap; gap: 3px var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); }
.lender-card-block { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.lender-card-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: var(--sp-2); }
/* Lender decisions + document rows (used inside the lender card). */
.lender-resp { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--slate-25); border: 1px solid var(--border); }
.lender-resp .meta { display: flex; align-items: center; gap: var(--sp-2); }
.supp-doc-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.supp-doc-row:first-of-type { border-top: 0; }
.supp-doc-by { margin-left: 2px; white-space: nowrap; }
.supp-doc-name { display: inline-flex; align-items: center; gap: var(--sp-2); background: transparent; border: 0; cursor: pointer; color: var(--accent-hover); font-weight: 600; font-size: var(--fs-sm); padding: 0; text-align: left; min-width: 0; }
.supp-doc-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supp-doc-name:hover > span { text-decoration: underline; }
.supp-doc-name .ico { width: 16px; height: 16px; flex: none; color: var(--green-600); }
/* Divider between the status form and the notes in the merged Status & notes card. */
.sn-divider { border-top: 1px solid var(--border); margin: var(--sp-4) 0; }
/* minmax(0,1fr) on the value column (not a bare 1fr, whose implicit min-content
   floor lets a long unbreakable string widen the grid) + overflow-wrap so an email
   or address always wraps inside its cell instead of bleeding past the card edge. */
.dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); font-size: var(--fs-base); }
.dl dt { color: var(--text-muted); font-weight: 500; }
.dl dd { color: var(--text); min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* Fluid key/value grid for record detail panels: columns auto-fit and never get
   narrower than the cell content needs, and the min(100%,…) floor collapses to a
   single full-width column on a phone, so the panel fits any width with no
   horizontal scroll. Long values (emails, addresses) wrap rather than overflow. */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--sp-4) var(--sp-5); }
.kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kv-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kv-value { color: var(--text); min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* Amount requested: value + inline "edit bubble" popover for the sales manager. */
.amount-kv { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.amount-edit { position: relative; display: inline-block; }
.amount-edit > summary { list-style: none; cursor: pointer; }
.amount-edit > summary::-webkit-details-marker { display: none; }
.amount-edit-btn {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--green-50); color: var(--green-600); border: 1px solid var(--green-100);
  transition: background .12s ease, color .12s ease;
}
.amount-edit-btn:hover { background: var(--green-100); color: var(--green-700); }
.amount-edit-btn .ico { width: 14px; height: 14px; }
.amount-edit[open] > summary .amount-edit-btn { background: var(--green-500); color: #fff; border-color: var(--green-500); }
.amount-edit-pop {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: 240px; max-width: 78vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md, 0 12px 32px -8px rgba(15,23,32,.28)); padding: var(--sp-4);
}
.amount-edit-pop label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-2); }
.amount-edit-field { position: relative; }
.amount-edit-prefix { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-family: var(--font-mono); pointer-events: none; }
.amount-edit-field .input { padding-left: 22px; font-family: var(--font-mono); }
.amount-edit-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-3); }

/* In-flight live update: dim the section and show a progress cursor briefly. */
.is-live-busy { cursor: progress; }
.is-live-busy [type=submit][disabled] { opacity: .6; }
.input-copy { max-width: 100%; }
.input-copy .input { min-width: 0; }
.note { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.note:last-child { border-bottom: none; }
.note .meta { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-1); display: flex; gap: var(--sp-2); align-items: center; }
.timeline { list-style: none; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--sp-4) var(--sp-5); border-left: 2px solid var(--border); }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline .meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   13. Utilities
   -------------------------------------------------------------------------- */
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1);} .gap-2 { gap: var(--sp-2);} .gap-3 { gap: var(--sp-3);} .gap-4 { gap: var(--sp-4);}
.mt-2{margin-top:var(--sp-2);} .mt-4{margin-top:var(--sp-4);} .mt-5{margin-top:var(--sp-5);} .mb-2{margin-bottom:var(--sp-2);} .mb-4{margin-bottom:var(--sp-4);} .mb-5{margin-bottom:var(--sp-5);}
.text-muted{color:var(--text-muted);} .text-soft{color:var(--text-soft);} .text-sm{font-size:var(--fs-sm);} .text-xs{font-size:var(--fs-xs);}
.fw-600{font-weight:600;} .wrap-grid{display:grid;gap:var(--sp-5);}
.toolbar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.toolbar .search { flex: 1; min-width: 200px; max-width: 360px; }
.toolbar .search .input { height: 38px; }
.hide-sm { display: initial; }
.menu-toggle { display: none; }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .detail-grid { grid-template-columns: 1fr; }
  /* Recent applications (a wide table) now shares this row with Pipeline; stack
     them below tablet width so the table gets full width instead of ~60%. */
  .chart-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Print: turn the application detail page into a clean, well-spaced document.
   The app chrome (sidebar, topbar, buttons) and every input-only form are
   dropped; the full credit-application document (PII) is excluded via .no-print.
   What remains — overview, wish list, book-out, metadata, activity and the
   audit log — is laid out full width with tidy spacing and page breaks.
   -------------------------------------------------------------------------- */
@media print {
  /* Tight, even page margin so the document fills the sheet edge-to-edge
     instead of floating in a narrow column. 10mm is comfortably inside every
     desktop printer's unprintable border. */
  @page { margin: 10mm; }
  html, body { background: #fff !important; }
  body { color: #1a1f27; font-size: 13px; line-height: 1.45; }
  /* Drop the app shell so only the page content prints. */
  .sidebar, .topbar, .scrim, .support-modal, .menu-toggle, .breadcrumb,
  .flashes, .no-print, .btn, form { display: none !important; }
  .app { display: block !important; }
  /* Reset BOTH margin and padding: .content normally carries
     padding-top: var(--topbar-h) to clear the fixed topbar, which on paper
     would leave a big blank band above the letterhead. */
  .content { margin: 0 !important; padding: 0 !important; }
  .content-inner { max-width: none !important; padding: 0 !important; margin: 0 !important; }

  /* Header block reads as the document title. .page-head keeps its on-screen
     flex-row layout (title | actions); .page-head-actions just disappears via
     .no-print above. The letterhead brand strip is a THIRD flex child that
     forces itself onto its own full-width row above the title (flex-basis:
     100%, so it wraps thanks to .page-head's existing flex-wrap) instead of
     stacking as a second, competing header block.
     Selector specificity note: .print-only alone sets `display: block
     !important` below; `.page-head .print-brand` (two classes) has to win
     that tie on specificity, not source order, so it stays a flex row. */
  .page-head { margin-bottom: 16px; page-break-after: avoid; }
  .page-head .titles h1 { font-size: 26px; }
  .page-head .titles p { font-size: 13px; }
  .page-head .print-brand {
    display: flex !important; align-items: center; gap: 14px;
    flex: 1 0 100%; width: 100%;
    margin-bottom: 14px; padding-bottom: 12px;
    border-bottom: 2px solid #1f8f57;
    break-inside: avoid; page-break-after: avoid;
  }
  .print-logo { height: 44px; width: auto; display: block; flex: none; }
  .print-brand-name {
    font-size: 17px; font-weight: 700; color: #111827; letter-spacing: -0.01em;
    border-left: 1px solid #cbd2da; padding-left: 14px; white-space: nowrap;
  }
  .print-brand-meta { font-size: 11px; color: #5b6472; margin-left: auto; white-space: nowrap; }

  /* One clean column on paper regardless of the on-screen 50/50 split. */
  .detail-grid { display: block !important; }
  .wrap-grid { display: block !important; }

  /* Cards: light framing and never split across a page. A faint tinted header
     band reads as a section divider on paper. Tight vertical rhythm keeps the
     document continuous rather than gappy. */
  .card { box-shadow: none !important; border: 1px solid #d9dde3 !important;
          border-radius: 6px; margin: 0 0 12px !important; break-inside: avoid;
          page-break-inside: avoid; background: #fff !important; }
  .card-head {
    background: #f4f7fa !important; border-bottom: 1px solid #e1e5ea;
    padding: 10px 16px; page-break-after: avoid;
  }
  .card-head h3 { font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #2c3540; }
  .card-body { padding: 16px 18px; }
  .ov-grid, .meta-dl, .wish-dl { break-inside: avoid; }
  /* Larger, clearer field labels and values on paper. */
  .kv-label { font-size: 10px; color: #6b7280; }
  .kv-value { font-size: 13.5px; }
  .cust-name-text { font-size: 17px; }

  /* Keep badge/status colours legible on paper. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* The audit ledger prints as a full-width table; allow it to break across pages. */
  .table-wrap { overflow: visible !important; }
  .ledger { break-inside: auto; }
  .ledger tr { break-inside: avoid; }
  .ledger thead { display: table-header-group; }

  /* Worksheet editor prints as a clean single column. */
  #wsxRoot.wsx-layout { display: block !important; }
  .wsx-summary-zone { position: static !important; max-height: none !important; overflow: visible !important; }
  .wsx-rail { display: block !important; }

  /* Advanced VIN decode: expand every collapsed section and scroll area so the
     full specifications print, and let the long tables break across pages. */
  details { display: block !important; }
  details:not([open]) > *:not(summary) { display: block !important; }
  details > summary { list-style: none; }
  .decode-collapse > summary::before { content: "" !important; }
  .decode-scroll { max-height: none !important; overflow: visible !important; border: none !important; }
  .decode-table { break-inside: auto; }
  .decode-table tr { break-inside: avoid; }
  .decode-table thead { display: table-header-group; }
  .feature-list { columns: 2; }

  a { color: #111 !important; text-decoration: none !important; }
}
@media (max-width: 480px) {
  .auth-glass .content-area { padding: 12px env(safe-area-inset-right) 12px env(safe-area-inset-left); }
  .auth-wrap { padding: var(--sp-4); }
  .auth-card { padding: 22px 20px; }
  .auth-brand { margin-bottom: var(--sp-4); }
  .auth-brand .brand-logo { height: 60px; }
  .auth-card .field { margin-bottom: var(--sp-3); }
  .auth-card .lead { margin-bottom: var(--sp-4); }
  .otp-row { gap: 7px; }
  .otp-box { height: 50px; font-size: var(--fs-lg); }
}
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; width: 248px; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .content { margin-left: 0; }
  .content-inner { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .menu-toggle { display: inline-flex; }
  .form-grid { grid-template-columns: 1fr; }
  .stat .value { font-size: var(--fs-2xl); }
  .dl { grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); }  /* tighten label column on phones */
  .hide-sm { display: none; }
  .scrim { position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(21,28,36,.4); z-index: 20; }
  /* Reveal the tap-to-close backdrop while the mobile drawer is open. The .scrim
     element carries the [hidden] attribute by default; this class (toggled in
     app.js alongside .sidebar.open) overrides it so the backdrop is interactive. */
  body.nav-open .scrim { display: block; }
}

/* reCAPTCHA Enterprise runs in invisible (score-based) mode, so there is no
   challenge for users. Google's floating badge is hidden here, which their
   terms permit as long as the reCAPTCHA privacy/terms notice is shown in the
   flow. That notice is rendered on the auth login pages (templates/auth/login.php). */
.grecaptcha-badge { visibility: hidden; }

/* ============================ Lender Directory ============================ */
/* Small inline icon for dense contact/location lines. */
.ico-xs { width: 13px; height: 13px; flex: none; vertical-align: -0.12em; display: inline-block; opacity: .7; }

/* Middle-align every cell so the caret, category pill, serves and contact read as a
   single tidy centered row as you scroll. */
table.dir-table tbody td { vertical-align: middle; }
table.dir-table .primary-cell { position: relative; padding-left: 30px; }

/* CSS caret toggle (no icon dependency); rotates when its detail row is open.
   Vertically centered in the cell. */
.dir-caret { position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    appearance: none; background: none; border: none;
    cursor: pointer; padding: 4px; line-height: 0; color: var(--text-muted); }
.dir-caret::before { content: ''; display: inline-block; border: 5px solid transparent;
    border-left-color: currentColor; transition: transform .12s ease; }
.dir-caret.open::before { transform: rotate(90deg); }
.dir-caret:hover { color: var(--text); }
.dir-name { font-weight: 600; color: var(--text); }
.dir-sub { margin-top: 2px; }
.dir-cov { font-weight: 600; }

/* Contact column: click-to-call phone + website, stacked. */
.dir-contact a { display: flex; align-items: center; gap: 5px; white-space: nowrap; width: max-content; max-width: 240px; }
.dir-contact .dir-web { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
.dir-contact .dir-phone { color: var(--text); font-variant-numeric: tabular-nums; }
.dir-contact .dir-phone:hover { color: var(--info-700); }

/* Add-cell: keep the button a normal table-cell (fixes the old flex-on-td misalignment). */
table.dir-table td.dir-add { text-align: right; white-space: nowrap; }
table.dir-table th.dir-add-h { text-align: right; }
table.dir-table td.dir-add .row-actions { justify-content: flex-end; }

/* Expandable detail panel. */
.dir-detail > td { background: var(--slate-25); padding: 0; }
.dir-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 28px; padding: 14px 16px 6px 30px; }
.dir-detail-grid > div { display: flex; flex-direction: column; gap: 2px; }
.dir-dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.dir-dd { font-size: var(--fs-sm); color: var(--text); }
.dir-notes { margin: 2px 16px 14px 30px; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.5; }

/* Subtitle separator dot (brand • location • coverage). */
.dir-sub .dir-dot { color: var(--slate-300); margin: 0 2px; }

/* "Scan to call" QR popover — animated, pointer-anchored to the phone number. */
.qr-pop {
    position: absolute; z-index: 60; width: 208px; padding: 14px 14px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: 0 14px 40px rgba(15, 23, 42, .22); text-align: center;
    opacity: 0; transform: scale(.9) translateY(6px); transform-origin: bottom center;
    transition: opacity .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1);
}
.qr-pop.show { opacity: 1; transform: scale(1) translateY(0); }
.qr-pop.below { transform-origin: top center; }
.qr-code { min-height: 170px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.qr-code svg { width: 170px; height: 170px; display: block; }
.qr-cap { margin-top: 10px; }
.qr-cap strong { display: block; font-size: var(--fs-sm); color: var(--text); }
.qr-cap span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted);
    font-variant-numeric: tabular-nums; }
/* little diamond arrow pointing at the phone link */
.qr-pop::after {
    content: ''; position: absolute; left: 22px; width: 12px; height: 12px; background: var(--surface);
    bottom: -7px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
    transform: rotate(45deg);
}
.qr-pop.below::after { bottom: auto; top: -7px;
    border: 0; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.dir-phone { cursor: pointer; }

/* Serves cell stacks dealer types over credit tiers (merged from the old Credit col). */
.dir-serves .dir-credit { margin-top: 3px; color: var(--text-muted); }

/* Circular monogram avatar + clickable rows in the directory. */
.dir-idcell { display: flex; align-items: center; gap: 10px; }
.dir-idtext { min-width: 0; }
.dir-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 600; letter-spacing: .01em; user-select: none;
}
.dir-row { cursor: pointer; }
.dir-row:hover { background: var(--slate-25); }
.dir-row a, .dir-row button, .dir-row form { cursor: auto; }
.dir-caret { cursor: pointer; }

/* Directory toolbar: an integrated control strip flush above the table. Always one
   row, never wraps; scrolls horizontally if the viewport is too narrow. */
.dir-toolbar {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
    margin: 0; padding: 12px var(--sp-5);
    background: var(--surface-2);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.dir-toolbar .search { flex: 1 1 170px; min-width: 140px; max-width: none; }
.dir-toolbar .search .input { height: 36px; width: 100%; }
.dir-toolbar .select { flex: 0 0 auto; height: 36px; }
.dir-toolbar .btn { flex: 0 0 auto; height: 36px; white-space: nowrap; }
/* thin, tidy scrollbar for the overflow case */
.dir-toolbar::-webkit-scrollbar { height: 6px; }
.dir-toolbar::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 3px; }

/* ---- Support dialog ------------------------------------------------------ */
.support-modal[hidden] { display: none; }
.support-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  overflow-y: auto;
}
.support-backdrop {
  position: fixed; inset: 0;
  background: rgba(14, 17, 22, .55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.support-dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 540px; margin: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: support-pop .16s ease-out;
}
@keyframes support-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.support-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.support-head h2 {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0; font-size: var(--fs-lg); color: var(--text);
}
.support-head h2 .ico { width: 20px; height: 20px; color: var(--accent); }
.support-form, .support-done { padding: var(--sp-5); }
.support-intro { margin: 0 0 var(--sp-4); color: var(--text-soft); font-size: var(--fs-sm); }
.support-identity {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.support-identity .input[readonly] { background: var(--slate-50); color: var(--text-soft); cursor: default; }
.support-form .field { margin-bottom: 0; }
.support-form .textarea { resize: vertical; min-height: 96px; }
@media (max-width: 560px) { .support-identity { grid-template-columns: 1fr; } }

/* Success state */
.support-done { text-align: center; }
.support-done-icon .ico { width: 44px; height: 44px; color: var(--accent); }
.support-done h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-lg); color: var(--text); }
.support-done p { margin: 0 0 var(--sp-2); color: var(--text-soft); font-size: var(--fs-sm); }
.support-ticket {
  display: inline-block; margin: var(--sp-2) 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: .04em; color: var(--accent);
  background: var(--accent-quiet); border: 1px dashed var(--green-200);
  border-radius: var(--r-md);
}
.support-done-note { color: var(--text-muted); font-size: var(--fs-xs); }
.support-done .form-actions { justify-content: center; }
body.support-open { overflow: hidden; }

/* ---- Conversation thread (Mailbox / support) ----------------------------- */
.conv-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.conv-heading { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.conv-heading h1 { margin: 0; font-size: var(--fs-xl); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.conv-count { flex: none; font-size: var(--fs-xs); color: var(--text-muted); background: var(--slate-100); padding: 2px 9px; border-radius: var(--r-full); }

.conv { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 900px; }
.conv-msg { display: flex; gap: var(--sp-3); align-items: flex-start; }
.conv-avatar {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 700; color: #fff;
  background: var(--slate-500); box-shadow: var(--shadow-xs); user-select: none;
}
.conv-msg.is-sent .conv-avatar,
.conv-avatar.is-me { background: var(--accent); }
.conv-msg.is-recv .conv-avatar { background: #4b6bfb; }

.conv-bubble {
  flex: 1 1 auto; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden;
}
.conv-msg.is-sent .conv-bubble {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.conv-msg.is-opened .conv-bubble { box-shadow: 0 0 0 3px var(--ring); }

.conv-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4) 0; }
.conv-who { font-weight: 700; color: var(--text); }
.conv-addr { color: var(--text-muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.conv-tag { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--r-full); }
.conv-msg.is-sent .conv-tag { color: var(--green-700); background: var(--green-50); }
.conv-msg.is-recv .conv-tag { color: var(--slate-600); background: var(--slate-100); }
.conv-time { margin-left: auto; flex: none; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.conv-recip { padding: 3px var(--sp-4) 0; font-size: var(--fs-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.conv-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.conv-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-base); color: var(--text); line-height: 1.6; }
.conv-frame { width: 100%; min-height: 240px; border: 0; background: #fff; border-radius: var(--r-md); display: block; }

/* Per-message attachments: rendered inside the bubble that carried them, so it is
   always clear which message sent or received which file. */
.conv-attach { border-top: 1px dashed var(--border); margin: 0 var(--sp-4); padding: var(--sp-3) 0 var(--sp-4); }
.conv-attach-head { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.conv-attach-head .ico { width: 14px; height: 14px; flex: none; }
.conv-attach-items { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.conv-attach-item { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 12px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.conv-attach-item:hover { background: var(--slate-100); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.conv-attach-item > .ico { width: 16px; height: 16px; flex: none; color: var(--accent); }
.conv-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.conv-attach-scanned { display: inline-flex; flex: none; color: var(--green-600); }
.conv-attach-scanned .ico { width: 14px; height: 14px; }
.conv-attach-open { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; flex: none;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.conv-attach-open .ico { width: 14px; height: 14px; }
.conv-attach-item.is-blocked { cursor: default; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.conv-attach-item.is-blocked > .ico { color: var(--danger); }
.conv-attach-flag { font-size: var(--fs-xs); font-weight: 700; flex: none; }

/* Reply composer */
.conv-reply {
  margin-top: var(--sp-5); max-width: 900px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-4);
}
.conv-reply-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.conv-reply-to { color: var(--text-soft); font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--sp-2); overflow-wrap: anywhere; }
.conv-reply-to .ico { width: 16px; height: 16px; flex: none; color: var(--accent); }
.conv-reply-subject { margin-bottom: var(--sp-3); }
.conv-reply-body { resize: vertical; min-height: 104px; margin-bottom: var(--sp-3); }
/* Attach (left) + Send (right) share one tight row so the composer doesn't leave
   a tall empty gap under the textarea. The chosen-file list grows below the attach
   button without shifting the Send button (which stays pinned top-right). */
.conv-reply-actions { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.conv-reply-actions .attach-field { margin: 0; flex: 1 1 auto; min-width: 0; }
.conv-reply-actions .btn { flex: none; }
@media (max-width: 640px) { .conv-time { margin-left: 0; } }

/* ---- Application wish list ------------------------------------------------ */
.wish-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.wish-item {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
}
.wish-item-main { flex: 1 1 auto; min-width: 0; }
.wish-photo { flex: none; width: 168px; height: 116px; border-radius: var(--r-md); overflow: hidden; background: var(--slate-100); }
.wish-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wish-photo-btn { position: relative; padding: 0; border: 0; cursor: pointer; }
.wish-photo-btn img { transition: transform .2s ease; }
.wish-photo-btn:hover img { transform: scale(1.05); }
.wish-photo-badge {
  position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-full); background: rgba(10,12,16,.72);
  color: #fff; font-size: var(--fs-xs); font-weight: 600;
}
.wish-photo-badge .ico { width: 13px; height: 13px; }
.wish-title { font-weight: 700; color: var(--text); font-size: var(--fs-md); }
.wish-vin { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.wish-pricing { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.wish-price { font-weight: 700; color: var(--accent); font-size: var(--fs-lg); }
.wish-msrp { font-size: var(--fs-sm); color: var(--text); font-weight: 600; }
.wish-dl { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; gap: 3px var(--sp-4); margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.wish-dl dt { color: var(--text-muted); }
.wish-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.wish-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.wish-notes-main { flex: 1 1 auto; min-width: 0; }

/* ---- Application profile (compact redesign) ------------------------------- */
/* Overview strip: every core fact in one dense auto-flowing grid. The min(100%,
   168px) floor collapses to one column on a phone; long emails wrap in-cell. */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: var(--sp-4) var(--sp-5); }

/* Metadata & verification card: tight grouped key/value rows. Hairline-separated
   groups (not nested cards) keep ~25 fields readable in the 340px side column. */
.meta-sec { padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.meta-sec:first-child { border-top: 0; padding-top: 0; }
.meta-sec h4 {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin-bottom: var(--sp-2);
}
.meta-dl { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 3px var(--sp-3); font-size: var(--fs-sm); }
.meta-dl dt { color: var(--text-muted); }
.meta-dl dd { margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.meta-dl dd.mono { font-size: var(--fs-xs); }
.meta-foot { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
/* Compact, multi-column packing of the metadata groups so the card fills its
   width instead of stacking everything in one narrow column with dead space. */
.meta-grid { column-width: 240px; column-gap: var(--sp-6); }
.meta-grid .meta-sec { break-inside: avoid; border-top: 0; padding: 0; margin-bottom: var(--sp-4); }
.meta-grid .meta-dl { grid-template-columns: 96px minmax(0, 1fr); }

/* ---- Deal-vehicle intelligence checks (Vehicle Databases) ----------------- */
.vcheck-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }
.vcheck-buttons .btn { flex: 0 0 auto; }
.vcheck-refresh { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); }
.vcheck { padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.vcheck:first-of-type { border-top: 0; padding-top: 0; }
.vcheck-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: 2px; }
.vcheck-dl { margin-top: var(--sp-2); }
.vcheck-records { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.vcheck-rec { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); font-size: var(--fs-xs); color: var(--text); padding: var(--sp-2); background: var(--slate-50); border-radius: var(--r-sm); }
.vcheck-rk { color: var(--text-muted); }
.vcheck-foot { margin-top: var(--sp-2); }

/* ---- Deal Vehicle: vehicle rail (snapshot card + collapsible sections) ----- */
/* The listing is ONE collapsible block: a summary line (year/make/model/trim +
   price/MSRP/miles + caret), expanding to the full listing (photos, specs, Carfax). */
/* Deal-vehicle snapshot: clickable photo thumbnail | name + Carfax + stats + VIN
   | remove. No collapsible wrapper — it's the always-visible header of the card. */
.veh-snap { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); }
.veh-snap-empty { align-items: center; }
.veh-snap-photo { flex: none; width: 132px; height: 92px; border-radius: var(--r-md); overflow: hidden; background: var(--slate-100); }
.veh-snap-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.veh-snap-photo-btn { position: relative; padding: 0; border: 0; cursor: zoom-in; }
.veh-snap-photo-btn img { transition: transform .2s ease; }
.veh-snap-photo-btn:hover img { transform: scale(1.05); }
.veh-snap-photo-badge { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-full); background: rgba(10,12,16,.72); color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.veh-snap-photo-badge .ico { width: 13px; height: 13px; }
.veh-snap-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.veh-snap-titlerow { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
.veh-snap-carfax { flex: none; }
.veh-snap-vin { font-size: var(--fs-xs); color: var(--text-muted); word-break: break-all; }
.veh-snap-remove { flex: none; margin: 0; align-self: flex-start; }
.veh-title { font-weight: 700; font-size: var(--fs-md); line-height: 1.25; overflow-wrap: anywhere; }
.veh-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-3); font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.3; }
.veh-stats b { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
/* Editable identity, below the snapshot: Vehicle spans line 1; VIN (+ Look-up),
   Stock #, and Mileage share line 2. */
/* Input with a welded action button on the right (VIN look-up, stock look-up):
   one seamless field, button flush to the input's right edge. */
.input-group { display: flex; align-items: stretch; min-width: 0; }
.input-group .input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; }
/* 40x40 because the GLOBAL .input is 40px tall. HEIGHT-COUPLED: this must equal
   the height of the .input it is welded to, or the button stands proud of the
   field. Today the ONLY input-groups in the app live in partials/deal_vehicle,
   which renders exclusively inside #wsxRoot (32px inputs) -- so the real sizing
   comes from the #wsxRoot override further down (search SWX-INPUTGROUP-DENSE).
   Change one, change both. */
.input-group .input-group-btn { flex: none; width: 40px; height: 40px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group .input-group-btn .ico { width: 16px; height: 16px; }

.veh-idgrid { display: grid; grid-template-columns: 1.5fr 1fr 0.7fr; gap: var(--sp-3); padding: var(--sp-4); border-top: 1px solid var(--border); align-items: end; }
.veh-idgrid .veh-id-vehicle { grid-column: 1 / -1; }
.veh-idgrid .span2 { grid-column: 1 / -1; }
.veh-idgrid form.field { margin: 0; }
.veh-idgrid .input-group .input { padding-left: var(--sp-2); padding-right: var(--sp-2); }
#wsxRoot .veh-idgrid .input { max-width: none !important; }
@media (max-width: 640px) { .veh-idgrid { grid-template-columns: 1fr; } .veh-snap-photo { width: 104px; height: 76px; } }
/* Collapsible rail sections: hairline rhythm inside one card, no per-section chrome. */
/* Divider BETWEEN sections only — no top border on the first one, which would
   draw a stray line right under the card's own top edge. */
.veh-sec + .veh-sec { border-top: 1px solid var(--border); }
.veh-sec > summary { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none; padding: var(--sp-3) var(--sp-4); font-weight: 700; font-size: var(--fs-sm); }
.veh-sec > summary::-webkit-details-marker { display: none; }
.veh-sec > summary:hover { background: var(--slate-25); }
.veh-sec > summary > span:first-child { flex: 1; }
.veh-sec[open] > summary .wsx-rows-caret { transform: rotate(225deg); margin-top: 3px; }
.veh-sec-body { padding: 0 var(--sp-4) var(--sp-4); }

/* Inline-editable worksheet name in the page heading (pencil to edit). */
.ws-title { display: flex; align-items: center; gap: var(--sp-2); }
.ws-title-input {
  font: inherit; font-size: var(--fs-2xl, 1.5rem); font-weight: 700; color: var(--text);
  border: 1px solid transparent; background: transparent; border-radius: var(--r-sm);
  padding: 2px 6px; margin: -2px -6px; min-width: 0; flex: 1 1 auto; max-width: 40ch;
}
.ws-title-input:hover { border-color: var(--border); }
.ws-title-input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.ws-title-pencil {
  flex: none; border: 0; background: none; cursor: pointer; color: var(--text-muted);
  padding: 4px; border-radius: var(--r-sm); display: inline-flex;
}
.ws-title-pencil:hover { color: var(--accent); background: var(--slate-50); }
.ws-title-pencil .ico { width: 16px; height: 16px; }

/* Kelley Blue Book card (top of the vehicle rail). VIN, mileage and ZIP share
   ONE line; VIN stays wide enough for all 17 characters, and ZIP is sized to
   always show its 5 digits. The button drops to its own line below (span3). */
.kbb-form { display: grid; grid-template-columns: 1.5fr 0.9fr 74px; gap: var(--sp-2); align-items: end; }
.kbb-form .span3 { grid-column: 1 / -1; margin-top: 2px; }
.kbb-form .kbb-vin .input { padding-left: var(--sp-2); padding-right: var(--sp-2); }
/* flex-direction:row overrides .field's column so justify-content:flex-end
   right-aligns the button (a column flex would push it down, not to the edge). */
.kbb-actions-row { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
/* No reserved empty space under the button: the status line collapses when it
   has no message, so the report history sits directly below. */
.kbb-status { margin-top: var(--sp-2); }
.kbb-status:empty { display: none; }
/* Pull history: the worksheet's permanent record of generated reports. */
.kbb-history { margin-top: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-2); }
.kbb-history-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--sp-1); }
.kbb-h-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) 0; }
.kbb-h-row + .kbb-h-row { border-top: 1px dashed var(--border); }
.kbb-h-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.kbb-h-veh { font-size: var(--fs-sm); font-weight: 700; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.kbb-h-vin { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); word-break: break-all; }
.kbb-h-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.kbb-h-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
/* Standalone Kelley Blue Book values card (column 1, below the listing) — built
   to be read at a glance: a dense retail ledger, three condition tiles, and the
   long reference lists folded away. Extracted from a report, keyed to the VIN. */
/* The card needs its own padding + separation: .card carries no padding (that
   normally comes from .card-body, which this card doesn't use) and .wsx-deal
   stacks its cards with no gap — without this the values sit flush to the edges
   and merge visually with the listing card above and the deal tabs below. */
.kbbv-card { padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0; }
.kbbv-card .kbbv-slot { margin: 0; }
.kbbv { border: 0; background: transparent; padding: 0; }
.kbbv-empty .kbbv-title { display: block; }
.kbbv-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.kbbv-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.kbbv-meta { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.kbbv-subhead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: var(--sp-3) 0 var(--sp-2); }

/* Retail ledger: two columns of label→amount rows, tight and aligned. Rows flow
   row-major into the two tracks; the column-rule keeps the split crisp. */
.kbbv-ledger { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); align-content: start; }
.kbbv-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 5px 0; border-bottom: 1px dashed var(--border); min-width: 0; }
.kbbv-line-label { font-size: var(--fs-sm); color: var(--text-soft); overflow-wrap: anywhere; }
.kbbv-line-nums { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.kbbv-line-value { font-size: var(--fs-base); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kbbv-line-range { font-size: 11px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 1px; }
@media (max-width: 720px) { .kbbv-ledger { grid-template-columns: 1fr; column-gap: 0; } }

/* Condition books as three compact tiles — the Good value big, the spread small. */
.kbbv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.kbbv-tile { background: var(--slate-50); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kbbv-tile-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.kbbv-tile-value { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kbbv-tile-sub { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .kbbv-tiles { grid-template-columns: 1fr; } }

/* Folds: reference-only detail, collapsed by default so the card stays short. */
.kbbv-folds { margin-top: var(--sp-3); border-top: 1px solid var(--border); }
.kbbv-fold { border-bottom: 1px solid var(--border); }
.kbbv-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) 0; }
.kbbv-fold > summary::-webkit-details-marker { display: none; }
.kbbv-fold-name { font-size: var(--fs-sm); font-weight: 600; }
.kbbv-fold-caret { margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); transition: transform .15s ease; align-self: center; }
.kbbv-fold[open] > summary .kbbv-fold-caret { transform: rotate(225deg); }
.kbbv-fold[open] > summary { padding-bottom: var(--sp-1); }
.kbbv-fold > *:not(summary) { padding-bottom: var(--sp-3); }

/* Vehicle details: a clean two-column definition grid. */
.kbbv-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-5); }
.kbbv-drow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); min-width: 0; }
.kbbv-dlabel { font-size: var(--fs-xs); color: var(--text-muted); }
.kbbv-dval { font-size: var(--fs-sm); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.kbbv-dval.mono { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-xs); }

/* Optional equipment: a tight multi-column bulleted grid, not a comma run. */
.kbbv-equip-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px var(--sp-4); }
.kbbv-equip-grid li { position: relative; padding-left: var(--sp-3); font-size: var(--fs-xs); line-height: 1.6; color: var(--text-soft); overflow-wrap: anywhere; }
.kbbv-equip-grid li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 3px; height: 3px; border-radius: 50%; background: var(--accent, var(--text-muted)); }
.kbbv-equip { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; margin: 0; }
@media (max-width: 480px) { .kbbv-details { grid-template-columns: 1fr; } }

/* Report lightbox: centered overlay with an inline PDF viewer. */
.kbb-lb { position: fixed; inset: 0; z-index: 3300; display: flex; align-items: center; justify-content: center; padding: max(16px, 3vh) max(16px, 3vw); }
.kbb-lb[hidden] { display: none; }
.kbb-lb .lb-backdrop { position: fixed; inset: 0; background: rgba(8,10,14,.7); }
.kbb-lb-panel { position: relative; z-index: 1; width: min(1000px, 96vw); height: min(90vh, 1100px); background: var(--surface, #fff); border-radius: var(--r-lg, 12px); box-shadow: 0 24px 70px rgba(0,0,0,.45); display: flex; flex-direction: column; overflow: hidden; }
.kbb-lb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.kbb-lb-title { font-weight: 700; }
.kbb-lb-actions { display: flex; gap: var(--sp-2); }
.kbb-lb-frame { flex: 1; width: 100%; border: 0; display: block; background: var(--slate-50); }
.kbb-lb-frame[hidden], .kbb-lb-actions [hidden] { display: none; }
/* Used / New choice beside the Pull button. */
.kbb-vtype { display: inline-flex; gap: var(--sp-3); align-items: center; margin-right: auto; }
.kbb-vtype-opt { display: inline-flex; gap: 5px; align-items: center; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.kbb-vtype-opt input { margin: 0; }
/* Verification panel: the step between decode and the generated report.
   Options render as card tiles (checkbox, name, MFG code chip, prices on their
   own meta line) so long factory names never collide with the pricing. */
.kbb-cfg { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kbb-cfg[hidden] { display: none; }
.kbb-cfg-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-5); background: var(--slate-50, #f8fafc); }
.kbb-cfg-lead { margin-bottom: var(--sp-4); }
.kbb-cfg-vehicle { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
.kbb-cfg-veh-name { font-weight: 700; font-size: var(--fs-lg, 1.05rem); line-height: 1.3; }
.kbb-cfg-veh-type { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 1px 9px; }
.kbb-cfg-veh-type-used { background: var(--slate-100, #f1f5f9); color: var(--text-soft); border: 1px solid var(--border); }
.kbb-cfg-veh-type-new { background: var(--green-50, #f0fdf4); color: var(--green-700, #15803d); border: 1px solid var(--green-500, #16a34a); }
.kbb-cfg-veh-vin { flex-basis: 100%; font-family: var(--mono, ui-monospace, monospace); font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .04em; }
.kbb-cfg-hint { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--text-muted); max-width: 72ch; }
.kbb-cfg-selects { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.kbb-cfg-selects[hidden] { display: none; }
.kbb-cfg-sel { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); min-width: 0; }
.kbb-cfg-sel select { width: 100%; background: var(--surface, #fff); }
.kbb-cfg-sel-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.kbb-cfg-sel-wide { grid-column: 1 / -1; }
.kbb-cfg-group { margin-bottom: var(--sp-4); }
.kbb-cfg-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: var(--sp-2); }
.kbb-cfg-group-title { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-strong, inherit); margin: 0; }
.kbb-cfg-count { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.kbb-cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-2); }
.kbb-cfg-opt { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--r-md, 8px); padding: 9px 12px; cursor: pointer; transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease; }
.kbb-cfg-opt:hover { border-color: var(--border-strong, #cbd5e1); box-shadow: 0 1px 3px rgba(15, 23, 42, .07); }
.kbb-cfg-opt input { margin-top: 2px; flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--green-600, #16a34a); }
.kbb-cfg-opt.is-on { border-color: var(--green-500, #16a34a); background: var(--green-50, #f0fdf4); }
.kbb-cfg-opt.is-disabled { opacity: .55; cursor: not-allowed; }
.kbb-cfg-opt-body { min-width: 0; flex: 1; }
.kbb-cfg-opt-label { display: block; font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
.kbb-cfg-opt-meta { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-muted); }
.kbb-cfg-opt-code { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; background: var(--slate-100, #f1f5f9); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; letter-spacing: .03em; }
.kbb-cfg-opt.is-on .kbb-cfg-opt-code { background: var(--surface, #fff); }
.kbb-cfg-foot { border-top: 1px solid var(--border); padding: var(--sp-3) var(--sp-5); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; background: var(--surface, #fff); }
.kbb-cfg-err { flex: 1 1 100%; color: var(--danger-600, #b42318); font-size: var(--fs-sm); }
.kbb-cfg-err[hidden] { display: none; }
.kbb-cfg-mileage { display: flex; flex-direction: column; gap: 3px; }
.kbb-cfg-mileage[hidden] { display: none; }
.kbb-cfg-mileage .input { width: 150px; text-align: right; }
.kbb-cfg-foot-actions { display: flex; gap: var(--sp-2); margin-left: auto; }
/* NEW chip on history rows (used pulls stay unmarked — they're the norm). */
.kbb-h-type { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--green-700, #15803d); background: var(--green-50, #f0fdf4); border: 1px solid var(--green-500, #16a34a); border-radius: 999px; padding: 0 6px; vertical-align: 1px; }
/* Bridge status dot next to the KBB heading. */
.kbb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--slate-300, #cbd5e1); margin-left: 4px; vertical-align: middle; }
.kbb-dot-ok { background: var(--green-500, #16a34a); }
.kbb-dot-warn { background: #d97706; }
.kbb-dot-bad, .kbb-dot-off { background: var(--danger-500, #b42318); }
/* Long decode content has 400px to live in: single column, scroll inside. */
.wsx-rail .feature-list { columns: 1; }
.wsx-rail .spec-cols { grid-template-columns: 1fr; }
.wsx-rail .decode-scroll { overflow-x: auto; }
.wsx-rail .wish-item { flex-wrap: wrap; }
.dv-run { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.dv-run .input { flex: 1 1 130px; min-width: 110px; height: 34px; }
.dv-run .btn { flex: 0 0 auto; }
.dv-gate { color: var(--text-muted); background: var(--slate-50); border: 1px dashed var(--border-strong); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); margin: 0; }
/* Factory-package checklist (tick what's actually installed, from the decode). */
.cfg-packages { margin-top: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.cfg-packages-h { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); }
.cfg-group { margin-bottom: var(--sp-3); }
.cfg-group-h { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px; }
.cfg-opt { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); padding: 2px 0; cursor: pointer; }
.cfg-opt input { margin-top: 3px; flex: 0 0 auto; }
.cfg-opt-name { min-width: 0; }
.cfg-summary { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.cfg-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cfg-chips li { font-size: var(--fs-xs); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px var(--sp-3); }
.pkg-installed { background: var(--green-50); border-radius: var(--r-sm); padding: var(--sp-2); border-left: 3px solid var(--green-500, #16a34a); }
.dv-valnote { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 var(--sp-3); color: var(--green-700); }
.dv-valnote .ico { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }
/* Truthful framing on the full decode: this is the trim's standard config, not the as-built car. */
.decode-notice, .decode-confirmed { display: flex; gap: 8px; align-items: flex-start; border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs-sm); line-height: 1.5; }
.decode-notice { background: var(--info-50, #eef4fb); border: 1px solid color-mix(in srgb, var(--info-500) 25%, var(--border)); color: var(--text); }
.decode-confirmed { background: var(--green-50); border: 1px solid color-mix(in srgb, var(--green-500, #16a34a) 30%, var(--border)); color: var(--text); }
.decode-notice .ico, .decode-confirmed .ico { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.decode-confirmed .ico { color: var(--green-600); }

/* ---- Full Advanced VIN decode (full-width specifications card) ------------- */
.decode-title { font-size: var(--fs-lg); font-weight: 700; }
.decode-title .decode-trim { font-weight: 500; color: var(--text-muted); font-size: var(--fs-base); margin-left: var(--sp-2); }
.decode-summary { color: var(--text-soft); margin: var(--sp-2) 0 var(--sp-4); max-width: 90ch; line-height: 1.55; }
.spec-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4) var(--sp-5); align-items: start; }
.spec-sec { min-width: 0; }
.spec-sec > h4 { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--sp-2); }
.spec-sec-wide { grid-column: 1 / -1; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.spec-dl { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 3px var(--sp-3); font-size: var(--fs-sm); }
.spec-dl dt { color: var(--text-muted); }
.spec-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.decode-sub { font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); margin-bottom: var(--sp-2); }

.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.swatch { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.swatch-chip { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-strong); flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

.stars { color: #e8a13a; letter-spacing: 1px; }
.iihs { font-weight: 600; }
.iihs-good { color: var(--green-600); } .iihs-acceptable { color: #4a8f3c; }
.iihs-marginal { color: #c98a1a; } .iihs-poor { color: var(--danger-700); }

.decode-warn { color: var(--danger-700) !important; display: flex; align-items: center; gap: 6px; }
.decode-warn .ico { width: 15px; height: 15px; }
.recall-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.recall { border: 1px solid color-mix(in srgb, var(--danger-500) 30%, var(--border)); background: var(--danger-50); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); }
.recall > summary { cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.recall p { font-size: var(--fs-sm); margin: var(--sp-2) 0 0; line-height: 1.5; }
.recall-k { font-weight: 600; color: var(--text); }

.feature-list { columns: 2; column-gap: var(--sp-5); font-size: var(--fs-sm); padding-left: 1.1em; margin: 0; }
.feature-list li { margin-bottom: 2px; break-inside: avoid; }
.pkg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.pkg { padding: var(--sp-2) 0; border-top: 1px dashed var(--border); }
.pkg > div:first-child { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }

.decode-collapse { border-top: 1px solid var(--border); margin-top: var(--sp-4); padding-top: var(--sp-3); }
.decode-collapse > summary { cursor: pointer; list-style: none; }
.decode-collapse > summary::-webkit-details-marker { display: none; }
.decode-collapse > summary h4 { display: inline; font-size: var(--fs-sm); font-weight: 700; color: var(--accent); text-transform: none; letter-spacing: 0; }
.decode-collapse > summary::before { content: "▸ "; color: var(--accent); }
.decode-collapse[open] > summary::before { content: "▾ "; }
.decode-scroll { max-height: 420px; overflow: auto; margin-top: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); }
.decode-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.decode-table th { position: sticky; top: 0; background: var(--slate-50); text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.decode-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.decode-table tr:last-child td { border-bottom: none; }

/* ---- Apply-link customization builder ------------------------------------- */
.cz-step-label {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); padding-top: var(--sp-2);
}
.wrap-grid > .cz-step-label:first-child { padding-top: 0; }
.cz-sec-head { gap: var(--sp-3); flex-wrap: wrap; }
.cz-title-input { flex: 1 1 220px; min-width: 0; height: 36px; font-weight: 600; }
.cz-step-select { height: 36px; width: auto; }
.cz-add-field { border-top: 1px solid var(--border); }
.cz-field-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto auto; gap: var(--sp-3); align-items: end; }
.cz-field-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
@media (max-width: 900px) { .cz-field-row, .cz-field-row2 { grid-template-columns: 1fr; } }
.cz-disclosure { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.cz-disclosure:first-child { padding-top: 0; }
.cz-disclosure:last-child { border-bottom: none; padding-bottom: 0; }
.cz-dis-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.cz-dis-head .input { flex: 1 1 240px; min-width: 0; height: 36px; font-weight: 600; }
.cz-dis-text { font-size: var(--fs-sm); line-height: 1.55; }
.cz-dis-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-2); }

/* Audit Log ledger: chain-of-custody table at the bottom of the profile. */
.audit-action { white-space: nowrap; }
.audit-details { color: var(--text-soft); font-size: var(--fs-sm); }
.audit-details .mono { font-size: var(--fs-xs); }
table.ledger td.audit-ip { font-family: var(--font-mono); font-size: var(--fs-xs); white-space: nowrap; }

/* Photo carousel lightbox (photos only) */
.lb[hidden] { display: none; }
.lb-photos { position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center; }
.lb-photos .lb-backdrop { position: fixed; inset: 0; background: rgba(8,10,14,.94); }
.cx-stage { position: relative; z-index: 1; width: min(1180px, 94vw); height: min(80vh, 760px); display: flex; align-items: center; justify-content: center; }
.cx-slide { display: none; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cx-slide.active { display: block; }
.cx-slide.cx-broken { display: none !important; }
.cx-nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: var(--r-full); border: 0;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .12s ease;
}
.cx-nav:hover { background: rgba(255,255,255,.30); }
.cx-nav .ico { width: 24px; height: 24px; }
.cx-prev { left: max(16px, 3vw); }
.cx-next { right: max(16px, 3vw); }
.cx-next .ico { transform: scaleX(-1); }
.cx-close {
  position: fixed; top: max(16px, 3vh); right: max(16px, 3vw); z-index: 2;
  width: 42px; height: 42px; border-radius: var(--r-full); border: 0;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cx-close:hover { background: rgba(255,255,255,.30); }
.cx-close .ico { width: 20px; height: 20px; }
.cx-counter {
  position: fixed; bottom: max(16px, 4vh); left: 50%; transform: translateX(-50%); z-index: 2;
  color: #fff; background: rgba(0,0,0,.55); padding: 6px 14px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
body.lb-open { overflow: hidden; }
@media (max-width: 560px) {
  .wish-item { flex-wrap: wrap; }
  .wish-photo { width: 100%; height: 180px; }
  .cx-nav { width: 44px; height: 44px; }
}


/* ============================================================================
   WORKSHEETS — desking calculator (/portal/worksheets)
   Compact density modeled on the production deal tracker: 13px base, 32px
   inputs, pill-row collapsibles, single-column summary with stacked chips.
   ========================================================================== */

/* List page: new-worksheet starter grid */
.ws-new-grid { display: grid; grid-template-columns: 200px 1fr 120px 1fr; gap: var(--sp-3) var(--sp-4); }
@media (max-width: 900px) { .ws-new-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ws-new-grid { grid-template-columns: 1fr; } }

/* Compact control density inside the editor */
#wsxRoot { font-size: var(--fs-sm); }
#wsxRoot .field { margin: 0; }
#wsxRoot .field label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; display: block; }
#wsxRoot .input, #wsxRoot .select { height: 32px; font-size: var(--fs-sm); padding: 0 var(--sp-2); }
/* [SWX-INPUTGROUP-DENSE 2026-07-15] The welded look-up button (VIN / stock)
   must match the DENSE input height above, not the global one. The base rule
   `.input-group .input-group-btn` is 40x40 because the global `.input` is
   40px tall; inside #wsxRoot the input is 32px, so without this the button
   stood 8px taller than the field it is welded to, and because .veh-idgrid
   aligns its cells to `end`, that extra 8px also pushed the neighbouring
   Mileage field out of line with VIN and Stock #. Keep this in step with the
   #wsxRoot .input height above: change one, change both. */
#wsxRoot .input-group .input-group-btn { width: 32px; height: 32px; }
#wsxRoot .card-body { padding: var(--sp-4); }
/* Calculator form runs denser than the rest of the editor. */
#wsxRoot .wsx-form .input, #wsxRoot .wsx-form .select { height: 28px; }
#wsxRoot .wsx-form .field label { font-size: 10px; margin-bottom: 2px; }
#wsxRoot .wsx-form .wsx-sec { padding-top: var(--sp-2); }

/* VIN + book-out bits (live in the vehicle rail snapshot card) */
.wsx-vin-row { display: flex; gap: var(--sp-2); align-items: center; }
.wsx-vin-row .input { flex: 1; }
.wsx-bookout { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap; }
.wsx-bookout-values { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); background: var(--slate-25); border: 1px solid var(--border); border-radius: var(--r-md); flex: 1 1 100%; }
.wsx-bv { display: flex; flex-direction: column; gap: 0; }
.wsx-bv-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.wsx-savestate { min-width: 100px; text-align: right; }

/* 3-zone editor layout: deal math | sticky live summary | vehicle rail.
   Managers desk deals here all day: the payment never leaves the viewport
   and the vehicle sits beside the numbers instead of a full page below. */
#wsxRoot.wsx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px 400px; gap: var(--sp-4); align-items: start; }
.wsx-deal { min-width: 0; }
/* The summary column flows with the page: its cards (deal summary + lender
   snapshot) stack and grow to their full height with NO inner scroll region,
   so the only scrollbar is the page's. Sticky is intentionally dropped — a
   pinned column would clip once the stacked cards exceed the viewport. */
.wsx-summary-zone { position: static; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.wsx-rail { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 1500px) {
  /* Vehicle rail drops below the deal area; summary stays beside the form. */
  #wsxRoot.wsx-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .wsx-rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
}
@media (max-width: 1100px) {
  #wsxRoot.wsx-layout { grid-template-columns: 1fr; }
  .wsx-summary-zone { position: static; max-height: none; overflow: visible; }
  .wsx-rail { grid-template-columns: 1fr; }
}
.wsx-form .card-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); align-items: start; }
@media (max-width: 700px) { .wsx-form .card-body { grid-template-columns: 1fr; } }

/* Section titles: small caps + hairline, tight */
.wsx-sec { grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #e2e8f0; padding: var(--sp-3) 0 4px; }
.wsx-sec:first-child { padding-top: 0; }
.wsx-checkrow { align-self: end; padding: 7px 0; font-size: var(--fs-sm); }

/* Collapsible pill rows (fee groups, trade-in, desk extras) */
.wsx-rows { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); transition: border-color .12s ease; }
.wsx-rows[open] { border-radius: var(--r-lg); background: var(--slate-25); }
.wsx-rows > summary { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; padding: 7px var(--sp-4); font-weight: 600; font-size: var(--fs-sm); list-style: none; }
.wsx-rows > summary::-webkit-details-marker { display: none; }
.wsx-rows > summary:hover { color: var(--green-700); }
.wsx-rows > summary > span:nth-child(2) { flex: 1; }
.wsx-rows-ic { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.wsx-rows-addOns .wsx-rows-ic { background: var(--green-500); }
.wsx-rows-disc .wsx-rows-ic { background: var(--danger-500); }
.wsx-rows-other .wsx-rows-ic { background: var(--info-500); }
.wsx-rows-dmv .wsx-rows-ic { background: var(--warn-500); }
.wsx-trade .wsx-rows-ic { background: var(--violet-500); }
.wsx-fold .wsx-rows-ic { background: var(--slate-400); }
.wsx-rows-caret { flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); margin: -3px 4px 0 0; transition: transform .12s ease; }
.wsx-rows[open] > summary .wsx-rows-caret { transform: rotate(225deg); margin-top: 3px; }
.wsx-rows-badge { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); background: var(--slate-50); border: 1px solid var(--border); border-radius: var(--r-full); padding: 1px 9px; }
.wsx-rows[data-has-value="1"] .wsx-rows-badge { color: var(--green-700); background: var(--green-50); border-color: var(--green-200); }
.wsx-rows[data-has-value="1"] .wsx-rows-badge.is-disc { color: var(--danger-700); background: var(--danger-50); border-color: #f3c7c7; }
.wsx-rows-body { padding: 0 var(--sp-4); }
.wsx-rows > button, .wsx-rows > .btn { margin: var(--sp-1) var(--sp-4) var(--sp-3); height: 26px; }
.wsx-row { display: flex; gap: var(--sp-2); align-items: center; padding: 3px 0; }
.wsx-row-name { flex: 1.6; }
.wsx-row-amount { flex: 1; max-width: 120px; text-align: right; }
.wsx-row-flag { display: inline-flex; gap: 3px; align-items: center; font-size: var(--fs-xs); color: var(--text-soft); white-space: nowrap; }
.wsx-row-x { border: none; background: none; color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 1px 5px; border-radius: var(--r-sm); line-height: 1; }
.wsx-row-x:hover { color: var(--danger-500); background: var(--danger-50); }

/* Trade-in block + folded desk extras */
.wsx-trade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
@media (max-width: 900px) { .wsx-trade-grid { grid-template-columns: 1fr 1fr; } }
.wsx-trade-two { border-top: 1px dashed var(--border-strong); margin-top: var(--sp-1); }
.wsx-trade-two-head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-4) 0; }
.wsx-sec-mini { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.wsx-fold-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
@media (max-width: 700px) { .wsx-fold-body { grid-template-columns: 1fr; } }

/* Live summary card: single tight column, like the tracker */
.wsx-summary { overflow: hidden; }
.wsx-summary-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-weight: 700; font-size: var(--fs-base); background: var(--slate-25); border-bottom: 1px solid var(--border); }
.wsx-summary-head::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--green-500); }
.wsx-summary-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.wsx-sgrid { display: block; }
.wsx-ssec { margin-bottom: var(--sp-3); }
.wsx-ssec-title { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #64748b; padding-bottom: 2px; margin-bottom: 3px; }
.wsx-srow { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); padding: 1.5px 0; color: var(--text-soft); }
.wsx-srow > span:last-child { color: var(--text); white-space: nowrap; font-weight: 600; }
.wsx-srow.sub { font-weight: 700; border-top: 1px solid var(--border); margin-top: 2px; padding-top: 4px; }
.wsx-srow.sub > span:first-child { color: var(--text); }
.wsx-srow.neg > span:last-child { color: var(--danger-500); }
.wsx-chips { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.wsx-chip { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); }
.wsx-chip-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.wsx-chip-value { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.wsx-chip-primary { background: var(--green-500); border-color: var(--green-600); color: #fff; }
.wsx-chip-secondary { background: var(--slate-900); border-color: var(--slate-900); color: #fff; }
.wsx-chip-due { background: var(--info-50); border-color: #c7dbf7; color: var(--info-700); }

/* Collapsible bays (multi-pencil, goal-seek) */
.wsx-bay { margin-top: var(--sp-4); overflow: hidden; }
.wsx-bay-head { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; list-style: none; padding: var(--sp-3) var(--sp-4); background: var(--slate-25); border-bottom: 1px solid transparent; }
.wsx-bay[open] > .wsx-bay-head { border-bottom-color: var(--border); }
.wsx-bay-head::-webkit-details-marker { display: none; }
.wsx-bay-title { font-weight: 700; font-size: var(--fs-base); }
.wsx-bay-sub { flex: 1; font-size: var(--fs-xs); color: var(--text-muted); text-align: right; margin-right: var(--sp-2); }
.wsx-bay-body { padding: var(--sp-4); }

/* Option groups (pencil config) */
.wsx-pgroups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
@media (max-width: 700px) { .wsx-pgroups { grid-template-columns: 1fr; } }
.wsx-group { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3) var(--sp-3); margin: 0 0 var(--sp-3); min-width: 0; }
.wsx-pgroups .wsx-group { margin: 0; }
.wsx-group legend, .wsx-group > summary { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); padding: 0 var(--sp-1); }
.wsx-group > summary { cursor: pointer; list-style: none; padding: var(--sp-1) 0; }
.wsx-group > summary::-webkit-details-marker { display: none; }
.wsx-group > summary::before { content: '\25B8'; margin-right: 5px; color: var(--text-muted); display: inline-block; transition: transform .12s ease; }
.wsx-group[open] > summary::before { transform: rotate(90deg); }
.wsx-group-inputs { display: flex; gap: var(--sp-2); flex: 1; min-width: 0; }
.wsx-group-inputs .input { flex: 1; min-width: 0; text-align: right; }
.wsx-group-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.wsx-group-k { flex: none; width: 84px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); }
.wsx-hint { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--sp-2) 0 0; }

/* Per-cell payment range table */
.wsx-rangetable { width: 100%; border-collapse: collapse; margin-top: var(--sp-2); }
.wsx-rangetable th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 3px 4px; text-align: center; background: var(--slate-25); border: 1px solid var(--border); }
.wsx-rangetable tbody th { text-align: left; white-space: nowrap; }
.wsx-rangetable td { border: 1px solid var(--border); padding: 2px; }
.wsx-rangetable td input { width: 100%; border: none; background: transparent; font-size: var(--fs-xs); text-align: center; padding: 4px 2px; }
.wsx-rangetable td input:focus { outline: 2px solid var(--ring); border-radius: 3px; background: var(--surface); }

/* Payment grid */
.wsx-pgrid { width: 100%; border-collapse: separate; border-spacing: 5px; margin-top: var(--sp-1); }
.wsx-pgrid thead th { font-size: var(--fs-xs); color: var(--text-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: center; padding-bottom: 1px; }
.wsx-pgrid-rowhead { font-size: var(--fs-xs); color: var(--text-soft); font-weight: 600; text-align: right; padding-right: var(--sp-2); max-width: 150px; }
.wsx-pgrid-term { display: block; white-space: nowrap; }
.wsx-pgrid-lender { display: block; color: var(--text-muted); font-weight: 500; }
.wsx-pcell { text-align: center; }
.wsx-pcell-btn { width: 100%; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: var(--sp-2); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.wsx-pcell-btn:hover { border-color: var(--green-400); box-shadow: var(--shadow-sm); }
.wsx-pcell-btn:disabled { cursor: default; }
.wsx-pcell-pmt { display: block; font-weight: 700; font-size: var(--fs-md); }
.wsx-pcell-sub { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.wsx-pcell.is-best .wsx-pcell-btn { border-color: var(--warn-500); box-shadow: 0 0 0 1px var(--warn-500); }
.wsx-pcell.is-selected .wsx-pcell-btn { border-color: var(--green-500); background: var(--green-50); box-shadow: 0 0 0 1px var(--green-500); }

/* Legend under the grid */
.wsx-legend { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-soft); flex-wrap: wrap; }
.wsx-leg { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--border); }
.wsx-leg.is-sel { background: var(--green-500); border-color: var(--green-600); }
.wsx-leg.is-best { background: var(--surface); border-color: var(--warn-500); box-shadow: inset 0 0 0 1px var(--warn-500); }
.wsx-legend .wsx-leg { margin-left: var(--sp-2); }
.wsx-legend .wsx-leg:first-child { margin-left: 0; }
.wsx-legend-note { margin-left: auto; color: var(--text-muted); }

/* Goal-seek desking */
.wsx-gs-toolbar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.wsx-gs-opt { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-right: auto; }
.wsx-gs-opt .select { width: auto; min-width: 210px; }
.wsx-gs-callout { background: var(--warn-50); border: 1px solid #efd9ae; border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--slate-700); margin-bottom: var(--sp-3); }
.wsx-gs-target { display: flex; align-items: center; gap: var(--sp-3); background: var(--slate-25); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
.wsx-gs-target-label { font-size: var(--fs-sm); font-weight: 700; margin-right: auto; }
.wsx-gs-target-in { display: inline-flex; align-items: center; gap: var(--sp-1); }
.wsx-gs-sym { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.wsx-gs-target .input { width: 110px; text-align: right; }
.wsx-gs-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; }
@media (max-width: 800px) { .wsx-gs-cons { grid-template-columns: 1fr; } }
.wsx-gs-con { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.wsx-gs-con-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.wsx-gs-con-head .checkrow { font-size: var(--fs-sm); font-weight: 700; flex: none; }
.wsx-gs-con-inputs { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex-wrap: wrap; }
.wsx-gs-con-inputs .input { width: 92px; height: 30px; text-align: right; }
.wsx-gs-con-inputs .select { height: 30px; width: auto; }
.wsx-gs-to { font-size: var(--fs-xs); color: var(--text-muted); }
.wsx-gs-resrange { display: inline-flex; align-items: center; gap: var(--sp-2); }
.wsx-gs-status { font-size: var(--fs-sm); color: var(--text-soft); margin: var(--sp-2) 0 var(--sp-2); min-height: 1.2em; }
.wsx-gs-warn { color: var(--warn-700); }
.wsx-gs-table th, .wsx-gs-table td { white-space: nowrap; font-size: var(--fs-sm); padding-top: 5px; padding-bottom: 5px; }
.wsx-gs-empty { text-align: center; color: var(--text-muted); padding: var(--sp-4) 0 !important; }
.wsx-gs-miss td { color: var(--text-muted); }

/* Attached worksheets on the application page */
.aws-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.aws-item:last-child { border-bottom: none; }
.aws-item.is-detached { opacity: .55; }
.aws-main { flex: 1; min-width: 220px; }
.aws-name { font-weight: 600; }
.aws-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.aws-nums { display: flex; gap: var(--sp-4); font-size: var(--fs-sm); flex-wrap: wrap; }
.aws-num { display: flex; flex-direction: column; }
.aws-num .k { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.aws-num .v { font-family: var(--font-mono); font-weight: 600; }

/* Deal structure panel on the lender share */
.lshare-ws-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.lshare-ws-table td { padding: 3px 0; }
.lshare-ws-table td:last-child { text-align: right; font-family: var(--font-mono); }
.lshare-ws-total td { border-top: 1px solid var(--border); padding-top: 6px; font-weight: 700; }

/* ---- Worksheets: compact sizing pass ------------------------------------
   Fields are sized to their content (a term is 3 digits, not half a page),
   money and percent live inside the value ("$1,234.56", "8.88%"); the
   3-zone grid soaks up wide monitors, so no width cap is needed. */
#wsxRoot input[type="checkbox"] { accent-color: var(--green-500); width: 15px; height: 15px; }

/* Content-sized inputs, right-aligned numerics */
#wsxRoot .input.wsx-money { max-width: 170px; text-align: right; }
#wsxRoot .input.wsx-pct { max-width: 130px; text-align: right; }
#wsxRoot .input.wsx-mf { max-width: 140px; text-align: right; }
#wsxRoot .input.wsx-int { max-width: 120px; text-align: right; }
#wsxRoot .input.wsx-date { max-width: 175px; }
#wsxRoot .wsx-form .select { width: auto; min-width: 185px; max-width: 280px; }
#wsxRoot .wsx-form .input:not(.wsx-money):not(.wsx-pct):not(.wsx-mf):not(.wsx-int) { max-width: 300px; }

/* Fee rows: Description | Amount | Tax [| Cap] | remove, like the tracker */
.wsx-rows-body { padding-bottom: var(--sp-1); }
.wsx-row-head { padding: 2px 0 1px; }
.wsx-row-head span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.wsx-row-head .wsx-row-amount { text-align: right; }
.wsx-row-head .wsx-row-flag { justify-content: center; }
.wsx-row-name { flex: 1; min-width: 0; max-width: none !important; }
.wsx-row-amount { flex: none; width: 118px; max-width: 118px !important; }
.wsx-row-flag { flex: none; width: 30px; display: inline-flex; justify-content: center; }
.wsx-row-x, .wsx-row-x-gap { flex: none; width: 26px; }
.wsx-row-x { height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--danger-500); border: none; border-radius: var(--r-sm); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; line-height: 1; }
.wsx-row-x:hover { background: var(--danger-700); color: #fff; }

/* Full-width green add button, like "+ Add Product" */
.wsx-addrow { display: block; width: calc(100% - var(--sp-4) * 2); margin: var(--sp-2) var(--sp-4) var(--sp-3); height: 32px; background: var(--green-500); border: none; border-radius: var(--r-md); color: #fff; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; transition: background .12s ease; }
.wsx-addrow:hover { background: var(--green-600); }

/* Trade-in appraisal block: VIN + mileage, Y/M/M/T, values, payoff */
.wsx-trade-grid { grid-template-columns: repeat(4, 1fr); }
.wsx-trade-grid .sp2 { grid-column: span 2; }
.wsx-trade-grid .input { max-width: none; }
.wsx-trade-grid .input.wsx-money { max-width: none; text-align: right; }
.wsx-trade-grid .input.wsx-int { max-width: none; text-align: right; }
@media (max-width: 700px) { .wsx-trade-grid { grid-template-columns: 1fr 1fr; } .wsx-trade-grid .sp2 { grid-column: span 2; } }

/* Pencil option groups: compact inputs, left-packed */
.wsx-group-inputs { justify-content: flex-start; }
.wsx-group-inputs .input { flex: 0 1 150px; }
.wsx-group-row .wsx-group-inputs .input:not(.wsx-pct):not(.wsx-mf) { flex: 0 1 220px; }

/* Goal-seek: keep target inputs tidy against the caps above */
.wsx-gs-target .input { width: 110px; max-width: 110px !important; }
.wsx-gs-con-inputs .input { width: 92px; max-width: 92px !important; }

/* ============================================================================
   Reports (dashboard analytics card + lightbox)
   ============================================================================ */
.report-card { margin-bottom: var(--sp-5); }
.report-card .card-head h3 { display: inline-flex; align-items: center; gap: 6px; }
.report-card .card-head h3 svg { width: 18px; height: 18px; color: var(--accent); }

/* Generate controls */
.report-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.report-field { display: flex; flex-direction: column; gap: 4px; }
.report-field > span { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.report-field-type { flex: 1 1 280px; min-width: 220px; }
.report-field-type .select { width: 100%; }
.report-field .input[type=date] { min-width: 150px; }
.report-run { white-space: nowrap; }
.report-run svg { width: 15px; height: 15px; }

/* Log table */
.report-empty { display: flex; align-items: center; gap: 10px; padding: 22px 16px; color: var(--text-muted); background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-md); }
.report-empty svg { width: 20px; height: 20px; flex: none; color: var(--border-strong); }
.report-empty p { margin: 0; font-size: var(--fs-sm); }
.report-log-error { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px; font-size: var(--fs-sm); color: var(--danger-700); background: var(--danger-50); border: 1px solid color-mix(in srgb, var(--danger-500) 30%, transparent); border-radius: var(--r-sm); }
.report-log-error svg { width: 16px; height: 16px; flex: none; }
.report-table-wrap { overflow-x: auto; }
.report-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.report-table th { text-align: left; padding: 6px 10px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.report-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.report-table .ta-r { text-align: right; }
.report-table tbody tr:last-child td { border-bottom: none; }
.report-row { cursor: pointer; transition: background .12s ease; }
.report-row:hover, .report-row:focus-visible { background: var(--accent-quiet); outline: none; }
.report-row:focus-visible { box-shadow: inset 2px 0 0 var(--accent); }
.report-title .rt-name { display: block; font-weight: 600; color: var(--text); }
.report-title .rt-head { display: block; margin-top: 1px; font-size: var(--fs-xs); color: var(--text-muted); }
.report-pdf { white-space: nowrap; }
.report-pdf svg { width: 13px; height: 13px; }

/* Lightbox */
.report-lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 4vh 16px; }
.report-lightbox[hidden] { display: none; }
.rl-backdrop { position: absolute; inset: 0; background: rgba(21,28,36,.55); backdrop-filter: blur(2px); }
.rl-dialog { position: relative; width: 100%; max-width: 820px; max-height: 92vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.rl-close { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-soft); cursor: pointer; }
.rl-close:hover { background: var(--slate-100); color: var(--text); }
.rl-close svg { width: 16px; height: 16px; }
.rl-scroll { overflow-y: auto; padding: 22px 26px 26px; }
.rl-loading { padding: 40px 0; text-align: center; color: var(--text-muted); }
.rl-toolbar { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.rl-toolbar .btn svg { width: 14px; height: 14px; }

/* ---- Report body (screen markup from ReportRender 'screen' mode) ----------
   Data-driven bits (bar widths, fill colors, KPI value color) arrive inline;
   everything structural/typographic is styled here so the lightbox looks premium
   while the numbers stay identical to the PDF. */
.rpt { color: var(--text); font-size: var(--fs-sm); }
.rpt-head { margin-bottom: 20px; }
.rpt-title { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.rpt-sub { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.rpt-section { margin: 22px 0 0; }
.rpt-section:first-of-type { margin-top: 4px; }
.rpt-cap { margin: 0 0 12px; font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* KPI grid */
.rpt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rpt-kpi { position: relative; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.rpt-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kpi-accent, var(--border-strong)); }
.rpt-kpi-label { font-size: 0.625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.rpt-kpi-val { margin-top: 2px; font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--text); letter-spacing: -0.02em; }
.rpt-kpi-sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); }

/* Bars & funnel */
.rpt-bars, .rpt-funnel { display: flex; flex-direction: column; gap: 9px; }
.rpt-bar { display: grid; grid-template-columns: minmax(96px, 30%) 1fr minmax(52px, auto); align-items: center; gap: 12px; }
.rpt-bar-label { font-size: var(--fs-xs); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-bar-track { position: relative; height: 14px; background: var(--track, #eef2f6); border-radius: var(--r-full); overflow: hidden; }
.rpt-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-full); min-width: 2px; }
.rpt-bar-val { font-size: var(--fs-xs); font-weight: 700; color: var(--text); text-align: right; white-space: nowrap; }
.rpt-fn .rpt-bar-track { background: var(--slate-100); }
.rpt-fn .rpt-bar-val { min-width: 92px; }
.rpt-fn-pct { font-size: 0.625rem; font-weight: 600; color: var(--text-muted); }
.rpt-drop { font-size: 0.625rem; font-weight: 700; color: var(--danger-500); }

/* Breakdown stack + legend */
.rpt-stack { display: flex; height: 12px; border-radius: var(--r-full); overflow: hidden; background: var(--slate-100); margin-bottom: 12px; }
.rpt-seg { height: 100%; min-width: 2px; }
.rpt-seg + .rpt-seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.7); }
.rpt-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 18px; }
.rpt-lg { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 8px; }
.rpt-dot { width: 10px; height: 10px; border-radius: 3px; }
.rpt-lg-label { font-size: var(--fs-xs); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-lg-val { font-size: var(--fs-xs); font-weight: 700; color: var(--text); }
.rpt-lg-pct { font-size: var(--fs-xs); color: var(--text-muted); min-width: 34px; text-align: right; }

/* Data table */
.rpt-table-wrap { overflow-x: auto; }
.rpt-data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rpt-data th { padding: 7px 10px; font-size: 0.625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); border-bottom: 2px solid var(--accent); white-space: nowrap; }
.rpt-data td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-soft); white-space: nowrap; }
.rpt-data tbody tr:nth-child(even) td { background: var(--surface-2); }
.rpt-data .rpt-td-lead { font-weight: 600; color: var(--text); }
.rpt-data .ta-r { text-align: right; }
.rpt-data .ta-l { text-align: left; }
.rpt-data .ta-c { text-align: center; }

/* Explanatory note */
.rpt-note { margin: 10px 0 0; padding: 9px 12px; font-size: var(--fs-xs); font-style: italic; color: var(--text-muted); background: var(--surface-2); border-left: 3px solid var(--border-strong); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ---- Apply-links dropdown (dashboard header) ------------------------------ */
.applinks-menu { position: relative; display: inline-block; }
.applinks-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  width: min(440px, 92vw); max-height: 62vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 6px;
}
.applinks-pop[hidden] { display: none; }
.applinks-group { padding: 9px 10px 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.applinks-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.applinks-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: var(--r-md); }
.applinks-row:hover { background: var(--surface-2); }
.applinks-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.applinks-name .al-primary { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.applinks-name .al-url { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
.applinks-actions { display: flex; gap: 4px; flex: none; }
.applinks-actions .btn svg { width: 13px; height: 13px; }
.applinks-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px; text-align: center; color: var(--text-muted); }
.applinks-empty svg { width: 22px; height: 22px; color: var(--border-strong); }
.applinks-empty p { margin: 0; font-size: var(--fs-sm); }

/* ---- Dashboard "Recent applications" minimal table -------------------------
   Keep Application ID + Applicant left-aligned; Status + Received stay centered
   (the ledger-apps rule above centers the trailing columns). */
table.ledger-mini td:nth-child(1), table.ledger-mini th:nth-child(1),
table.ledger-mini td:nth-child(2), table.ledger-mini th:nth-child(2) {
  text-align: left;
}

/* ---- Reports log table: centered middle columns, even spacing ------------- */
.report-table { table-layout: fixed; }
.report-table .ta-c { text-align: center; }
.report-table th:nth-child(1), .report-table td:nth-child(1) { width: 28%; }
.report-table th:nth-child(2), .report-table td:nth-child(2) { width: 15%; }
.report-table th:nth-child(3), .report-table td:nth-child(3) { width: 11%; }
.report-table th:nth-child(4), .report-table td:nth-child(4) { width: 15%; }
.report-table th:nth-child(5), .report-table td:nth-child(5) { width: 17%; }
.report-table th:nth-child(6), .report-table td:nth-child(6) { width: 14%; }
.report-table .report-title { overflow: hidden; }
.report-table .rt-name, .report-table .rt-head { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Receiving applications (partner edit): lender integration selector ---- */
.pi-baseline {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--green-100, var(--border));
  background: var(--green-50); border-radius: var(--r-md);
}
.pi-baseline .badge { flex-shrink: 0; margin-top: 2px; }
.pi-configured { margin-top: var(--sp-3); border-top: 1px solid var(--border); }
.pi-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.pi-row-main { min-width: 0; flex: 1; }
.pi-row-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pi-section-title { margin: var(--sp-4) 0 0; font-size: 0.95rem; }
.pi-group-label {
  margin: var(--sp-4) 0 var(--sp-2); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft);
}
.pi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (max-width: 720px) { .pi-grid { grid-template-columns: 1fr; } }
.pi-card {
  display: flex; gap: var(--sp-2); align-items: flex-start; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); background: var(--surface); transition: border-color .12s, box-shadow .12s;
}
.pi-card:hover { border-color: var(--border-strong); }
.pi-card input[type="radio"] { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.pi-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.pi-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pi-card-title { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pi-card-desc { font-size: 12px; color: var(--text-soft); line-height: 1.45; }
.pi-card .badge { align-self: flex-start; }
.pi-fields {
  margin-top: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--accent);
  border-radius: var(--r-md); background: var(--surface);
}
.pi-fields-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }
.pi-test-ok { color: var(--green-700, #1f8f57); }
.pi-test-bad { color: var(--danger-700, #b42318); }

/* ---- Lender share: structured stipulations checklist ----
   Uses the dark glass tokens (like every other .lshare-* component), NOT the
   light-theme --surface/--border: the row text is the dark theme's near-white,
   so a light box would render it invisible. */
.lshare-stips { display: flex; flex-direction: column; gap: 6px; }
.lshare-stip { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--glass-border); border-radius: var(--r-md); background: var(--glass-surface); }
.lshare-stip-label { flex: 1; min-width: 0; font-size: 14px; color: var(--glass-text); }

/* ---- Partner integrations: decision API details ---- */
.pi-webhook { margin-top: var(--sp-2); font-size: 12px; color: var(--text-soft); width: 100%; }
.pi-webhook summary { cursor: pointer; font-weight: 600; }
.pi-webhook code { font-family: var(--mono, monospace); font-size: 11px; background: var(--slate-50);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; word-break: break-all; }
.pi-webhook-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: 4px; flex-wrap: wrap; }

/* ---- Application detail: Send to lender ledger ---- */
.share-empty {
  border: 2px dashed var(--border-strong, var(--border)); border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-4); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.share-empty p { margin: 0; max-width: 52ch; }
.share-ledger td { vertical-align: middle; }
.share-ledger .share-row td { white-space: nowrap; }
.share-ledger .share-row td:first-child { white-space: normal; min-width: 140px; }
/* The whole row expands the submission's details on click, not just the
   "Details" button - see [data-share-toggle] in app.js. */
.share-ledger .share-row { cursor: pointer; }
.share-ledger .share-row:hover { background: var(--slate-25); }
.share-ledger .share-row a, .share-ledger .share-row button,
.share-ledger .share-row form { cursor: auto; }
.share-detail > td { background: var(--slate-50); padding: var(--sp-4); white-space: normal; }
.share-detail .lender-card { margin: 0; }
[data-share-toggle].is-open { color: var(--accent); }

/* ---- In-app confirm / notice dialog (SWX.confirm, SWX.notice) ---- */
.swx-dialog .swx-dialog-box { max-width: 440px; }
.swx-dialog-body { padding: var(--sp-5); font-size: var(--fs-base); color: var(--text); line-height: 1.55; }
.swx-dialog-actions {
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  padding: 0 var(--sp-5) var(--sp-5);
}

/* ---- Duplicate-stock vehicle picker (worksheet inventory lookup) ---- */
.swx-dialog.wsx-picker .swx-dialog-box { max-width: 520px; }
.wsx-pick-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 60vh; overflow-y: auto; }
.wsx-pick-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  transition: border-color .12s, background .12s;
}
.wsx-pick-row:hover, .wsx-pick-row:focus-visible {
  border-color: var(--accent); background: var(--surface-2, var(--surface)); outline: none;
}
.wsx-pick-veh { font-weight: 600; }
.wsx-pick-meta, .wsx-pick-vin { display: block; }

/* Print-only elements (hidden on screen, shown on paper). */
.print-only { display: none; }

/* --------------------------------------------------------------------------
   Print, application detail refinements: the page prints as a clean
   chain-of-custody document covering everything the profile now carries -
   customer facts, worksheets, the full submissions ledger (expanded),
   stipulations, decisions, adverse action record, metadata, and audit log.
   -------------------------------------------------------------------------- */
@media print {
  .print-only { display: block !important; }

  /* Badges must stay legible in grayscale: keep a hairline border. */
  .badge { border: 1px solid rgba(0, 0, 0, .25) !important; }

  /* The submissions ledger prints with every row EXPANDED so the paper record
     is complete; the screen-only Details column disappears with .no-print. */
  #share, #metadata { break-inside: auto; page-break-inside: auto; }
  tr.share-detail[hidden] { display: table-row !important; }
  .share-ledger { font-size: 11.5px; }
  .share-ledger th { font-size: 10px; }
  .share-ledger .share-row td { white-space: normal; }
  .share-detail > td { background: #fff !important; padding: 8px 10px 14px; }
  .lender-card { border: 1px solid #d5d9e0; border-radius: 6px; padding: 12px 14px; }
  .share-detail .lender-card { break-inside: auto; }

  /* Empty state prints as a plain sentence, not a dashed call-to-action box. */
  .share-empty { border: none; padding: 0; text-align: left; align-items: flex-start; gap: 4px; font-size: 13px; }

  /* The audit / data ledgers stay readable on paper rather than shrinking. */
  .ledger { font-size: 11.5px; }
  .ledger th { font-size: 10px; }

  /* Document-name buttons (secure viewer triggers) read as plain labels. */
  .supp-doc-name, .swx-supp-open { color: #111 !important; }
  .supp-doc-name > span { white-space: normal; }

  /* Two facts per line keeps the customer card readable, with a bit more room
     between columns now that the page uses its full width. */
  .ov-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px 40px !important; }
}

/* ---------------------------------------------------------------- terms gate
   [TERMS-GATE 2026-07-24] /portal/terms. The acceptance wall every company user
   passes through once. Built from the existing tokens rather than one-off
   values so it reads as part of the console, not a bolted-on interstitial.

   .alert-warn fills a gap in the alert set: success / error / info existed, but
   the leads-may-be-paused line is a consequence, not an error and not a neutral
   note, and the warn tokens were already defined for badges and chips. */
.alert-warn { background: var(--warn-50); color: var(--warn-700); border-color: color-mix(in srgb, var(--warn-500) 25%, transparent); }

.tos-lead { font-size: var(--fs-base); margin: 0 0 var(--sp-2); }
.tos-note { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-4); }

/* The box is the record we would rely on in a dispute, so it gets a real
   target rather than a 16px square floating in text: the whole row is the
   label, it is comfortable on a phone, and it reads as clickable. */
.tos-check { align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border);
             border-radius: var(--r-md); background: var(--surface-2, transparent); cursor: pointer; }
.tos-check:hover { border-color: var(--accent); }
.tos-check input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; flex: none; cursor: pointer; }
.tos-check span { font-weight: 600; line-height: 1.4; }

@media (max-width: 640px) {
  /* On a phone the two actions stack, and Accept sits on top: it is the one
     the user came here to press, and thumb reach favours the lower half only
     when the choices are equal. Sign out is the escape hatch, not the default. */
  .tos-actions { flex-direction: column-reverse; align-items: stretch; }
  .tos-actions .btn { width: 100%; justify-content: center; }
}

/* The gate is a single decision on an otherwise empty page, so it is centred
   rather than parked in the top-left corner of a 1400px canvas with nothing
   beside or beneath it. min-height matches the shell's content box (viewport
   minus the topbar) minus the content padding, so the card sits optically
   centred on a laptop and simply flows normally once the content is taller
   than the screen. */
.tos-wrap { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center;
            min-height: calc(100vh - var(--topbar-h) - var(--sp-6) - var(--sp-10)); }
.tos-wrap .page-head { margin-bottom: var(--sp-4); }
.tos-wrap .card, .tos-wrap .form-actions { max-width: none; }

@media (max-width: 640px) {
  /* On a phone the card already fills the screen; forcing a min-height only
     pushes the Accept button below the fold. */
  .tos-wrap { min-height: 0; display: block; }
}

/* ============================================================================
   Directory hub and vendor page
   Added 2026-07-31. The Directory became browsable rather than scrollable: a
   category hub, a roster per category, and a page per vendor.
   ============================================================================ */

.dirhub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px; margin-bottom: 18px; }
.dirhub-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 14px 16px; }
.dirhub-stat-n { display: block; font-size: 22px; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums; line-height: 1.1; }
.dirhub-stat-l { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-muted); }

.dirhub-search { display: flex; gap: 8px; margin-bottom: 22px; }
.dirhub-search-field { position: relative; flex: 1; }
.dirhub-search-field .input { width: 100%; height: 42px; padding-left: 38px; font-size: var(--fs-md); }
.dirhub-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }

.dirhub-hits { display: flex; flex-direction: column; }
.dirhub-hit { display: flex; align-items: center; gap: 11px; padding: 10px 16px;
    border-bottom: 1px solid var(--border); text-decoration: none; }
.dirhub-hit:last-child { border-bottom: 0; }
.dirhub-hit:hover { background: var(--slate-25); }
.dirhub-hit-text { min-width: 0; }
.dirhub-hit-name { display: block; font-weight: 600; color: var(--text); }
.dirhub-hit-sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); }

.dirhub-group { margin-bottom: 26px; }
.dirhub-group-head { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted); margin: 0 0 10px; }
.dirhub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.dirhub-card { display: flex; flex-direction: column; gap: 6px; padding: 15px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.dirhub-card:hover { border-color: var(--primary-300, var(--info-700)); transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .07); }
.dirhub-card-ico { color: var(--info-700); }
.dirhub-card-name { font-weight: 650; color: var(--text); line-height: 1.3; }
.dirhub-card-tag { flex: 1; font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.5; }
.dirhub-card-foot { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.dirhub-card-n { font-size: var(--fs-sm); font-weight: 650; color: var(--text);
    font-variant-numeric: tabular-nums; }
.dirhub-card-go { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--info-700); }

.dirhub-note { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

/* Name in the roster is a link to the vendor's own page. */
.dir-namelink { text-decoration: none; }
.dir-namelink:hover { color: var(--info-700); text-decoration: underline; }

/* ---- one vendor ---------------------------------------------------------- */
.dirshow-title { display: flex; align-items: center; gap: 14px; }
.dirshow-avatar { width: 46px; height: 46px; font-size: 16px; flex: none; }
.dirshow-loc { margin-left: 8px; font-size: var(--fs-sm); color: var(--text-muted); }

.dirshow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .dirshow-grid { grid-template-columns: 1fr; } }

.dirshow-book { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.dirshow-book-main { min-width: 150px; }
.dirshow-book-n { display: block; font-size: 27px; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums; line-height: 1.1; }
.dirshow-book-l { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-muted); }
.dirshow-book-split { display: flex; gap: 22px; }
.dirshow-book-split > div { display: flex; flex-direction: column; gap: 2px; }

.dirshow-hint { margin: 14px 0 0; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.6; }

.dirshow-contact { display: flex; flex-direction: column; gap: 7px; }
.dirshow-contact a, .dirshow-noline { display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm); color: var(--text); width: max-content; max-width: 100%; word-break: break-word; }
.dirshow-contact a:hover { color: var(--info-700); }

.dirshow-source { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.6; }
.dirshow-verify { width: 100%; justify-content: center; margin-top: 12px; }

.dirshow-nearby { display: flex; flex-direction: column; }
.dirshow-nearby a { display: block; padding: 9px 16px; border-bottom: 1px solid var(--border);
    text-decoration: none; }
.dirshow-nearby a:last-child { border-bottom: 0; }
.dirshow-nearby a:hover { background: var(--slate-25); }
.dirshow-nearby-name { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.dirshow-nearby-sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); }

.dirshow-back { width: 100%; justify-content: center; }

/* ============================================================================
   Directory spacing and interaction pass, 2026-07-31
   Cards were stacking flush, the fact grids wrapped into each other, and the row
   click target was ambiguous. Everything below is rhythm and hit targets.
   ============================================================================ */

/* Stacked cards in the two column vendor layout need a real gap. `.card` carries
   no margin of its own by design, so the columns own the rhythm. */
.dirshow-grid > div,
.dirshow-grid > aside { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Facts on the vendor page. The roster's tighter grid is wrong here: values like
   "Retail financing · Lease · Lease buyout · Floor plan" wrap to two lines, and a
   10px row gap let the wrapped line crowd the label beneath it. */
.dirshow-grid .dir-detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--sp-5) var(--sp-6);
    padding: 0;
    align-items: start;
}
.dirshow-grid .dir-detail-grid .dir-dd { line-height: 1.5; }
.dirshow-grid .dir-notes { margin: var(--sp-5) 0 0; padding-top: var(--sp-4);
    border-top: 1px solid var(--border); }

/* Contact block: use the width instead of leaving half the card empty. */
.dirshow-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-3) var(--sp-5); }
.dirshow-contact a, .dirshow-noline { padding: 2px 0; }

/* The headline number and its supporting figures should not run together. */
.dirshow-book { gap: var(--sp-6) var(--sp-8); align-items: flex-start; }
.dirshow-book-split { gap: var(--sp-6); }
.dirshow-title { gap: var(--sp-4); }
.dirshow-title p { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: 4px; }
.dirshow-loc { margin-left: 0; display: inline-flex; align-items: center; gap: 4px; }

/* ---- roster ------------------------------------------------------------- */

/* The row is a link now, so say so, and give the caret a hit target a finger can
   actually find without also hitting the row. */
.dir-row { cursor: pointer; }
.dir-row:focus-visible { outline: 2px solid var(--info-700); outline-offset: -2px; }
.dir-caret { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--r-sm); }
.dir-caret:hover { background: var(--slate-100, var(--slate-25)); }
.dir-caret:focus-visible { outline: 2px solid var(--info-700); outline-offset: 1px; }

/* Breathing room in the rows themselves. A directory is read by scanning, and
   scanning needs rhythm more than it needs density. */
table.ledger.dir-table tbody td { padding-top: 11px; padding-bottom: 11px; }

/* The expanded summary should read as belonging to the row above it rather than
   as a new row of the table. */
.dir-detail > td { border-left: 3px solid var(--info-700); }
.dir-detail-grid { gap: var(--sp-4) var(--sp-6); padding: var(--sp-4) var(--sp-5) var(--sp-2) 30px; }
.dir-notes { margin: 0 var(--sp-5) var(--sp-4) 30px; }

/* ---- hub ---------------------------------------------------------------- */

/* Cards were only as tall as their text, so a two line title in one card and a
   one line title in its neighbour left the footers on different baselines. */
.dirhub-cards { gap: var(--sp-4); }
.dirhub-card { min-height: 148px; padding: var(--sp-4) var(--sp-5); gap: var(--sp-2); }
.dirhub-card-name { min-height: 2.6em; display: flex; align-items: center; }
.dirhub-card-foot { margin-top: auto; padding-top: var(--sp-3); }
.dirhub-group { margin-bottom: var(--sp-6); }
.dirhub-group-head { margin-bottom: var(--sp-3); }
.dirhub-stats { gap: var(--sp-4); margin-bottom: var(--sp-5); }
.dirhub-stat { padding: var(--sp-4) var(--sp-5); }
.dirhub-search { margin-bottom: var(--sp-6); }
.dirhub-hit { padding: var(--sp-3) var(--sp-5); gap: var(--sp-3); }
.dirhub-note { margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--border); }

/* ---- narrow screens ------------------------------------------------------ */
@media (max-width: 700px) {
    .dirhub-cards { grid-template-columns: 1fr; }
    .dirhub-card { min-height: 0; }
    .dirhub-card-name { min-height: 0; }
    .dirshow-book { gap: var(--sp-4); }
    .dirshow-grid > div, .dirshow-grid > aside { gap: var(--sp-3); }
}

/* Sticky column headers on the directory rosters.
   Scanning 4,297 banks means losing track of which column is which within a
   screen and a half. `.table-wrap` sets overflow-x for narrow screens, and an
   overflow ancestor is exactly what stops `position: sticky` resolving against
   the viewport, so the wrapper drops its overflow where the table already fits.
   The offset is the fixed topbar height, or the header slides underneath it. */
@media (min-width: 1080px) {
    .dir-table-wrap { overflow: visible; }
    table.ledger.dir-table thead th { top: var(--topbar-h); z-index: 3; }
}