/* ============================================================================
   KAR — dark theme
   On when <html data-theme="dark"> (scripts/theme.js, the moon in the header).
   Linked early in <head> on every page; every rule here is scoped to
   [data-theme="dark"] so its specificity, not its order, wins over the page
   sheets loaded after it. Light stays the default and is untouched.

   1. Tokens: the raw palette is re-pointed, so everything built on the
      semantic tokens (--c-*) turns dark by itself.
   2. Colours the page sheets write out by hand (#fff panels, dark text on
      tinted notices, the light frosted header).
   3. Glass (styles/glass.css), when present: the same frost, dark.
   ========================================================================= */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --kar-paper:    #0b1120;   /* page ground */
  --kar-paper-2:  #0f1729;   /* sunken band */
  --kar-paper-3:  #1b2540;
  --kar-sheet:    #131c32;   /* raised surface */

  --kar-ink:      #eef1f8;
  --kar-ink-2:    #c9cfdf;
  --kar-ink-3:    #a0a9c0;
  --kar-ink-4:    #7f89a3;

  --kar-rule:      #2a3555;
  --kar-rule-soft: #1e2843;

  --kar-navy-100: #1a2441;
  --kar-ice-soft: #17213c;
  --kar-gold-ink:  #dcbd6c;  /* gold as text on dark (AA) */
  --kar-gold-soft: #2b2415;

  --kar-green:      #63c793;
  --kar-green-soft: #10291d;
  --kar-amber:      #e3aa52;
  --kar-amber-soft: #2c2111;
  --kar-red:        #f19582;
  --kar-red-soft:   #301713;

  /* Surfaces named here too, not only through the palette: a sheet loaded
     later that redefines them (glass.css) must not bring the light ones back. */
  --c-bg:          var(--kar-paper);
  --c-surface:     var(--kar-sheet);
  --c-sunken:      var(--kar-paper-2);
  --c-rule:        var(--kar-rule);
  --c-rule-soft:   var(--kar-rule-soft);
  --c-text-4:      var(--kar-ink-4);
  --c-rule-strong: #c9cfdf;
  --c-brand:       #24467d;  /* a navy that still reads as a button on dark */
  --c-brand-2:     #2f5592;
  --c-accent-ink:  #e8cd88;
  --c-focus:       #8db3e2;

  --c-inverse:        #070c1a;
  --c-inverse-2:      #0d152b;

  --shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-overlay: 0 24px 48px -16px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);

  /* Older page-sheet names */
  --primary-glow: rgba(141, 179, 226, 0.16);
  --warning-text: #f0c47a;
  --primary-ultra-light: #17213c;
  --primary-dark: #c9d6ef;
}

html[data-theme="dark"] body { background-color: var(--c-bg); color: var(--c-text); }
html[data-theme="dark"] ::selection { background: #2d5089; color: #fff; }

/* Form controls follow the theme (date pickers, scrollbars, autofill). */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { color-scheme: dark; }
html[data-theme="dark"] input:-webkit-autofill {
  -webkit-text-fill-color: var(--c-text);
  -webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset;
}

/* ── 2. Hand-written colours ───────────────────────────────────────────── */

/* Header: the light frost becomes a dark one. */
html[data-theme="dark"] .kar-header { background: rgba(11, 17, 32, 0.9); border-bottom-color: var(--c-rule); }

/* The theme switch itself: a quiet icon button beside EN/ΕΛ. */
.kar-theme-toggle {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-md, 8px);
  background: none; cursor: pointer; color: var(--c-text-3, #626a7e);
  transition: color var(--dur-1, .12s) var(--ease, ease), border-color var(--dur-1, .12s) var(--ease, ease);
}
.kar-theme-toggle .kar-icon { width: 18px; height: 18px; }
.kar-theme-toggle:hover { color: var(--c-text, #0a1233); border-color: var(--c-rule, #d5d4cb); }
.kar-theme-toggle:focus-visible { outline: 2px solid var(--c-focus, #3b6fa0); outline-offset: 2px; }
/* Changing theme (scripts/theme.js): the icon turns, and the page fades
   quietly from one theme to the other. Only while .kar-theme-vt is on <html>,
   so the page-to-page fade in kar.css is not affected; the header is part of
   the page for that moment so it fades with it. */
.kar-theme-toggle.is-turning .kar-icon { animation: kar-theme-turn 520ms cubic-bezier(0.22, 0.8, 0.24, 1); }
@keyframes kar-theme-turn { from { transform: rotate(-90deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
html.kar-theme-vt .kar-header { view-transition-name: none; }
html.kar-theme-vt::view-transition-old(root),
html.kar-theme-vt::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: ease; }
/* Browsers without View Transitions: the colours fade instead. */
html.kar-theme-fade,
html.kar-theme-fade *,
html.kar-theme-fade *::before,
html.kar-theme-fade *::after {
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, fill 250ms ease, stroke 250ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .kar-theme-toggle.is-turning .kar-icon { animation: none; }
}
html[data-theme="dark"] .kar-theme-toggle { color: var(--kar-gold-ink); }
@media (max-width: 380px) { .kar-theme-toggle { width: 34px; } }
/* The switch takes room from the header: keep "Ask KAR" on one line, and
   between the phone menu and a wide screen give the header a little back. */
.kar-header__ask { white-space: nowrap; }
@media (min-width: 1080px) and (max-width: 1359px) {
  .kar-theme-toggle { width: 32px; }
  .kar-header__actions { gap: 4px; }
  .kar-header .kar-brand__sub { display: none; }
}

/* Tinted notices write their text colour out by hand (dark brown, green,
   red on a pale tint); on the dark tints they take the light versions. */
html[data-theme="dark"] .kar-notice--warn,
html[data-theme="dark"] .car-list-status--warn,
html[data-theme="dark"] .demo-factors li,
html[data-theme="dark"] .lease-constraint-badge,
html[data-theme="dark"] .note.warn,
html[data-theme="dark"] .warning-box { color: #f0c47a; }
html[data-theme="dark"] .kar-notice--pos,
html[data-theme="dark"] .car-list-status--success,
html[data-theme="dark"] .lease-constraint-badge--list,
html[data-theme="dark"] .success-message,
html[data-theme="dark"] #logout-success { color: #8fdcb3; }
html[data-theme="dark"] .kar-notice--neg,
html[data-theme="dark"] .car-list-status--error,
html[data-theme="dark"] #error-message,
html[data-theme="dark"] #account-exists,
html[data-theme="dark"] .account-exist,
html[data-theme="dark"] #login-error { color: #f5b3a6; }

/* Navy text on what is now a dark ground. */
html[data-theme="dark"] .refine-open,
html[data-theme="dark"] .kar-next__btn:hover .kar-icon { color: #9dbbe6; }
html[data-theme="dark"] .answers-changed-notice .acn-btn { background: var(--c-surface); color: var(--c-text); }
html[data-theme="dark"] .answers-changed-notice .acn-btn:hover { background: var(--c-sunken); }

/* White hovers on navy bands: the band is darker now, white still reads, but
   the text on a white button must stay navy. */
html[data-theme="dark"] .kar-btn--inverse:hover,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .ed-btn:hover { color: #0f1b3d; }

/* Photograph stand-ins: the pale grey plate goes dark. */
html[data-theme="dark"] .rp-figure.no-photo,
html[data-theme="dark"] .kar-photo-placeholder { background: linear-gradient(180deg, #1a2440 0%, #121a30 100%); }
html[data-theme="dark"] .h-plate__media,
html[data-theme="dark"] .h-dossier__media { background-color: #1a2440; }

/* The navy seal disappears on a dark header: it turns white, as it
   already does in the navy footer. */
html[data-theme="dark"] .kar-brand__mark { filter: brightness(0) invert(1); opacity: 0.92; }

/* Bars and meters filled with the brand navy: a lighter navy so the
   filled part reads against the dark track. */
html[data-theme="dark"] .rc-score-meter i { background: #6f98d6; }
html[data-theme="dark"] .rp-fit.is-fair { --rp-fit-color: #8db3e2; }

/* Focus rings that were navy on paper. */
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .select:focus,
html[data-theme="dark"] .textarea:focus,
html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] #feedback-input:focus,
html[data-theme="dark"] .car-list-textarea:focus,
html[data-theme="dark"] .refine-input:focus { border-color: var(--c-focus); box-shadow: 0 0 0 3px rgba(141, 179, 226, 0.18); }

/* Ranges and checkboxes take the lighter navy so they show. */
html[data-theme="dark"] input[type="range"],
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] { accent-color: #6f98d6; }

/* Answer buttons in the questionnaire that were navy text on paper. */
html[data-theme="dark"] .options-container button { color: var(--c-text); }

/* Scrollbars */
html[data-theme="dark"] { scrollbar-color: #2a3555 #0b1120; }

/* Pages that still carry their own <style> block with fixed colours:
   legal pages, account pages, partners. Inline style attributes need the
   !important; nothing else here does. */
html[data-theme="dark"] .legal-page h1,
html[data-theme="dark"] .legal-page h2,
html[data-theme="dark"] .delacc-card h3,
html[data-theme="dark"] .delacc-noaccess h3,
html[data-theme="dark"] .verify-subtitle strong,
html[data-theme="dark"] .spam-notice strong,
html[data-theme="dark"] .timer-value { color: var(--c-text); }
html[data-theme="dark"] .legal-page p,
html[data-theme="dark"] .legal-page li,
html[data-theme="dark"] .delacc-intro,
html[data-theme="dark"] .delacc-card ul,
html[data-theme="dark"] .partners-page-intro p,
html[data-theme="dark"] .verify-subtitle,
html[data-theme="dark"] .resend-row,
html[data-theme="dark"] .login-container > p,
html[data-theme="dark"] .login-container p[style] { color: var(--c-text-2) !important; }
html[data-theme="dark"] .legal-page .updated,
html[data-theme="dark"] .delacc-noaccess p,
html[data-theme="dark"] .timer-row,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .toggle-password,
html[data-theme="dark"] .resend-row button:disabled,
html[data-theme="dark"] .resend-cooldown,
html[data-theme="dark"] [style*="color:#aaa"] { color: var(--c-text-3) !important; }
html[data-theme="dark"] .legal-page a,
html[data-theme="dark"] .legal-page .back-link,
html[data-theme="dark"] .partners-back-link,
html[data-theme="dark"] .resend-row button,
html[data-theme="dark"] a.back-link,
html[data-theme="dark"] .back-link a,
html[data-theme="dark"] .auth-note a,
html[data-theme="dark"] [style*="color:#0f1b3d"] { color: #9dbbe6 !important; }
html[data-theme="dark"] [style*="color:#c62828"],
html[data-theme="dark"] .delacc-warning,
html[data-theme="dark"] .status-message.error,
html[data-theme="dark"] #verify-error { color: #f5b3a6 !important; background: var(--c-neg-soft); border-color: rgba(241, 149, 130, 0.35); }
html[data-theme="dark"] .status-message.success,
html[data-theme="dark"] #verify-success { color: #8fdcb3; background: var(--c-pos-soft); border-color: rgba(99, 199, 147, 0.35); }
html[data-theme="dark"] .delacc-card { background: var(--c-surface); border-color: var(--c-rule); }
html[data-theme="dark"] .delacc-noaccess { border-top-color: var(--c-rule); }
html[data-theme="dark"] .delacc-noaccess a.btn-mailto { border-color: var(--c-text-2); color: var(--c-text); }
html[data-theme="dark"] .delacc-noaccess a.btn-mailto:hover { background: var(--c-text); color: var(--c-bg); }
html[data-theme="dark"] .code-digit { background: var(--c-sunken); border-color: var(--c-rule); color: var(--c-text); }
html[data-theme="dark"] .code-digit:focus { background: var(--c-surface); border-color: var(--c-focus); }
html[data-theme="dark"] .code-digit.filled { background: var(--kar-navy-100); border-color: #6f98d6; }
html[data-theme="dark"] .code-digit.error-shake { background: var(--c-neg-soft); }
html[data-theme="dark"] .spam-notice { background: var(--kar-ice-soft); border-color: var(--c-rule); color: var(--c-text-2); }
html[data-theme="dark"] .strength-bar-wrap { background: var(--c-rule); }
html[data-theme="dark"] .toggle-password:hover { color: var(--c-text) !important; }
html[data-theme="dark"] .h-hero__media { background-color: #1a2440; }

/* About: headings and figures written in navy, and the blue accents, on
   what is now a dark page. The gold buttons keep their navy text. */
html[data-theme="dark"] .ab-statement,
html[data-theme="dark"] .ab-source-k,
html[data-theme="dark"] .ab-col-h,
html[data-theme="dark"] .ab-team-h,
html[data-theme="dark"] .ab-team-stats b,
html[data-theme="dark"] .ab-tm-name,
html[data-theme="dark"] .ab-tm-more summary:hover,
html[data-theme="dark"] .ab-tm-link,
html[data-theme="dark"] .ab-tm-join-h,
html[data-theme="dark"] .ab-rail a:hover,
html[data-theme="dark"] .ab-rail a:focus-visible,
html[data-theme="dark"] .ab-rail a[aria-current="true"] { color: var(--c-text); }
html[data-theme="dark"] .ab-mark,
html[data-theme="dark"] .ab-statement em,
html[data-theme="dark"] .ab-source-tag,
html[data-theme="dark"] .ab-col--after .ab-col-k,
html[data-theme="dark"] .ab-steps li::before,
html[data-theme="dark"] .ab-loop span[aria-hidden],
html[data-theme="dark"] .ab-shift-arrow,
html[data-theme="dark"] .ab-team-h em,
html[data-theme="dark"] .ab-team-where,
html[data-theme="dark"] .ab-tm-role,
html[data-theme="dark"] .ab-tm-more summary::before,
html[data-theme="dark"] .ab-tm-in:hover,
html[data-theme="dark"] .ab-tm-in:focus-visible { color: #8db3e2; }
html[data-theme="dark"] .ab-chapter--dark,
html[data-theme="dark"] .ab-tm--lead .ab-tm-card { background: #0e1730; }

/* ── 3. Glass (styles/glass.css), when it is on the page ───────────────
   Glass writes white panes; on a dark page they become dark panes of the
   same glass, over a dark colour field. Keyed on the stylesheet being
   present, so without glass none of this applies. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="dark"]:has(link[href*="/styles/glass.css"]) {
    --kar-paper:    rgba(11, 17, 32, 0.42);
    --kar-sheet:    rgba(22, 32, 58, 0.52);
    --kar-paper-2:  rgba(15, 23, 43, 0.55);
    --kar-navy-100: rgba(26, 36, 65, 0.6);
    --c-bg:        rgba(11, 17, 32, 0.42);
    --c-surface:   rgba(22, 32, 58, 0.52);
    --c-sunken:    rgba(15, 23, 43, 0.55);
    --c-rule:      rgba(196, 206, 232, 0.17);
    --c-rule-soft: rgba(196, 206, 232, 0.1);

    --glass-pane:        rgba(22, 32, 58, 0.5);
    --glass-pane-strong: rgba(20, 29, 54, 0.7);
    --glass-pane-read:   rgba(15, 22, 42, 0.82);
    --glass-pane-sheet:  rgba(11, 17, 32, 0.9);
    --glass-rim:         rgba(196, 206, 232, 0.24);
    --glass-rim-soft:    rgba(196, 206, 232, 0.14);
    --glass-sheen:       linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 40%);
    --glass-shadow:      0 18px 44px -18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    --glass-shadow-sm:   0 8px 22px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-raise:      var(--glass-shadow-sm);
  }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) { background: #070b16; }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) body::before {
    background:
      radial-gradient(120vmax 60vmax at 20% -10%, rgba(59, 98, 163, 0.16), transparent 70%),
      radial-gradient(100vmax 50vmax at 90% 110%, rgba(30, 58, 95, 0.2), transparent 70%),
      #0a1020;
  }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .kar-header { box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.06); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .kar-header::before { background: rgba(11, 17, 32, 0.55) var(--glass-sheen); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .cmp-table tbody th,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .cmp-table thead th:first-child { background-color: rgba(19, 28, 50, 0.88); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .chat-container { background-color: rgba(17, 25, 46, 0.5); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .chat-input { background: rgba(11, 17, 32, 0.4); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) #message-input,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .question-input-container input,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) #question-input,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .tool-panel input,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .tool-panel select,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .tool-panel textarea { background-color: rgba(9, 14, 28, 0.6); border-color: rgba(196, 206, 232, 0.2); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .options-container button:not(.done-button):not(.opt-primary):not(.selected),
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .profile-chip { background-color: rgba(26, 37, 66, 0.55); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .options-container button:hover:not(.selected):not(.done-button):not(.opt-primary):not(:disabled) { background-color: rgba(45, 80, 137, 0.5); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .sent { background: rgba(45, 80, 137, 0.6); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .rp-fit-ring::before { background: #131c32; }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) body .kar-assist { box-shadow: 0 28px 64px -20px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) body .kar-assist__msg.is-assistant { background: rgba(26, 37, 66, 0.7) var(--glass-sheen); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) body .kar-assist__msg.is-user { background: rgba(45, 80, 137, 0.85); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) body .kar-assist__chip,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) body .kar-assist__link { background: rgba(26, 37, 66, 0.6) var(--glass-sheen); }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) body .kar-assist__input { background: rgba(9, 14, 28, 0.6); border-color: rgba(196, 206, 232, 0.2); }
}
/* Glass asked to be solid (reduced transparency): solid dark. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="dark"]:has(link[href*="/styles/glass.css"]) {
    --c-bg: #0b1120; --c-surface: #131c32; --c-sunken: #0f1729;
    --kar-paper: #0b1120; --kar-sheet: #131c32; --kar-paper-2: #0f1729; --kar-navy-100: #1a2441;
  }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) { background: #0b1120; }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .kar-header::before { background: #0b1120; }
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .kar-nav__menu,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .kar-account__menu,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .kar-drawer,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .tool-panel,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .chat-container,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .options-container button:not(.done-button):not(.opt-primary):not(.selected),
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) .profile-chip,
  html[data-theme="dark"]:has(link[href*="/styles/glass.css"]) body .kar-assist { background-color: #131c32; background-image: none; }
}