/* =============================================================================
   KAR — frosted glass, everywhere
   Loaded last on every page.

   How it works:
   1. A quiet field sits fixed behind every page: warm grey paper with a faint
      wash of the brand navy, so the glass has depth without colour of its own.
   2. The site's own surface colours are redefined as translucent: every card,
      band, button, field and panel that used them becomes a pane of milky
      glass, without touching each page's stylesheet.
   3. Surfaces that float over other content (header, menus, drawer, the
      questionnaire, the assistant, the quick-navigation bar, dialogs) also
      blur what is behind them, strongly, so text on them always reads.
   4. Every pane gets a restrained "sheen": a fine light rim and a very soft
      highlight. Matte rather than glossy.

   Where the browser cannot blur, or the reader asks for less transparency,
   everything falls back to the solid colours.
   ============================================================================= */

:root {
  /* Translucent versions of the site's surfaces. The raw palette entries are
     redefined too, so the older page sheets that read them (About's cards and
     tinted chapters, the legacy aliases) turn to glass with everything else. */
  --kar-paper:    rgba(246, 245, 242, 0.5);
  --kar-sheet:    rgba(253, 253, 251, 0.66);
  --kar-paper-2:  rgba(236, 236, 232, 0.6);
  --kar-navy-100: rgba(231, 233, 238, 0.62);
  --c-bg:        rgba(246, 245, 242, 0.5);
  --c-surface:   rgba(253, 253, 251, 0.66);
  --c-sunken:    rgba(236, 236, 232, 0.6);
  --c-rule:      rgba(15, 27, 61, 0.12);
  --c-rule-soft: rgba(15, 27, 61, 0.07);

  --glass-pane:        rgba(253, 253, 251, 0.62);
  --glass-pane-strong: rgba(253, 253, 251, 0.76);
  --glass-pane-read:   rgba(251, 251, 249, 0.84);   /* windows full of reading */
  --glass-pane-sheet:  rgba(248, 248, 246, 0.92);   /* full-screen sheets */
  --glass-navy:        rgba(15, 27, 61, 0.9);
  --glass-navy-deep:   rgba(11, 21, 48, 0.94);
  --glass-rim:         rgba(255, 255, 255, 0.7);
  --glass-rim-soft:    rgba(255, 255, 255, 0.45);
  --glass-blur:        blur(18px) saturate(115%);
  --glass-blur-strong: blur(26px) saturate(115%);
  --glass-sheen:       linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 38%);
  --glass-sheen-dark:  linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 40%);
  --glass-shadow:      0 14px 34px -20px rgba(15, 27, 61, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-shadow-sm:   0 6px 18px -14px rgba(15, 27, 61, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --shadow-raise:      var(--glass-shadow-sm);
}

/* ── The colour field ──────────────────────────────────────────────────── */
/* Warm grey paper with a faint wash of navy at the top and a cooler grey at
   the foot: depth for the glass, no colour of its own. */
html { background: #efeeea; }
body { background: transparent; }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120vmax 60vmax at 20% -10%, rgba(30, 58, 95, 0.07), transparent 70%),
    radial-gradient(100vmax 50vmax at 90% 110%, rgba(15, 27, 61, 0.05), transparent 70%),
    linear-gradient(180deg, #f3f2ee 0%, #ecebe6 100%);
}

/* ── The sheen and rim on every pane ───────────────────────────────────── */
.kar-card:not(.kar-card--flat),
.tool-panel,
.chat-container,
.options-container button:not(.done-button):not(.opt-primary):not(.selected),
.profile-chip,
.kar-next__btn,
.rec-card, .message.received.rec-card,
.partner-card, .ab-tm-card,
.palert-item, .card-grid > *,
.answers-panel, .ed-share-panel,
.kar-nav__menu, .kar-account__menu, .kar-totop, .kar-qnav {
  background-image: var(--glass-sheen);
  border-color: var(--glass-rim-soft);
  box-shadow: var(--glass-shadow-sm);
}

/* ── Floating surfaces: strong frost ───────────────────────────────────── */
/* The header's frost sits on a layer behind it, not on the header itself: a
   blur on the header would make it the "backdrop root" of the menus inside
   it, and their own blur would then see only the header, leaving the page
   behind them sharp. */
.kar-header {
  /* A view-transition name (set where page-to-page fades are on) also makes
     the header a backdrop root, which stops its menus from blurring the page.
     The menus' glass wins: the header simply fades with the page. */
  view-transition-name: none;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--glass-rim-soft);
  box-shadow: 0 10px 30px -20px rgba(15, 27, 61, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}
.kar-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: rgba(246, 246, 250, 0.42) var(--glass-sheen);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
}
.kar-nav__menu,
.kar-account__menu {
  background-color: var(--glass-pane-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow);
}
.kar-drawer {
  background: var(--glass-pane-sheet) var(--glass-sheen);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border-left: 1px solid var(--glass-rim);
}
.nav-scrim {
  background: rgba(7, 13, 31, 0.22);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.kar-totop,
.kar-qnav {
  background-color: var(--glass-pane-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow);
}
/* The quick-navigation pill floats over running text, so it is nearly
   opaque: the words behind it must never read through its labels. */
.kar-qnav {
  background-color: var(--glass-pane-sheet);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
}
/* "Top" is an item inside the quick-navigation pill, not a pane of its own:
   the pill's glass shows through it, and only the divider before it stays. */
.kar-qnav .kar-totop {
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-left: 1px solid var(--glass-rim-soft);
  box-shadow: none;
}
.kar-qnav .kar-totop:not(:hover) { background-color: transparent; }
.answers-panel,
.ed-share-panel {
  background-color: var(--glass-pane-read);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
}
.answers-panel-toggle {
  background-color: var(--glass-pane-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* A table's sticky first column slides over the other cells. */
.cmp-table tbody th, .cmp-table thead th:first-child {
  background-color: rgba(250, 250, 252, 0.82);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html body #kar-consent {
  background: var(--glass-navy) var(--glass-sheen-dark);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 44px -16px rgba(7, 13, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ── Panels and cards ──────────────────────────────────────────────────── */
.tool-panel,
.kar-card:not(.kar-card--flat):not(.kar-card--sunken) {
  background-color: var(--glass-pane);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim-soft);
}

/* Navy surfaces become navy glass. */
.kar-footer {
  background: var(--glass-navy-deep) var(--glass-sheen-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* ── The Find My Car questionnaire (and Ask KAR, Accessories) ──────────── */
.chat-container {
  background-color: rgba(255, 255, 255, 0.36);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow);
}
.chat-header {
  background: var(--glass-navy) var(--glass-sheen-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.chat-messages, .question-progress-dock { background: transparent; }
.chat-input {
  background: rgba(255, 255, 255, 0.28);
  border-top: 1px solid var(--glass-rim-soft);
}
#message-input,
.question-input-container input,
#question-input,
.tool-panel input, .tool-panel select, .tool-panel textarea {
  background-color: rgba(255, 255, 255, 0.55);
  border-color: rgba(15, 27, 61, 0.14);
}
/* The answers: brighter panes of the same glass, no second blur (a blur
   inside a blur costs a lot on a phone for no visible gain). */
.options-container button:not(.done-button):not(.opt-primary):not(.selected),
.profile-chip {
  background-color: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--glass-rim);
}
.options-container button:hover:not(.selected):not(.done-button):not(.opt-primary):not(:disabled) {
  background-color: rgba(236, 236, 232, 0.85);
}
.options-container button.selected,
.options-container button.done-button,
.options-container button.opt-primary {
  background-image: var(--glass-sheen-dark);
}
.sent { background: rgba(231, 233, 238, 0.9); }

/* ── Site assistant: window and round button ───────────────────────────── */
/* `body` raises these above the assistant's own stylesheet, which loads
   later, on first use. */
body .kar-assist {
  background: var(--glass-pane-read) var(--glass-sheen);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-rim);
  box-shadow: 0 28px 64px -20px rgba(15, 27, 61, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body .kar-assist__head { background: var(--glass-navy) var(--glass-sheen-dark); }
body .kar-assist__log,
body .kar-assist__chips { background: transparent; }
body .kar-assist__msg.is-assistant { background: rgba(255, 255, 255, 0.6) var(--glass-sheen); border-color: var(--glass-rim); }
body .kar-assist__msg.is-user { background: rgba(15, 27, 61, 0.84); }
body .kar-assist__chip,
body .kar-assist__link { background: rgba(255, 255, 255, 0.5) var(--glass-sheen); border-color: var(--glass-rim); }
body .kar-assist__input { background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 27, 61, 0.14); }
body .kar-assist__form { border-top-color: var(--glass-rim-soft); }
body .kar-assist-launch {
  background: rgba(15, 27, 61, 0.9) var(--glass-sheen-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 24px -12px rgba(15, 27, 61, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
body .kar-assist-launch:hover { background-color: rgba(30, 58, 95, 0.95); }

/* ── Things that must stay solid ───────────────────────────────────────── */
/* Text that takes the page colour on a navy hover must stay fully opaque. */
.btn-outline:hover, .about-cta--outline:hover, .answers-panel-toggle:hover,
.auth-layout .login-links a.register-button:hover { color: #f5f4ef !important; }
/* The fit ring's centre punches a hole in a coloured ring: it has to be
   opaque, or the ring reads as a filled disc. */
.rp-fit-ring::before { background: #fbfbfc; }

/* ── Where glass cannot be drawn, or is not wanted ─────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --c-bg: #f5f4ef; --c-surface: #fdfcf9; --c-sunken: #eceae2; --kar-paper: #f5f4ef; --kar-sheet: #fdfcf9; --kar-paper-2: #eceae2; --kar-navy-100: #e6e9f0; }
  .kar-header::before { background: rgba(244, 241, 234, 0.97); }
  .kar-nav__menu, .kar-account__menu, .kar-drawer, .kar-totop, .kar-qnav, .answers-panel, .answers-panel-toggle, .ed-share-panel,
  .tool-panel, .kar-card:not(.kar-card--flat):not(.kar-card--sunken), .chat-container, body .kar-assist { background-color: #fdfcf9; }
  html body #kar-consent, .chat-header, body .kar-assist__head, .kar-footer { background-color: var(--kar-navy-800); }
  body .kar-assist-launch { background-color: var(--kar-navy-800); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --c-bg: #f5f4ef; --c-surface: #fdfcf9; --c-sunken: #eceae2; --kar-paper: #f5f4ef; --kar-sheet: #fdfcf9; --kar-paper-2: #eceae2; --kar-navy-100: #e6e9f0; }
  body::before { display: none; }
  html { background: #f5f4ef; }
  .kar-header::before { background: #f5f4ef; }
  .kar-nav__menu, .kar-account__menu, .kar-drawer, .kar-totop, .kar-qnav, .answers-panel, .answers-panel-toggle, .ed-share-panel,
  .tool-panel, .kar-card:not(.kar-card--flat):not(.kar-card--sunken), .chat-container, body .kar-assist,
  .options-container button:not(.done-button):not(.opt-primary):not(.selected), .profile-chip,
  body .kar-assist__msg.is-assistant, body .kar-assist__chip, body .kar-assist__link { background-color: #fdfcf9; background-image: none; }
  html body #kar-consent, .chat-header, body .kar-assist__head, body .kar-assist-launch, .kar-footer { background-color: var(--kar-navy-800); background-image: none; }
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media print {
  body::before { display: none; }
  html { background: #fff; }
}