/* Final palette layer. Load after theme, image/motion and portrait rules.
   The :is(body, body:has(...)) scope matches both palettes and deliberately
   equals theme.css's specificity. This prevents a late component rule or an
   old dark-only override from leaving a control in the opposite palette.
   Geometry, photograph pixels, root blending and animation timing stay with
   their owning component styles. */
:root {
  --ink: #161614;
  --paper: #ffffff;
  --muted: #5e5e56;
  --line: #d0d0c8;
  --surface: #f4f4f0;
  --control-line: #85857a;
  --track: #deded5;
  --active: #161614;
  --on-active: #ffffff;
  --active-muted: #e8e8df;
  --positive: #176442;
  --negative: #a52835;
  --plot-secondary: #6b6b60;
  --plot-grid: #babaae;
  --plot-primary-fill: #16161414;
  --plot-secondary-fill: #6b6b601a;
  --nitro-backdrop: #171714;
  --decorative: #e8e8e1;
  --decorative-strong: #d2d2c7;
  --decorative-line: #edede6;
  --lightbox-backdrop: #fffffff2;
  color-scheme: light;
}
body:has(#theme-toggle-input:checked) {
  --ink: #f4f4ef;
  --paper: #11110f;
  --muted: #b9b9ae;
  --line: #41413a;
  --surface: #1e1e1a;
  --control-line: #808076;
  --track: #41413a;
  --active: #f4f4ef;
  --on-active: #11110f;
  --active-muted: #383830;
  --positive: #85d2a7;
  --negative: #ff9ca6;
  --plot-secondary: #babbae;
  --plot-grid: #595950;
  --plot-primary-fill: #f4f4ef14;
  --plot-secondary-fill: #babbae1a;
  --decorative: #252521;
  --decorative-strong: #3b3b34;
  --decorative-line: #2a2a25;
  --lightbox-backdrop: #11110ff2;
  color-scheme: dark;
}

/* Shared reading surfaces and actual photograph containers. */
:is(body, body:has(#theme-toggle-input:checked)) :is(.home-scene, .sheet, .compare-sheet, .image-dialog, .car-panel) {
  background: var(--paper);
  color: var(--ink);
}
:is(body, body:has(#theme-toggle-input:checked)) :is(.float-photo, .panel-image, .detail-hero, .detail-thumbs button, .media-crop) {
  background: transparent;
}
:is(body, body:has(#theme-toggle-input:checked)) .float-caption {
  background: var(--surface);
  color: var(--ink);
}
:is(body, body:has(#theme-toggle-input:checked)) :is(.sheet-scroll, .compare-scroll, .detail-thumbs) {
  scrollbar-color: var(--control-line) transparent;
}
:is(body, body:has(#theme-toggle-input:checked)) .scene-type { color: var(--decorative); }
:is(body, body:has(#theme-toggle-input:checked)) .type-column { border-color: var(--decorative-line); }
:is(body, body:has(#theme-toggle-input:checked)) :is(.type-column:nth-child(2), .type-repeat, .scene-symbol) { color: var(--decorative-strong); }
:is(body, body:has(#theme-toggle-input:checked)) :is(.scene-data, .scene-metric, .scene-classes) { color: currentColor; }
:is(body, body:has(#theme-toggle-input:checked)) .home-identity :is(.archive-stats, .archive-subtitle) { color: inherit; }
:is(body, body:has(#theme-toggle-input:checked)) .detail-sheet::before {
  color: var(--decorative-strong);
  background: var(--paper);
  border-color: var(--line);
}

/* Secondary text is a reading color, including labels once stranded at #595952. */
:is(body, body:has(#theme-toggle-input:checked)) :is(
  .select-label, .filter-note, .filter-status-head, .tier-button sup,
  .filter-more > summary, .stars-filter legend,
  .number-filter, .range-label, .active-filters .filter-all,
  .active-filters button span, .cell-meta p, .article-marker,
  .panel-micro, .panel-record-kind, .panel-image--missing, .panel-stat-head > span,
  .detail-kicker, .detail-subtitle, .detail-image-caption, .detail-basic-list > div > span,
  .detail-data-columns .detail-basic-list > div > span, .advanced-item > dt,
  .detail-data-columns .advanced-item > dt, .detail-data-columns .advanced-label-unit,
  .detail-data-columns .advanced-subsection > h3, .detail-data-columns .scope-note,
  .nitro-separator, .story-body figcaption, .scope-note, .no-story,
  .ranking-controls > label, .ranking-heading > span, .rank-summary,
  .rank-car small, .ranking-footer, .compare-top h1 > span, .compare-subtotal small,
  .compare-metric > span, .compare-delta, .comparison-table th, .compare-note,
  .compare-radar p span, .compare-empty p, .compare-slot, .grid-empty,
  .image-dialog > p, .lightbox-controls button:disabled
) { color: var(--muted); }
:is(body, body:has(#theme-toggle-input:checked)) .filter-more > summary::after { color: var(--muted); }
:is(body, body:has(#theme-toggle-input:checked)) :is(
  .filter-status-head strong, #more-filter-count, .number-filter output, .range-label output,
  .car-panel .panel-tier, .car-panel .panel-score, .car-panel .panel-stars,
  .car-panel .panel-stat-head > strong, .detail-section > h2, .detail-title,
  .ranking-heading, .ranking-intro, .rank-position, .rank-car, .rank-number,
  .ranking-footer > button, .grid-empty button, .collection-footer > button,
  .compare-vehicle-title, .compare-remove, .compare-top > button, .image-dialog > button
) { color: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) :is(
  .tier-filters, .filter-more, .collection-footer, .car-panel, .detail-scoreline,
  .detail-section > h2, .detail-basic-list > div, .detail-data-columns .detail-basic-list > div,
  .detail-data-columns .advanced-item, .blueprint-row > span, .detail-end,
  .compare-top, .compare-metric, .comparison-table th, .comparison-table td,
  .compare-subtotal, .compare-radar, .rank-row
) { border-color: var(--line); }

/* Filter states: the selected letter, count and underline all change together. */
:is(body, body:has(#theme-toggle-input:checked)) .filter-status {
  background: var(--surface);
  border-color: var(--line);
}
:is(body, body:has(#theme-toggle-input:checked)) .tier-button { color: var(--muted); }
:is(body, body:has(#theme-toggle-input:checked)) .tier-button:is(:hover, :focus-visible, [aria-pressed="true"]) { color: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) .tier-button[aria-pressed="true"] sup { color: inherit; }
:is(body, body:has(#theme-toggle-input:checked)) .tier-button[aria-pressed="true"]::after { background: currentColor; }
:is(body, body:has(#theme-toggle-input:checked)) :is(.filter-progress, .car-panel .panel-track, .rank-bar-track) { background: var(--track); }
:is(body, body:has(#theme-toggle-input:checked)) :is(.filter-progress > span, .car-panel .panel-bar, .rank-bar) { background: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) .filter-more > summary:is(:hover, :focus-visible) { color: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) :is(.active-filters button, .stars-options label) {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--control-line);
}
:is(body, body:has(#theme-toggle-input:checked)) :is(.active-filters button:hover, .active-filters button:focus-visible, .stars-options label:has(input:checked)) {
  color: var(--on-active);
  background: var(--active);
  border-color: var(--active);
}
:is(body, body:has(#theme-toggle-input:checked)) .active-filters button:is(:hover, :focus-visible) span { color: inherit; }
:is(body, body:has(#theme-toggle-input:checked)) .active-filters .filter-all { background: transparent; border-color: transparent; }
:is(body, body:has(#theme-toggle-input:checked)) .stars-options label:is(:hover, :focus-within) { border-color: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) .stars-options label:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
:is(body, body:has(#theme-toggle-input:checked)) :is(.editorial-toggle input, .range-label input[type="range"]) { accent-color: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) :is(.select-label select, .search-label input, .ranking-controls select, .number-filter input) {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--control-line);
}
:is(body, body:has(#theme-toggle-input:checked)) :is(.search-label input, .number-filter input)::placeholder { color: var(--muted); opacity: 1; }
:is(body, body:has(#theme-toggle-input:checked)) :is(.select-label select, .search-label input, .ranking-controls select, .number-filter input):is(:hover, :focus) { border-color: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) .number-filter input:focus { box-shadow: 0 0 0 1px var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) .range-label input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ink) 0 var(--range-fill, 0%), var(--track) var(--range-fill, 0%) 100%); }
:is(body, body:has(#theme-toggle-input:checked)) .range-label input[type="range"]::-moz-range-track { background: var(--track); }
:is(body, body:has(#theme-toggle-input:checked)) .range-label input[type="range"]::-moz-range-progress { background: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) .range-label input[type="range"]::-webkit-slider-thumb { background: var(--paper); border-color: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) .range-label input[type="range"]::-moz-range-thumb { background: var(--paper); border-color: var(--ink); }

/* Data controls, action rail and empty states. Selection retains full contrast. */
:is(body, body:has(#theme-toggle-input:checked)) :is(.detail-compare-button, .detail-compare-button[aria-pressed="true"]) {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--ink);
}
:is(body, body:has(#theme-toggle-input:checked)) .detail-compare-button[aria-pressed="true"] { background: var(--surface); }
:is(body, body:has(#theme-toggle-input:checked)) .detail-compare-button:is(:hover, :focus-visible) {
  color: var(--on-active);
  background: var(--active);
  border-color: var(--active);
}
:is(body, body:has(#theme-toggle-input:checked)) .add-compare { color: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) .add-compare[aria-pressed="true"] { color: var(--muted); border-color: currentColor; }
:is(body, body:has(#theme-toggle-input:checked)) :is(.add-compare:hover, .load-more, .compare-slot, .compare-slot a) { border-color: var(--control-line); }
:is(body, body:has(#theme-toggle-input:checked)) .rank-row:is(:hover, :focus-within) { background: var(--surface); }
:is(body, body:has(#theme-toggle-input:checked)) .compare-delta.positive { color: var(--positive); }
:is(body, body:has(#theme-toggle-input:checked)) .compare-delta.negative { color: var(--negative); }
:is(body, body:has(#theme-toggle-input:checked)) :is(.compare-actionbar, .toast, .skip-link) { background: var(--active); color: var(--on-active); }
:is(body, body:has(#theme-toggle-input:checked)) .compare-actionbar > a:hover { color: var(--active-muted); }
:is(body, body:has(#theme-toggle-input:checked)) .arrow-hex { border-color: currentColor; }
:is(body, body:has(#theme-toggle-input:checked)) .detail-thumbs button:is(.active, :hover, :focus-visible) { border-color: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) .image-dialog::backdrop { background: var(--lightbox-backdrop); }
:is(body, body:has(#theme-toggle-input:checked)) .lightbox-controls button:disabled { opacity: 1; }

/* Radar uses the same two series and dash pattern in either theme. CSS paints
   its SVG geometry directly rather than inverting the entire rendered chart.
   Nitro values deliberately retain the archive's inline semantic colors. */
:is(body, body:has(#theme-toggle-input:checked)) .compare-radar svg { filter: none; }
:is(body, body:has(#theme-toggle-input:checked)) .compare-radar svg text { fill: var(--ink); }
:is(body, body:has(#theme-toggle-input:checked)) .compare-radar svg :is(line, polygon[fill="none"]) { stroke: var(--plot-grid); }
:is(body, body:has(#theme-toggle-input:checked)) .compare-radar svg polygon:not([fill="none"]):not([stroke-dasharray]) { stroke: var(--ink); fill: var(--plot-primary-fill); }
:is(body, body:has(#theme-toggle-input:checked)) .compare-radar svg polygon[stroke-dasharray] { stroke: var(--plot-secondary); fill: var(--plot-secondary-fill); }
:is(body, body:has(#theme-toggle-input:checked)) .nitro-value:not(.nitro-value-main) {
  /* Eighteen source variants are white: a neutral dark backing keeps their
     original inline colors readable even on the light reading surface. */
  background: var(--nitro-backdrop);
  padding: 1px 4px;
  border-radius: 2px;
}

/* Root controls still blend in white with photographs. currentColor preserves
   their focus rings, while controls on a reading surface use its own ink. */
:is(body, body:has(#theme-toggle-input:checked)) :is(button, a, input, select, summary):focus-visible { outline-color: currentColor; }
:is(body, body:has(#theme-toggle-input:checked)) ::selection { background: var(--active); color: var(--on-active); }
@media (max-width:700px), (orientation:portrait) and (max-width:1100px) {
  /* In portrait this is a functional page title, not decoration. */
  :is(body, body:has(#theme-toggle-input:checked)) :is(.garage-sheet, .ranking-sheet, .detail-sheet, .compare-sheet)::before { color: var(--ink); }
}