/* Fleet site Light/Dark/Auto — remaps shared tokens; leave ads/iframes alone. */

html[data-site-theme="dark"],
html[data-site-theme="auto"] {
  color-scheme: light dark;
}

/* Compact header control */
.site-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.18rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.site-theme-toggle[hidden] {
  display: none !important;
}

.site-theme-toggle-btn {
  appearance: none;
  border: 0;
  margin: 0;
  min-height: 1.85rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-theme-toggle-btn:hover,
.site-theme-toggle-btn:focus-visible {
  color: #fff;
  outline: none;
}

.site-theme-toggle-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

@media (max-width: 720px) {
  .site-theme-toggle-btn {
    min-height: 2rem;
    padding: 0.32rem 0.5rem;
    font-size: 0.7rem;
  }
}

/* ---- Dark token overrides (explicit dark + Auto when OS is dark) ---- */
html[data-site-theme="dark"],
html[data-site-theme="dark"] body {
  --bg: #12171d;
  --bg-soft: #1a222c;
  --surface: #12171d;
  --card: #1c2430;
  --text: #f0ebe3;
  --muted: #a8b0ba;
  --muted-soft: #8f98a3;
  --fleet-dk-text: #f0ebe3;
  --fleet-dk-muted: #a8b0ba;
  --line: rgba(240, 235, 227, 0.12);
  --fd-bg: #12171d;
  --fd-bg-soft: #1a222c;
  --fd-surface: #1c2430;
  --fd-text: #f0ebe3;
  --fd-muted: #a8b0ba;
  --fd-line: rgba(240, 235, 227, 0.12);
  --fd-accent: #f0ebe3;
  --fd-chip: rgba(240, 235, 227, 0.08);
  --fd-chip-hover: rgba(240, 235, 227, 0.14);
  --fd-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --fleet-dk-soft: #1a222c;
  --fleet-dk-line: #3a4555;
  --fleet-dk-link: #9ec9ff;
  --fleet-dk-hover: #222c38;
  --fleet-dk-active: #1e3a5f;
  --fleet-dk-ok-bg: #14352a;
  --fleet-dk-ok-text: #7fd7ab;
  --fleet-dk-bad-bg: #3a1a1a;
  background-color: #12171d;
  color: #f0ebe3;
}

@media (prefers-color-scheme: dark) {
  html[data-site-theme="auto"],
  html[data-site-theme="auto"] body {
    --bg: #12171d;
    --bg-soft: #1a222c;
    --surface: #12171d;
    --card: #1c2430;
    --text: #f0ebe3;
    --muted: #a8b0ba;
    --muted-soft: #8f98a3;
    --fleet-dk-text: #f0ebe3;
    --fleet-dk-muted: #a8b0ba;
    --line: rgba(240, 235, 227, 0.12);
    --fd-bg: #12171d;
    --fd-bg-soft: #1a222c;
    --fd-surface: #1c2430;
    --fd-text: #f0ebe3;
    --fd-muted: #a8b0ba;
    --fd-line: rgba(240, 235, 227, 0.12);
    --fd-accent: #f0ebe3;
    --fd-chip: rgba(240, 235, 227, 0.08);
    --fd-chip-hover: rgba(240, 235, 227, 0.14);
    --fd-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    --fleet-dk-soft: #1a222c;
    --fleet-dk-line: #3a4555;
    --fleet-dk-link: #9ec9ff;
    --fleet-dk-hover: #222c38;
    --fleet-dk-active: #1e3a5f;
    --fleet-dk-ok-bg: #14352a;
    --fleet-dk-ok-text: #7fd7ab;
    --fleet-dk-bad-bg: #3a1a1a;
    background-color: #12171d;
    color: #f0ebe3;
  }
}

/* Common light-only surfaces → dark cards */
html[data-site-theme="dark"] .promo-strip,
html[data-site-theme="dark"] .post-card,
html[data-site-theme="dark"] .card,
html[data-site-theme="dark"] .topic-card,
html[data-site-theme="dark"] .blog-card,
html[data-site-theme="dark"] .newsletter-box,
html[data-site-theme="dark"] .newsletter-landing-card,
html[data-site-theme="dark"] .process,
html[data-site-theme="dark"] .program-card,
html[data-site-theme="dark"] .why-card,
html[data-site-theme="dark"] .service-card,
html[data-site-theme="dark"] .quote-panel,
html[data-site-theme="dark"] .our-brands-item,
html[data-site-theme="dark"] .partners-card,
html[data-site-theme="dark"] .site-search-overlay,
html[data-site-theme="dark"] .site-search-panel,
html[data-site-theme="dark"] .latest-card,
html[data-site-theme="dark"] .featured-aside,
html[data-site-theme="dark"] .category-card {
  background: var(--card, #1c2430) !important;
  color: var(--text, #f0ebe3);
  border-color: var(--line, rgba(240, 235, 227, 0.12));
}

@media (prefers-color-scheme: dark) {
  html[data-site-theme="auto"] .promo-strip,
  html[data-site-theme="auto"] .post-card,
  html[data-site-theme="auto"] .card,
  html[data-site-theme="auto"] .topic-card,
  html[data-site-theme="auto"] .blog-card,
  html[data-site-theme="auto"] .newsletter-box,
  html[data-site-theme="auto"] .newsletter-landing-card,
  html[data-site-theme="auto"] .process,
  html[data-site-theme="auto"] .program-card,
  html[data-site-theme="auto"] .why-card,
  html[data-site-theme="auto"] .service-card,
  html[data-site-theme="auto"] .quote-panel,
  html[data-site-theme="auto"] .our-brands-item,
  html[data-site-theme="auto"] .partners-card,
  html[data-site-theme="auto"] .site-search-overlay,
  html[data-site-theme="auto"] .site-search-panel,
  html[data-site-theme="auto"] .latest-card,
  html[data-site-theme="auto"] .featured-aside,
  html[data-site-theme="auto"] .category-card {
    background: var(--card, #1c2430) !important;
    color: var(--text, #f0ebe3);
    border-color: var(--line, rgba(240, 235, 227, 0.12));
  }
}

/* Publisher fleet-home.css often ships bare background:#fff on .site-footer
   (static docroot copies lag the j2 var(--card) remap). Override bg + text. */
html[data-site-theme="dark"] .site-footer {
  background: var(--card, #1c2430);
  color: color-mix(in srgb, var(--text, #f0ebe3) 88%, transparent);
  border-top-color: var(--line, rgba(240, 235, 227, 0.12));
}

html[data-site-theme="dark"] .site-footer a,
html[data-site-theme="dark"] .site-footer .footer-copyright,
html[data-site-theme="dark"] .site-footer .footer-inner {
  color: color-mix(in srgb, var(--text, #f0ebe3) 88%, transparent);
}

html[data-site-theme="dark"] .site-footer a:hover {
  color: var(--accent, #d4b499);
}

html[data-site-theme="dark"] input,
html[data-site-theme="dark"] textarea,
html[data-site-theme="dark"] select {
  background: #1a222c;
  color: var(--text, #f0ebe3);
  border-color: var(--line, rgba(240, 235, 227, 0.18));
}

@media (prefers-color-scheme: dark) {
  html[data-site-theme="auto"] .site-footer {
    background: var(--card, #1c2430);
    color: color-mix(in srgb, var(--text, #f0ebe3) 88%, transparent);
    border-top-color: var(--line, rgba(240, 235, 227, 0.12));
  }
  html[data-site-theme="auto"] .site-footer a,
  html[data-site-theme="auto"] .site-footer .footer-copyright,
  html[data-site-theme="auto"] .site-footer .footer-inner {
    color: color-mix(in srgb, var(--text, #f0ebe3) 88%, transparent);
  }
  html[data-site-theme="auto"] .site-footer a:hover {
    color: var(--accent, #d4b499);
  }
  html[data-site-theme="auto"] input,
  html[data-site-theme="auto"] textarea,
  html[data-site-theme="auto"] select {
    background: #1a222c;
    color: var(--text, #f0ebe3);
    border-color: var(--line, rgba(240, 235, 227, 0.18));
  }
}

/* Article / blog list surfaces */
html[data-site-theme="dark"] .article-body,
html[data-site-theme="dark"] .post-body,
html[data-site-theme="dark"] .content-main,
html[data-site-theme="dark"] .blog-list,
html[data-site-theme="dark"] .latest-grid article,
html[data-site-theme="dark"] .topic-rail,
html[data-site-theme="dark"] .nav-dropdown-panel,
html[data-site-theme="dark"] .nav-articles-subnav {
  background-color: transparent;
  color: var(--text, #f0ebe3);
}

html[data-site-theme="dark"] .nav-dropdown-panel,
html[data-site-theme="dark"] .nav-articles-subnav {
  background: #1c2430;
  border-color: var(--line, rgba(240, 235, 227, 0.12));
}

html[data-site-theme="dark"] .article-body a,
html[data-site-theme="dark"] .post-body a {
  color: color-mix(in srgb, var(--accent, #d4b499) 85%, #fff);
}

html[data-site-theme="dark"] .article-body pre,
html[data-site-theme="dark"] .article-body code,
html[data-site-theme="dark"] .post-body pre,
html[data-site-theme="dark"] .post-body code {
  background: #1a222c;
  color: var(--text, #f0ebe3);
}

@media (prefers-color-scheme: dark) {
  html[data-site-theme="auto"] .nav-dropdown-panel,
  html[data-site-theme="auto"] .nav-articles-subnav {
    background: #1c2430;
    border-color: var(--line, rgba(240, 235, 227, 0.12));
  }
  html[data-site-theme="auto"] .article-body a,
  html[data-site-theme="auto"] .post-body a {
    color: color-mix(in srgb, var(--accent, #d4b499) 85%, #fff);
  }
  html[data-site-theme="auto"] .article-body pre,
  html[data-site-theme="auto"] .article-body code,
  html[data-site-theme="auto"] .post-body pre,
  html[data-site-theme="auto"] .post-body code {
    background: #1a222c;
    color: var(--text, #f0ebe3);
  }
}

/* Mobile drawer stays readable on dark header */
@media (max-width: 720px) {
  html[data-site-theme="dark"] .site-header.is-nav-open .site-nav,
  html[data-site-theme="auto"] .site-header.is-nav-open .site-nav {
    background: rgba(15, 20, 25, 0.98);
  }
}

/* Do not restyle ad / consent iframes */
html[data-site-theme="dark"] iframe[id*="google_ads"],
html[data-site-theme="dark"] .adsbygoogle,
html[data-site-theme="auto"] iframe[id*="google_ads"],
html[data-site-theme="auto"] .adsbygoogle {
  background: transparent !important;
}

/* ---- Article TOC (fleet-toc.css is light-only) ---- */
html[data-site-theme="dark"] .wp-block-rank-math-toc-block {
  background: var(--card, #1c2430);
  border-color: var(--line, rgba(240, 235, 227, 0.12));
  color: var(--text, #f0ebe3);
}

html[data-site-theme="dark"] .wp-block-rank-math-toc-block h2 {
  background: #242e3b;
  color: var(--text, #f0ebe3);
  border-bottom-color: var(--line, rgba(240, 235, 227, 0.12));
}

html[data-site-theme="dark"] .wp-block-rank-math-toc-block h2:after {
  border-color: var(--muted, #a8b0ba) transparent transparent transparent;
}

html[data-site-theme="dark"] .wp-block-rank-math-toc-block > nav > ul > li {
  border-bottom-color: var(--line, rgba(240, 235, 227, 0.1));
}

html[data-site-theme="dark"] .article-body .wp-block-rank-math-toc-block li a,
html[data-site-theme="dark"] .post-body .wp-block-rank-math-toc-block li a,
html[data-site-theme="dark"] .wp-block-rank-math-toc-block li a,
html[data-site-theme="dark"] .wp-block-rank-math-toc-block li a:visited {
  color: #9ec9ff !important;
}

html[data-site-theme="dark"] .wp-block-rank-math-toc-block li a:hover {
  background: rgba(240, 235, 227, 0.08);
  color: #c5e0ff !important;
}

@media (prefers-color-scheme: dark) {
  html[data-site-theme="auto"] .wp-block-rank-math-toc-block {
    background: var(--card, #1c2430);
    border-color: var(--line, rgba(240, 235, 227, 0.12));
    color: var(--text, #f0ebe3);
  }
  html[data-site-theme="auto"] .wp-block-rank-math-toc-block h2 {
    background: #242e3b;
    color: var(--text, #f0ebe3);
    border-bottom-color: var(--line, rgba(240, 235, 227, 0.12));
  }
  html[data-site-theme="auto"] .wp-block-rank-math-toc-block h2:after {
    border-color: var(--muted, #a8b0ba) transparent transparent transparent;
  }
  html[data-site-theme="auto"] .wp-block-rank-math-toc-block > nav > ul > li {
    border-bottom-color: var(--line, rgba(240, 235, 227, 0.1));
  }
  html[data-site-theme="auto"] .article-body .wp-block-rank-math-toc-block li a,
  html[data-site-theme="auto"] .post-body .wp-block-rank-math-toc-block li a,
  html[data-site-theme="auto"] .wp-block-rank-math-toc-block li a,
  html[data-site-theme="auto"] .wp-block-rank-math-toc-block li a:visited {
    color: #9ec9ff !important;
  }
  html[data-site-theme="auto"] .wp-block-rank-math-toc-block li a:hover {
    background: rgba(240, 235, 227, 0.08);
    color: #c5e0ff !important;
  }
}

/* ---- Related Posts (light source uses CSS vars; dark chrome still here) ---- */
html[data-site-theme="dark"] .hutts-related-posts {
  background: var(--card, #1c2430) !important;
  color: var(--text, #f0ebe3);
  border: 1px solid var(--line, rgba(240, 235, 227, 0.12));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html[data-site-theme="dark"] .hutts-related-posts h3 {
  color: var(--text, #f0ebe3);
}

html[data-site-theme="dark"] .hutts-related-posts li {
  border-bottom-color: var(--line, rgba(240, 235, 227, 0.1));
}

html[data-site-theme="dark"] .article-body .hutts-related-posts a,
html[data-site-theme="dark"] .post-body .hutts-related-posts a,
html[data-site-theme="dark"] .hutts-related-posts a,
html[data-site-theme="dark"] .hutts-related-posts a:visited {
  color: #9ec9ff !important;
}

html[data-site-theme="dark"] .hutts-related-posts a:hover {
  color: #c5e0ff !important;
}

@media (prefers-color-scheme: dark) {
  html[data-site-theme="auto"] .hutts-related-posts {
    background: var(--card, #1c2430) !important;
    color: var(--text, #f0ebe3);
    border: 1px solid var(--line, rgba(240, 235, 227, 0.12));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }
  html[data-site-theme="auto"] .hutts-related-posts h3 {
    color: var(--text, #f0ebe3);
  }
  html[data-site-theme="auto"] .hutts-related-posts li {
    border-bottom-color: var(--line, rgba(240, 235, 227, 0.1));
  }
  html[data-site-theme="auto"] .article-body .hutts-related-posts a,
  html[data-site-theme="auto"] .post-body .hutts-related-posts a,
  html[data-site-theme="auto"] .hutts-related-posts a,
  html[data-site-theme="auto"] .hutts-related-posts a:visited {
    color: #9ec9ff !important;
  }
  html[data-site-theme="auto"] .hutts-related-posts a:hover {
    color: #c5e0ff !important;
  }
}

/* ---- In-article newsletter CTA (hutts-signup-cta.css is light-only) ---- */
html[data-site-theme="dark"] .hutts-signup-cta__inner {
  background: linear-gradient(180deg, #1c2430 0%, #171e28 100%) !important;
  border-color: var(--line, rgba(240, 235, 227, 0.14)) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  color: var(--text, #f0ebe3);
}

html[data-site-theme="dark"] .hutts-signup-cta__headline {
  color: var(--text, #f0ebe3) !important;
}

html[data-site-theme="dark"] .hutts-signup-cta__subtext {
  color: var(--muted, #a8b0ba) !important;
}

html[data-site-theme="dark"] .hutts-signup-cta__form label {
  color: color-mix(in srgb, var(--text, #f0ebe3) 88%, transparent);
}

html[data-site-theme="dark"] .hutts-signup-cta__form input[type="text"],
html[data-site-theme="dark"] .hutts-signup-cta__form input[type="email"] {
  background: #12171d;
  color: var(--text, #f0ebe3);
  border-color: var(--line, rgba(240, 235, 227, 0.18));
}

html[data-site-theme="dark"] .hutts-signup-cta__form input::placeholder {
  color: #c2c8d0;
  opacity: 1;
}

html[data-site-theme="dark"] .hutts-lm-message--success {
  background: #14352a;
  border-color: #2f8f6a;
  color: #d7f5e8;
}

html[data-site-theme="dark"] .hutts-lm-message--error {
  background: #3a1a1a;
  border-color: #a34b4b;
  color: #f5d7d7;
}

@media (prefers-color-scheme: dark) {
  html[data-site-theme="auto"] .hutts-signup-cta__inner {
    background: linear-gradient(180deg, #1c2430 0%, #171e28 100%) !important;
    border-color: var(--line, rgba(240, 235, 227, 0.14)) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    color: var(--text, #f0ebe3);
  }
  html[data-site-theme="auto"] .hutts-signup-cta__headline {
    color: var(--text, #f0ebe3) !important;
  }
  html[data-site-theme="auto"] .hutts-signup-cta__subtext {
    color: var(--muted, #a8b0ba) !important;
  }
  html[data-site-theme="auto"] .hutts-signup-cta__form label {
    color: color-mix(in srgb, var(--text, #f0ebe3) 88%, transparent);
  }
  html[data-site-theme="auto"] .hutts-signup-cta__form input[type="text"],
  html[data-site-theme="auto"] .hutts-signup-cta__form input[type="email"] {
    background: #12171d;
    color: var(--text, #f0ebe3);
    border-color: var(--line, rgba(240, 235, 227, 0.18));
  }
  html[data-site-theme="auto"] .hutts-signup-cta__form input::placeholder {
    color: #c2c8d0;
    opacity: 1;
  }
  html[data-site-theme="auto"] .hutts-lm-message--success {
    background: #14352a;
    border-color: #2f8f6a;
    color: #d7f5e8;
  }
  html[data-site-theme="auto"] .hutts-lm-message--error {
    background: #3a1a1a;
    border-color: #a34b4b;
    color: #f5d7d7;
  }
}

/* ---- Travelpayouts / trips.com widgets (travelpayouts.css is light-only) ---- */
html[data-site-theme="dark"] .tp-search-widget,
html[data-site-theme="dark"] .tp-deal-cta {
  background: linear-gradient(180deg, #1c2430 0%, #171e28 100%);
  border-color: var(--line, rgba(240, 235, 227, 0.14));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

html[data-site-theme="dark"] .tp-search-widget-heading,
html[data-site-theme="dark"] .tp-deal-cta-heading {
  color: var(--text, #f0ebe3) !important;
}

html[data-site-theme="dark"] .tp-field > span {
  color: color-mix(in srgb, var(--text, #f0ebe3) 88%, transparent);
}

html[data-site-theme="dark"] .tp-field > span small,
html[data-site-theme="dark"] .tp-search-disclosure {
  color: var(--muted, #a8b0ba);
}

html[data-site-theme="dark"] .tp-deal-cta-lead {
  color: var(--muted, #a8b0ba) !important;
}

html[data-site-theme="dark"] .tp-field input {
  background: #12171d;
  color: var(--text, #f0ebe3);
  border-color: var(--line, rgba(240, 235, 227, 0.18));
}

html[data-site-theme="dark"] .tp-field input::placeholder {
  color: #c2c8d0;
  opacity: 1;
}

html[data-site-theme="dark"] .tp-footer-banner-cta {
  background: #1c2430;
  color: #9ec9ff !important;
}

html[data-site-theme="dark"] .tp-footer-banner-cta:hover,
html[data-site-theme="dark"] .tp-footer-banner-cta:focus {
  background: #222c38;
  color: #c5e0ff !important;
}

@media (prefers-color-scheme: dark) {
  html[data-site-theme="auto"] .tp-search-widget,
  html[data-site-theme="auto"] .tp-deal-cta {
    background: linear-gradient(180deg, #1c2430 0%, #171e28 100%);
    border-color: var(--line, rgba(240, 235, 227, 0.14));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }
  html[data-site-theme="auto"] .tp-search-widget-heading,
  html[data-site-theme="auto"] .tp-deal-cta-heading {
    color: var(--text, #f0ebe3) !important;
  }
  html[data-site-theme="auto"] .tp-field > span {
    color: color-mix(in srgb, var(--text, #f0ebe3) 88%, transparent);
  }
  html[data-site-theme="auto"] .tp-field > span small,
  html[data-site-theme="auto"] .tp-search-disclosure {
    color: var(--muted, #a8b0ba);
  }
  html[data-site-theme="auto"] .tp-deal-cta-lead {
    color: var(--muted, #a8b0ba) !important;
  }
  html[data-site-theme="auto"] .tp-field input {
    background: #12171d;
    color: var(--text, #f0ebe3);
    border-color: var(--line, rgba(240, 235, 227, 0.18));
  }
  html[data-site-theme="auto"] .tp-field input::placeholder {
    color: #c2c8d0;
    opacity: 1;
  }
  html[data-site-theme="auto"] .tp-footer-banner-cta {
    background: #1c2430;
    color: #9ec9ff !important;
  }
  html[data-site-theme="auto"] .tp-footer-banner-cta:hover,
  html[data-site-theme="auto"] .tp-footer-banner-cta:focus {
    background: #222c38;
    color: #c5e0ff !important;
  }
}

/* ---- OAS top leaderboard band (fleet-article-body.css is light-only #f5f5f5) ---- */
html[data-site-theme="dark"] #gam-leaderboard.fleet-leaderboard-band,
html[data-site-theme="dark"] .fleet-leaderboard-band.fleet-gam-slot[data-gam-slot="leaderboard"] {
  background: var(--card, #1c2430);
  border-color: var(--line, rgba(240, 235, 227, 0.12));
}

@media (prefers-color-scheme: dark) {
  html[data-site-theme="auto"] #gam-leaderboard.fleet-leaderboard-band,
  html[data-site-theme="auto"] .fleet-leaderboard-band.fleet-gam-slot[data-gam-slot="leaderboard"] {
    background: var(--card, #1c2430);
    border-color: var(--line, rgba(240, 235, 227, 0.12));
  }
}

/* ---- Klaro consent banner / modal (klaro.min.css defaults to light) ----
   Klaro’s “light” theme sets --dark1 as the notice background (#fafafa). Remap
   those tokens + force surfaces so the bar matches site Dark / Auto+OS-dark.
   Keep Accept green (--green1) and button label white. */
html[data-site-theme="dark"] .klaro .cookie-notice,
html[data-site-theme="dark"] .klaro .cookie-modal .cm-modal,
html[data-site-theme="dark"] .klaro .cookie-modal .cm-body,
html[data-site-theme="dark"] .klaro .context-notice {
  --dark1: #1c2430;
  --dark2: #3a4555;
  --dark3: #a8b0ba;
  --light1: #f0ebe3;
  --light2: #6b7585;
  --light3: #c5cdd8;
  --white1: #1c2430;
  --white2: #242e3b;
  --white3: #1a222c;
}

html[data-site-theme="dark"] .klaro .cookie-notice,
html[data-site-theme="dark"] .klaro .cookie-modal .cm-modal,
html[data-site-theme="dark"] .klaro .context-notice {
  background-color: var(--card, #1c2430) !important;
  border-color: var(--line, rgba(240, 235, 227, 0.14));
  color: var(--text, #f0ebe3);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

html[data-site-theme="dark"] .klaro .cookie-notice p,
html[data-site-theme="dark"] .klaro .cookie-notice li,
html[data-site-theme="dark"] .klaro .cookie-notice strong,
html[data-site-theme="dark"] .klaro .cookie-notice h1,
html[data-site-theme="dark"] .klaro .cookie-notice h2,
html[data-site-theme="dark"] .klaro .cookie-modal p,
html[data-site-theme="dark"] .klaro .cookie-modal li,
html[data-site-theme="dark"] .klaro .cookie-modal strong,
html[data-site-theme="dark"] .klaro .cookie-modal h1,
html[data-site-theme="dark"] .klaro .cookie-modal h2,
html[data-site-theme="dark"] .klaro .context-notice p {
  color: var(--text, #f0ebe3) !important;
}

html[data-site-theme="dark"] .klaro .cookie-notice .cm-list-description,
html[data-site-theme="dark"] .klaro .cookie-modal .cm-list-description {
  color: var(--muted, #a8b0ba) !important;
}

/* Reject only — do not catch Accept selected (cm-btn-success + cm-btn-info). */
html[data-site-theme="dark"] .klaro .cookie-notice .cm-btn.cm-btn-danger,
html[data-site-theme="dark"] .klaro .cookie-modal .cm-btn.cm-btn-danger {
  background-color: #3a4555;
  color: #fff;
}

/* Klaro modal Close is a bare button.hide with black text in light theme. */
html[data-site-theme="dark"] .klaro .cookie-modal button.hide,
html[data-site-theme="dark"] .klaro .cookie-modal .cm-btn-close {
  color: var(--text, #f0ebe3) !important;
  background: transparent !important;
}

html[data-site-theme="dark"] .klaro .cookie-modal a {
  color: var(--green1, #1a936f);
}

@media (prefers-color-scheme: dark) {
  html[data-site-theme="auto"] .klaro .cookie-notice,
  html[data-site-theme="auto"] .klaro .cookie-modal .cm-modal,
  html[data-site-theme="auto"] .klaro .cookie-modal .cm-body,
  html[data-site-theme="auto"] .klaro .context-notice {
    --dark1: #1c2430;
    --dark2: #3a4555;
    --dark3: #a8b0ba;
    --light1: #f0ebe3;
    --light2: #6b7585;
    --light3: #c5cdd8;
    --white1: #1c2430;
    --white2: #242e3b;
    --white3: #1a222c;
  }

  html[data-site-theme="auto"] .klaro .cookie-notice,
  html[data-site-theme="auto"] .klaro .cookie-modal .cm-modal,
  html[data-site-theme="auto"] .klaro .context-notice {
    background-color: var(--card, #1c2430) !important;
    border-color: var(--line, rgba(240, 235, 227, 0.14));
    color: var(--text, #f0ebe3);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  }

  html[data-site-theme="auto"] .klaro .cookie-notice p,
  html[data-site-theme="auto"] .klaro .cookie-notice li,
  html[data-site-theme="auto"] .klaro .cookie-notice strong,
  html[data-site-theme="auto"] .klaro .cookie-notice h1,
  html[data-site-theme="auto"] .klaro .cookie-notice h2,
  html[data-site-theme="auto"] .klaro .cookie-modal p,
  html[data-site-theme="auto"] .klaro .cookie-modal li,
  html[data-site-theme="auto"] .klaro .cookie-modal strong,
  html[data-site-theme="auto"] .klaro .cookie-modal h1,
  html[data-site-theme="auto"] .klaro .cookie-modal h2,
  html[data-site-theme="auto"] .klaro .context-notice p {
    color: var(--text, #f0ebe3) !important;
  }

  html[data-site-theme="auto"] .klaro .cookie-notice .cm-list-description,
  html[data-site-theme="auto"] .klaro .cookie-modal .cm-list-description {
    color: var(--muted, #a8b0ba) !important;
  }

  html[data-site-theme="auto"] .klaro .cookie-notice .cm-btn.cm-btn-danger,
  html[data-site-theme="auto"] .klaro .cookie-modal .cm-btn.cm-btn-danger {
    background-color: #3a4555;
    color: #fff;
  }

  html[data-site-theme="auto"] .klaro .cookie-modal button.hide,
  html[data-site-theme="auto"] .klaro .cookie-modal .cm-btn-close {
    color: var(--text, #f0ebe3) !important;
    background: transparent !important;
  }

  html[data-site-theme="auto"] .klaro .cookie-modal a {
    color: var(--green1, #1a936f);
  }
}

/* ---- Secondary page types: directory hubs, quizzes, /learn ----
   `--card` and every `--fleet-dk-*` token above are defined ONLY under Dark /
   Auto+OS-dark, so `var(--token, <light value>)` collapses to the source
   stylesheet's own light value and these rules are a no-op in Light. That lets
   each rule be written once instead of duplicated into the Auto media query.
   The `html[data-site-theme]` prefix (0,2,1) outranks the plain class selectors
   in fleet-directory.css / fleet-quiz-*.css / learn_base.html regardless of
   load order — including page-level inline <style> blocks.
   Use `background-color`, not `background`, wherever the source shorthand also
   carries `center/cover no-repeat` for an inline `background-image`. */

/* Directory hubs — /tools/, /computers/, /maps/, /planting/, /manuals/, /study/ */
html[data-site-theme] .directory-card,
html[data-site-theme] .directory-map-legend,
html[data-site-theme] .directory-map-jumplist {
  background-color: var(--card, #fff);
}

html[data-site-theme] .directory-spec-table th {
  background-color: var(--fleet-dk-soft, #f7f8fa);
}

html[data-site-theme] .directory-hub-promo,
html[data-site-theme] .fleet-map-article-callout {
  background-color: var(--fleet-dk-soft, #f7f9fc);
}

html[data-site-theme] .directory-map-figure {
  background-color: var(--fleet-dk-soft, #f8fbfd);
}

html[data-site-theme] .directory-map-card .directory-map-thumb {
  background-color: var(--fleet-dk-soft, #e8f4fc);
}

html[data-site-theme] .fleet-map-callout-label {
  color: var(--muted, #5c6773);
}

/* Quiz landing (/quiz/) + in-article quiz CTA share one light blue card look. */
html[data-site-theme] .quiz-card__inner,
html[data-site-theme] .fleet-quiz-cta__inner {
  background: var(
    --card,
    linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 50%, #eff6ff 100%)
  );
  border-color: var(--fleet-dk-line, #93c5fd);
}

html[data-site-theme] .quiz-card__title {
  color: var(--text, #0f172a);
}

html[data-site-theme] .quiz-card__desc,
html[data-site-theme] .quiz-landing-lead,
html[data-site-theme] .quiz-landing-empty {
  color: var(--muted, #475569);
}

html[data-site-theme] .quiz-landing-eyebrow {
  color: var(--fleet-dk-link, #2563eb);
}

/* fleet-quiz-cta.css sets these with !important. */
html[data-site-theme] .fleet-quiz-cta__headline {
  color: var(--text, #0f172a) !important;
}

html[data-site-theme] .fleet-quiz-cta__subtext {
  color: var(--muted, #475569) !important;
}

/* Quiz detail pages (/quiz/<slug>/) — rules ship in a page-level <style>. */
html[data-site-theme] .fleet-quiz-lead {
  color: var(--muted, #334155);
}

html[data-site-theme] .fleet-quiz-step legend,
html[data-site-theme] .fleet-quiz-result-card h2 {
  color: var(--text, #0f172a);
}

html[data-site-theme] .fleet-quiz-step-num,
html[data-site-theme] .fleet-quiz-help {
  color: var(--muted, #64748b);
}

html[data-site-theme] .fleet-quiz-progress {
  background-color: var(--fleet-dk-line, #e2e8f0);
}

html[data-site-theme] .fleet-quiz-option {
  border-color: var(--fleet-dk-line, #e2e8f0);
}

/* Hover / selected borders are re-asserted here because the grouped
   `.fleet-quiz-option` rule above ties with them on specificity. */
html[data-site-theme] .fleet-quiz-option:hover {
  background-color: var(--fleet-dk-hover, #f8fafc);
  border-color: var(--fleet-dk-link, #93c5fd);
}

html[data-site-theme] .fleet-quiz-option:has(input:checked) {
  background-color: var(--fleet-dk-active, #eff6ff);
  border-color: var(--fleet-dk-link, #2563eb);
}

html[data-site-theme] .fleet-quiz-btn-secondary {
  background-color: var(--fleet-dk-line, #f1f5f9);
  color: var(--text, #334155);
}

html[data-site-theme] .fleet-quiz-results {
  border-top-color: var(--fleet-dk-line, #e2e8f0);
}

html[data-site-theme] .fleet-quiz-btu,
html[data-site-theme] .fleet-quiz-links a {
  color: var(--fleet-dk-link, #2563eb);
}

html[data-site-theme] .fleet-quiz-disclaimer {
  background-color: var(--fleet-dk-soft, #f8fafc);
  color: var(--muted, #64748b);
}

/* ---- /learn (course catalog, course landing, lesson) ----
   learn_base.html drives its own surfaces off `--bg` / `--card` / `--bg-soft` /
   `--text` / `--muted` / `--line`, which the token block at the top of this file
   already remaps — so only the things a token can't express live here. */

/* Success / error tints are light pastels in the source. */
html[data-site-theme] .lh-opt.correct,
html[data-site-theme] .lh-lesson-row.lh-done .lh-lesson-num,
html[data-site-theme] .lh-complete-btn.done {
  background-color: var(--fleet-dk-ok-bg, #e7f7ee);
}

html[data-site-theme] .lh-opt.wrong {
  background-color: var(--fleet-dk-bad-bg, #fdeaea);
}

html[data-site-theme] .lh-complete-btn.done {
  color: var(--fleet-dk-ok-text, #1f8a4c);
}

html[data-site-theme] .lh-lesson-row.lh-done .lh-lesson-num {
  color: var(--fleet-dk-ok-text, #37b06f);
}

/* `--accent` is a brand colour and is deliberately not remapped for Dark, so
   accent-on-dark text needs the lighter link tone to stay legible. */
html[data-site-theme] .lh-article a,
html[data-site-theme] .lh-source a,
html[data-site-theme] .lh-eyebrow {
  color: var(--fleet-dk-link, var(--accent));
}

html[data-site-theme] .lh-btn-outline {
  color: var(--fleet-dk-link, var(--accent)) !important;
  border-color: var(--fleet-dk-link, var(--accent));
}