/* Dealer Comand: the black theme + the ambient particle field. Linked on every page AFTER app.css (same version stamp).
   The site is always dark now: the tokens below replace both the light and the prefers-color-scheme: dark tokens of app.css.
   No inline styles anywhere (the CSP forbids them); the few runtime styles (glow position, overlay fade) are set through the CSSOM. */

/* ---------- 1. tokens ---------- */
:root, :root:root {
  color-scheme: dark;
  --bg: #000000; --surface: #1c1c20; --surface-2: #26262b; --border: #323238; --input-border: #4a4a50;
  --text: #f5f5f7; --muted: #adadb5; --primary: #ffffff; --primary-hover: #e4e4e8; --on-primary: #000000;
  --link: #4aa8ff; --accent: #ff453a;
  --good: #30d158; --good-bg: #0c1d12; --warn: #ffd60a; --warn-bg: #211c05; --bad: #ff7d76; --bad-bg: #2a0f11;
  --header-bg: rgba(0, 0, 0, 0.55); --header-text: #f5f5f7; --header-muted: #a0a0a8; --header-border: #1c1c20; --header-hover: rgba(255, 255, 255, 0.12);
  --shadow: none;
}
body { background: #000; color: var(--text); }

/* ---------- 2. surfaces: translucent bars so the particles show through; boxes are a medium dark grey (Mike, Oct 29: "B") ---------- */
.app-header, .tabs, .md-vinbar-root, .car-strip {
  background: rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); /* page text behind a sticky bar blurs instead of colliding with it; the particles still glow through */
}
.tabs, .md-vinbar-root, .car-strip { border-bottom-color: #1c1c20; }
.card, .tile, .md-card, .md-vinbar, .notice { background-color: rgba(28, 28, 32, 0.94); border-color: var(--border); }
.card.car-sec { background: none; }
.card, .tile, .md-card, .md-vinbar { transition: border-color .25s, box-shadow .25s; }
.tile, .card .tile { background-color: rgba(38, 38, 43, 0.96); }
input, select, textarea { background-color: #141417; color: var(--text); border-color: var(--input-border); }
input:focus, select:focus, textarea:focus { border-color: #fff; }
input::placeholder { color: #8c8c94; opacity: 1; }
.btn-secondary { background: transparent; color: #fff; border-color: #3a3a40; }
.btn-secondary:hover { background: #2a2a2f; border-color: #5a5a62; }
.car-strip-link { background: rgba(28, 28, 32, 0.94); border-color: #36363c; }
.car-strip-link[aria-current] { background: #fff; color: #000; border-color: #fff; }
.chip { background: #26262b; border-color: #3a3a40; color: #c8c8ce; }
table.rtable th { color: #a0a0a8; }
.rtable tr, .rtable td, .rtable th { border-color: #2c2c31; }
.rtable tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.avatar { background: #fff; color: #000; }
.user-menu-panel { background: #1c1c20; border: 1px solid #36363c; }
/* the focus ring must stay visible on black */
:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.btn-primary:focus-visible, .btn:focus-visible { outline-color: #4aa8ff; }

/* ---------- 3. the particle logo on the sign-in page: no still logo behind the animation ---------- */
.brand.is-animated > img, .brand.is-animated > picture { display: none; }
.logo-stage { max-width: 100%; }

/* ---------- 4. ambient particle field (lib/ambient.js) ---------- */
/* z-index -1 puts the canvas above the page background but below all content; it never takes pointer events */
.ambient-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
/* cards: soft spotlight and a faint outer glow where the pointer is (set by ambient.js through --gx / --gy) */
.ambient-glow { border-color: #3a3a40 !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 26px rgba(255, 255, 255, 0.07) !important;
  background-image: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.045), transparent 70%) !important; }
@media (prefers-reduced-motion: reduce) { .ambient-glow { box-shadow: none !important; background-image: none !important; } .card, .tile, .md-card, .md-vinbar { transition: none; } }

/* ---------- 5. sign-in transition (lib/transition.js, js/tr-guard.js) ---------- */
.tr-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; display: block; }
.tr-hidden { opacity: 0 !important; }
.tr-fade { transition: opacity .55s ease; }
/* the page after sign-in stays invisible until the dots have landed (tr-guard.js adds tr-pending in <head>, then removes it) */
.tr-pending body > *:not(.tr-canvas):not(.ambient-canvas) { opacity: 0; }
.tr-reveal body > *:not(.tr-canvas):not(.ambient-canvas) { transition: opacity .6s ease; }
@media print { .ambient-canvas, .tr-canvas { display: none; } }

/* ---------- 6. the active tab / chip: a soft breathing glow (js/lib/ambient.js adds .ambient-active, and pulls nearby dots into it) ---------- */
.ambient-active { box-shadow: 0 0 14px rgba(255, 255, 255, 0.16), 0 0 34px rgba(255, 255, 255, 0.07); }
.ambient-off { animation: ambient-glow-out .7s ease-out forwards; }
@keyframes ambient-glow-breathe {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.10), 0 0 26px rgba(255, 255, 255, 0.04); }
  50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.26), 0 0 48px rgba(255, 255, 255, 0.11); }
}
@keyframes ambient-glow-out { from { box-shadow: 0 0 14px rgba(255, 255, 255, 0.16), 0 0 34px rgba(255, 255, 255, 0.07); } to { box-shadow: 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: no-preference) { .ambient-active { animation: ambient-glow-breathe 4.8s ease-in-out infinite; } }
/* the chip row scrolls sideways, which would clip the glow: give it room, and take the same room back with negative margins */
.md-jump { padding: 12px 16px 16px; margin: -10px -16px -10px; }
.tabs a.ambient-active { background-image: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent); }

/* ---------- 7. QA fixes (Oct 29 2026) ---------- */
/* the reset / forgot pages focus their h1 on load (tabindex -1): a ring there is noise, the page has no other focus target */
h1[tabindex="-1"]:focus { outline: none; }
/* the blur above makes the header its own layer; keep it (and the user menu that drops out of it) above the sticky Price a car bar */
.app-header { position: relative; z-index: 30; }