/* ============================================================================
 * Parts Intelligence — styles.css (Phase 3)
 * Aesthetic: Linear × Mercury × Stripe Dashboard. Calm, trustworthy, dense.
 * Reps show these numbers on live calls — design must feel premium, not busy.
 * ============================================================================ */

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

:root {
  /* Backgrounds */
  --bg:           #0F172A;       /* page */
  --bg-panel:     #1E293B;       /* cards */
  --bg-panel-2:   #263449;       /* inputs, hover */
  --bg-elevated:  #2C3B54;       /* tooltip, focus */

  /* Borders */
  --border:       #334155;
  --border-soft:  #2A3850;
  --border-hi:    #475569;

  /* Text */
  --fg:           #F1F5F9;
  --fg-2:         #CBD5E1;
  --fg-dim:       #94A3B8;
  --fg-mute:      #64748B;
  --fg-faint:     #4B5563;

  /* Accents */
  --blue:         #3B82F6;
  --blue-soft:    #60A5FA;
  --blue-bg:      rgba(59,130,246,0.12);
  --green:        #10B981;
  --green-soft:   #34D399;
  --green-bg:     rgba(16,185,129,0.12);
  --amber:        #F59E0B;
  --amber-soft:   #FBBF24;
  --amber-bg:     rgba(245,158,11,0.12);
  --danger:       #EF4444;       /* only for destructive/error states */
  --danger-bg:    rgba(239,68,68,0.12);
  --gold:         #FBBF24;       /* warm, valuable — for money */
  --gold-soft:    rgba(251,191,36,0.5);
  --purple:       #A78BFA;       /* elevation strip */

  /* Three-price */
  --price-volume: var(--blue);
  --price-profit: var(--green);
  --price-safe:   var(--amber);

  /* Shadows */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-pop:   0 10px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.3);

  /* Type */
  --font:         'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num:     'Inter Tight', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radius */
  --r-card:       10px;
  --r-btn:        6px;
  --r-input:      6px;
  --r-pill:       999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.003em;
}

/* Font/color inheritance reset — NOT `color: inherit` on inputs this time.
 * Bug #4 root cause was the inherit-reset colliding with typed-attribute
 * selectors that miss <input> without a type attribute. We now set color
 * explicitly on every text-family input further down. */
button, input, select, textarea { font-family: inherit; }

a { color: var(--blue-soft); text-decoration: none; }
a:hover { color: var(--blue); text-decoration: underline; }

code, kbd {
  font-family: var(--font-mono);
  background: var(--bg-panel-2);
  color: var(--fg-2);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .85em;
}

.hide { display: none !important; }

/* =============================================================
   LAYOUT PRIMITIVES
   ============================================================= */
.app { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; }

.row { display: grid; gap: 16px; margin-bottom: 16px; }
.row.r2 { grid-template-columns: 1fr 1fr; }
.row.r3 { grid-template-columns: 1fr 1fr 1fr; }
.row.r4 { grid-template-columns: repeat(4, 1fr); }

/* =============================================================
   TOPBAR
   ============================================================= */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 20px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  height: 56px;
}
.topbar .brand {
  display: flex; align-items: center; gap: 10px;
  padding-right: 20px;
  border-right: 1px solid var(--border);
  height: 100%;
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(135deg, var(--blue), #2563EB);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-family: var(--font-num);
  font-size: 14px; letter-spacing: -0.03em;
  box-shadow: 0 2px 6px -2px rgba(59,130,246,0.5);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text .t1 { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; color: var(--fg); }
.brand-text .t2 { font-size: 11px; color: var(--fg-mute); letter-spacing: 0.04em; }

.tabs {
  display: flex; gap: 2px; flex: 1;
  align-self: stretch; align-items: stretch;
}
.tab {
  padding: 0 16px;
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--fg-dim);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
  transition: color .15s ease;
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); }
.tab.active::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; background: var(--blue);
  border-radius: 2px 2px 0 0;
}

.user-box { display: flex; align-items: center; gap: 10px; }
.back-link {
  margin-left: auto;
  padding: 6px 12px;
  font-size: 12px; font-weight: 500;
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  transition: color .15s ease, border-color .15s ease;
  align-self: center;
}
.back-link:hover { color: var(--fg); border-color: var(--border-hi); text-decoration: none; }
.user-box .name-col { text-align: right; line-height: 1.1; }
.user-box .name-col .name { font-size: 13px; font-weight: 500; color: var(--fg); }
.user-box .name-col .role {
  font-size: 11px; color: var(--fg-mute);
  letter-spacing: 0.03em; text-transform: capitalize;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #334155, #475569);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--fg);
  border: 2px solid transparent;
  font-family: var(--font-num); letter-spacing: 0.02em;
  cursor: default;
}
.avatar.admin   { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(251,191,36,0.2); }
.avatar.manager { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(59,130,246,0.2); }

.signout {
  margin-left: 8px;
  background: none; border: 1px solid var(--border);
  color: var(--fg-dim); font-size: 12px;
  padding: 5px 10px; border-radius: var(--r-btn);
  cursor: pointer; transition: all .15s ease;
}
.signout:hover { border-color: var(--border-hi); color: var(--fg); }

/* =============================================================
   ELEVATION STRIP (purple)
   ============================================================= */
.elevation-strip {
  background: linear-gradient(90deg, rgba(167,139,250,0.22), rgba(167,139,250,0.14));
  border-bottom: 1px solid rgba(167,139,250,0.3);
  color: var(--fg);
  padding: 10px 20px;
  font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
}
.elevation-strip .badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
}
.elevation-strip .badge::before {
  content: '⚡';
  display: inline-block;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(167,139,250,0.3);
  color: var(--purple);
  display: grid; place-items: center;
  font-size: 11px;
}
.elevation-strip .dim { color: var(--fg-dim); margin-left: 6px; font-size: 12px; }
.elevation-strip .countdown {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--purple);
  margin-right: 12px;
}
.elevation-strip button {
  background: transparent;
  border: 1px solid rgba(167,139,250,0.4);
  color: var(--purple);
  padding: 4px 12px; font-size: 12px; font-weight: 500;
  border-radius: var(--r-btn);
  cursor: pointer; transition: all .15s ease;
}
.elevation-strip button:hover {
  background: rgba(167,139,250,0.15);
  border-color: var(--purple);
}

/* =============================================================
   MAIN CONTENT
   ============================================================= */
.main { padding: 20px; }

/* =============================================================
   CARDS
   ============================================================= */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}

.card h2 {
  margin: 0 0 16px;
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card h2 > span { display: inline-flex; align-items: center; gap: 8px; }
.card h2 .right { margin-left: auto; }  /* forces action cluster to far edge even without justify-content: space-between */
.card h2 .meta {
  font-size: 12px; color: var(--fg-mute);
  font-weight: 400; letter-spacing: normal;
  text-transform: none;
}

.meta { color: var(--fg-mute); font-size: 12px; }
.dim  { color: var(--fg-dim); }
.mute { color: var(--fg-mute); }
.mono { font-family: var(--font-mono); }

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--fg);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.btn:hover  { background: var(--bg-elevated); border-color: var(--border-hi); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn.primary:hover { background: #2563EB; border-color: #2563EB; }
.btn.primary:focus-visible { box-shadow: 0 0 0 3px rgba(59,130,246,0.35); outline: none; }

.btn.danger {
  background: transparent;
  border-color: rgba(239,68,68,0.4);
  color: var(--danger);
}
.btn.danger:hover { background: var(--danger-bg); border-color: var(--danger); }

.btn.sm {
  padding: 5px 10px; font-size: 12px;
}
.btn.block { width: 100%; }

/* =============================================================
   FORMS
   ============================================================= */
label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 7px;
}

/* Bug #4 fix — explicit color on every text-family input. CSS attribute
 * selectors (input[type=text]) don't match <input> elements that omit the
 * type attribute; this bare `input` selector with :not() exclusions for
 * non-text types covers the case and prevents the invisible-text bug. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--fg);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  font-family: inherit;
}

input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: var(--border-hi);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
  background: var(--bg-elevated);
}
input::placeholder, textarea::placeholder { color: var(--fg-mute); }

/* Native select chevron (light color, dark theme compatible) */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2394A3B8' d='M6 8.5L2 4.5h8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}

/* Compact inline chip select (for sort/period toggles in card headers) */
select.chip {
  width: auto;
  padding: 5px 28px 5px 10px;
  font-size: 12px;
  background-color: var(--bg-panel-2);
  font-weight: 500;
}

/* Price input with $ prefix */
.price-input-wrap { position: relative; }
.price-input-wrap input {
  /* Generous left padding so the typed number is always clearly separated
     from the $ prefix, regardless of font rendering or typed currency chars. */
  padding-left: 28px;
}
.price-input-wrap::before {
  content: '$';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-weight: 600;
  font-family: var(--font-num);
  pointer-events: none;
  /* Match the input's font size so alignment stays right at any zoom level. */
  font-size: 14px;
  line-height: 1;
}

/* Stale-data indicator dot in topbar — always visible when data is stale.
   Yellow = >25 hours since last successful refresh. Red = >48 hours. */
.stale-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  cursor: help;
}
.stale-dot.warn { background: #F59E0B; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
.stale-dot.bad  { background: #EF4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }

/* Reality check card — two-sided direction styling */
.reality-flag-high { color: var(--gold); }
.reality-flag-low  { color: var(--red); }
.reality-ok        { color: var(--fg-dim); }

/* =============================================================
   ALERTS / BANNERS
   ============================================================= */
.alert {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.45;
  border: 1px solid transparent;
}
.alert.err  { border-color: rgba(239,68,68,0.3);  color: #FCA5A5; background: var(--danger-bg); }
.alert.ok   { border-color: rgba(16,185,129,0.3); color: var(--green-soft); background: var(--green-bg); }
.alert.warn { border-color: rgba(245,158,11,0.3); color: var(--amber-soft); background: var(--amber-bg); }
.alert.info { border-color: rgba(59,130,246,0.3); color: var(--blue-soft);  background: var(--blue-bg); }

/* =============================================================
   LOGIN SCREEN
   ============================================================= */
.login-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,0.08), transparent 60%),
    radial-gradient(900px 500px at 85% 110%, rgba(16,185,129,0.06), transparent 60%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 36px;
  box-shadow: var(--shadow-pop);
}
.login-card .brand-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
}
.login-card .brand-row .wordmark {
  font-weight: 600; font-size: 16px;
  letter-spacing: -0.015em;
}
.login-card .brand-row .wordmark span {
  color: var(--fg-dim); font-weight: 500;
}
.login-card h1 {
  margin: 0 0 8px;
  font-family: var(--font-num);
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.login-card .sub {
  margin: 0 0 28px;
  color: var(--fg-dim); font-size: 14px;
}
.login-card label:not(:first-child) { margin-top: 16px; }
.login-card .btn.primary { padding: 12px 16px; font-size: 15px; margin-top: 20px; }
.login-card .meta-foot {
  margin-top: 22px;
  font-size: 13px;
  color: var(--fg-mute);
  text-align: center;
}

.login-foot {
  position: fixed; bottom: 16px; left: 0; right: 0;
  text-align: center; font-size: 12px; color: var(--fg-mute);
  pointer-events: none;
}
.login-foot .mono { font-family: var(--font-mono); font-size: 11px; }

/* =============================================================
   QUOTE VIEW
   ============================================================= */
.row-quote-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr 1.4fr;
  gap: 12px;
  margin-bottom: 16px;
}
/* Bug 5 fix (hotfix v5, 2026-04-27): when the engine field is visible
 * (Engine / Transmission / Transfer Case parts), add a 5th column so all
 * five fields fit on one row. Without this the engine field wraps to a
 * second row and leaves three empty cells next to it — the visible gap
 * Daniel reported between Year/Make/Model and the engine field.
 * The class is toggled by updateEngineVisibility() in dashboard.js. */
.form-grid.form-grid-with-engine {
  grid-template-columns: 1.1fr 0.85fr 1fr 1.2fr 1fr;
}
.form-grid > div { margin-bottom: 0; }

.form-actions {
  display: flex; gap: 8px; align-items: end; justify-content: flex-end;
}
.form-row-price {
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px; align-items: end;
}


/* Quote boot gate: dashboard.html starts the quote form in this class so the
 * browser never paints the native <select> fallback before dashboard.js mounts
 * the enhanced combobox controls. visibility:hidden preserves the final card
 * height, avoiding layout jump; JS removes the class as soon as the combobox
 * wrappers exist. */
#quoteForm.quote-form-booting {
  visibility: hidden;
  pointer-events: none;
}
#quoteForm.quote-form-ready {
  visibility: visible;
  pointer-events: auto;
}

/* Reality check */
.reality-ok, .reality-warn {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px;
  border-radius: 8px;
  font-size: 14px; line-height: 1.45;
}
.reality-ok   { background: var(--green-bg); border: 1px solid rgba(16,185,129,0.25); }
.reality-warn { background: var(--amber-bg); border: 1px solid rgba(245,158,11,0.3); }

.reality-ok .icon, .reality-warn .icon {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 13px; font-weight: 700;
}
.reality-ok .icon   { background: var(--green);  color: #052E22; }
.reality-warn .icon { background: var(--amber);  color: #2A1903; }
.reality-ok .body b   { color: var(--green-soft); }
.reality-warn .body b { color: var(--amber-soft); }
.reality-warn .body .sub, .reality-ok .body .sub {
  color: var(--fg-dim); font-size: 13px; margin-top: 4px;
}

.anchor-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--blue-bg); color: var(--blue-soft);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: var(--r-pill);
}
.anchor-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 6px var(--blue);
}

.reality-ministats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 12px;
}
.reality-ministats .box {
  padding: 10px 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.reality-ministats .box .lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-mute); margin-bottom: 4px;
}
.reality-ministats .box .val {
  font-family: var(--font-num);
  font-size: 18px; font-weight: 600;
  color: var(--fg); letter-spacing: -0.01em;
}
.reality-ministats .box .val.gold { color: var(--gold); }

/* =============================================================
   THREE-PRICE CARDS — the signature
   ============================================================= */
.three-prices {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.price-cell {
  position: relative;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 22px 20px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
}
.price-cell::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 10px 10px 0 0;
}
.price-cell.volume::before { background: var(--price-volume); }
.price-cell.profit::before { background: var(--price-profit); }
.price-cell.safe::before   { background: var(--price-safe); }

/* subtle colored glow */
.price-cell::after {
  content: ''; position: absolute;
  top: -40px; left: 50%; transform: translateX(-50%);
  width: 80%; height: 80px;
  border-radius: 50%;
  opacity: 0.4;
  filter: blur(40px);
  pointer-events: none;
}
.price-cell.volume::after { background: rgba(59,130,246,0.35); }
.price-cell.profit::after { background: rgba(16,185,129,0.35); }
.price-cell.safe::after   { background: rgba(245,158,11,0.3); }

.price-cell:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.price-cell.volume:hover { box-shadow: 0 0 40px -8px rgba(59,130,246,0.5), var(--shadow-card); }
.price-cell.profit:hover { box-shadow: 0 0 40px -8px rgba(16,185,129,0.5), var(--shadow-card); }
.price-cell.safe:hover   { box-shadow: 0 0 40px -8px rgba(245,158,11,0.5), var(--shadow-card); }

.price-cell .label {
  position: relative; z-index: 1;
  display: block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 10px;
}
.price-cell.volume .label { color: var(--blue-soft); }
.price-cell.profit .label { color: var(--green-soft); }
.price-cell.safe   .label { color: var(--amber-soft); }

.price-cell .price {
  position: relative; z-index: 1;
  display: block;
  font-family: var(--font-num);
  font-size: 40px; font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg); line-height: 1.05;
  margin-bottom: 8px;
}
.price-cell .ctx {
  position: relative; z-index: 1;
  display: block;
  font-size: 13px;
  color: var(--fg-2); line-height: 1.45;
}
.price-cell .ctx b { color: var(--fg); font-weight: 600; }

/* =============================================================
   GRAIN HIERARCHY
   ============================================================= */
.grain-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}
.grain-cell {
  padding: 14px 16px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.grain-cell:hover { border-color: var(--border-hi); background: var(--bg-elevated); }
.grain-cell.anchor {
  border-color: var(--blue);
  background: var(--blue-bg);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,0.3);
}
.grain-cell.empty { opacity: 0.55; cursor: default; }
.grain-cell.empty:hover { border-color: var(--border); background: var(--bg-panel-2); }
.grain-cell .gr-level, .grain-cell .gr-label, .grain-cell .gr-ctx,
.grain-cell .gr-n {
  display: block;
}
.grain-cell .gr-level {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 6px;
}
.grain-cell.anchor .gr-level { color: var(--blue-soft); }
.grain-cell .gr-label {
  font-size: 14px; font-weight: 500;
  color: var(--fg);
  margin-bottom: 4px;
}
.grain-cell .gr-n {
  font-size: 12px;
  color: var(--fg-dim);
  margin-bottom: 2px;
}
.grain-cell .gr-ctx {
  font-size: 12px;
  color: var(--fg-dim);
}

/* =============================================================
   TABLES
   ============================================================= */
.scrollable { overflow-x: auto; margin: -4px; padding: 4px; }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
table thead th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-mute);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  white-space: nowrap;
  user-select: none;
  position: relative;
}
table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  height: 44px;
  vertical-align: middle;
  color: var(--fg-2);
}
table tbody tr:last-child td { border-bottom: none; }
table tbody tr:hover td { background: rgba(255,255,255,0.02); }

/* Alignment & formatting helpers mirrored from old styles for compat with JS */
table td.num, table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table td.money {
  font-family: var(--font-num);
  font-weight: 500;
  color: var(--fg);
  border-left: 2px solid var(--gold-soft);
}
table th.money { border-left: 2px solid transparent; }

table td.dim  { color: var(--fg-dim); }
table td.good { color: var(--green-soft); }
table td.bad  { color: #FCA5A5; }

table td.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
}

/* =============================================================
   SORTABLE COLUMN HEADERS
   ============================================================= */
th.sortable { cursor: pointer; transition: color .15s ease; }
th.sortable:hover { color: var(--fg-2); }
th.sortable::after {
  content: '';
  display: inline-block;
  margin-left: 5px;
  opacity: 0;
  font-size: 10px;
  transition: opacity .15s ease;
}
th.sortable:hover::after { opacity: 0.6; content: '↕'; }
th.sortable.sort-asc  { color: var(--fg); }
th.sortable.sort-desc { color: var(--fg); }
th.sortable.sort-asc::after  { opacity: 1; color: var(--blue-soft); content: '▲'; }
th.sortable.sort-desc::after { opacity: 1; color: var(--blue-soft); content: '▼'; }

/* =============================================================
   PERCENTAGE-BAR CELL
   ============================================================= */
.pct-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 60px;
}
.pct-cell .v { font-variant-numeric: tabular-nums; }
.pct-cell .bar {
  width: 60px; height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.pct-cell .bar .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--blue);
  border-radius: 2px;
}
.pct-cell.good .fill { background: var(--green); }
.pct-cell.warn .fill { background: var(--amber); }
.pct-cell.bad  .fill { background: var(--danger); }

/* =============================================================
   STATUS CHIPS
   ============================================================= */
.chip-status, .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.chip-status .d, .pill .d { width: 5px; height: 5px; border-radius: 50%; }
.chip-status.ok, .pill.ok        { background: var(--green-bg); color: var(--green-soft); }
.chip-status.ok .d, .pill.ok .d  { background: var(--green-soft); }
.chip-status.warn, .pill.warn    { background: var(--amber-bg); color: var(--amber-soft); }
.chip-status.warn .d, .pill.warn .d { background: var(--amber-soft); }
.chip-status.bad, .pill.bad      { background: var(--danger-bg); color: #FCA5A5; }
.chip-status.bad .d, .pill.bad .d{ background: var(--danger); }

/* =============================================================
   KPI GRIDS (summary tiles, scorecard)
   ============================================================= */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.kpi {
  padding: 14px 16px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.kpi .label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 6px;
}
.kpi .value {
  font-family: var(--font-num);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
  line-height: 1.1;
}
.kpi .value.money { color: var(--gold); }
.kpi .value.good  { color: var(--green-soft); }
.kpi .value.bad   { color: #FCA5A5; }

/* =============================================================
   B10 — KPI DELTA + SPARKLINE
   Always-rendered rows (even when empty) so grid alignment stays
   consistent across KPIs with and without prior/sparkline data.
   ============================================================= */
.kpi-delta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--fg-mute);
  min-height: 14px;  /* keep vertical rhythm when empty */
}
.kpi-delta-empty {
  color: var(--fg-mute);
  opacity: 0.5;
}
.kpi-delta-arrow {
  font-size: 10px;
  line-height: 1;
}
.kpi-delta-pct {
  font-family: var(--font-num);
}
.kpi-delta-good  { color: var(--green-soft); }
.kpi-delta-bad   { color: #FCA5A5; }
.kpi-delta-flat  { color: var(--fg-mute); }

/* Sparkline: inline SVG sized to 80x20, tinted by the KPI's color tone
   (uses currentColor so it inherits from parent text color). */
.kpi-sparkline {
  display: block;
  margin-top: 4px;
  color: var(--fg-mute);
  opacity: 0.85;
  width: 80px;
  height: 20px;
}
.kpi .value.good + .kpi-delta + .kpi-sparkline,
.kpi .value.money + .kpi-delta + .kpi-sparkline {
  color: var(--green-soft);
  opacity: 0.7;
}
.kpi .value.bad + .kpi-delta + .kpi-sparkline {
  color: #FCA5A5;
  opacity: 0.7;
}

/* =============================================================
   TEAM SCORECARD GRID (admin/manager)
   ============================================================= */
.scorecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.sc-mini {
  padding: 16px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, transform .05s ease;
}
.sc-mini:hover { border-color: var(--border-hi); transform: translateY(-1px); }
.sc-mini .hd {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.sc-mini .hd .av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #334155, #475569);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--fg);
  font-family: var(--font-num);
}
.sc-mini .hd .nm { font-weight: 600; font-size: 16px; color: var(--fg); letter-spacing: -0.01em; }
/* 2026-04-20 visual improvement — elevated sub-line typography.
 *
 * The two key metrics per rep (sales count, close rate) used to be
 * inline with flat 11px dim text. Now the NUMBERS use the dashboard's
 * numeric font (Inter Tight) at a bold 15px in high-contrast white —
 * matching the design language of KPI values elsewhere — while the
 * label words ("sales", "close") stay 11px dim as context markers.
 * Delta chips get colored pill backgrounds for up/down signal.
 *
 * Eye flow: numbers first, delta second, labels third. */
.sc-mini .hd .sub {
  color: var(--fg-dim);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: 3px;
}
.sc-mini .hd .sub .sub-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}
.sc-mini .hd .sub .metric-num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.sc-mini .hd .sub .metric-lbl {
  font-size: 12px;
  color: var(--fg-dim);
  text-transform: lowercase;
  letter-spacing: 0.01em;
  font-weight: 500;
}
.sc-mini .hd .sub .sub-sep {
  display: none;   /* No separator needed in vertical layout */
}

/* Delta chips — used both on team tiles and elsewhere where a prior-
 * period comparison is present. Pill with colored background + border
 * so they pop regardless of parent text treatment. */
.delta-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.delta-up {
  color: #86efac;            /* green-300 — readable on dark panel */
  background: rgba(34, 197, 94, 0.12);   /* green-500 @ 12% */
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.delta-down {
  color: #fca5a5;            /* red-300 — readable on dark panel */
  background: rgba(239, 68, 68, 0.12);   /* red-500 @ 12% */
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.sc-mini .row-s {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sc-mini .row-s .c { }
.sc-mini .row-s .c .lbl {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-mute); margin-bottom: 2px;
}
.sc-mini .row-s .c .vl {
  font-family: var(--font-num); font-weight: 600;
  font-size: 16px; color: var(--fg);
  letter-spacing: -0.01em;
}
.sc-mini .row-s .c .vl.money { color: var(--gold); }
.sc-mini .row-s .c .vl.good  { color: var(--green-soft); }
.sc-mini .row-s .c .vl.bad   { color: #FCA5A5; }

/* =============================================================
   MODAL
   ============================================================= */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 100;
  padding: 20px;
}
.modal {
  width: 100%; max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--shadow-pop);
}
.modal h3 {
  margin: 0 0 8px;
  font-family: var(--font-num);
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.015em;
}
.modal .modal-sub {
  margin: 0 0 18px;
  color: var(--fg-dim); font-size: 14px;
  line-height: 1.5;
}
.modal .modal-sub b { color: var(--fg-2); }

/* =============================================================
   TOAST
   ============================================================= */
#toast {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 200;
  max-width: 360px;
  box-shadow: var(--shadow-pop);
  animation: toast-in .2s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   STATUS BAR (replaces old ticker)
   ============================================================= */
.status-bar {
  display: flex;
  gap: 20px;
  padding: 10px 20px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--fg-mute);
  flex-wrap: wrap;
}
.status-bar b { color: var(--fg-2); font-weight: 500; }
.status-bar .sep { opacity: 0.4; }
.status-bar .good  { color: var(--green-soft); }
.status-bar .mute  { color: var(--fg-mute); }

/* =============================================================
   SPINNING INDICATOR (used on loading states)
   ============================================================= */
.spin::after {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-left: 6px;
  border: 1.5px solid var(--fg-mute);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spinning .7s linear infinite;
  vertical-align: middle;
}
@keyframes spinning { to { transform: rotate(360deg); } }

/* =============================================================
   PRICE TIER CURVE (rendered as percentage bars too)
   ============================================================= */
#tierBody td { color: var(--fg-2); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1100px) {
  .row.r2 { grid-template-columns: 1fr; }
  .row.r3 { grid-template-columns: 1fr 1fr; }
  .row.r4 { grid-template-columns: 1fr 1fr; }
  .row-quote-top { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  /* Bug 5 fix: 5-col engine-visible variant also collapses on small screens */
  .form-grid.form-grid-with-engine { grid-template-columns: 1fr 1fr; }
  .three-prices { grid-template-columns: 1fr; }
  .grain-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .topbar { padding: 10px 12px; gap: 12px; }
  .topbar .brand { padding-right: 10px; }
  .brand-text .t2 { display: none; }
  .tabs { gap: 0; }
  .tab { padding: 0 10px; font-size: 13px; }
  .user-box .name-col { display: none; }
  .main { padding: 12px; }
  .card { padding: 16px; }
}

/* =============================================================================
 * ELITE DEPLOY ADDITIONS (2026-04-18)
 *   A2 breadcrumbs, A3 per-card scroll, card controls (date range / compare),
 *   combobox (type-ahead picker), channel-mix stacked bar (E1 UI)
 * ============================================================================= */

/* ---------- A2: Breadcrumb bar --------------------------------------------- */
.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--fg-mute);
}
.breadcrumb-bar.hide { display: none; }

.bc-back {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--fg-dim);
  width: 24px; height: 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  display: grid; place-items: center;
  transition: background .12s, color .12s, border-color .12s;
}
.bc-back:hover {
  background: var(--bg-panel-2);
  color: var(--fg);
  border-color: var(--border-hi);
}

.bc-trail {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bc-link {
  color: var(--fg-dim);
  text-decoration: none;
}
.bc-link:hover { color: var(--fg); text-decoration: underline; }
.bc-sep { color: var(--fg-faint); font-size: 11px; }
.bc-current {
  color: var(--fg);
  font-weight: 500;
}

/* ---------- A3: Per-card scroll containers --------------------------------- */
/* The existing .scrollable rule handles intra-card overflow; we add a max
 * height so each card's body scrolls independently instead of the whole
 * analytics page scrolling as one column. Header stays sticky on top. */
#view-analytics .card .scrollable {
  max-height: 520px;
  overflow-y: auto;
  overflow-x: auto;
  overscroll-behavior: contain;
}
#view-analytics .card .scrollable table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-panel);
}
#view-analytics .card .scrollable table thead th {
  background: var(--bg-panel);
  box-shadow: 0 1px 0 var(--border-soft);
}

/* Bug 2 fix (hotfix v5, 2026-04-27): recent sales card on the quote view
 * now caps at 30 rows (was 10). Make the card body scrollable with sticky
 * thead so the rep can scroll through all matching sales without the card
 * pushing the rest of the page down. Same pattern as analytics-view tables. */
#recentCard .scrollable {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: auto;
  overscroll-behavior: contain;
}
#recentCard .scrollable table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-panel);
}
#recentCard .scrollable table thead th {
  background: var(--bg-panel);
  box-shadow: 0 1px 0 var(--border-soft);
}

/* ---------- Card date-range controllers ------------------------------------ */
.ctrl-slot {
  padding: 8px 14px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(to bottom, var(--bg-panel), var(--bg-panel));
}
.card-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
}
.card-preset-bar {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-panel-2);
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
}
.preset-btn {
  background: transparent;
  color: var(--fg-dim);
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
  line-height: 1.3;
  transition: background .12s, color .12s;
}
.preset-btn:hover {
  color: var(--fg);
  background: rgba(255,255,255,0.04);
}
.preset-btn.active {
  background: var(--bg-elevated);
  color: var(--fg);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border-hi);
}
.preset-custom {
  margin-left: 2px;
  padding-left: 12px;
  padding-right: 12px;
}
.card-date-wrap,
.card-compare-wrap,
.card-custom-prior-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-date-wrap.hide,
.card-compare-wrap.hide,
.card-custom-prior-wrap.hide { display: none; }

/* Bug C fix — Apply button inside the custom-date-range controller. Reuses
   .preset-btn for base look and gets a subtle primary tint so it reads as
   the canonical "commit this range" action. */
.preset-btn.preset-apply {
  margin-left: 4px;
  background: var(--blue-bg, rgba(59,130,246,0.15));
  color: var(--blue-soft, #93c5fd);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,0.3);
}
.preset-btn.preset-apply:hover {
  background: rgba(59,130,246,0.25);
  color: #bfdbfe;
}

/* Bug B fix — in-band "Return to mine" link inside the "viewing someone
   else's scorecard" banner. Kept visually unobtrusive because the banner
   itself carries the primary message. */
.btn-link {
  background: none;
  border: none;
  color: var(--blue, #60a5fa);
  cursor: pointer;
  font: inherit;
  padding: 4px 8px;
  text-decoration: underline;
}
.btn-link:hover { color: var(--blue-soft, #93c5fd); }

.date-input {
  padding: 4px 8px;
  background: var(--bg-panel-2);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  color-scheme: dark;
}
.date-input:focus {
  outline: none;
  border-color: var(--blue);
}

/* ---------- Combobox (type-ahead picker) ----------------------------------- */
.combobox-input {
  min-width: 180px;
  padding: 4px 10px;
  background: var(--bg-panel-2);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
}
.combobox-input:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--bg-elevated);
}
.combobox-dropdown {
  position: absolute;
  z-index: 100;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 2px;
  padding: 4px;
}
.combobox-dropdown.hide { display: none; }
.combobox-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg);
  transition: background .08s;
}
.combobox-item:hover {
  background: var(--bg-panel-2);
}
/* Apr 18, 2026 rebuild — keyboard arrow-key highlight on combobox items.
 * Uses the same visual treatment as hover so mouse and keyboard feel
 * consistent. Slightly stronger tone to make the active item visible
 * even without the mouse hovering. */
.combobox-item.combobox-item-active {
  background: var(--bg-panel-2);
  outline: 1px solid var(--border);
}
.combobox-main {
  font-weight: 500;
}
.combobox-sub {
  font-size: 11px;
  color: var(--fg-mute);
  white-space: nowrap;
}
.combobox-empty {
  padding: 10px;
  font-size: 12px;
  text-align: center;
  color: var(--fg-mute);
}

/* Anchor combobox dropdown to its slot (relative parent) */
/* 2026-04-20 scorecard unify — #repPickerSlot now lives inside the
 * Scorecard card's ctrl-slot as a standalone row, not an inline chip
 * next to a period select. Block-level + bottom margin keeps it
 * visually above the preset bar. Width auto-shrinks around the chip
 * wrapper inside so the row doesn't span the full card width. */
#repPickerSlot {
  display: block;
  margin-bottom: 0.5rem;
}
#repPickerSlot .rep-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.rep-picker-clear:hover {
  color: var(--fg, #e5e7eb) !important;
}

/* Apr 18, 2026 rebuild — quote form combobox layout. The form-grid cells
 * are narrower than the rep picker slot, and with the engine field visible
 * we have five columns packed into one row on desktop. Let the dropdown
 * ignore the input's constrained width so long labels like "F-150 Lightning"
 * or "5.0L Gasoline" stay readable. Positioned relative via .combo-field
 * which runtime-creates as the wrapper. */
.form-grid .combo-field {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.form-grid .combobox-input {
  min-width: 0;       /* allow input to shrink with the grid cell */
  width: 100%;
  box-sizing: border-box;
}
.form-grid .combobox-dropdown {
  /* Dropdown can extend beyond the cell width for readability; cap at 360px
   * so it doesn't run off the card on narrow laptops. */
  min-width: 100%;
  max-width: 360px;
  left: 0;
}

/* ---------- E1 UI: Channel mix stacked bars -------------------------------- */
.channel-mix-cell {
  min-width: 180px;
  width: 200px;
  vertical-align: middle;
}
.chmix {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}
.chmix-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-soft);
}
.chmix-seg {
  display: block;
  height: 100%;
  transition: filter .12s;
}
.chmix-seg:hover { filter: brightness(1.2); }
.chmix-paid    { background: var(--blue); }
.chmix-organic { background: var(--green); }
.chmix-inbound { background: var(--amber); }
.chmix-label {
  font-size: 11px;
  letter-spacing: .01em;
}

/* Channel legend — injected by JS once as part of sources card header in Phase 2b,
 * but defining the classes here so styles land in one pass. */
.chmix-legend {
  display: inline-flex;
  gap: 10px;
  font-size: 11px;
  color: var(--fg-mute);
}
.chmix-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chmix-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ---------- Catalog-empty warning banner ----------------------------------- */
.catalog-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
  font-size: 13px;
}

/* ---------- D1: Quote price input $ prefix (decisive fix) ------------------ */
/* Previous fix tried padding/font-size gymnastics. New approach: absolute-position
 * the $ OUTSIDE the input's visual content box, with a left padding that
 * mechanically guarantees typed text starts well to the right of the $. */
.price-input-wrap {
  position: relative;
  display: block;
}
.price-input-wrap::before {
  content: '$';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-mute);
  font-size: 14px;
  font-family: var(--font-num);
  pointer-events: none;
  z-index: 1;
}
.price-input-wrap input[type="text"],
.price-input-wrap input {
  padding-left: 22px !important;  /* mechanical guarantee: text can never overlap the $ */
}

/* ---------- Card header tightening for new controller slot ----------------- */
/* When a ctrl-slot lives between the <h2> and the .scrollable, reduce the
 * bottom margin on h2 so the controller doesn't look detached. */
#view-analytics .card h2 {
  margin-bottom: 0;
}
#view-analytics .card .ctrl-slot + .scrollable,
#view-analytics .card .ctrl-slot + .system-signals + .scrollable {
  margin-top: 0;
}

/* ---------- Status-bar tweak: delta arrows inline in system-signals -------- */
.system-signals .kpi-delta {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
}

/* ---------- Rep row hover (clickable rows on leaderboard) ------------------ */
#repBody tr:hover {
  background: var(--bg-panel-2);
}

/* ============================================================================
 * April 19, 2026 — CarAPI rebuild additions
 * ============================================================================ */

/* ---- Bug fix §1D-4: Reality check flags are RED both directions -----------
 * Previously the warn box used --amber-bg and only the icon glyph color hinted
 * at direction. Per spec, both directions (margin leak = low, deal risk = high)
 * warrant the same visual urgency — red. Keep icons ↓ / ↑ to communicate the
 * direction.
 */
.reality-warn {
  background: var(--danger-bg);
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.reality-warn .icon {
  background: var(--danger);
  color: #FFFFFF;
}
.reality-warn .body b {
  color: #FCA5A5;
}
/* Keep the inline text-color utility classes but re-point both to red so any
 * stray span that still uses reality-flag-low / reality-flag-high matches. */
.reality-flag-high,
.reality-flag-low {
  color: var(--danger);
}

/* ---- §1D-5: Grain-inspect modal (sticky panel, not toast) -----------------
 * Backdrop dims the screen; panel is centered and scrolls if taller than
 * viewport. Z-index chosen to sit above toasts (which are ~900) and cards
 * but below any auth/confirm dialogs if they exist.
 */
.grain-inspect-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 950;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: gi-fade-in 0.12s ease-out;
}
@keyframes gi-fade-in { from { opacity: 0; } to { opacity: 1; } }

.grain-inspect-panel {
  background: var(--bg-panel, #1A1F2E);
  color: var(--fg, #E5E7EB);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 20px 22px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.grain-inspect-panel .gi-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 6px;
}
.grain-inspect-panel .gi-grain-lbl {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-dim, #9CA3AF); font-weight: 600;
}
.grain-inspect-panel .gi-close {
  background: transparent; border: none;
  color: var(--fg-dim, #9CA3AF);
  font-size: 22px; line-height: 1; cursor: pointer;
  padding: 4px 10px; border-radius: 6px;
}
.grain-inspect-panel .gi-close:hover {
  background: var(--bg-panel-2, rgba(255,255,255,0.04));
  color: var(--fg, #E5E7EB);
}
.grain-inspect-panel .gi-ymm {
  font-size: 16px; font-weight: 600;
  margin-bottom: 14px;
  color: var(--fg, #E5E7EB);
}
.grain-inspect-panel .gi-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
  margin-bottom: 14px;
}
.grain-inspect-panel .gi-stat {
  background: var(--bg-panel-2, rgba(255,255,255,0.03));
  padding: 8px 12px; border-radius: 6px;
}
.grain-inspect-panel .gi-stat-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fg-dim, #9CA3AF);
}
.grain-inspect-panel .gi-stat-val {
  font-size: 15px; font-weight: 600; margin-top: 2px;
  color: var(--gold, #F2C94C);
}
.grain-inspect-panel .gi-note {
  font-size: 12px; color: var(--fg-dim, #9CA3AF);
  padding: 8px 10px; border-radius: 4px;
  background: var(--bg-panel-2, rgba(255,255,255,0.03));
  border-left: 2px solid var(--gold, #F2C94C);
}

/* ---- §1G: Pricing signal block --------------------------------------------
 * Sits next to the reality_check card. Three severity classes mirroring the
 * signal enum from the backend.
 */
#pricingSignalBox { margin-top: 10px; }
#pricingSignalBox.hide { display: none; }
.pricing-signal {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px;
  border-radius: 8px;
  font-size: 14px; line-height: 1.45;
}
.pricing-signal .icon {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 13px; font-weight: 700;
}
.pricing-signal .body b { display: block; margin-bottom: 2px; }
.pricing-signal .body .sub {
  color: var(--fg-dim); font-size: 13px; margin-top: 4px;
}
.pricing-signal .body .sub .gold { color: var(--gold); font-weight: 600; }

.pricing-signal-red {
  background: var(--danger-bg);
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.pricing-signal-red .icon { background: var(--danger); color: #FFFFFF; }
.pricing-signal-red .body b { color: #FCA5A5; }

.pricing-signal-amber {
  background: var(--amber-bg);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.pricing-signal-amber .icon { background: var(--amber); color: #2A1903; }
.pricing-signal-amber .body b { color: var(--amber-soft); }

.pricing-signal-blue {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.30);
}
.pricing-signal-blue .icon { background: #3B82F6; color: #FFFFFF; }
.pricing-signal-blue .body b { color: #93C5FD; }

/* The combobox subtext already had a .combobox-sub rule; ensure the
 * CarAPI-source line doesn't wrap awkwardly on narrow cells. */
.combobox-item .combobox-sub { font-size: 11px; }

/* ============================================================================
 * ELITE COMPARISON CARDS — April 20, 2026 unified deploy
 *
 * Styling for the overlay-delta table cells, compare-strip rollup bars, and
 * per-card visual primitives introduced by dashboard-cards.js (PICards).
 *
 * Design pattern (Linear × Stripe × Vercel):
 *   • Each metric cell is two lines: big value on top, small colored delta
 *     + dim prior value underneath. No extra columns — maximum signal per
 *     unit of screen real estate.
 *   • Green = move in favored direction. Red = against. Dim = neutral or
 *     flat. Colors match the kpi-delta-good/bad tokens already in use
 *     on the Scorecard so the visual language is consistent across the app.
 *   • Compare-strip uses the same token system as KPI chips on Scorecard.
 * ============================================================================ */

/* ---- Metric cell (the table <td> for a comparison-enabled column) ---- */
.pi-metric-cell {
  vertical-align: top;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.15;
}
.pi-metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
/* Thresholds — green/red tint applied to the main value based on absolute
 * quality of the metric (independent of direction of change vs prior). */
.pi-metric-cell.pi-value-good .pi-metric-value { color: var(--green-soft); }
.pi-metric-cell.pi-value-bad  .pi-metric-value { color: #FCA5A5; }

/* Ghost rows (appeared in prior, gone in current) — whole row dimmed. */
.pi-row-ghost              { opacity: 0.55; }
.pi-row-ghost td           { font-style: italic; }
.pi-metric-ghost .pi-metric-value { color: var(--fg-mute); }

/* ---- Overlay delta under each metric ---- */
.pi-delta {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--fg-mute);
  white-space: nowrap;
}
.pi-delta-empty { visibility: hidden; height: 13px; }
.pi-delta-arrow { font-size: 9px; line-height: 1; }
.pi-delta-num   { font-weight: 500; }
.pi-delta-vs    { color: var(--fg-faint); }

/* Directional coloring — mirror kpi-delta so the language is consistent. */
.pi-delta-good  { color: var(--green-soft); }
.pi-delta-good  .pi-delta-vs { color: rgba(52, 211, 153, 0.55); }
.pi-delta-bad   { color: #FCA5A5; }
.pi-delta-bad   .pi-delta-vs { color: rgba(252, 165, 165, 0.55); }
.pi-delta-flat  .pi-delta-arrow { color: var(--fg-faint); }

/* "new" / "was" tags for rows that only exist in one period. */
.pi-delta-new .pi-delta-tag,
.pi-delta-gone .pi-delta-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pi-delta-new .pi-delta-tag {
  background: var(--blue-bg);
  color: var(--blue-soft);
}
.pi-delta-gone .pi-delta-tag {
  background: rgba(100, 116, 139, 0.18);
  color: var(--fg-mute);
  text-transform: none;
  font-size: 11px;
  font-style: normal;
}

/* ---- Compare-strip: the rollup line above each comparison card table ---- */
.pi-compare-strip-host {
  padding: 10px 4px 14px 4px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 8px;
}
.pi-compare-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pi-compare-range {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.pi-compare-range .pi-range-cur   { color: var(--fg-2); font-weight: 500; }
.pi-compare-range .pi-range-prior { color: var(--fg-mute); }
.pi-compare-range .pi-range-mode  { font-style: italic; }

.pi-compare-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}
.pi-compare-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 82px;
}
.pi-compare-chip .pi-chip-label {
  font-size: 10px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.pi-compare-chip .pi-chip-value {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.pi-compare-chip .pi-delta { font-size: 11px; margin-top: 1px; }

/* ---- Yard name cell (2-line: business name + #ref dim) ---- */
.pi-yard-cell {
  line-height: 1.2;
}
.pi-yard-cell .pi-yard-name {
  font-weight: 500;
  color: var(--fg);
}
.pi-yard-cell .pi-yard-ref {
  font-size: 11px;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* ---- State + source name cells — keep them single-line and clean ---- */
.pi-state-cell,
.pi-source-cell {
  font-weight: 500;
  color: var(--fg);
  vertical-align: top;
  padding-top: 6px;
}

/* ---- Clickable-row affordance (reserved for future drill-in) ---- */
.pi-row-clickable { cursor: pointer; }
.pi-row-clickable:hover { background: var(--bg-panel-2); }

/* ---- Picker styles for buildCardController (dashboard-cards.js) ---- *
 * Scoped with .pi- prefix so they don't collide with the existing
 * .preset-btn / .chip styles used by mkDateRangeController. Only cards
 * that opt into the new controller (not yet — current deploy keeps the
 * existing picker and only replaces the renderers) would use these.
 */
.pi-card-controls {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 10px;
}
.pi-preset-row, .pi-date-row, .pi-compare-row, .pi-prior-row {
  display: flex; align-items: center; gap: 4px;
}
.pi-preset-btn {
  padding: 4px 10px; border-radius: 6px;
  background: var(--bg-panel-2); color: var(--fg-2);
  border: 1px solid var(--border-soft); font-size: 12px;
  cursor: pointer; transition: all 120ms ease;
}
.pi-preset-btn:hover          { background: var(--bg-elevated); color: var(--fg); }
.pi-preset-btn.pi-active      { background: var(--blue-bg); color: var(--blue-soft); border-color: var(--blue); }
.pi-preset-btn.pi-preset-apply{ background: var(--blue); color: #fff; border-color: var(--blue); }
.pi-preset-btn.pi-preset-apply:hover { background: var(--blue-soft); }
.pi-date-input {
  padding: 4px 8px; border-radius: 6px;
  background: var(--bg-panel-2); color: var(--fg);
  border: 1px solid var(--border-soft); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pi-compare-select {
  padding: 4px 8px; border-radius: 6px;
  background: var(--bg-panel-2); color: var(--fg);
  border: 1px solid var(--border-soft); font-size: 12px;
}

/* ============================================================================
 * Deploy 2 (April 20, 2026) — flat-delta + row badges
 *
 * Visual additions for the preset-unification deploy:
 *   • .pi-delta-equal — the "= same" glyph replacing "▲ +0.0pp" for true zero
 *   • .pi-row-badge-new/gone — one-per-row badges on the name cell instead
 *     of per-column duplicates (matches Stripe / Linear row-change UX)
 *   • .pi-delta-empty-ghost — dim "was X" text on ghost (gone) row columns
 * ============================================================================ */

.pi-delta-flat .pi-delta-equal {
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-mute);
  margin-right: 2px;
}
.pi-delta-flat {
  color: var(--fg-mute);
}
.pi-delta-flat .pi-delta-num { color: var(--fg-dim); font-weight: 400; }

/* Row-identity badges — one per row, appended to the name cell.
 * Same visual vocabulary as the prior per-column tags but tightened so they
 * read as row-level labels rather than per-cell changes.
 */
.pi-row-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}
.pi-row-badge-new {
  background: var(--blue-bg);
  color: var(--blue-soft);
}
.pi-row-badge-gone {
  background: rgba(100, 116, 139, 0.18);
  color: var(--fg-mute);
  text-transform: none;
  font-size: 11px;
}

/* Ghost row columns: "was X" text instead of a full delta arrow */
.pi-delta-empty-ghost {
  color: var(--fg-mute);
  font-style: italic;
  font-size: 11px;
}

/* =============================================================
   v2 — Anchor eligibility, confidence tiers, dual-signal reality
   ============================================================= */

/* Grain cell: v2 eligibility block
   -------------------------------------------------------------
   Rejected grains get a subtle strikethrough-grey treatment so
   the rep can see "this grain was loaded but couldn't anchor"
   vs "this grain has no data at all". The anchor badge sits at
   the bottom of the cell and color-codes by confidence tier. */
.grain-cell .gr-eligibility {
  display: block;
  margin-top: 8px;
  padding: 3px 8px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: var(--r-pill);
  line-height: 1.4;
}
.grain-cell .gr-rejected-reason {
  color: var(--fg-mute);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border-soft);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.grain-cell.grain-rejected { opacity: 0.72; }
.grain-cell.grain-rejected:hover { opacity: 1; }

/* Anchor badges, color-coded by confidence tier */
.grain-cell .gr-anchor-badge {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}
.grain-cell .gr-anchor-badge.conf-high {
  background: var(--green-bg);
  color: var(--green-soft);
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.grain-cell .gr-anchor-badge.conf-medium {
  background: var(--blue-bg);
  color: var(--blue-soft);
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.grain-cell .gr-anchor-badge.conf-low {
  background: var(--amber-bg);
  color: var(--amber-soft);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
/* Quotes-anchored grain gets a purple accent to distinguish from
   completed-anchored at a glance. */
.grain-cell.anchor-live[data-anchor-source="quotes"] {
  border-color: var(--purple);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3);
}

/* Three-price card: confidence label in header + border accent
   -------------------------------------------------------------
   The card already has a thin top accent bar for each tier. We
   add a small pill in the h2 right side showing "HIGH confidence
   · completed anchor (n=47)" so the rep trusts the numbers at a
   glance — no hunting for meta. */
.conf-label {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  align-self: center;
}
.conf-label.conf-high {
  background: var(--green-bg);
  color: var(--green-soft);
  border-color: rgba(16, 185, 129, 0.35);
}
.conf-label.conf-medium {
  background: var(--blue-bg);
  color: var(--blue-soft);
  border-color: rgba(59, 130, 246, 0.35);
}
.conf-label.conf-low {
  background: var(--amber-bg);
  color: var(--amber-soft);
  border-color: rgba(245, 158, 11, 0.35);
}

/* Reality check: unanchored (yellow) state
   -------------------------------------------------------------
   Sits between green "within range" and amber "flag" — it says
   "we don't have good enough data at this grain to decide". */
.reality-flag-unanchored {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
.reality-flag-unanchored .icon {
  background: var(--fg-mute) !important;
  color: var(--fg) !important;
}
.reality-flag-unanchored .body b {
  color: var(--amber-soft) !important;
}

.reality-second-opinion {
  color: var(--fg-dim);
  border-left: 2px solid var(--border-hi);
  padding-left: 8px;
}

/* Dual-signal reality mini-stats
   -------------------------------------------------------------
   When both completed AND quotes signals are available, show them
   side-by-side in a 2-col grid instead of the legacy single-col
   mean/stddev boxes. Each signal gets its own panel with a verdict
   pill so the rep immediately sees disagreement if it exists. */
.reality-ministats.reality-dual {
  grid-template-columns: 1fr 1fr;
}
.reality-ministats .box .verdict-pill {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
.verdict-pill.verdict-high {
  background: var(--amber-bg);
  color: var(--amber-soft);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.verdict-pill.verdict-low {
  background: rgba(239, 68, 68, 0.12);
  color: #FCA5A5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.verdict-pill.verdict-within {
  background: var(--green-bg);
  color: var(--green-soft);
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.reality-ministats .box.signal-completed .lbl { color: var(--blue-soft); }
.reality-ministats .box.signal-quotes .lbl    { color: var(--purple); }

/* Similar-vehicles panel
   -------------------------------------------------------------
   Structured like recentCard but with the description column
   taking the visual weight — that's the whole point of the panel. */
#similarCard { margin-top: 16px; }
#similarCard h2 { display: flex; align-items: center; gap: 10px; }
#similarCard h2 .meta { color: var(--fg-mute); font-size: 12px; font-weight: 400; }
#similarCard .su-notes {
  color: var(--fg-2);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Recent-sales YMM cell v2 — secondary description line */
#recentBody td .ymm-main { font-weight: 500; }
#recentBody td .ymm-desc { margin-top: 2px; }


/* =========================================================================
 * Patch 01 / 10 / 11 (2026-04-22) — EV-max card + yard cost floor + elasticity chart
 * =========================================================================
 * Palette uses the existing CSS variables. Gold accent (--gold) signals the
 * EV-max card's role as the "make money" recommendation; --border-soft keeps
 * it visually coherent with the reality-check and pricing-signal blocks
 * it sits between.
 * ========================================================================= */

/* -------- EV-max card -------- */
.ev-max-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 18px 22px;
  margin-top: 14px;
  color: var(--fg);
  box-shadow: var(--shadow-card);
}
.ev-max-card.hide { display: none; }
.ev-max-card.ev-max-unavailable {
  border-left-color: var(--fg-faint);
  opacity: 0.7;
  padding: 10px 16px;
}
.ev-max-unavailable-note {
  font-size: 12px;
  font-style: italic;
  color: var(--fg-mute);
}
/* F05/4c (2026-04-29) — countdown hint when EV-Max is within 1-3 sales of unlocking */
.ev-max-unlock-hint {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.2px;
}
.ev-max-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ev-max-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.ev-max-subtitle {
  font-size: 11px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ev-max-price-row { margin: 10px 0 14px; }
.ev-max-price {
  font-size: 38px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.5px;
  cursor: help;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.ev-max-stats {
  display: flex;
  gap: 22px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ev-max-stat { display: flex; flex-direction: column; min-width: 90px; }
.ev-max-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--fg-mute);
  letter-spacing: 0.5px;
}
.ev-max-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.ev-max-uplift {
  font-size: 13px;
  color: var(--green-soft);
  font-weight: 600;
  margin-top: 6px;
  cursor: help;
}
.ev-max-uplift-negative { color: var(--danger); }
.ev-max-provenance {
  font-size: 10px;
  color: var(--fg-faint);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* -------- Yard cost floor panel -------- */
.yard-cost-floor {
  margin-top: 10px;
  padding: 12px 16px;
  background: var(--bg-panel-2);
  border-left: 2px solid var(--fg-faint);
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-2);
}
.yard-cost-floor.hide { display: none; }
.ycf-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-mute);
  margin-bottom: 4px;
}
.ycf-spread { color: var(--fg); }
.ycf-spread b { color: var(--gold); font-variant-numeric: tabular-nums; }
.ycf-breakeven {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
  color: var(--fg-2);
}
.ycf-breakeven b { font-variant-numeric: tabular-nums; }
.ycf-breakeven.ycf-good { border-left: 2px solid var(--green); padding-left: 8px; }
.ycf-breakeven.ycf-iffy { border-left: 2px solid var(--amber); padding-left: 8px; }
.ycf-breakeven.ycf-bad  { border-left: 2px solid var(--danger); padding-left: 8px; }

/* -------- Elasticity chart -------- */
.elasticity-chart {
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.elasticity-chart.hide { display: none; }
.ec-title {
  font-size: 13px;
  color: var(--fg);
  font-weight: 600;
}
.ec-subtitle {
  font-size: 11px;
  color: var(--fg-mute);
  margin-bottom: 10px;
}
.ec-svg { display: block; width: 100%; height: auto; }
.ec-legend {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--fg-mute);
  margin-top: 8px;
  flex-wrap: wrap;
}
.ec-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.ec-swatch {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 1px;
}

/* =========================================================================
 * Elite additions (2026-04-25) — Gaps #1, #5 (light), #6
 * Matching palette from the existing patch-era styles.
 * ========================================================================= */

/* -------- Gap #6 — Cost drift banner -------- */
.cost-drift-banner {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}
.cost-drift-banner.hide { display: none; }
.cost-drift-banner.cd-critical {
  background: var(--danger-bg, rgba(239,68,68,0.15));
  border-left: 3px solid var(--danger, #EF4444);
  color: var(--fg);
}
.cost-drift-banner.cd-warning {
  background: var(--amber-bg);
  border-left: 3px solid var(--amber);
  color: var(--fg);
}
.cost-drift-banner.cd-info {
  background: var(--bg-panel-2);
  border-left: 3px solid var(--fg-dim);
  color: var(--fg-2);
}
.cost-drift-banner .cd-icon { font-size: 15px; }
.cost-drift-banner .cd-body { }

/* -------- Gap #1 — Min profitable floor panel -------- */
.min-profitable-floor {
  margin-top: 10px;
  padding: 12px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  font-size: 13px;
}
.min-profitable-floor.hide { display: none; }
.mpf-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--fg-mute); margin-bottom: 4px;
}
.mpf-main { color: var(--fg); margin-bottom: 8px; }
.mpf-main b { font-variant-numeric: tabular-nums; color: var(--fg); }
.mpf-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.mpf-badge {
  font-size: 11px; padding: 3px 8px; border-radius: 4px;
  font-weight: 500;
}
.mpf-above {
  background: var(--green-bg);
  color: var(--green-soft);
  border: 1px solid var(--green);
}
.mpf-below {
  background: var(--danger-bg, rgba(239,68,68,0.15));
  color: var(--danger, #EF4444);
  border: 1px solid var(--danger, #EF4444);
}

/* -------- Gap #5 (light) — Parent grain card -------- */
.parent-grain-card {
  margin-top: 10px;
  padding: 12px 16px;
  background: var(--bg-panel-2);
  border-left: 2px solid var(--fg-dim);
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-2);
}
.parent-grain-card.hide { display: none; }
.pgc-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--fg-mute); margin-bottom: 6px;
}
.pgc-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 8px; }
.pgc-stat { display: flex; flex-direction: column; }
.pgc-stat-label {
  font-size: 10px; text-transform: uppercase; color: var(--fg-mute); letter-spacing: 0.5px;
}
.pgc-stat-value {
  font-size: 14px; font-weight: 600; color: var(--fg);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.pgc-note { font-size: 11px; color: var(--fg-mute); font-style: italic; }

/* =========================================================================
 * Quote-tool parity + official metrics glossary refresh (2026-05-01)
 * ========================================================================= */

/* Rep quote screen now keeps the same table geometry as admin/manager screens.
   Sensitive values are server-hidden; these placeholders preserve alignment. */
.locked-fin {
  color: var(--fg-mute) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.locked-fin-stat .ev-max-stat-value {
  color: var(--fg-mute);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.similar-scope {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -------- Admin metrics glossary: polished searchable reference -------- */
.glossary-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-color: rgba(96,165,250,0.22);
  background:
    radial-gradient(circle at 10% 0%, rgba(59,130,246,0.20), transparent 32%),
    radial-gradient(circle at 92% 4%, rgba(16,185,129,0.14), transparent 28%),
    var(--bg-panel);
}
.glossary-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.65), rgba(16,185,129,0.45), transparent);
  pointer-events: none;
}
.glossary-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  padding: 26px 28px 22px;
  border-bottom: 1px solid rgba(51,65,85,0.9);
}
.glossary-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--blue-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.glossary-kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-soft);
  box-shadow: 0 0 18px rgba(52,211,153,0.75);
}
.glossary-hero h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.glossary-hero p {
  max-width: 820px;
  margin: 9px 0 0;
  color: var(--fg-2);
  font-size: 14px;
}
.glossary-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 240px;
}
.glossary-hero-badges span,
.glossary-count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid rgba(148,163,184,0.20);
  border-radius: var(--r-pill);
  background: rgba(15,23,42,0.28);
  color: var(--fg-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
#glossaryStats {
  color: var(--green-soft);
  border-color: rgba(16,185,129,0.35);
  background: rgba(16,185,129,0.10);
}
.glossary-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) 1.5fr;
  gap: 14px;
  align-items: center;
  padding: 16px 28px;
  background: rgba(15,23,42,0.22);
  border-bottom: 1px solid var(--border-soft);
}
.glossary-searchbox {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15,23,42,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.glossary-searchbox span {
  color: var(--fg-mute);
  font-size: 18px;
  line-height: 1;
}
.glossary-searchbox input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font-size: 14px;
}
.glossary-searchbox input::placeholder { color: var(--fg-mute); }
.glossary-chips {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.glossary-chip {
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: rgba(30,41,59,0.78);
  color: var(--fg-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.glossary-chip:hover {
  border-color: var(--border-hi);
  color: var(--fg);
  transform: translateY(-1px);
}
.glossary-chip.active {
  border-color: rgba(96,165,250,0.72);
  color: var(--fg);
  background: var(--blue-bg);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,0.20);
}
.glossary-body-shell {
  padding: 22px 28px 28px;
}
.glossary-section + .glossary-section { margin-top: 26px; }
.glossary-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 12px;
}
.glossary-cat-heading {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.glossary-cat-desc {
  margin: 4px 0 0;
  color: var(--fg-dim);
  font-size: 12px;
  max-width: 880px;
}
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.glossary-entry {
  position: relative;
  min-height: 220px;
  padding: 18px;
  border: 1px solid rgba(51,65,85,0.95);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(38,52,73,0.72), rgba(30,41,59,0.78));
  box-shadow: 0 14px 35px -30px rgba(0,0,0,0.9);
}
.glossary-entry::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, var(--blue), var(--green));
  opacity: 0.78;
}
.glossary-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.glossary-term {
  margin: 0;
  color: var(--fg);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.glossary-tags {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 210px;
}
.glossary-tags span {
  padding: 2px 7px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: var(--r-pill);
  background: rgba(15,23,42,0.25);
  color: var(--fg-mute);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.glossary-what {
  margin: 10px 0 13px;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.55;
}
.glossary-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.glossary-details {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(15,23,42,0.20);
  overflow: hidden;
}
.glossary-details summary {
  padding: 10px 12px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.glossary-details summary::-webkit-details-marker { display: none; }
.glossary-details summary::before {
  content: '+';
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  border: 1px solid var(--border-hi);
  border-radius: 50%;
  color: var(--blue-soft);
  font-size: 12px;
  font-weight: 800;
}
.glossary-details[open] summary::before { content: '–'; }
.glossary-detail-body {
  padding: 0 12px 12px 35px;
  color: var(--fg-dim);
  font-size: 12px;
  line-height: 1.55;
}
.glossary-dev-body {
  color: #A7B5C9;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.01em;
}
.glossary-aliases {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148,163,184,0.17);
  color: var(--fg-mute);
  font-size: 11px;
}
.glossary-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 180px;
  border: 1px dashed var(--border-hi);
  border-radius: 14px;
  background: rgba(15,23,42,0.18);
  text-align: center;
}
.glossary-empty-title {
  color: var(--fg);
  font-size: 15px;
  font-weight: 750;
}

@media (max-width: 1100px) {
  .glossary-hero,
  .glossary-section-head { flex-direction: column; align-items: stretch; }
  .glossary-hero-badges,
  .glossary-chips { justify-content: flex-start; }
  .glossary-toolbar { grid-template-columns: 1fr; }
  .glossary-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .glossary-hero,
  .glossary-toolbar,
  .glossary-body-shell { padding-left: 18px; padding-right: 18px; }
  .glossary-grid { grid-template-columns: 1fr; }
  .glossary-entry { min-height: 0; }
}