/* =============================================================
   Theme toggle button (shown in both light and dark modes)
   ============================================================= */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: background-color .16s, border-color .16s, color .16s;
}
.theme-toggle:hover { background: #edf2e9; }
.theme-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  line-height: 1;
  pointer-events: none;
}
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }

/* =============================================================
   Dark theme overrides
   The inline <script> in <head> sets data-theme="dark" on <html>
   before the stylesheets load, so there is no flash of light.
   ============================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6ece5;
  --muted: #95a59c;
  --line: #2a3a32;
  --green: #4a8060;
  --accent: #1f3a2a;
}
:root[data-theme="dark"] body { background: #14191a; color: #d8e0d8; }
:root[data-theme="dark"] body .theme-toggle:hover { background: #2e3a31; }

/* Panels and surfaces (overrides hardcoded #fbfcf9 etc.) */
:root[data-theme="dark"] .masthead,
:root[data-theme="dark"] .catalog-panel,
:root[data-theme="dark"] .inspector,
:root[data-theme="dark"] .part-label,
:root[data-theme="dark"] .tool-group,
:root[data-theme="dark"] .assembly-controls,
:root[data-theme="dark"] .parts-map-view,
:root[data-theme="dark"] .model-years-view,
:root[data-theme="dark"] .model-years-year-label,
:root[data-theme="dark"] .model-years-ford,
:root[data-theme="dark"] .model-years-recall,
:root[data-theme="dark"] .model-years-tsb,
:root[data-theme="dark"] .frunk-catalog-view {
  background: #1a201c;
  border-color: #2a3a32;
  color: #d8e0d8;
}
:root[data-theme="dark"] .viewer-panel {
  background: radial-gradient(ellipse at 50% 32%, #1f2420, #0d1010);
}
:root[data-theme="dark"] .brand { color: #d8e0d8; }
:root[data-theme="dark"] a { color: #6db080; }

/* Buttons */
:root[data-theme="dark"] button {
  background: #243027;
  color: #d8e0d8;
  border-color: #2a3a32;
}
:root[data-theme="dark"] button:hover { background: #2e3a31; }
:root[data-theme="dark"] button.primary {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
:root[data-theme="dark"] button.primary:hover { background: #5a9275; }
:root[data-theme="dark"] button.active {
  background: #2e3a31;
  border-color: #4a8060;
  color: #d8e0d8;
}

/* Inputs */
:root[data-theme="dark"] .search,
:root[data-theme="dark"] #part-record input,
:root[data-theme="dark"] #part-record textarea,
:root[data-theme="dark"] #mapping-search,
:root[data-theme="dark"] #component-picker,
:root[data-theme="dark"] #geometry-mode,
:root[data-theme="dark"] .frunk-list-column input,
:root[data-theme="dark"] .oem-catalog-choice {
  background: #0f1311;
  color: #d8e0d8;
  border-color: #2a3a32;
}
:root[data-theme="dark"] .paint-picker {
  background: #1a201c;
  border-color: #2a3a32;
  color: #95a59c;
}
:root[data-theme="dark"] .paint-picker select {
  background: #1a201c;
  color: #e6ece5;
  color-scheme: dark;
}
:root[data-theme="dark"] .paint-picker option {
  background: #1a201c;
  color: #e6ece5;
}
:root[data-theme="dark"] .search kbd {
  color: #6e7a6f;
  border-color: #2a3a32;
}

/* Subtle section backgrounds (light had #edf1e7 / #f2edda tints) */
:root[data-theme="dark"] .model-scope,
:root[data-theme="dark"] .model-years-disclosure {
  background: #1f2a23;
  border-color: #2a3a32;
  color: #95a59c;
}

/* Mode tabs */
:root[data-theme="dark"] .mode-tabs { background: #243027; }
:root[data-theme="dark"] .mode-tabs button.active {
  background: #1a201c;
  box-shadow: 0 1px 4px #00000050;
  color: #d8e0d8;
}

/* Subdued text */
:root[data-theme="dark"] .scene-note,
:root[data-theme="dark"] .local-status,
:root[data-theme="dark"] .vehicle-id,
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .catalog-head,
:root[data-theme="dark"] .part-code,
:root[data-theme="dark"] #part-record label,
:root[data-theme="dark"] .breadcrumbs,
:root[data-theme="dark"] .breadcrumbs button,
:root[data-theme="dark"] .gesture-hint,
:root[data-theme="dark"] .assembly-caption,
:root[data-theme="dark"] .playback span,
:root[data-theme="dark"] .divider,
:root[data-theme="dark"] .part-description,
:root[data-theme="dark"] .small-copy,
:root[data-theme="dark"] .section-title span,
:root[data-theme="dark"] .loading,
:root[data-theme="dark"] .catalog-foot,
:root[data-theme="dark"] .catalog-foot span,
:root[data-theme="dark"] .catalog-foot strong {
  color: #95a59c;
}
:root[data-theme="dark"] .catalog-foot strong { color: #d8e0d8; }
:root[data-theme="dark"] .vehicle-id span:first-child { color: #d8e0d8; }
:root[data-theme="dark"] .vehicle-id span+span { border-left-color: #2a3a32; color: #95a59c; }

/* Catalog + children */
:root[data-theme="dark"] #children button { color: #b8c2b5; border-bottom-color: #2a3a32; }
:root[data-theme="dark"] #children button:hover { color: #d8e0d8; }
:root[data-theme="dark"] #systems button { color: #b8c2b5; }
:root[data-theme="dark"] #systems button:hover { background: #243027; }
:root[data-theme="dark"] #systems button.active { background: #243027; color: #d8e0d8; }
:root[data-theme="dark"] #systems .sys-index,
:root[data-theme="dark"] #systems .arrow,
:root[data-theme="dark"] #systems .search-result small { color: #6e7a6f; }

/* Details + footer */
:root[data-theme="dark"] details { border-top-color: #2a3a32; }
:root[data-theme="dark"] summary { color: #d8e0d8; }
:root[data-theme="dark"] summary::after { color: #6e7a6f; }
:root[data-theme="dark"] .catalog-foot { border-top-color: #2a3a32; }
:root[data-theme="dark"] .camera-presets button { background: #1a201c; color: #d8e0d8; }
:root[data-theme="dark"] #toast { background: #4a8060; color: #fff; box-shadow: 0 4px 20px #00000050; }
:root[data-theme="dark"] .photo-missing { background: #1a201c; border-color: #2a3a32; color: #95a59c; }
:root[data-theme="dark"] .photo-missing span { color: #6e7a6f; }
:root[data-theme="dark"] .assembly-controls { background: #1a201c; }
:root[data-theme="dark"] .tool-group { background: #1a201c; }
:root[data-theme="dark"] .loading { background: #0d1010e8; }
:root[data-theme="dark"] .loading-card { background: #1a201cf0; border-color: #2a3a32; box-shadow: 0 12px 32px #00000050; }
:root[data-theme="dark"] .loading strong { color: #d8e0d8; }
:root[data-theme="dark"] .loading-track { background: #2a3a32; }
:root[data-theme="dark"] #explode { accent-color: #6db080; }
:root[data-theme="dark"] .reset-scene { color: #95a59c; }

/* Mapping / model-years table */
:root[data-theme="dark"] .mapping-disclosure { color: #c4a85e; background: #2e2a1c; border-color: #4a3a1f; }
:root[data-theme="dark"] .mapping-badge { background: #243027; color: #95b585; }
:root[data-theme="dark"] .mapping-badge.review,
:root[data-theme="dark"] .mapping-badge.assembly,
:root[data-theme="dark"] .mapping-badge.accessory { background: #2e2a1c; color: #c4a85e; }
:root[data-theme="dark"] .mapping-node { color: #95b585; }
:root[data-theme="dark"] #parts-mapping-table th { background: #243027; color: #d8e0d8; border-bottom-color: #2a3a32; }
:root[data-theme="dark"] #parts-mapping-table td { border-bottom-color: #2a3a32; color: #d8e0d8; }
:root[data-theme="dark"] #parts-mapping-table small { color: #95a59c; }
:root[data-theme="dark"] .supplier-card { border-bottom-color: #2a3a32; color: #d8e0d8; }
:root[data-theme="dark"] .supplier-card small { color: #6e7a6f; }
:root[data-theme="dark"] .model-years-year-num { color: #6db080; }
:root[data-theme="dark"] .model-years-table th,
:root[data-theme="dark"] .model-years-table td { border-color: #2a3a32; }
:root[data-theme="dark"] .model-years-table thead th { background: #243027; color: #d8e0d8; }
:root[data-theme="dark"] .model-years-table tbody th { background: #1f2420; color: #d8e0d8; }
:root[data-theme="dark"] .model-years-filter-row { background: #1a201c; border-color: #2a3a32; }
:root[data-theme="dark"] .model-years-chips button.is-active { background: var(--green); color: #fff; }
:root[data-theme="dark"] .model-years-subtabs button.is-active { background: var(--accent); color: #d8e0d8; }
:root[data-theme="dark"] .model-years-recall.model-years-tier-a { border-left-color: #4a8060; }
:root[data-theme="dark"] .model-years-recall.model-years-tier-b { border-left-color: #c4a85e; }
:root[data-theme="dark"] .model-years-recall.model-years-tier-c { border-left-color: #4a5a4f; }
:root[data-theme="dark"] .model-years-badge-tier-a { background: #1f2a23; color: #95b585; }
:root[data-theme="dark"] .model-years-badge-tier-b { background: #2e2a1c; color: #c4a85e; }
:root[data-theme="dark"] .model-years-badge-tier-c { background: #243027; color: #95a59c; }
:root[data-theme="dark"] .model-years-badge-park { background: #2e1a1c; color: #d08580; }
:root[data-theme="dark"] .model-years-badge-ota { background: #1c2a3a; color: #7aa5d0; }
:root[data-theme="dark"] .model-years-ford-id { background: #1f2420; color: #d0eac1; }
:root[data-theme="dark"] .model-years-ford-xref { background: #243027; color: #95b585; }

/* Frunk catalog */
:root[data-theme="dark"] .frunk-diagram { background: #0f1311; border-color: #2a3a32; }
:root[data-theme="dark"] .frunk-diagram figcaption { background: #1a201c; border-top-color: #2a3a32; color: #95a59c; }
:root[data-theme="dark"] .frunk-diagram-note { color: #95a59c; }
:root[data-theme="dark"] .frunk-callout rect { fill: #243027; stroke: #6db080; }
:root[data-theme="dark"] .frunk-callout text { fill: #d0eac1; }
:root[data-theme="dark"] .frunk-callout:hover rect,
:root[data-theme="dark"] .frunk-callout:focus-visible rect { fill: #2e3a31; }
:root[data-theme="dark"] .frunk-callout.is-unresolved rect { fill: #2e2a1c; stroke: #c4a85e; }
:root[data-theme="dark"] .frunk-callout.is-unresolved text { fill: #c4a85e; }
:root[data-theme="dark"] .frunk-callout.is-selected rect { fill: #4a8060; stroke: #fff; }
:root[data-theme="dark"] .frunk-callout.is-selected text { fill: #fff; }
:root[data-theme="dark"] .frunk-callout.is-unresolved.is-selected rect { fill: #c4a85e; stroke: #fff; }
:root[data-theme="dark"] .frunk-part-card { background: #1a201c; border-color: #2a3a32; }
:root[data-theme="dark"] .frunk-part-card.is-selected { background: #243027; border-color: #4a8060; box-shadow: inset 3px 0 #6db080; }
:root[data-theme="dark"] .frunk-part-select { color: #d8e0d8; }
:root[data-theme="dark"] .frunk-part-select:hover { background: #243027; }
:root[data-theme="dark"] .frunk-part-identity strong { color: #d8e0d8; }
:root[data-theme="dark"] .frunk-part-meta p { color: #95a59c; }
:root[data-theme="dark"] .frunk-callout-badge { background: #243027; border-color: #2a3a32; color: #d0eac1; }
:root[data-theme="dark"] .frunk-part-card.is-selected .frunk-callout-badge { background: #4a8060; color: #fff; border-color: #4a8060; }
:root[data-theme="dark"] .frunk-open-diagram { background: #243027; border-color: #2a3a32; color: #d0eac1; }
:root[data-theme="dark"] .frunk-inspector-identity strong { color: #d0eac1; }
:root[data-theme="dark"] .frunk-inspector-warning { background: #2e2a1c; color: #c4a85e; }
:root[data-theme="dark"] .frunk-selection-status { background: #1f2a23; border-color: #2a3a32; border-left-color: #4a8060; }
:root[data-theme="dark"] .frunk-selection-status strong { color: #d0eac1; }
:root[data-theme="dark"] .frunk-selection-status > span:last-child { color: #95a59c; }
:root[data-theme="dark"] .frunk-selection-status.is-unresolved { background: #2e2a1c; border-color: #4a3a1f; border-left-color: #c4a85e; }
:root[data-theme="dark"] .frunk-selection-status.is-unresolved strong { color: #c4a85e; }
:root[data-theme="dark"] .frunk-disclosure { background: #2e2a1c; color: #c4a85e; border-color: #4a3a1f; }
:root[data-theme="dark"] .frunk-image-error { background: #2e2a1c; color: #c4a85e; }
:root[data-theme="dark"] .frunk-source-link { color: #95b585; }
:root[data-theme="dark"] .frunk-provenance { color: #6e7a6f; border-top-color: #2a3a32; }
:root[data-theme="dark"] .frunk-empty { color: #95a59c; }
:root[data-theme="dark"] .frunk-results-summary { color: #6e7a6f; }
:root[data-theme="dark"] .frunk-filter-label { color: #6e7a6f; }

/* Dark form controls (scrollbar + native form widgets) */
:root[data-theme="dark"] * { scrollbar-color: #2a3a32 #1a201c; }

/* Smooth theme transitions (respect reduced-motion) */
body, .masthead, .catalog-panel, .inspector, .part-label, .tool-group,
.assembly-controls, .parts-map-view, .model-years-view, .frunk-catalog-view,
button, input, textarea, .model-scope, details, #children button,
#systems button, #part-record, .photo-missing, .mode-tabs,
.model-years-year-label, .model-years-ford, .model-years-recall,
.model-years-tsb, .frunk-part-card, .frunk-diagram, .theme-toggle,
.viewer-panel, .brand, a {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] body, :root[data-theme="dark"] * { transition: none !important; }
}