/* Optional dark reading mode. The checkbox keeps this available even when
   the page is opened without the application script; the application can
   mirror the same state to localStorage later without changing the CSS API. */
:root { color-scheme: light; }
.theme-toggle {
  position: fixed;
  top: 15px;
  right: 2.2vw;
  z-index: 46;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  mix-blend-mode: difference;
  font-size: clamp(12px, .88vw, 15px);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}
.theme-toggle input {
  appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease;
}
.theme-toggle input:checked { background: currentColor; box-shadow: inset 0 0 0 3px transparent; }
.theme-toggle span { white-space: nowrap; }
.theme-toggle b { margin-left: 4px; font-weight: 400; }
.theme-toggle:focus-within { outline: 2px solid currentColor; outline-offset: 4px; }

/* :has() is supported by current Chromium, Safari and Firefox builds. It
   keeps the mode functional on a static local HTML file as well. */
body:has(#theme-toggle-input:checked) {
  --ink: #f4f4ef;
  --paper: #11110f;
  --muted: #aaa9a1;
  --line: #34342f;
  color-scheme: dark;
  background: var(--paper);
  color: var(--ink);
}
body:has(#theme-toggle-input:checked) .home-scene,
body:has(#theme-toggle-input:checked) .sheet,
body:has(#theme-toggle-input:checked) .compare-sheet,
body:has(#theme-toggle-input:checked) .image-dialog { background: var(--paper); color: var(--ink); }
body:has(#theme-toggle-input:checked) .scene-type { color: #252521; }
body:has(#theme-toggle-input:checked) .type-column { border-color: #2a2a26; }
body:has(#theme-toggle-input:checked) .type-column:nth-child(2),
body:has(#theme-toggle-input:checked) .type-repeat { color: #3b3b36; }
body:has(#theme-toggle-input:checked) .scene-symbol { color: #383832; }
body:has(#theme-toggle-input:checked) .float-photo,
body:has(#theme-toggle-input:checked) .panel-image { background: #1d1d1a; }
body:has(#theme-toggle-input:checked) .float-caption { background: #191916; color: #f4f4ef; }
body:has(#theme-toggle-input:checked) .home-footnote,
body:has(#theme-toggle-input:checked) .home-identity,
body:has(#theme-toggle-input:checked) .edge-entry,
body:has(#theme-toggle-input:checked) .site-nav,
body:has(#theme-toggle-input:checked) .theme-toggle { color: #fff; }
body:has(#theme-toggle-input:checked) .detail-sheet::before { background: #11110f; color: #44443e; border-color: #34342f; }
body:has(#theme-toggle-input:checked) .car-panel { background: #11110f; color: #f4f4ef; border-top-color: #45453f; }
body:has(#theme-toggle-input:checked) .car-panel .panel-tier,
body:has(#theme-toggle-input:checked) .car-panel .panel-score,
body:has(#theme-toggle-input:checked) .car-panel .panel-stars,
body:has(#theme-toggle-input:checked) .car-panel .panel-stat-head > strong { color: #f4f4ef; }
body:has(#theme-toggle-input:checked) .car-panel .panel-micro,
body:has(#theme-toggle-input:checked) .car-panel .panel-stat-head > span,
body:has(#theme-toggle-input:checked) .panel-record-kind,
body:has(#theme-toggle-input:checked) .cell-meta p,
body:has(#theme-toggle-input:checked) .select-label,
body:has(#theme-toggle-input:checked) .filter-note,
body:has(#theme-toggle-input:checked) .detail-kicker,
body:has(#theme-toggle-input:checked) .detail-image-caption,
body:has(#theme-toggle-input:checked) .advanced-item > dt,
body:has(#theme-toggle-input:checked) .scope-note,
body:has(#theme-toggle-input:checked) .ranking-footer,
body:has(#theme-toggle-input:checked) .compare-metric > span,
body:has(#theme-toggle-input:checked) .compare-note { color: #aaa9a1; }
body:has(#theme-toggle-input:checked) .car-panel .panel-track { background: #35352f; }
body:has(#theme-toggle-input:checked) .car-panel .panel-bar { background: #f4f4ef; }
body:has(#theme-toggle-input:checked) .filter-status { background: linear-gradient(180deg,#1b1b18,#11110f); border-color: #45453f; }
body:has(#theme-toggle-input:checked) .filter-progress { background: #35352f; }
body:has(#theme-toggle-input:checked) .filter-progress > span { background: linear-gradient(90deg,#f4f4ef,#818179); }
body:has(#theme-toggle-input:checked) .active-filters button,
body:has(#theme-toggle-input:checked) .active-filters .filter-all,
body:has(#theme-toggle-input:checked) .number-filter input { background: #191916; color: #f4f4ef; border-color: #45453f; }
body:has(#theme-toggle-input:checked) .active-filters button:hover,
body:has(#theme-toggle-input:checked) .active-filters button:focus-visible { background: #f4f4ef; color: #11110f; border-color: #f4f4ef; }
body:has(#theme-toggle-input:checked) .number-filter input:focus { border-color: #f4f4ef; box-shadow: 0 0 0 1px #f4f4ef; }
body:has(#theme-toggle-input:checked) .select-label select,
body:has(#theme-toggle-input:checked) .search-label input,
body:has(#theme-toggle-input:checked) .ranking-controls select { background: #11110f; color: #f4f4ef; border-color: #45453f; }
body:has(#theme-toggle-input:checked) .filter-more,
body:has(#theme-toggle-input:checked) .tier-filters,
body:has(#theme-toggle-input:checked) .collection-footer,
body:has(#theme-toggle-input:checked) .detail-section > h2,
body:has(#theme-toggle-input:checked) .detail-data-columns .detail-basic-list > div,
body:has(#theme-toggle-input:checked) .detail-data-columns .advanced-item,
body:has(#theme-toggle-input:checked) .compare-top,
body:has(#theme-toggle-input:checked) .comparison-table th,
body:has(#theme-toggle-input:checked) .comparison-table td,
body:has(#theme-toggle-input:checked) .compare-radar { border-color: #34342f; }
body:has(#theme-toggle-input:checked) .detail-compare-button { background: #f4f4ef; color: #11110f; border-color: #f4f4ef; }
body:has(#theme-toggle-input:checked) .detail-compare-button:hover { background: #c9c9c1; }
body:has(#theme-toggle-input:checked) .detail-compare-button[aria-pressed=true] { background: #73736d; color: #f4f4ef; border-color: #73736d; }
body:has(#theme-toggle-input:checked) .compare-actionbar { background: #f4f4ef; color: #11110f; }
body:has(#theme-toggle-input:checked) .arrow-hex { border-color: #11110f; }
body:has(#theme-toggle-input:checked) .compare-radar svg { filter: invert(1); }
body:has(#theme-toggle-input:checked) .toast { background: #f4f4ef; color: #11110f; }
body:has(#theme-toggle-input:checked) .image-dialog::backdrop { background: #11110fee; }

@media (max-width:700px) {
  .theme-toggle { top: max(16px, env(safe-area-inset-top)); right: 15px; font-size: 11px; }
  .theme-toggle b { display: none; }
}


/* Dark ranking sheet patch: improved contrast and reading scale. */
body:has(#theme-toggle-input:checked) .ranking-sheet {
  --rank-ink:#f5f5ef; --rank-muted:#b8b7ae; --rank-line:#484841;
  background:#11110f; color:var(--rank-ink); border-right-color:var(--rank-line);
}
body:has(#theme-toggle-input:checked) .ranking-sheet > .sheet-scroll { scrollbar-color:#6c6b63 #191916; }
body:has(#theme-toggle-input:checked) .ranking-heading { color:var(--rank-ink); }
body:has(#theme-toggle-input:checked) .ranking-heading > span { color:var(--rank-muted); font-size:14px; line-height:1.4; margin-top:16px; }
body:has(#theme-toggle-input:checked) .ranking-intro { color:#e5e4dc; font-size:14px; line-height:1.45; margin:22px 0 28px; }
body:has(#theme-toggle-input:checked) .ranking-controls { gap:15px 16px; }
body:has(#theme-toggle-input:checked) .ranking-controls > label { color:var(--rank-muted); font-size:12px; line-height:1.35; gap:6px; }
body:has(#theme-toggle-input:checked) .ranking-controls select { color:var(--rank-ink); background:#11110f; border-bottom-color:#5a5951; font-size:15px; line-height:1.4; padding:7px 0; color-scheme:dark; }
body:has(#theme-toggle-input:checked) .ranking-controls select:hover,
body:has(#theme-toggle-input:checked) .ranking-controls select:focus { border-bottom-color:var(--rank-ink); }
body:has(#theme-toggle-input:checked) .rank-summary { color:var(--rank-muted); font-size:12px; line-height:1.4; margin:30px 0 12px; }
body:has(#theme-toggle-input:checked) .rank-row { border-top-color:var(--rank-line); padding:14px 6px; margin-inline:-6px; border-radius:2px; transition:background-color 160ms ease; }
body:has(#theme-toggle-input:checked) .rank-row:hover,
body:has(#theme-toggle-input:checked) .rank-row:focus-within { background:#1c1c18; }
body:has(#theme-toggle-input:checked) .rank-position { color:var(--rank-ink); font-size:16px; line-height:1.2; font-weight:600; }
body:has(#theme-toggle-input:checked) .rank-car { color:var(--rank-ink); font-size:15px; line-height:1.35; }
body:has(#theme-toggle-input:checked) .rank-car small { color:var(--rank-muted); font-size:12px; line-height:1.35; margin-top:5px; }
body:has(#theme-toggle-input:checked) .rank-number { color:var(--rank-ink); font-size:27px; line-height:1; }
body:has(#theme-toggle-input:checked) .rank-bar-track { height:4px; background:#393933; }
body:has(#theme-toggle-input:checked) .rank-bar { background:linear-gradient(90deg,#f5f5ef,#a6a59c); }
body:has(#theme-toggle-input:checked) .ranking-footer { color:var(--rank-muted); font-size:12px; line-height:1.55; margin-top:40px; }
body:has(#theme-toggle-input:checked) .ranking-footer > button { color:var(--rank-ink); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
body:has(#theme-toggle-input:checked) .ranking-sheet > .vertical-close { color:var(--rank-ink); }
@media (max-width:700px) {
  body:has(#theme-toggle-input:checked) .ranking-heading > span { font-size:13px; }
  body:has(#theme-toggle-input:checked) .ranking-intro { font-size:13px; }
  body:has(#theme-toggle-input:checked) .ranking-controls > label { font-size:11px; }
  body:has(#theme-toggle-input:checked) .ranking-controls select { font-size:14px; }
  body:has(#theme-toggle-input:checked) .rank-car { font-size:15px; }
  body:has(#theme-toggle-input:checked) .rank-number { font-size:26px; }
}