/* Copyright (c) 2026 LandmarkLouie. Award-polish layer — additive & reversible.
 * Loaded LAST. Enforces the design-tokens vocabulary across components that
 * were styled ad-hoc. Safe: no layout-structure overrides, only feel + a
 * canonical pill/empty-state/skeleton system for components to adopt. To revert,
 * remove the single <link> for this file in index.html.
 */

/* ── #12 Tabular numerals — money/metrics align in columns ───────────────── */
.home-kpi .hk-val,
.cs-kpi .value,
.num, td.r, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── #11 Micro-interactions: button press + focus-visible ────────────────── */
button, .btn { transition: transform .08s ease, box-shadow .15s ease, background .15s ease, filter .15s ease; }
button:active:not(:disabled), .btn:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, a:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-gold, #c9a84c);
  outline-offset: 2px;
}

/* ── #9 / #7 Canonical urgency + status pill system (for adoption) ───────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  text-transform: none; letter-spacing: .01em;
}
.pill--critical { background: rgba(239,68,68,.14);  color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }
.pill--warning  { background: rgba(245,158,11,.14); color: #fcd34d; border: 1px solid rgba(245,158,11,.25); }
.pill--ok       { background: rgba(34,197,94,.14);  color: #86efac; border: 1px solid rgba(34,197,94,.25); }
.pill--info     { background: rgba(59,130,246,.14); color: #93c5fd; border: 1px solid rgba(59,130,246,.25); }
.pill--neutral  { background: rgba(107,114,128,.14);color: #d1d5db; border: 1px solid rgba(107,114,128,.25); }
.pill--brand    { background: rgba(201,168,76,.16); color: var(--color-gold-text, #8a6520); }

/* ── #13 Empty-state component (for adoption across blank screens) ───────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px; color: var(--color-ink-2, #475569);
}
.empty-state .es-icon { font-size: 40px; margin-bottom: 12px; opacity: .9; }
.empty-state .es-title { font-size: 15px; font-weight: 700; color: var(--color-ink, #1a1a2e); margin-bottom: 6px; }
.empty-state .es-msg { font-size: 13px; max-width: 360px; line-height: 1.5; margin-bottom: 16px; }
.empty-state .es-cta {
  background: var(--gradient-gold, #8a6520); color: #f8f6f0; border: none;
  padding: 9px 18px; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer;
}

/* ── #11 Skeleton loading shimmer (opt-in: add class="skeleton") ─────────── */
@keyframes ll-shimmer { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } }
.skeleton {
  background: linear-gradient(90deg, #eef1f6 25%, #e2e8f0 37%, #eef1f6 63%);
  background-size: 720px 100%; animation: ll-shimmer 1.3s infinite linear;
  border-radius: 8px; min-height: 14px; color: transparent !important;
}
.skeleton-card { height: 92px; border-radius: 12px; }

/* ── Success flash (add/remove class="just-saved" to confirm a save) ─────── */
@keyframes ll-flash { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 100% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } }
.just-saved { animation: ll-flash .8s ease-out 1; }

/* ── #5 Four Square — the iconic 2×2 worksheet, on-screen ────────────────── */
/* Framed as a generated deliverable: gold output-zone separating it from the
 * input form above. Navy frame around the quadrants reads as a print artifact. */
.fsq-wrap { margin: 10px 0 18px; padding: 14px; background: var(--color-gold-bg, #fdf8ee); border: 1px solid rgba(201,168,76,.35); border-radius: 14px; }
.fsq {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: #0d1b2a; border: 3px solid #0d1b2a; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,29,69,.10));
}
.fsq-cell { background: #0a0f1e; padding: 16px 18px; min-height: 92px; display: flex; flex-direction: column; }
.fsq-cell .fsq-hd { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.fsq-cell .fsq-val { font-size: 25px; font-weight: 800; color: #0d1b2a; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.fsq-cell .fsq-sub { font-size: 11px; color: #64748b; margin-top: 3px; }
/* On-brand quadrant labels — no off-system blue, no alarming red. */
.fsq-price .fsq-hd { color: #0d1b2a; }
.fsq-trade .fsq-hd { color: #16a34a; }
.fsq-down  .fsq-hd { color: #a67c32; }
/* Payment is the confident answer, not an alarm: gold-tinted "answer" cell with navy figures. */
.fsq-pay   { background: var(--color-gold-bg, #fdf8ee); }
.fsq-pay   .fsq-hd  { color: #8a6520; }
.fsq-pay   .fsq-val { color: #0d1b2a; }

/* ── #3 Chat-landing quick-action chips — richer card grid ───────────────── */
.qa-chip {
  text-align: left; padding: 14px; background: #0a0f1e;
  border: 1px solid #e5e9f0; border-radius: 12px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
.qa-chip:hover { transform: translateY(-2px); border-color: var(--color-gold, #c9a84c); box-shadow: 0 6px 18px rgba(201,168,76,.18); }

/* ── #14 Dismissible-banner helper: collapse animation when .is-collapsed ── */
.aged-banner, .alert-banner { transition: max-height .25s ease, opacity .2s ease, padding .2s ease; overflow: hidden; }
.aged-banner.is-collapsed, .alert-banner.is-collapsed { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
 * GOLD-STANDARD ELITE LAYER — typography, graphics & layout refinement.
 * Additive & reversible (feel only, no structural overrides). Loaded last.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Crisp, premium type rendering everywhere ─────────────────────────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; font-kerning: normal; }

/* ── Elite display serif for the brand wordmarks (upgrade from system serif) ── */
:root { --font-serif: 'Fraunces', 'Georgia', 'Times New Roman', serif; }
.login-logo, .inv-brand, .logo, .wordmark, .brand-mark {
  font-family: 'Fraunces', 'Georgia', serif !important;
  font-optical-sizing: auto; font-weight: 600; letter-spacing: .01em;
}

/* ── Tabular figures on every prominent metric (money/counts align) ───────── */
.hk-val, .hkpi-val, .inv-kpi-val, .mt-kpi .kpi-val, .kpi-val,
.cs-kpi .value, .pv-num, .mmr-val, .fsq-val, .stat-val,
.num, td.r, .tabular, [data-metric] {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "kern" 1;
}

/* ── Refined heading micro-typography ─────────────────────────────────────── */
.hkpi-label, .inv-kpi-label, .kpi-label, .nav-section-label, .inv-card-title {
  font-feature-settings: "kern" 1; }
.inv-kpi-val, .hkpi-val, .hk-val { letter-spacing: -0.4px; }

/* ── Elite elevation & card feel (token-driven, smoother lift) ────────────── */
.inv-card, .inv-kpi, .hkpi, .home-kpi {
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,20,50,.06));
  transition: transform .14s var(--ease-out, ease), box-shadow .2s ease, border-color .2s ease;
}
.inv-card:hover, .inv-kpi:hover, .hkpi:hover, .home-kpi:hover, .mt-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,29,69,.10));
}
/* .home-kpi / .mt-kpi are the home-dashboard stat tiles. They were in the base
   shadow+transition rule above but were left out of the :hover lift — re-assert
   the transition here so the lift is smooth even if a later sheet resets it. */
.home-kpi, .mt-kpi { transition: transform .14s ease, box-shadow .2s ease; }

/* ── Premium thin scrollbars (don't fight the warm palette) ───────────────── */
* { scrollbar-width: thin; scrollbar-color: #c8cedb transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c8cedb; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #aab3c4; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
/* Dark sidebar gets a darker thumb */
.sidebar ::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background: #3a465c; background-clip: content-box; }

/* ── Selection in brand gold ──────────────────────────────────────────────── */
::selection { background: rgba(201,168,76,.28); }

/* ── Elite chart polish (2026-06-05) — premium depth + crisp rendering ─────── */
.home-card canvas,
#tower-overlay canvas,
.nm-body canvas { filter: drop-shadow(0 5px 14px rgba(13,27,42,.07)); }
/* Smooth, gold-standard hover lift on interactive KPI/stat cards */
.home-kpi { transition: transform .14s ease, box-shadow .14s ease; }
.home-kpi[onclick]:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13,27,42,.10); }

/* ── Elite progress/score bars (2026-06-05) — glossy depth + smooth fill ───── */
/* Works over any inline base colour: a top highlight + soft bottom shade, plus an
   eased width animation so bars feel like premium meters, consistent with charts. */
.gl-bar-fill, .hbar-fill, .cs-bar-val { position: relative; overflow: hidden;
  transition: width .55s cubic-bezier(.4,0,.2,1); }
.gl-bar-fill::after, .hbar-fill::after, .cs-bar-val::after { content: '';
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.07) 100%); }

/* ── Universal "live" pulse (2026-06-05) — a real-time product shouldn't have static
   live dots. Green breathing ring; reduced-motion users get a calm solid dot. ─────── */
@keyframes ll-live-ring { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)} 70%{box-shadow:0 0 0 6px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)} }
.ll-live-dot { animation: ll-live-ring 2s infinite; }
@media (prefers-reduced-motion: reduce){ .ll-live-dot { animation: none; } }

/* ── "Louie is thinking" — a distinctive AI-state, not a generic spinner (2026-06-05).
   A breathing flame (Louie's mark) + gold thinking dots. ───────────────────────── */
.louie-thinking{display:inline-flex;align-items:center;gap:9px;color:#5c6478;font-size:13.5px;font-weight:500}
.louie-thinking .lt-flame{font-size:16px;line-height:1;animation:lt-flame 1.4s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(201,168,76,.5))}
@keyframes lt-flame{0%,100%{transform:scale(1) rotate(-2deg);opacity:.82}50%{transform:scale(1.16) rotate(2deg);opacity:1}}
.louie-thinking .typing-dots span{background:#c9a84c}
@media (prefers-reduced-motion: reduce){.louie-thinking .lt-flame{animation:none}}

/* ── Four-step type system (2026-06-05) — one hierarchy used everywhere (Problem 5).
   1) serif → hero moments only (the LANDMARK wordmark; untouched).
   2) DATA → large tabular-numeral sans for every live number.
   3) LABEL → tracked all-caps sans for category names & stat labels.
   4) BODY → sentence-case sans for everything else (the default). ──────────────── */
:root{ --type-data-spacing:-0.4px; --type-label-spacing:0.06em; }
/* (2) every data-number class renders with tabular figures so columns of numbers
   line up and never jitter as they update — the single biggest "typeset → alive" win. */
.hk-val,.hkpi-val,.inv-kpi-val,.kpi-val,.mt-kpi .kpi-val,.stat-val,.rpt-kpi .val,
.gl-store .gl-metric-vals,.home-kpi .hk-val,.es-count,.metric-val,.big-num,.ll-data{
  font-variant-numeric:tabular-nums; letter-spacing:var(--type-data-spacing); }
/* (3) one label treatment — tracked caps, consistent weight/colour. */
.ll-label,.home-card-title,.kpi-label,.stat-label,.hk-lbl{
  text-transform:uppercase; letter-spacing:var(--type-label-spacing); font-weight:700; }
/* utility steps for new components */
.t-data{ font-size:31px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:var(--type-data-spacing); color:#0d1b2a; }
.t-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:var(--type-label-spacing); color:#94a3b8; }
.t-body{ font-size:14px; font-weight:400; line-height:1.5; color:#334155; }

/* ═══════════════════════════════════════════════════════════════════════════
 * DESIGN AUDIT v2 — structural + animation fixes
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── #7 Louie Says banner → dark surface + gold left border ──────────────── */
#louie-says-banner, [data-louie-banner], .louie-says-bar {
  background: rgba(13,27,42,.97) !important;
  border: 1px solid rgba(201,168,76,.25) !important;
  border-left: 3px solid #c9a84c !important;
  border-radius: 8px !important;
  color: #e8edf4 !important;
  padding: 10px 14px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.35) !important;
}
/* Inline-styled "Louie Says" text in JS-built cards — override the blue */
#louie-says-banner span[style*="color:#2B7FE0"],
[data-louie-banner] span[style*="color:#2B7FE0"] {
  color: #c9a84c !important;
}

/* ── #10 Hide mobile-only UI at desktop widths ────────────────────────────── */
@media (min-width: 1024px) {
  #ll-right-chat-tab { display: none !important; }
  /* Car Guy Mode bottom action bar — fixed bar generated by JS */
  #cg-walkin-btn, #cg-text-btn, #cg-louie-btn {
    /* These buttons live inside a fixed bottom bar; hide the wrapper on desktop
       by targeting the bar itself. JS builds it inline so we match its z-index. */
  }
}

/* ── #16 Command chip / cg-pill font size ─────────────────────────────────── */
.cg-pill { font-size: 12.5px !important; letter-spacing: .03em !important; }

/* ── #17 RIGHT CHAT TAB — unify to gold to match brand, not blue ─────────── */
#ll-right-chat-tab {
  background: #c9a84c !important;
  color: #0d1b2a !important;
}
#ll-right-chat-tab:hover { background: #e0bc5e !important; }

/* ── #12 micBreath — enhance the voice button idle state with gold ring ───── */
#voice-btn:not([data-active]):not(.voice-hero) {
  box-shadow: 0 0 0 0 rgba(201,168,76,.0);
  animation: micBreath 3s ease-in-out infinite, micRing 4s ease-in-out infinite !important;
}
@keyframes micRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
  50%      { box-shadow: 0 0 0 5px rgba(201,168,76,.18); }
}

/* ── #14 readyGlow on primary CTA buttons in high-urgency context ─────────── */
.cg-walkin-btn, button.urgent, .ll-btn-primary[data-urgent],
[data-priority="high"] .ll-btn-primary, .cta-primary-urgent {
  animation: readyGlow 2.6s ease-in-out infinite !important;
}

/* ── #15 lpPulseGold on Louie Score chip ─────────────────────────────────── */
#louie-score-chip {
  animation: lpPulseGold 2.4s ease-in-out infinite !important;
}
/* Already has display:none by default; only pulses when visible */
#louie-score-chip[style*="inline-flex"], #louie-score-chip[style*="flex"] {
  animation: lpPulseGold 2.4s ease-in-out infinite !important;
}

/* ── #8 Weather floor call — elevated card with animated icon ────────────── */
#weather-strip {
  margin: 0 12px 8px;
}
#weather-strip .ws-bar {
  border-radius: 12px !important;
  border: 1px solid rgba(251,191,36,.3) !important;
  border-left: 3px solid #fbbf24 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04) !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
}
/* Animate the weather icon with a gentle float */
@keyframes wsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
#weather-strip .ws-ico {
  animation: wsFloat 2.8s ease-in-out infinite;
  display: inline-block;
  font-size: 22px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * DESIGN AUDIT v3 — structural improvements
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── SVG stroke-width system — 16px icons=1.5, 20px icons=2, 24px icons=2 ── */
/* Sidebar nav rail icons are 16×16 — use 1.5 */
#ll-quick-nav svg { stroke-width: 1.5 !important; }
/* Chat header icons are 18-19px — keep at 2 */
.chat-header svg { stroke-width: 2 !important; }
/* Eliminate the non-standard 2.2/2.4/2.5 weights on sized icon containers */
.ll-qnav-btn svg, .nm-back svg { stroke-width: 1.5 !important; }
/* Notification bell and header action icons */
#notification-bell svg { stroke-width: 2 !important; }

/* ── content-visibility: hidden on all inactive nm-overlays ─────────────────
   Tells the browser to skip layout + paint for hidden overlays entirely.
   Same performance benefit as lazy-mounting with zero code risk.
   The browser still knows the element exists (for getElementById), but
   defers all rendering work until the element becomes visible.
   2026-07-08: excluded .ll-paged (LLRoute's R._enter() marker class for routed
   "nm"/"board" kind tools, e.g. Market Pulse). That system intentionally clears
   the inline style (ov.style.display='') and drives visibility entirely through
   .ll-paged.ll-kind-nm{display:flex!important} in the CSS class instead — with
   no inline "display: flex/block" text, the :not() chain below always matched
   and force-hid the entire subtree's rendering even while the overlay was
   genuinely open (real layout box from the !important class, zero paint from
   content-visibility). Live-repro'd as Market Pulse opening to a real-dimensioned
   but completely unpainted black rectangle — no head, no close button, no body
   content, un-clickable — with only Escape (which doesn't depend on paint state)
   able to close it. ── */
.nm-overlay[style*="display: none"]:not(.ll-paged),
.nm-overlay:not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not(.ll-paged) {
  content-visibility: hidden;
  contain-intrinsic-size: 0 600px;
}

/* ── CSS cascade resolution for top-5 conflict selectors ───────────────────
   These selectors have 5-7 conflicting definitions across 53 style blocks.
   This block is the SINGLE authoritative definition, loaded last, with
   high-specificity (body prefix) so it wins without !important.
   The conflicting earlier rules remain but are now overridden cleanly.    ── */
body .home-kpi .hk-val {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 800 !important;
  letter-spacing: -1.5px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: #0a0f1e;
}
body .home-kpi .hk-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}
body .home-chip {
  background: #0f1c2e;
  border: 1px solid rgba(201,168,76,.25);
  color: #c9a84c;
  padding: 6px 13px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: background .15s, border-color .15s, transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
body .home-chip:hover {
  background: rgba(201,168,76,.15);
  border-color: rgba(201,168,76,.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(201,168,76,.15);
}
body .ll-nav-group-hdr {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a5568;
  padding: 10px 14px 4px;
  border-top: 1px solid rgba(255,255,255,.04);
}

/* ── kbd badges — dark-mode treatment everywhere ────────────────────────── */
kbd {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 4px !important;
}
/* Exception: kbd inside generated print popups keeps default (they're light-mode) */
/* The inline override on search-shortcut-hint already handles the specific case */

/* ── clamp() on hero exposure number ────────────────────────────────────── */
.ad-odometer, .hkpi-val, .t-data {
  font-size: clamp(28px, 4.5vw, 56px) !important;
}

/* ── White elements on dark background — force dark surfaces ─────────────── */
.gl-modal { background: #0d1b2a !important; color: #0a0f1e !important; }
.rpt-tbl th { background: #0e1a2d !important; color: #94a3b8 !important; }
.mi-listings-table-wrap { background: #0a1525 !important; }
.mi-tab { background: #0d1b2a !important; color: #94a3b8 !important; }
.mi-tab.active { background: rgba(201,168,76,.1) !important; color: #c9a84c !important; border-bottom-color: #c9a84c !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN AUDIT v4 — Rendering precision + motion system + a11y
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. font-synthesis: none — use only what's actually loaded, no synthetic
      faux-bold or faux-italic. Forces missing weights to surface as obvious
      rendering artifacts during dev so they get fixed, not papered over.    */
body { font-synthesis: none; }
@font-face { font-synthesis: none; }

/* 2. hk-val / KPI number font-weight — DM Mono 400 is the lowest loaded
      weight. Synthesized 300 produces inconsistent stroke joins on sub-pixel
      rendering. The .cu count-up span must match the parent exactly so the
      dollar sign and the animated number share one typeface + weight.        */
body .home-kpi .hk-val { font-weight: 500 !important; }
body .home-kpi .hk-val .cu,
body .home-kpi .hk-val span:not([title]) {
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-weight: 500 !important;
}

/* 3. "?" explain button — visually separated from the KPI number.
      Was: inline 11px "?" directly adjacent → reads as "974?".
      Now: small gold circle with 8px gap, positioned as a distinct info icon. */
button[title="Explain this number"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 15px !important;
  height: 15px !important;
  margin-left: 8px !important;
  padding: 0 !important;
  vertical-align: middle !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: rgba(201, 168, 76, 0.55) !important;
  background: rgba(201, 168, 76, 0.06) !important;
  border: 1px solid rgba(201, 168, 76, 0.22) !important;
  border-radius: 50% !important;
  line-height: 1 !important;
  transition: background .12s ease, border-color .12s ease, color .12s ease !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
button[title="Explain this number"]:hover {
  color: #c9a84c !important;
  background: rgba(201, 168, 76, 0.14) !important;
  border-color: rgba(201, 168, 76, 0.45) !important;
}

/* 4. Gold scrollbars — Chrome/WebKit. Current: bright-gray thumb jarring
      on dark bg. Fix: gold-tinted 35% opacity thumb, 60% on hover.
      (Firefox: scrollbar-color shorthand in the existing global rule above
      already correct; only WebKit was wrong.)                                */
::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.28) !important;
  background-clip: content-box !important;
  border: 2px solid transparent !important;
  border-radius: 6px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 168, 76, 0.52) !important;
  background-clip: content-box !important;
}
/* Firefox two-value scrollbar-color (thumb track) */
* { scrollbar-color: rgba(201,168,76,.32) transparent !important; }

/* 5. "DEALS IN BOX" / "CONTRACTS OUT" / "PVR MTD" contrast fix.
      Was: rgb(94,114,141) = 3.85:1. Fix: ≥5.0:1 on darkest bg.
      Targets: .war-kpi-label and any muted label on a dark surface.          */
.war-kpi-label, .war-label, .wkpi-lbl,
[class*="war"][class*="label"], [class*="war"][class*="lbl"],
#war-pulse .label, #war-pulse .lbl {
  color: #8aaabf !important; /* rgb(138,170,191) — 5.4:1 */
}

/* 6. scroll-behavior: smooth — every main scroll container. Respects
      prefers-reduced-motion via the 21 existing @media rules above.          */
.home-dash, .ll-content, .nm-overlay .ll-modal,
.messages, .chat-messages, #chat-messages, .panel-body,
.inv-grid, .rpt-body, main { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .home-dash, .ll-content, .nm-overlay .ll-modal,
  .messages, .chat-messages, #chat-messages, .panel-body,
  .inv-grid, .rpt-body, main { scroll-behavior: auto; }
}

/* 7. will-change hints — GPU compositor layer pre-promotion for every
      element that animates. Prevents paint jank on simultaneous animations.
      Remove from elements that don't animate to free GPU memory.             */
.nm-overlay:not([style*="display: flex"]):not([style*="display:flex"]) {
  will-change: transform, opacity;
}
.home-kpi { will-change: transform, box-shadow; }
.home-card { will-change: transform; }
.ad-odometer, .hkpi-val { will-change: contents; }

/* 8. Transition duration tokens — 5 named values replace 23 arbitrary ones.
      Applied to the surfaces most frequently animated.                       */
:root {
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;
  --dur-reveal:  550ms;
}
button, .btn, a[onclick] { transition-duration: var(--dur-fast) !important; }
.nm-overlay, .ll-modal  { transition-duration: var(--dur-normal); }
.home-kpi, .home-card   { transition-duration: var(--dur-fast); }
.alertBannerIn, .war-card { transition-duration: var(--dur-normal); }

/* 9. Backdrop-filter hierarchy — side panels blur(8px), full-screen blur(16px).
      Replaces 4 inconsistent values (3/4/6/16px) with 2 semantic levels.    */
.nm-overlay[style*="display: flex"],
.nm-overlay[style*="display:flex"] {
  backdrop-filter: blur(16px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
}
.ll-slide-panel, .side-panel, .drawer {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* 10. Type scale custom properties — 10 named steps.
       Components can start adopting these; audit v5 will enforce them.       */
:root {
  --tx-2xs:  9px;
  --tx-xs:   11px;
  --tx-sm:   13px;
  --tx-base: 14px;
  --tx-md:   16px;
  --tx-lg:   18px;
  --tx-xl:   22px;
  --tx-2xl:  28px;
  --tx-3xl:  36px;
  --tx-hero: 52px;
}

/* 11. Baseline grid line-heights — 4px multiples for text nodes that don't
       need fluid clamping. Eliminates fractional-pixel baselines on labels.  */
.hk-lbl, .inv-kpi-label, .kpi-label, .nav-label,
.war-kpi-label, .stat-label, .tile-label,
.hkpi-label, .ll-kpi-label { line-height: 16px !important; }
.home-kpi .hk-val, .hkpi-val, .ad-odometer { line-height: 40px !important; }
.nav-label, .sidebar-label { line-height: 20px !important; }

/* ── ROLE AUDIT FIXES (v525) ─────────────────────────────────────────────── */

/* Close Coach hero tile — gold border + "SIGNATURE FEATURE" badge */
.cg-tile2[data-cgi="8"] {
  border-color: rgba(201,168,76,.55) !important;
  background: linear-gradient(135deg,#0d1f33 80%,rgba(201,168,76,.06)) !important;
  box-shadow: 0 0 0 1px rgba(201,168,76,.15) inset !important;
}
.cg-tile2[data-cgi="8"]::before {
  content: "SIGNATURE FEATURE";
  position: absolute;
  top: 10px; right: 12px;
  font-size: 9px; font-weight: 900;
  color: #c9a84c;
  letter-spacing: .08em;
}

/* UP! Blast tile — add missing description visibility */
.cg-tile2[data-cgi="10"] {
  border-color: rgba(239,68,68,.35) !important;
}

/* BDC Morning Brief chip — full-width banner style */
#bdc-fs-alert {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#bdc-fs-alert .alert-count { font-size: 24px; font-weight: 900; color: #ef4444; flex-shrink: 0; }
#bdc-fs-alert .alert-body { flex: 1; }
#bdc-fs-alert .alert-label { font-size: 11px; font-weight: 800; color: #ef4444; text-transform: uppercase; letter-spacing: .06em; }
#bdc-fs-alert .alert-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; line-height: 1.4; }
#bdc-fs-alert .alert-btn { background: #ef4444; color: #f8f6f0; border: none; padding: 8px 14px; border-radius: 7px; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; flex-shrink: 0; }

/* Morning Walk "Updated" timestamp  */
#morning-walk-updated {
  font-size: 10px;
  color: #475569;
  font-weight: 600;
  letter-spacing: .04em;
  margin-top: 2px;
}

/* Marketing Director role KPI strip — override generic label color */
/* (KPI data customization is server-side; these are visual polish overrides) */

/* ── Brain Command urgent pulse ─────────────────────────────────────── */
@keyframes brainPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,.6); }
  50%      { box-shadow: 0 0 0 8px rgba(201,168,76,0); }
}
.brain-btn-urgent {
  background: linear-gradient(135deg,#c9a84c,#f4d270) !important;
  color: #07111f !important;
  animation: brainPulse 2s infinite !important;
  font-weight: 900 !important;
}

/* ── Ticker bar — gold dollar amounts ────────────────────────────────── */
#ll-command-strip .cs-dollar { color: #c9a84c; font-weight: 800; }

/* ── UP! Text buttons — tap scale ───────────────────────────────────── */
#up-overlay button:active { transform: scale(0.95) !important; transition: transform .1s !important; }

/* ── Car-Guy tile START HERE badge ──────────────────────────────────── */
.cg-tile2[data-urgency="2"] .cg-start-here {
  color: #F5C842;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: absolute;
  top: 10px;
  right: 12px;
}

/* ── Close Coach scorecard ───────────────────────────────────────────── */
.rp-scorecard { background: #071220; border: 1px solid rgba(245,200,66,.2); border-radius: 14px; padding: 20px; margin-top: 14px; }
.rp-scorecard-grade { font-size: 52px; font-weight: 900; text-align: center; line-height: 1; margin-bottom: 4px; }
.rp-scorecard-label { font-size: 11px; font-weight: 800; text-align: center; letter-spacing: .08em; text-transform: uppercase; color: #475569; margin-bottom: 18px; }
.rp-scorecard-row { display: flex; gap: 12px; margin-bottom: 10px; align-items: flex-start; }
.rp-scorecard-tag { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #475569; flex-shrink: 0; width: 60px; padding-top: 2px; }
.rp-scorecard-val { font-size: 13px; color: #e0e8f4; line-height: 1.5; flex: 1; }
.rp-score-A { color: #22c55e; } .rp-score-B { color: #86efac; } .rp-score-C { color: #f59e0b; }
.rp-score-D { color: #fb923c; } .rp-score-F { color: #ef4444; }
.rp-improve-btn { width: 100%; background: linear-gradient(135deg,#F5C842,#d4a017); color: #07111f; border: none; padding: 12px; border-radius: 10px; font-weight: 900; font-size: 14px; cursor: pointer; font-family: inherit; margin-top: 14px; }

/* ── Ask Louie starter chips ─────────────────────────────────────────── */
.ll-starter-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 6px; }
.ll-starter-chip { background: rgba(43,127,224,.1); border: 1px solid rgba(43,127,224,.25); color: #93c5fd; border-radius: 16px; padding: 5px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s; white-space: nowrap; }
.ll-starter-chip:hover { background: rgba(43,127,224,.2); border-color: rgba(43,127,224,.45); }

/* ── Store Health header badge ───────────────────────────────────────── */
#ll-health-header-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.3);
  border-radius: 20px; padding: 3px 9px; font-size: 11px; font-weight: 800;
  color: #16a34a; cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
#ll-health-header-badge:hover { background: rgba(22,163,74,.2); }
#ll-health-header-badge .hb-grade { font-size: 13px; font-weight: 900; }

/* ── Nav active state — gold underline + bold ────────────────────────── */
.nav-dept-header.nav-dept-active { border-left: 2px solid #c9a84c; padding-left: 6px; }
.nav-dept-header.nav-dept-active .dept-label { color: #e6c878 !important; font-weight: 800 !important; }

/* ── GM Morning Walk share button ────────────────────────────────────── */
.mw-share-btn { flex: 1; min-width: 140px; background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.35); color: #c9a84c; padding: 11px 16px; border-radius: 9px; font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; }
.mw-share-btn:hover { background: rgba(201,168,76,.2); }

/* ── Chat History — Louie pinned card ───────────────────────────────── */
.louie-pinned-card {
  background: linear-gradient(135deg, rgba(201,168,76,.08), rgba(43,127,224,.06));
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 10px; margin: 8px 10px 2px; padding: 10px 12px; cursor: pointer;
}
.louie-pinned-card:hover { background: rgba(201,168,76,.12); }
.louie-pinned-label { font-size: 9px; font-weight: 800; color: #c9a84c; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.louie-pinned-text { font-size: 12px; color: #cbd5e1; line-height: 1.5; }

/* ── War Room: critical countdown pulse (<30 min to funding cutoff) ─── */
@keyframes criticalPulse {
  0%,100% { color: #ef4444; text-shadow: 0 0 0 rgba(239,68,68,0); }
  50%      { color: #ff6b6b; text-shadow: 0 0 14px rgba(239,68,68,.7); }
}
.wr-critical-clock { animation: criticalPulse 1s ease-in-out infinite !important; }

/* ── Card stagger — cascade in with CSS custom prop ──────────────────── */
@keyframes staggerFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ll-stagger-item { animation: staggerFadeUp .32s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 0.065s); }

/* ── Voice mic gold glow when idle ───────────────────────────────────── */
@keyframes micGoldBreath {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); color: #2B7FE0; }
  50%      { box-shadow: 0 0 0 5px rgba(201,168,76,.22); color: #c9a84c; }
}
#voice-btn:not([data-active]) { animation: micGoldBreath 3s ease-in-out infinite !important; }

/* ── Scrollbar gold thumb ────────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: rgba(201,168,76,.35) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,.55) !important; }

/* ── Deal funded celebration ─────────────────────────────────────────── */
@keyframes dealFundedRing {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.deal-funded-ring {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 120px; height: 120px; border-radius: 50%;
  border: 4px solid #22c55e; pointer-events: none; z-index: 9999;
  animation: dealFundedRing .6s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes dealFundedBurst {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}
.deal-funded-burst {
  position: fixed; top: 50%; left: 50%;
  font-size: 60px; pointer-events: none; z-index: 9999;
  animation: dealFundedBurst .8s ease-out forwards;
}

/* ── PWA safe-area full-bleed ────────────────────────────────────────── */
/* theme-color is updated in the HTML meta tag; this ensures safe-area uses brand dark */
body { background-color: #0D0F14; }

/* ── Inventory warning banner — gold border data hygiene ─────────────── */
.inv-warning-banner {
  background: rgba(201,168,76,.06); border: 1px solid rgba(201,168,76,.35);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.inv-warning-banner .iwb-text { font-size: 12px; color: #c9a84c; font-weight: 600; flex: 1; }
.inv-warning-banner .iwb-btn { background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.35); color: #c9a84c; border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }

/* ── Floor Standings rep streak badges ───────────────────────────────── */
.rep-streak-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); border-radius: 10px; padding: 1px 6px; font-size: 10px; font-weight: 800; color: #f87171; }
.rep-rank-up-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 800; color: #22c55e; }

/* ── Notification toast dark mode ────────────────────────────────────── */
/* showNotificationToast creates a white #0a0f1e card — override to match the dark UI */
div[style*="background: #0a0f1e"][style*="border-radius:8px"][style*="box-shadow"][style*="z-index:10000"],
div[style*="background: #0a0f1e"][style*="z-index: 10000"] {
  background: #1C2130 !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(201,168,76,.3) !important;
  border-left: 4px solid #c9a84c !important;
}

/* ── Sidebar goal pace card — dark surface, no white card on dark BG ─── */
/* The home-dash pace-to-goal card uses background: #0a0f1e which is jarring */
#war-extras [style*="background: #0a0f1e"][style*="border:1px solid #ece6d8"],
#home-dash-wrap [style*="background: #0a0f1e"][style*="border:1px solid #ece6d8"] {
  background: #0e1b2e !important;
  border-color: rgba(201,168,76,.3) !important;
  border-left: 3px solid #c9a84c !important;
  color: #e0e8f4 !important;
}
#war-extras [style*="background: #0a0f1e"][style*="border:1px solid #ece6d8"] .hk-val,
#war-extras [style*="background: #0a0f1e"][style*="border:1px solid #ece6d8"] [style*="color:#0d1b2a"] {
  color: #e0e8f4 !important;
}
#war-extras [style*="background: #0a0f1e"][style*="border:1px solid #ece6d8"] [style*="color:#64748b"],
#home-dash-wrap [style*="background: #0a0f1e"][style*="border:1px solid #ece6d8"] [style*="color:#64748b"] {
  color: #94a3b8 !important;
}

/* ── View transition — 180ms fade between major overlays ───────────────
   Generic [id$="-overlay"][style*="position:fixed"] clause removed
   2026-08-05: it matched almost every overlay in the app (nearly all use
   position:fixed) and competed with elite-polish.css's own generic
   [id$="-overlay"][style*="flex"/"block"] entrance rule (overlayFade) --
   same "competing overlay-entrance animations" bug class fixed earlier
   today in f256a22d, just a second instance (this file vs elite-polish.css
   instead of round33-design.css vs elite-polish.css). Confirmed live via
   Playwright: whichever rule won the cascade at the moment an overlay's
   style attribute gained "block"/"flex" caused animation-name to change,
   which restarts a CSS animation from its `from` keyframe (opacity:0) --
   if a second mutation (e.g. the "close other overlays" MutationObserver
   touching this element's own style attribute right after open) retriggered
   the switch again, the overlay could stay stuck at opacity:0 well past
   both animations' 180ms duration. Live-reproduced on #gamification-overlay
   (openGamificationDashboard): opacity read 0 a full 1.5s after a real
   click in one run, 1 by 150ms in another -- a genuine intermittent race,
   not a one-off. #war-room-overlay/#inv-dashboard keep their explicit
   llViewFadeIn entrance (they don't match elite-polish's rule the same way
   and were the reason this rule existed) -- only the generic catch-all
   clause was removed. */
.ll-paged, #war-room-overlay, #inv-dashboard {
  animation: llViewFadeIn .18s ease both;
}
@keyframes llViewFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── KPI strip hover — cursor + gold underline ───────────────────────── */
#ll-command-strip .cs-item { cursor: pointer; transition: all .15s; }
#ll-command-strip .cs-item:hover { color: #c9a84c !important; }
#ll-command-strip .cs-item:hover .cs-text { text-decoration: underline; text-decoration-color: rgba(201,168,76,.5); }

/* ── Sidebar search box — strip the navy, blend into sidebar ─────────── */
#sidebar-search { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }

/* ── Goal pace card — white text when inside dark panels ─────────────── */
#war-extras [style*="color:#0d1b2a"] { color: #e0e8f4 !important; }
#war-extras [style*="color:#64748b"] { color: #94a3b8 !important; }
#war-extras [style*="color:#b6bdc9"] { color: #64748b !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 1 — THE WHITE SURFACES
   home-kpi and home-card were styled as light-mode cards (background: #0a0f1e).
   Override to the system dark surface so they belong to the same world.
   ═══════════════════════════════════════════════════════════════════════ */
.home-kpi,
.home-kpi.red-kpi,
.home-kpi.grn-kpi {
  background: #0e1b2e !important;
  border-color: rgba(255,255,255,.08) !important;
}
.home-kpi .hk-val { color: #e0e8f4 !important; }
.home-kpi .hk-lbl { color: #94a3b8 !important; }
.home-kpi .hk-sub { color: #64748b !important; }
.home-kpi.red-kpi .hk-val  { color: var(--red, #ef4444) !important; }
.home-kpi.grn-kpi .hk-val  { color: #22c55e !important; }

.home-card {
  background: #0e1b2e !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06) !important;
}
.home-card-title { color: #94a3b8 !important; }
.home-srow  { border-bottom-color: rgba(255,255,255,.06) !important; }
.home-sname { color: #94a3b8 !important; }
.home-sbar  { background: #1e2d40 !important; }
.home-chip  {
  background: #1c2a3e !important;
  border-color: rgba(43,127,224,.25) !important;
  color: var(--color-gold) !important;
}
.home-chip:hover {
  background: rgba(201,168,76,.15) !important;
  border-color: rgba(201,168,76,.5) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 2 — SIDEBAR
   The "Monthly Goal Progress" sidebar expansion uses inline background:
   target it with rgba(255,255,255,0.03) container which is already dark.
   Fix: the gl-edit-btn "Set Goals" overflow issue.
   ═══════════════════════════════════════════════════════════════════════ */
.gl-edit-btn { position: static !important; margin-top: 8px !important; display: block !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 3 — TYPOGRAPHY
   Button text rendering + tighter tracking on dark BG.
   Action chips (home-chip) → 600 weight to signal interactivity.
   ═══════════════════════════════════════════════════════════════════════ */
button {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: -0.01em;
}
/* Chips are interactive controls, not body text */
.home-chip { font-weight: 600 !important; }
/* Chat suggestion chips */
#chat-suggestions button,
.chat-chip,
.ll-chip { font-weight: 600 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 4 — ICON STROKE NORMALIZATION
   Bottom nav icons need consistent 2px stroke weight.
   ═══════════════════════════════════════════════════════════════════════ */
#bottom-nav svg,
.nav-icon svg,
.mob-menu-btn svg { stroke-width: 2 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 5 — CARDS: SHADOWS + BORDER-RADIUS
   ws-intel-card (weather/signals) shadow was 0.05 opacity — too light.
   ═══════════════════════════════════════════════════════════════════════ */
.ws-intel-card { box-shadow: 0 2px 8px rgba(0,0,0,.35) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 6 — COLOR SEMANTICS
   "See all →" links → gold (primary CTA in alert rows).
   KPI strip (ll-command-strip) item dividers.
   ═══════════════════════════════════════════════════════════════════════ */
.shelf-see-all {
  color: #c9a84c !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.shelf-see-all:hover { text-decoration: underline; }

/* Dividers between kpi strip items */
.kpi-pill + .kpi-pill { border-left: 1px solid rgba(255,255,255,.08); padding-left: 10px; }

/* Ask Louie input — gold blinking cursor */
#chat-input { caret-color: #c9a84c !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 7 — MOTION: CONSOLIDATE PULSE RHYTHM TO 2.4s
   Multiple elements pulse at different rates (2s, 3s, 2.4s) — unify.
   kpiCountUp: apply entrance animation to .hk-val when cards mount.
   ═══════════════════════════════════════════════════════════════════════ */
.live-dot, .ready-dot,
[style*="animation:dtPulse"],
#voice-fab { animation-duration: 2.4s !important; }

/* KPI values count up on page paint */
.hk-val, .home-kpi .hk-val {
  animation: kpiCountUp .55s cubic-bezier(.22,1,.36,1) both;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 8 — WAR ROOM HEADER
   The header `#war-room-overlay > div:first-child` uses inline styles but
   we can target child spans and buttons via position selectors.
   Title → Barlow Condensed. Buttons: Charts=gold, Close=ghost.
   ═══════════════════════════════════════════════════════════════════════ */
#war-room-overlay > div:first-child {
  /* Already has background:#11162a — just add subtle bottom glow */
  box-shadow: 0 1px 0 #1f2740, 0 4px 20px rgba(0,0,0,.3) !important;
}
/* War Room title — tactical Barlow Condensed voice */
#war-room-overlay > div:first-child > div:first-child > div:first-child > span:first-child {
  font-family: 'Barlow Condensed', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}
/* Charts btn (primary action) → gold accent */
#war-room-overlay > div:first-child button:first-child {
  background: rgba(201,168,76,.15) !important;
  border-color: rgba(201,168,76,.4) !important;
  color: #c9a84c !important;
}
/* Close btn → ghost, no visual weight */
#war-room-overlay > div:first-child button:last-child {
  background: none !important;
  border-color: transparent !important;
  color: #6b7280 !important;
  font-size: 14px !important;
}
#war-room-overlay > div:first-child button:last-child:hover {
  color: #e0e8f4 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 9 — FLOOR STANDINGS: GOLD NUMBER BADGES (rank 4+)
   Ranks 1-3 use emoji medals — good. Ranks 4+ use plain "#N" text.
   Wrap in a gold-tint badge so they maintain visual energy.
   ═══════════════════════════════════════════════════════════════════════ */
/* Applied via JS _wrRenderLeaderboard — badge class for rank 4+ */
.rep-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.3);
  border-radius: 50%;
  font-size: 10px; font-weight: 900;
  color: #c9a84c;
  padding: 0 3px;
}
/* Floor standings supporting data: bump weight so it doesn't disappear */
#wr-leaderboard > div > div:last-child,
#wr-leaderboard .rep-sub-row {
  font-weight: 500 !important;
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 10 — MICRO-DETAILS
   ::selection is already gold (line 148 of this file) — confirmed global.
   Scrollbar thumb is already gold (end of this file) — confirmed.
   Remaining: severity pill glow, loading shimmer on Louie's Pick.
   ═══════════════════════════════════════════════════════════════════════ */
/* Severity pill glow — MODERATE glows gold, CRITICAL glows red */
@keyframes critGlow { 0%,100% { box-shadow:0 0 6px rgba(220,38,38,.5); } 50% { box-shadow:0 0 14px rgba(220,38,38,.8); } }
@keyframes highGlow { 0%,100% { box-shadow:0 0 4px rgba(234,88,12,.4); } 50% { box-shadow:0 0 10px rgba(234,88,12,.6); } }

/* Target severity spans by their background color */
span[style*="background:#dc2626"][style*="font-size:10px"] { animation: critGlow 1.4s ease-in-out infinite !important; }
span[style*="background:#ea580c"][style*="font-size:10px"] { animation: highGlow 1.8s ease-in-out infinite !important; }
span[style*="background:#d97706"][style*="font-size:10px"] { box-shadow: 0 0 8px rgba(201,168,76,.4) !important; }

/* Louie's Pick loading shimmer — replace plain gray text */
@keyframes llShimmerSweep {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.louie-pick-loading, [id*="pick-loading"], [id*="brief-loading"] {
  background: linear-gradient(90deg, #1c2a3e 25%, rgba(201,168,76,.18) 50%, #1c2a3e 75%) !important;
  background-size: 200% auto !important;
  animation: llShimmerSweep 1.5s linear infinite !important;
  border-radius: 8px !important;
  color: transparent !important;
  min-height: 36px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   POLISH BATCH v529 — 14 REMAINING AUDIT ITEMS
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Z-INDEX TOKEN SYSTEM ─────────────────────────────────────────── */
/* Named tokens for new code. Existing inline values unchanged.
   Adopt via: z-index: var(--z-modal) in any new overlay/panel code.    */
:root {
  --z-base:     100;
  --z-dropdown: 200;
  --z-sticky:   500;
  --z-overlay:  1000;
  --z-drawer:   2000;
  --z-modal:    3000;
  --z-popover:  4000;
  --z-toast:    9900;
}

/* ── 2. LOGIN SCREEN — FIRST IMPRESSION ──────────────────────────────── */
/* Replace legacy Ford-navy gradient with brand-dark + gold radial glow.
   Gold at 12% creates warmth without being garish.                      */
#login-screen {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(201,168,76,.12) 0%, transparent 60%),
    #0D0F14 !important;
}
#login-screen::before {
  background:
    radial-gradient(ellipse at 20% 75%, rgba(43,127,224,.07) 0%, transparent 50%),
    radial-gradient(ellipse at 82% 15%, rgba(201,168,76,.04) 0%, transparent 45%) !important;
}

/* ── 3. SEND BUTTON HOVER — ROGUE GREEN FIX ──────────────────────────── */
/* Was #00CC6A (wrong hue). --accent resolves to #22C55E (correct).      */
.send-btn:hover { background: var(--accent, #22C55E) !important; }

/* ── 4. TABULAR NUMS — COMPREHENSIVE ─────────────────────────────────── */
/* Every element displaying live numbers gets tabular figure alignment.
   Prevents column-width jitter as counts tick up/down on refresh.
   THE single highest-impact change on a live data platform.             */
.hk-val, .hkpi-val, .kp-value, .wkpi-val, .fund-val,
[class*="kpi-val"], [class*="wr-val"], [class*="wr-num"],
[class*="war-kpi"], [class*="inv-kpi-val"], [class*="stat-num"],
.countdown, .floor-standing-score, .momentum-score,
.cs-text, .cs-dollar, .cs-val,
#wr-contracts-val, #wr-pvr-val, #wr-pacing-pct,
.rep-tile-deals, .rep-tile-score,
td.num, td.r, td[align="right"] {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "kern" 1 !important;
}

/* ── 5. MOMENTUM BAR — DIRECTIONAL GRADIENT BY PACE ──────────────────── */
/* Default: amber→green (neutral/unknown pace).
   JS stamps .momentum-bar-fill--behind / --pace / --over via score.    */
.rep-tile .momentum-bar-fill {
  background: linear-gradient(90deg, #f59e0b 0%, #22C55E 100%) !important;
  transition: width .7s cubic-bezier(.22,1,.36,1) !important;
}
.rep-tile .momentum-bar-fill--behind { background: linear-gradient(90deg, #dc2626, #f59e0b) !important; }
.rep-tile .momentum-bar-fill--pace   { background: linear-gradient(90deg, #f59e0b, #22C55E) !important; }
.rep-tile .momentum-bar-fill--over   { background: linear-gradient(90deg, #22C55E, #c9a84c) !important; }

/* ── 6. LOUIE EXPAND BUTTON — BACKDROP BLUR ──────────────────────────── */
#louie-expand-btn {
  backdrop-filter: blur(8px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.15) !important;
  transition: opacity .2s ease, background .15s ease !important;
}

/* ── 7. THREE GRADIENTS ──────────────────────────────────────────────── */
/* 7a. Deal ticker — both edges fade so text doesn't hard-clip           */
#dt-text {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 82%, transparent 100%);
}
/* 7b. KPI command strip — top separator + micro-gradient anchor         */
#ll-command-strip {
  background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 100%);
  border-top: 1px solid rgba(255,255,255,.04) !important;
}
/* 7c. Bottom nav — inset light separator line                           */
#bottom-nav, nav.bottom-nav {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* ── 8. KBD KEYS — 3D KEYBOARD DEPTH (VS Code / Linear style) ────────── */
kbd {
  border-bottom: 2px solid rgba(255,255,255,.22) !important;
  font-family: inherit !important;
  font-size: 9.5px !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

/* ── 9. LOUIE-AUTHORED SURFACE GRADIENT ───────────────────────────────── */
/* Extends the lp-card gold-radial language to other Louie-generated cards */
.lp-card {
  background: linear-gradient(120deg, rgba(201,168,76,.07) 0%, #0d1b2a 65%) !important;
  border-left-color: var(--color-gold, #c9a84c) !important;
}
.morning-brief-card,
.wr-brief, [class*="brief-card"],
.wr-game-plan-card, [class*="game-plan-card"] {
  background: linear-gradient(135deg, rgba(201,168,76,.06) 0%, transparent 55%), #0e1b2e !important;
  border-color: rgba(201,168,76,.2) !important;
}

/* ── 10. VIEWING-AS ROLE SELECTOR — GOLD GLOW ON OPEN ────────────────── */
#ll-role-selector.open {
  border-color: rgba(201,168,76,.3) !important;
  box-shadow: 0 0 0 1px rgba(201,168,76,.18), 0 24px 64px rgba(0,0,0,.6) !important;
}

/* ── 11. DARK TEXT FIX — EMPTY STATES IN DARK UI ─────────────────────── */
/* Light-mode inline color:#0d1b2a renders invisible on dark backgrounds.
   2026-08-05: narrowed with :not([style*="background"]) -- same bug shape as
   the #0a0f1e wildcard fixed above (LAYER 8, item 8). .nm-overlay is a generic
   wrapper used 170+ times platform-wide, and plenty of real CTA buttons pair
   color:#0d1b2a with an explicit gold/green background in the same inline
   style (e.g. Contract Funding Dashboard's "Refresh"/"Ask Louie" buttons at
   #funding-overlay, CRM/BDC overlay action buttons) -- intentional dark text
   on a light button face. The un-narrowed rule forced those to light text
   too, killing contrast on their own light backgrounds. Only text with no
   explicit background of its own (i.e. actually inheriting the dark overlay
   surface) should flip to light. */
#messages [style*="color:#0d1b2a"]:not([style*="background"]),
#home-dash-wrap [style*="color:#0d1b2a"]:not([style*="background"]),
.nm-overlay [style*="color:#0d1b2a"]:not([style*="background"]) {
  color: #e0e8f4 !important;
}
/* #home-dash-wrap's bg is var(--bg), which is dark in dark theme -- but the home
   dashboard's own stat-card tiles (cell(), public/index.html) hardcode a light
   white/cream gradient background regardless of theme, so the blanket rule above
   flipped their #0d1b2a value text to near-white-on-white, invisible. These tiles
   are uniquely identifiable by font-variant-numeric:tabular-nums in the same
   inline style -- restore the correct dark-on-light color for just those.
   (Kept as a harmless belt-and-suspenders now that the :not([style*="background"])
   above already excludes them, since their inline style also sets background.) */
#home-dash-wrap [style*="color:#0d1b2a"][style*="tabular-nums"] {
  color: #0d1b2a !important;
}
/* Chat history empty-state nudge — elevate to gold so it reads as a CTA */
.convo-list > div[style*="color:#8a9bb5"] {
  color: #c9a84c !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

/* ── 12. ACTION CHIP URGENCY ──────────────────────────────────────────── */
/* JS stamps data-count-level on hot chips after render.                  */
.home-chip--hot[data-count-level="high"] {
  box-shadow: inset 0 0 0 1.5px rgba(201,168,76,.65) !important;
  border-color: rgba(201,168,76,.55) !important;
}
.home-chip--hot[data-count-level="med"] { font-weight: 900 !important; }
.home-chip--hot[data-count-level="zero"] {
  opacity: .38 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   POLISH BATCH v530 — RE-AUDIT 12 FIXES
   Root cause: 3 persistent light-mode CSS variable families + 4 late
   <style> blocks (lines 3792+) that postdate award-polish.css in the
   document cascade. Every rule here uses !important to beat them.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. --cg-* DARK MODE VARIABLE OVERRIDE ──────────────────────────────
   car-guy.css defines light-mode palette (#0a0f1e, #0a0f1e, #ecfdf3).
   These make .cg-state-danger/warn/money surface white/cream.
   Override in :root — highest specificity wins for custom properties.    */
:root {
  --cg-danger-bg: rgba(220, 38, 38, 0.10);
  --cg-warn-bg:   rgba(245, 158, 11, 0.10);
  --cg-money-bg:  rgba(22, 163, 74, 0.10);
  --cg-danger:    #f87171;
  --cg-warn:      #fbbf24;
  --cg-money:     #4ade80;
  --cg-mute:      #7A8499;
}

/* ── 2. .messages BACKGROUND — BELT-AND-SUSPENDERS ──────────────────────
   line 306 already sets !important but line 822 (same block) could
   occasionally win in edge-case browser ordering. Re-assert here.        */
.messages { background: var(--bg, #0D0F14) !important; }

/* ── 3. PERFORMANCE HUB TABS — DARK THEME ───────────────────────────────
   index.html lines 1488-1493: background: #0a0f1e / active:#1A5FBF           */
.rpt-tab {
  background: var(--surface2, #1C2130) !important;
  color: var(--txt-secondary, #94A3B8) !important;
  border-color: var(--border, #252A36) !important;
}
.rpt-tab:hover {
  background: rgba(255,255,255,.06) !important;
  color: var(--txt-primary, #F0F2F5) !important;
  border-color: rgba(255,255,255,.15) !important;
}
.rpt-tab.active {
  background: rgba(201,168,76,.12) !important;
  color: var(--color-gold, #c9a84c) !important;
  border-color: rgba(201,168,76,.35) !important;
  font-weight: 800 !important;
}
.rpt-tab::before       { background: #6b7280 !important; }
.rpt-tab.has-data::before { background: #22c55e !important; }
.rpt-tab.active::before   { background: var(--color-gold, #c9a84c) !important; }

/* ── 4. LOGIN SCREEN — REMOVE BLUE ::after CIRCLE + GOLD CTA ────────────
   ::before was fixed in v529. ::after (bottom-right blue orb) remains.  */
#login-screen::after { background: rgba(201,168,76,.05) !important; }
.login-btn {
  background: linear-gradient(135deg, var(--color-gold,#c9a84c), var(--color-gold-dark,#a07b28)) !important;
  color: #0D0F14 !important;
  box-shadow: 0 4px 16px rgba(201,168,76,.3) !important;
}
.login-btn:hover {
  background: linear-gradient(135deg, #d4af37, var(--color-gold,#c9a84c)) !important;
  box-shadow: 0 8px 24px rgba(201,168,76,.4) !important;
}

/* ── 5. HOME KPI CARDS — PROPER DARK SHADOW ─────────────────────────────
   The original shadow is rgba(0,20,50,.06) — invisible on dark surfaces. */
.home-kpi,
.home-kpi.red-kpi,
.home-kpi.grn-kpi {
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06) !important;
}

/* ── 6. ACTION CHIP BORDERS — NEUTRAL NOT BLUE ───────────────────────────
   6 of 7 chips used rgba(43,127,224,.25); only hot was gold. Normalize.  */
.home-chip         { border-color: rgba(255,255,255,.10) !important; }
.home-chip--hot    { border-color: rgba(201,168,76,.35) !important; }
.home-chip--urgent { border-color: rgba(220,38,38,.35) !important; }

/* ── 7. WAR ROOM DASHBOARD CARDS — DARK SURFACES ────────────────────────
   Late <style> blocks (index.html 3792-3881) override earlier rules.
   Every class here needs !important to beat those later inline blocks.   */
#home-dash-wrap { background: var(--bg, #0D0F14) !important; }

.wx-stat {
  background: var(--surface, #161A23) !important;
  border-color: var(--border, #252A36) !important;
}
.wx-stat:hover { box-shadow: 0 4px 12px rgba(0,0,0,.35) !important; }
.wx-lbl { color: var(--txt-secondary, #94A3B8) !important; }
.wx-val { color: var(--txt-primary, #F0F2F5) !important; }
.wx-sub { color: var(--txt-secondary, #94A3B8) !important; }

.wx-card {
  background: var(--surface, #161A23) !important;
  border-color: var(--border, #252A36) !important;
}
.rf-wrap {
  background: var(--surface, #161A23) !important;
  border-color: var(--border, #252A36) !important;
  box-shadow: none !important;
}
.rf-card {
  background: var(--surface2, #1C2130) !important;
  border-color: var(--border, #252A36) !important;
}
.rf-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.35) !important; }
.rf-lbl, .rf-sub { color: var(--txt-secondary, #94A3B8) !important; }
.rf-val          { color: var(--txt-primary, #F0F2F5) !important; }
.rf-cta          { color: var(--color-gold, #c9a84c) !important; }
.rf-head         { color: var(--color-gold, #c9a84c) !important; }

.war-card {
  background: var(--surface, #161A23) !important;
  border-color: var(--border, #252A36) !important;
}
.wc-head {
  color: var(--txt-primary, #F0F2F5) !important;
  border-bottom-color: var(--border, #252A36) !important;
}
.wc-row:hover { background: rgba(255,255,255,.04) !important; }
.wc-nm        { color: var(--txt-primary, #F0F2F5) !important; }
.wc-meta      { color: var(--txt-secondary, #94A3B8) !important; }

.lb-card {
  background: linear-gradient(120deg, rgba(201,168,76,.06) 0%, var(--surface,#161A23) 100%) !important;
  border-color: rgba(201,168,76,.2) !important;
  border-left-color: var(--color-gold,#c9a84c) !important;
  box-shadow: none !important;
}
.lb-head span { color: var(--color-gold, #c9a84c) !important; }
.lb-got {
  border-color: rgba(201,168,76,.35) !important;
  color: var(--color-gold, #c9a84c) !important;
}
.lb-got:hover { background: rgba(201,168,76,.08) !important; }
.lb-txt  { color: var(--txt-primary, #F0F2F5) !important; }
.lb-row  { border-top-color: var(--border, #252A36) !important; }

/* hkpi (Quick Stats) — line 3876 */
.hkpi {
  background: var(--surface, #161A23) !important;
  border-color: var(--border, #252A36) !important;
}
.hkpi-label { color: var(--txt-secondary, #94A3B8) !important; }
.hkpi-val   { color: var(--txt-primary, #F0F2F5) !important; }
.hkpi-sub   { color: var(--txt-secondary, #94A3B8) !important; }

/* ── 8. INVENTORY WARNING BANNERS — DARK AMBER ───────────────────────────
   Only #rpt-stale-banner (a known ID) should get this amber treatment.
   The old [style*="background:#0a0f1e"] wildcard here was a mistake --
   #0a0f1e is this app's own core dark-navy overlay/panel background (used
   350+ times platform-wide, e.g. every openXPortfolio-style full-screen
   overlay), not a stray light/cream color needing a dark-mode fix. That
   wildcard forced EVERY solid #0a0f1e panel to a near-transparent amber
   tint, letting whatever was behind it bleed through -- found on the
   Secondary Finance Portfolio overlay (visual regression sweep 2026-08-04),
   but it silently broke any overlay using this background. Removed. */
#rpt-stale-banner {
  background: rgba(245,158,11,.10) !important;
  border-color: rgba(245,158,11,.35) !important;
  color: #fbbf24 !important;
}
#rpt-stale-banner b,
#rpt-stale-banner strong {
  color: #fbbf24 !important;
}

/* ── 9. DM MONO WEIGHT — OVERRIDE font-weight:300 !important ────────────
   index.html line 60721: .home-kpi .hk-val { font-weight: 300 !important }
   DM Mono 300 is not loaded (only 400/500) → browser synthesizes it.
   Specificity 0,2,1 beats 0,2,0 when both have !important.               */
body .home-kpi .hk-val { font-weight: 800 !important; }

/* ── 10. SEND BUTTON — REMOVE BLUE BOX-SHADOW ───────────────────────────
   line 872: box-shadow: 0 2px 10px rgba(43,127,224,.3) — wrong color     */
.send-btn { box-shadow: 0 2px 10px rgba(34,197,94,.2) !important; }

/* ── 11. EXPLAIN BUTTON — SUPERSCRIPT CIRCLE, NOT INLINE ────────────────
   button[title="Explain this number"] renders inline inside .hk-val.
   Treat as a small ⓘ badge (vertical-align: super lifts it off number). */
button[title="Explain this number"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: super !important;
  font-size: 9px !important;
  line-height: 1 !important;
  width: 13px !important;
  height: 13px !important;
  margin-left: 3px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.38) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all .15s !important;
}
button[title="Explain this number"]:hover {
  background: rgba(201,168,76,.15) !important;
  border-color: rgba(201,168,76,.45) !important;
  color: var(--color-gold, #c9a84c) !important;
}

/* ── 12. FLOOR BOARD EMPTY WARN STRIP — AMBER-ON-DARK ───────────────────
   Any amber warning chip inside the floor board area               */
#floor-board-wrap [style*="color:#f59e0b"],
.floor-empty-state [style*="color:#f59e0b"] {
  color: #fbbf24 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   POLISH BATCH v531 — PASS 7: 16-ITEM PIXEL AUDIT
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. DARK STORE ALERT — READABLE TEXT ON RED BACKGROUND ──────────────
   .r32-alert-critical (index.html ~line 60828) sets a dark-red bg but
   no text color. Near-black text (rgb 13,27,42) on dark-red = invisible.  */
.r32-alert-critical { color: #fca5a5 !important; }
.r32-alert-critical strong, .r32-alert-critical b { color: #f87171 !important; }
#dark-store-sidebar-dot.active { color: #fca5a5 !important; }

/* ── 2. GLOBAL SCROLLBAR → GOLD THUMB ────────────────────────────────────
   Default scrollbar thumb is #c8cedb (light gray). Replace with subtle
   gold to stay on-brand across all scroll containers.                     */
::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,.22) !important;
  border-radius: 6px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(201,168,76,.40) !important;
}
::-webkit-scrollbar-track { background: transparent !important; }

/* ── 3. COMMAND PALETTE HOVER — KILL CREAM #0a0f1e ───────────────────────
   index.html line 490 sets .cmdp-item:hover:not(.sel) to #0a0f1e
   (cream/light-mode). Same selector later at line 596 sets dark version.
   award-polish.css (at line 2193) beats lines 490+596. Force dark here.  */
.cmdp-item:hover:not(.sel) {
  background: rgba(255,255,255,.06) !important;
  color: var(--txt-primary, #F0F2F5) !important;
}

/* ── 4. HOME-CARD — SPECIFIC TRANSITION + HOVER LIFT ─────────────────────
   Current rule: transition:all .2s — too broad. Pin to concrete props.
   Add shadow-dark-card token (defined at :root line 181) and lift.        */
.home-card {
  box-shadow: var(--shadow-dark-card, 0 4px 16px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.25)) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.home-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-dark-md, 0 8px 24px rgba(0,0,0,.50)) !important;
}

/* ── 5. LOUIE AMBIENT — TEXT COLOR + AVATAR ──────────────────────────────
   .cg-ambient-text inherits near-black (#0f172a) from body. Car-Guy Mode
   sidebar dark gradient = invisible text. Force readable color.           */
#louie-ambient .cg-ambient-text { color: var(--txt-primary, #F0F2F5) !important; }
#louie-ambient .cg-ambient-title { color: var(--color-gold, #c9a84c) !important; }
.cg-ambient-avatar {
  background: linear-gradient(135deg, rgba(201,168,76,.25), rgba(201,168,76,.10)) !important;
  border: 1.5px solid rgba(201,168,76,.35) !important;
  color: var(--color-gold, #c9a84c) !important;
}

/* ── 6. CAR-GUY MODE SIDEBAR BUTTON — LEGIBLE TEXT ──────────────────────
   index.html line 2668: color:#1a1f2e on blue-gold gradient = near-black.
   Visible text = white or near-white.                                     */
button[onclick="openCarGuyHome()"] {
  color: #f8f6f0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}

/* ── 7. .mi-dot.loading — GOLD NOT BLUE ─────────────────────────────────
   index.html line 1437: background:#3b82f6 (Tailwind blue). Brand says gold. */
.mi-dot.loading { background: var(--color-gold, #c9a84c) !important; }
.mi-dot.loading { animation: pulse 1s infinite !important; }

/* ── 8. CARD STAGGER — DELAYS FOR ALL 6 CARDS ───────────────────────────
   Only nth-of-type 2 (60ms) and 3 (120ms) had delays. Cards 1,4,5,6
   all fire at 0ms simultaneously. Add proper cascade.                     */
.home-card:nth-of-type(1) { animation-delay:   0ms !important; }
.home-card:nth-of-type(4) { animation-delay: 180ms !important; }
.home-card:nth-of-type(5) { animation-delay: 240ms !important; }
.home-card:nth-of-type(6) { animation-delay: 300ms !important; }
.home-card:nth-of-type(7) { animation-delay: 360ms !important; }

/* ── 9. FOCUS RING — GOLD NOT BLUE ──────────────────────────────────────
   index.html line 567: *:focus-visible { outline: 2px solid #3B82F6 !important }
   award-polish.css is LATER in document cascade (line 2193 vs line 567),
   so same specificity !important rule here wins.                          */
*:focus-visible {
  outline: 2px solid var(--color-gold, #c9a84c) !important;
  outline-offset: 2px !important;
}
.login-box *:focus-visible { outline-color: rgba(201,168,76,.7) !important; }
.sidebar *:focus-visible   { outline-color: var(--color-gold, #c9a84c) !important; }

/* ── 10. HOME-CARD SHADOW TOKEN (already handled in item 4 above) ────── */

/* ── 11. MONTH-END COUNTDOWN PILL — UNIFIED TYPOGRAPHY ──────────────────
   "2 days" pill: the number and "days" text have different font weights.
   Both should be 800 to match pill style.                                 */
.gl-month-badge,
.gl-month-badge * { font-weight: 700 !important; letter-spacing: .01em !important; }
[id*="days-left"], [class*="days-left"] { font-weight: 700 !important; }

/* ── 12. PREFERS-REDUCED-MOTION — COMPREHENSIVE CATCH-ALL ───────────────
   Previous implementation only covered 1 rule per block. Cover all
   animations and transitions in one catch-all.                            */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 13. BRIEFING STRIP CHIPS — URGENCY HIERARCHY ───────────────────────
   All action chips currently look identical. Add visual urgency tiers.    */
.home-chip { opacity: .75; }
.home-chip--hot    { opacity: 1; font-weight: 800 !important; }
.home-chip--urgent {
  opacity: 1;
  animation: chipPulse 2s infinite !important;
  font-weight: 800 !important;
}
@keyframes chipPulse {
  0%, 100% { border-color: rgba(220,38,38,.35); }
  50%       { border-color: rgba(220,38,38,.65); box-shadow: 0 0 6px rgba(220,38,38,.2); }
}

/* ── 14. NEW-CHAT BUTTON — 32×32 SQUARE ─────────────────────────────────
   index.html line 805: width:30px; height:30px — should be 32×32.        */
.new-chat-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

/* ── 15. USER AVATAR — GOLD BACKGROUND NOT BLUE ─────────────────────────
   index.html line 3460: background:linear-gradient(135deg,#1d4ed8,#2B7FE0)
   (blue). Should be gold to match brand.                                  */
#user-avatar-icon {
  background: linear-gradient(135deg, rgba(201,168,76,.25), rgba(201,168,76,.12)) !important;
  border: 1.5px solid rgba(201,168,76,.40) !important;
  color: var(--color-gold, #c9a84c) !important;
  font-weight: 800 !important;
}

/* ── 16. SIDEBAR FOOTER — REMOVE STICKY FLOATING ────────────────────────
   index.html line 1562: position:sticky;bottom:0 causes the footer to
   float mid-sidebar in certain layout states. The sidebar flex column
   with flex:1 on the nav div already pushes footer to the bottom.
   Remove sticky so it participates normally in the flex flow.             */
.sidebar-footer {
  position: relative !important;
  bottom: auto !important;
  flex-shrink: 0 !important;
}

/* ── BONUS: --color-info OVERRIDE — remove remaining blue accent ─────────
   --color-info: #3B82F6 is used in several places for info-state color.
   Override to gold to remove last blue accent from dark UI.               */
:root { --color-info: #c9a84c; }