/* Shared public-site appearance. Legacy canvas scenes keep their own rendering palette. */
:root { color-scheme: dark; --muted: var(--text-muted, #95a2bb); }
:root[data-reading-theme="light"] {
  color-scheme: light;
  --bg: #e9e5dc;
  --reading-prose-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --reading-prose-size: 18px;
  --reading-prose-line: 1.7;
  --bg-2: #f1eee7;
  --bg-3: #e2ded6;
  --ink: #1f2428;
  --text-body: #282828;
  --text-muted: #51565c;
  --dim: #51565c;
  --accent: #b82449;
  --cyan: #075f78;
  --gold: #795500;
  --green: #176d46;
  --purple: #6b44a6;
  --reading-on-accent: #ffffff;
  --reading-equation-surface: #f1eee7;
  --reading-line: #cbc7be;
  --reading-control-line: #767a80;
  --reading-grid: transparent;
  --surface: #f1eee7;
  --line: #cbc7be;
  --site-glow-opacity: 0;
  --site-accent-hover: #9c1d3d;
  --reading-surface: #f1eee7;
  --reading-surface-hover: #e2ded6;
  --reading-copy-surface: #f1eee7;
  --reading-link-line: rgba(7, 95, 120, .6);
  --reading-callout-tint: rgba(107, 68, 166, .06);
  --reading-callout-hover: rgba(107, 68, 166, .10);
  --lesson-surface: #f1eee7;
  --lesson-line: #cbc7be;
  --lesson-action: #075f78;
  --lesson-action-hover: #064d61;
  --lesson-on-action: #ffffff;
  --lesson-link: #075f78;
  --lesson-note: #e0e8e7;
  --lesson-warning-surface: #e9dfc5;
  --lesson-warning-text: #715400;
  --lesson-control-line: #767a80;
  --lesson-control-surface: #f1eee7;
  --lesson-control-hover: #e2ded6;
  --lesson-feedback: #705208;
  --lesson-cell-surface: #eeeae3;
  --lesson-cell-line: #767a80;
  --lesson-excluded-surface: #e2ded6;
  --lesson-found-surface: #dce9de;
  --lesson-found-text: #155637;
}
/* Without JS, follow the OS. In a practice iframe this follows the parent's color-scheme. */
@media (prefers-color-scheme: light) {
  :root:not([data-reading-theme="dark"]) {
    color-scheme: light;
    --bg: #e9e5dc;
    --reading-prose-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --reading-prose-size: 18px;
    --reading-prose-line: 1.7;
    --bg-2: #f1eee7;
    --bg-3: #e2ded6;
    --ink: #1f2428;
    --text-body: #282828;
    --text-muted: #51565c;
    --dim: #51565c;
    --accent: #b82449;
    --cyan: #075f78;
    --gold: #795500;
    --green: #176d46;
    --purple: #6b44a6;
    --reading-on-accent: #ffffff;
    --reading-equation-surface: #f1eee7;
    --reading-line: #cbc7be;
    --reading-control-line: #767a80;
    --reading-grid: transparent;
  --surface: #f1eee7;
  --line: #cbc7be;
  --site-glow-opacity: 0;
  --site-accent-hover: #9c1d3d;
    --reading-surface: #f1eee7;
    --reading-surface-hover: #e2ded6;
    --reading-copy-surface: #f1eee7;
    --reading-link-line: rgba(7, 95, 120, .6);
    --reading-callout-tint: rgba(107, 68, 166, .06);
    --reading-callout-hover: rgba(107, 68, 166, .10);
    --lesson-surface: #f1eee7;
    --lesson-line: #cbc7be;
    --lesson-action: #075f78;
    --lesson-action-hover: #064d61;
    --lesson-on-action: #ffffff;
    --lesson-link: #075f78;
    --lesson-note: #e0e8e7;
    --lesson-warning-surface: #e9dfc5;
    --lesson-warning-text: #715400;
    --lesson-control-line: #767a80;
    --lesson-control-surface: #f1eee7;
    --lesson-control-hover: #e2ded6;
    --lesson-feedback: #705208;
    --lesson-cell-surface: #eeeae3;
    --lesson-cell-line: #767a80;
    --lesson-excluded-surface: #e2ded6;
    --lesson-found-surface: #dce9de;
    --lesson-found-text: #155637;
  }
}
.reading-theme-control { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted, #95a2bb); font-size: 11px; letter-spacing: normal; text-transform: none; }
.reading-theme-control[hidden] { display: none; }
.site-nav .nav-links { min-height: 44px; }
.reading-theme-control select { font: inherit; font-size: 13px; min-height: 44px; max-width: 120px; padding: 8px 10px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--reading-control-line, #63718b); border-radius: 4px; cursor: pointer; }
.reading-theme-control select:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.article-page .skip-link { color: var(--reading-on-accent, #0a0e1a); }
.article-page .skip-link:focus { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* Topic guides share article chrome but have a few inline component styles. */
:root .cluster-comparison th, :root .cluster-comparison td, :root .cluster-card { border-color: var(--reading-line, #1e2640); }
:root .cluster-comparison thead th, :root .cluster-comparison tbody th, :root .cluster-card { background: var(--reading-surface, rgba(17,23,42,.5)); }
:root .cluster-card:hover { background: var(--reading-surface-hover, rgba(17,23,42,.85)); }

/* Do not blend old and new theme colors during a preference change. */
:root .cluster-card { transition: transform .15s; }

/* Icon-only navigation uses one visible, circular control in both appearances. */
:root :is(.theme-toggle,.swipe-view-toggle,.swipe-topbar-home) {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 1px solid var(--reading-control-line, #63718b); border-radius: 50%;
  background: var(--bg-2, #11172a); color: var(--ink, #e8ecf5);
  cursor: pointer; vertical-align: middle; touch-action: manipulation;
}
:root :is(.theme-toggle,.swipe-view-toggle,.swipe-topbar-home):hover { background: var(--bg-3, #161d33); border-color: var(--cyan, #4dd4ff); color: var(--ink, #e8ecf5); }
:root :is(.theme-toggle,.swipe-view-toggle,.swipe-topbar-home):focus-visible { outline: 3px solid var(--cyan, #4dd4ff); outline-offset: 3px; }
:root :is(.theme-toggle,.swipe-view-toggle,.swipe-topbar-home) svg { width: 20px; height: 20px; pointer-events: none; }
.theme-toggle[data-current-theme="light"] .theme-sun,
.theme-toggle[data-current-theme="dark"] .theme-moon { display: none; }
/* Topic names use the same semantic hues as article labels in either appearance. */
.site-page {
  --muted: var(--text-muted, #95a2bb);
  --dim: var(--text-muted, #95a2bb);
  --subject-cs: var(--purple); --subject-mathematics: var(--cyan);
  --subject-physics: var(--green); --subject-biology: var(--green);
  --subject-chemistry: var(--gold); --subject-astronomy: var(--cyan);
  --subject-philosophy: var(--purple); --subject-economics: var(--gold);
  --subject-engineering: var(--green); --subject-psychology: var(--accent);
  --subject-medicine: var(--accent); --subject-linguistics: var(--cyan);
  background: var(--bg); color: var(--ink);
}
.site-page .bg-grid { background-image: linear-gradient(var(--reading-grid, rgba(30,38,64,.35)) 1px, transparent 1px), linear-gradient(90deg, var(--reading-grid, rgba(30,38,64,.35)) 1px, transparent 1px); }
.site-page .bg-glow { opacity: var(--site-glow-opacity, 1); }
.site-page .nav { gap: 20px; }
.site-page .nav-brand { flex: 1; }
.site-page .nav-links { flex: 0 0 auto; }
.site-page .section-label::after, .site-page .subject-hero::after { background: var(--reading-line, #1e2640); }
.site-page :is(.subject-card,.topic-card,.result-card,.result-tag,.search-bar,.home-search-box,.home-dialog,.home-dialog-close,.home-dialog-cancel,.results-more-btn,.cat-heading,footer) { border-color: var(--reading-line, #1e2640); }
.site-page :is(.subject-card,.topic-card,.result-card):hover { border-color: var(--accent); }
.site-page :is(.home-search-box,.search-bar,.grid-search-box):focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; }
.site-page :is(.cat-chip,.sort-btn) { border-color: var(--reading-control-line, #63718b); background: var(--bg-2); }
.site-page .sort-btn.active { background: var(--accent); color: var(--reading-on-accent, #0a0e1a); }
.site-page .subject-eyebrow { color: var(--subject-accent, var(--accent)); }
.site-page .breadcrumb .sep { color: var(--dim); }
.site-page :is(.home-dialog p,.home-dialog li,.home-dialog-x) { color: var(--text-body); }
.site-page .topic-card-tag { border-color: var(--reading-line, #1e2640); color: var(--cyan); }
.site-page :is(.legal p,.legal li,.tasks p,.side p,.side li,.lead) { font-family: var(--reading-prose-font, inherit); color: var(--text-body); }
.site-page :is(.legal p,.legal li) { font-size: 16px; }
.site-page .start-link { color: var(--reading-on-accent, #0a0e1a); }
.site-page .start-link:hover { background: var(--site-accent-hover, #ff748c); }
.site-page .err-btn:hover { color: var(--reading-on-accent, #0a0e1a); }
.site-page .err-btn.secondary:hover { color: var(--ink); }
.site-page .skip-link { color: var(--reading-on-accent, #0a0e1a); }
.theme-site-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 960px; margin: 0 auto; padding: 20px 32px; }
.theme-wordmark { font: italic 300 24px/1 'Fraunces', serif; text-decoration: none; color: var(--ink); }
.theme-wordmark em { color: var(--accent); }
.theme-study-actions { display: flex; align-items: center; gap: 16px; }
.theme-404 .theme-site-nav { position: absolute; top: 0; left: 0; right: 0; }
.theme-404 .err-wrap { margin-block: 80px; }
/* Media stays on its authored canvas; navigation, browsing and search use site colors. */
.site-page .swipe-topbar { background: var(--bg); border-bottom: 1px solid var(--reading-line, #1e2640); min-height: 56px; padding-block: 6px; }
.site-page .swipe-topbar-wordmark { color: var(--ink); }
.site-page .swipe-topbar-links { gap: 8px; }
.site-page .swipe-topbar-links a { color: var(--ink); }
.site-page .swipe-topbar-links svg { stroke: currentColor; }
.site-page .swipe-view-toggle { color: var(--ink); }
.site-page :is(.swipe-grid,.grid-search) { background: var(--bg); border-color: var(--reading-line, #1e2640); }
.site-page .grid-search-box { border-color: var(--reading-control-line, #63718b); }
.site-page :is(#grid-search-clear,.grid-no-results) { color: var(--dim); }
.site-page .swipe-topbar-badge { border-color: var(--reading-control-line, #63718b); }
.site-page .swipe-topbar-video { color: #fff; }
@media (max-width: 600px) {
  .site-page .nav { padding: 16px 20px; gap: 12px; }
  .site-page .nav-brand { max-width: none; font-size: 10px; }
  .site-page .swipe-topbar { padding-inline: 12px; }
  .site-page .swipe-topbar-links { gap: 4px; }
  .site-page .swipe-topbar-badge { display: none; }
  .site-page #back-to-subject { display: none; }
  .theme-site-nav { padding: 16px 20px; }
  .theme-study-actions { gap: 8px; }
}
@media (forced-colors: active) {
  :root :is(.theme-toggle,.swipe-view-toggle,.swipe-topbar-home) { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
  :root :is(.theme-toggle,.swipe-view-toggle,.swipe-topbar-home):focus-visible { outline-color: Highlight; }
}
.theme-cs { --subject-accent: var(--purple); }
.theme-mathematics { --subject-accent: var(--cyan); }
.theme-physics { --subject-accent: var(--green); }
.theme-biology { --subject-accent: var(--green); }
.theme-chemistry { --subject-accent: var(--gold); }
.theme-astronomy { --subject-accent: var(--cyan); }
.theme-philosophy { --subject-accent: var(--purple); }
.theme-economics { --subject-accent: var(--gold); }
.theme-engineering { --subject-accent: var(--green); }
.theme-psychology { --subject-accent: var(--accent); }
.theme-medicine { --subject-accent: var(--accent); }
.theme-linguistics { --subject-accent: var(--cyan); }
/* Theme changes are immediate: do not blend new text colors over old card surfaces. */
.site-page :is(.subject-card,.topic-card,.result-card,.cat-chip,.sort-btn,.home-action,.shorts-cta a,.home-shorts-cta a,.nav-links a,.swipe-topbar-links a,.swipe-view-toggle) { transition: transform .15s, box-shadow .15s; }