/* One shared layout. Themes only change the palette and map graphics. */
.kids .river-moment, .kids #theme-toggle, .kids .river-kicker { display: none; }
html.river-atlas {
  color-scheme: light;
  --atlas-paper: #f4f6f0;
  --atlas-surface: #fcfcf7;
  --atlas-surface-soft: #edf2e7;
  --atlas-surface-nav: #eaf0e4;
  --atlas-hover: #e5eddf;
  --atlas-ink: #244c40;
  --atlas-heading: #174f40;
  --atlas-muted: #526a5d;
  --atlas-faint: #68786b;
  --atlas-primary: #245840;
  --atlas-primary-contrast: #fffff6;
  --atlas-accent: #a54828;
  --atlas-accent-hover: #89391f;
  --atlas-tour: #e5b544;
  --atlas-tour-hover: #efc45b;
  --atlas-tour-ink: #30240b;
  --atlas-tour-border: #99701c;
  --atlas-logo-accent: #bc5832;
  --atlas-line: #244c4022;
  --atlas-border: #cbd5c5;
  --atlas-border-strong: #9fb39b;
  --atlas-focus: #5e8975;
  --atlas-focus-halo: #5e897514;
  --atlas-scrollbar: #b8c8ac;
  --atlas-shadow: #244c4026;
  --atlas-overlay: #153b2dcc;
  --atlas-dots: #244c4011;
  --atlas-map-ink: #264b39;
  --atlas-map-rule: #536d471a;
  --atlas-map-era: #536d472d;
  --atlas-era-line: #6b836442;
  --atlas-era-band: #476c4103;
  --atlas-era-band-alt: #476c4109;
  --atlas-map-region: #32563e;
  --atlas-label-outline: #f9f8edb3;
  --atlas-cluster: #e2e9d9;
  --atlas-cluster-ink: #34552e;
  --atlas-thread: #54735a;
  --atlas-thread-faint: #527d5866;
  --atlas-population: #5b774a;
  --atlas-population-line: #66834d80;
  --atlas-track: #e4ebdc;
  --atlas-window: #24584018;
  --atlas-readout-secondary: #dce8ca;
  --atlas-link-line: #a5482855;
  --cat-civilization: #966331;
  --cat-technology: #006e87;
  --cat-religion: #785097;
  --cat-person: #92652a;
  --cat-event: #b65336;
  --bg: var(--atlas-paper);
  --ink: var(--atlas-ink);
  --ink-dim: var(--atlas-muted);
  --ink-faint: var(--atlas-faint);
  --line: var(--atlas-line);
  --panel-bg: var(--atlas-surface);
  --card-bg: var(--atlas-surface);
  --accent: var(--atlas-accent);
  --glow-tech: var(--cat-technology);
  --glow-rel: var(--cat-religion);
  --glow-person: var(--cat-person);
  --glow-event: var(--cat-event);
}
html.river-atlas[data-theme="dark"] {
  color-scheme: dark;
  --atlas-paper: #0c1118;
  --atlas-surface: #131b25;
  --atlas-surface-soft: #192330;
  --atlas-surface-nav: #101720;
  --atlas-hover: #253343;
  --atlas-ink: #e0e3e8;
  --atlas-heading: #f0e5cc;
  --atlas-muted: #b6c0cd;
  --atlas-faint: #9eabbc;
  --atlas-primary: #dbc08b;
  --atlas-primary-contrast: #1b2027;
  --atlas-accent: #dbc08b;
  --atlas-accent-hover: #eed4a2;
  --atlas-tour: #f4c95d;
  --atlas-tour-hover: #ffda7a;
  --atlas-tour-ink: #30240b;
  --atlas-tour-border: #f7d77d;
  --atlas-logo-accent: #e1b974;
  --atlas-line: #b3bec722;
  --atlas-border: #344252;
  --atlas-border-strong: #56677c;
  --atlas-focus: #dbc08b;
  --atlas-focus-halo: #dbc08b18;
  --atlas-scrollbar: #58687b;
  --atlas-shadow: #0000004d;
  --atlas-overlay: #03060ccc;
  --atlas-dots: #b3bec705;
  --atlas-map-ink: #eee9df;
  --atlas-map-rule: #b3bec71c;
  --atlas-map-era: #c7b38b42;
  --atlas-era-line: #96a5dc2e;
  --atlas-era-band: #ffffff03;
  --atlas-era-band-alt: #788cdc07;
  --atlas-map-region: #bfc5ca;
  --atlas-label-outline: #101720cc;
  --atlas-cluster: #192633;
  --atlas-cluster-ink: #d8dfe7;
  --atlas-thread: #9db8ff;
  --atlas-thread-faint: #9db8ff47;
  --atlas-population: #7fd9a8bf;
  --atlas-population-line: #7fd9a88c;
  --atlas-track: #101720;
  --atlas-window: #d9bb8014;
  --atlas-readout-secondary: #394833;
  --atlas-link-line: #dbc08b66;
  --cat-civilization: #e8b45c;
  --cat-technology: #46d4ff;
  --cat-religion: #b78aff;
  --cat-person: #ffd27a;
  --cat-event: #ff9d5c;
}
html.river-atlas body { background-image: radial-gradient(var(--atlas-dots) .65px, transparent .65px); background-size: 7px 7px; }
html.river-atlas #year-pill { display: none; }
html.river-atlas #stars { display: none; }
html.river-atlas #topbar { background: var(--atlas-surface); gap: 26px; border-bottom-color: var(--line); }
html.river-atlas #brand { gap: 1px 18px; }
html.river-atlas #brand h1 {
  display: flex; align-items: center; gap: 9px;
  color: var(--atlas-heading); font-size: 29px; font-weight: 700; letter-spacing: -.065em;
}
html.river-atlas #brand h1 > span { color: var(--atlas-logo-accent); margin-left: -9px; }
html.river-atlas .brand-caption { font-size: 8px; letter-spacing: .12em; padding-left: 43px; }
.brand-caption > span { margin: 0 5px; opacity: .5; }
.brand-caption a { color: var(--atlas-muted); text-decoration: none; letter-spacing: .02em; }
.brand-caption a:hover { color: var(--atlas-accent); text-decoration: underline; }
html.river-atlas #progress-counter { font-size: 10px; max-width: 85px; }

html.river-atlas #search { background: var(--atlas-surface-soft); border-color: var(--atlas-border); color: var(--ink); height: 40px; border-radius: 8px; }
html.river-atlas #search:focus { background: var(--atlas-surface); border-color: var(--atlas-focus); box-shadow: 0 0 0 3px var(--atlas-focus-halo); }
html.river-atlas #search-results { border-color: var(--atlas-border); box-shadow: 0 14px 35px var(--atlas-shadow); }
html.river-atlas .search-item:hover,
html.river-atlas .search-item.active { background: var(--atlas-hover); }
.river-moment { min-width: 150px; padding: 0 16px 0 0; display: flex; flex-direction: column; text-align: right; font-variant-numeric: tabular-nums; }
#river-era { color: var(--atlas-faint); font-size: 8px; font-weight: 650; letter-spacing: .16em; }
#river-year { color: var(--atlas-heading); font: 700 25px/1.1 Georgia, serif; letter-spacing: -.045em; margin: 1px 0 2px; }
#river-population { color: var(--atlas-faint); font-size: 9px; }
html.river-atlas #zoom-controls button,
html.river-atlas #about-btn { background: var(--atlas-surface); border-color: var(--atlas-border); color: var(--atlas-primary); box-shadow: none; }
html.river-atlas #zoom-controls button:hover,
html.river-atlas #about-btn:hover { background: var(--atlas-hover); border-color: var(--atlas-focus); }
html.river-atlas #era-nav { background: var(--atlas-surface-nav); border-bottom-color: var(--atlas-border); gap: 18px; }
html.river-atlas .era-nav-caption { font-size: 8px; letter-spacing: .14em; color: var(--atlas-muted); }
html.river-atlas #era-links { gap: 3px; align-items: center; }
html.river-atlas #era-links button { height: 29px; border: 0; border-radius: 4px; color: var(--atlas-muted); }
html.river-atlas #era-links button[aria-current="true"] { color: var(--atlas-surface); background: var(--atlas-primary); }
html.river-atlas #era-links button:hover:not([aria-current="true"]) { background: var(--atlas-hover); color: var(--atlas-heading); }
html.river-atlas #overview-btn { background: transparent; border-color: var(--atlas-border-strong); color: var(--atlas-primary); font-weight: 600; border-radius: 4px; }
html.river-atlas #overview-btn:hover { background: var(--atlas-hover); }
html.river-atlas #era-select { color: var(--atlas-primary); border-color: var(--atlas-border-strong); background: var(--atlas-surface); }
@media (min-width: 721px) {
  /* Keep Full timeline reachable while the desktop story panel is open. */
  html.river-atlas body.panel-open #era-nav { right: 400px; gap: 10px; }
  body.panel-open .era-nav-caption { display: none; }
  body.panel-open #era-links { min-width: 0; overflow-x: auto; }
  body.panel-open #era-select { min-width: 0; flex: 1; }
  body.panel-open #overview-btn { flex-shrink: 0; }
}

/* Fine rules, colored rivers, and crisp labels replace the cosmic glow. */
html.river-atlas .era-band { fill: var(--atlas-era-band); }
html.river-atlas .era-band.alt { fill: var(--atlas-era-band-alt); }
html.river-atlas .era-line { stroke: var(--atlas-era-line); stroke-dasharray: 2 5; }
html.river-atlas .era-label { fill: var(--atlas-map-era); font-style: italic; letter-spacing: .12em; }
html.river-atlas .grid-line { stroke: var(--atlas-map-rule); }
html.river-atlas .grid-label { fill: var(--atlas-muted); }
html.river-atlas .region-label { fill: var(--atlas-map-region); stroke: var(--atlas-paper); stroke-width: 5px; font-size: 9px; letter-spacing: .18em; }
html.river-atlas .stream { stroke: var(--river-edge, var(--atlas-thread)); stroke-width: .8; opacity: .95; }
html.river-atlas .stream.dim { opacity: .78; }
html.river-atlas .stream:hover,
html.river-atlas .stream.selected { opacity: 1; filter: saturate(1.12); stroke-width: 1.8; }
html.river-atlas .stream.bg { opacity: .17; stroke-width: .5; }
html.river-atlas .stream.connected { opacity: 1; stroke: var(--atlas-primary); stroke-width: 1.7; filter: saturate(1.2); }
html.river-atlas .stream-label { fill: var(--atlas-map-ink); stroke: var(--atlas-label-outline); stroke-width: 1.8px; font-size: 11px; letter-spacing: .035em; }
html.river-atlas .stream-label.dim { opacity: 1; }
html.river-atlas .stream-label.vertical { stroke-width: 1.8px; letter-spacing: .06em; }
html.river-atlas .marker .m-label { fill: var(--atlas-map-ink); stroke: var(--atlas-paper); stroke-width: 3px; }
html.river-atlas .marker.visited .m-label { fill: var(--atlas-faint); }
html.river-atlas .marker .m-core { stroke: var(--atlas-surface); stroke-width: 1.5; }
html.river-atlas .marker .m-halo { display: none; }
html.river-atlas .marker .m-check { fill: var(--atlas-heading); }
html.river-atlas .cluster .cluster-core { fill: var(--atlas-cluster); stroke: var(--atlas-border-strong); }
html.river-atlas .cluster:hover .cluster-core { fill: var(--atlas-hover); }
html.river-atlas .cluster text { fill: var(--atlas-cluster-ink); }
html.river-atlas .influence-thread,
html.river-atlas .thread-secondary { stroke: var(--atlas-thread-faint); }
html.river-atlas .thread.glow { display: none; }
html.river-atlas .thread:not(.glow) { stroke: var(--atlas-thread); }
html.river-atlas .thread-dot,
html.river-atlas .thread-secondary-dot { stroke: var(--atlas-surface); }
html.river-atlas .thread-secondary-dot { fill: var(--atlas-thread); }
html.river-atlas .thread-label { fill: var(--atlas-ink); stroke: var(--atlas-surface); }
html.river-atlas .thread-label:hover { fill: var(--atlas-heading) !important; }
html.river-atlas .pop-line { stroke: var(--atlas-population-line); }
html.river-atlas .pop-label { fill: var(--atlas-population); }
html.river-atlas .scrub-track { fill: var(--atlas-track); stroke: var(--atlas-border-strong); }
html.river-atlas .scrub-window { fill: var(--atlas-window); stroke: var(--atlas-focus); stroke-width: 1.2; }
html.river-atlas .scrub-tick { stroke: var(--atlas-map-rule); }
html.river-atlas .scrub-tick-label { fill: var(--atlas-muted); }
html.river-atlas .scrub-era-label { fill: var(--atlas-muted); }
html.river-atlas .scrub-center { stroke: var(--atlas-accent); opacity: .8; }
html.river-atlas .scrub-readout-bg { fill: var(--atlas-primary); stroke: var(--atlas-primary); }
html.river-atlas .scrub-readout-year { fill: var(--atlas-primary-contrast); }
html.river-atlas .scrub-readout-pop { fill: var(--atlas-readout-secondary); }

/* The original controls, recast as an atlas key. */
html.river-atlas #tabs { background: var(--atlas-surface); border-top-color: var(--atlas-border); }
html.river-atlas .tab { --tc: var(--atlas-primary); color: var(--atlas-muted); }
html.river-atlas .tab[data-tab="civilizations"] { --tc: var(--cat-civilization); }
html.river-atlas .tab[data-tab="technology"] { --tc: var(--cat-technology); }
html.river-atlas .tab[data-tab="religions"] { --tc: var(--cat-religion); }
html.river-atlas .tab[data-tab="people"] { --tc: var(--cat-event); }
html.river-atlas .tab::before { opacity: .85; width: 6px; height: 12px; border-radius: 1px; }
html.river-atlas .tab.active { background: var(--atlas-primary); border-color: var(--atlas-primary); color: var(--atlas-surface); }
html.river-atlas .tab.active::before { background: var(--atlas-readout-secondary); }
html.river-atlas .tab:hover:not(.active) { background: var(--atlas-surface-nav); }
html.river-atlas #tab-tools button { color: var(--atlas-muted); border-color: var(--atlas-border); background: var(--atlas-surface); }
html.river-atlas #tab-tools button:hover { color: var(--atlas-heading); background: var(--atlas-surface-nav); }
html.river-atlas #tab-tools #tours-btn { color: var(--atlas-tour-ink); background: var(--atlas-tour); border-color: var(--atlas-tour-border); box-shadow: 0 2px 8px var(--atlas-shadow); }
html.river-atlas #tab-tools #tours-btn:hover { color: var(--atlas-tour-ink); background: var(--atlas-tour-hover); }
html.river-atlas #tab-menu { border-color: var(--atlas-border); box-shadow: 0 -8px 35px var(--atlas-shadow); }
html.river-atlas .tab-menu-opt.active,
html.river-atlas .tab-menu-opt:hover { background: var(--atlas-hover); }
html.river-atlas #tab-menu-btn i { box-shadow: none; background: var(--atlas-primary) !important; }
html.river-atlas #intro-hint { background: var(--atlas-primary); color: var(--atlas-paper); border-color: var(--atlas-primary); border-radius: 5px; }

/* Reading surfaces use the same paper, ink, and restrained borders. */
html.river-atlas #panel { background: var(--panel-bg); border-color: var(--atlas-border); box-shadow: -8px 0 35px var(--atlas-shadow); backdrop-filter: none; }
html.river-atlas #panel-title { color: var(--atlas-heading); }
html.river-atlas #panel-blurb { color: var(--atlas-ink); }
html.river-atlas #panel-date { color: var(--atlas-accent); }
html.river-atlas #panel-category { border-radius: 3px; }
html.river-atlas #panel-scroll { scrollbar-color: var(--atlas-scrollbar) transparent; }
html.river-atlas #panel-close { background: var(--atlas-surface); border-color: var(--atlas-border); color: var(--atlas-primary); width: 36px; height: 36px; box-shadow: 0 2px 10px var(--atlas-shadow); }
html.river-atlas #panel-close:hover { background: var(--atlas-hover); }
html.river-atlas .panel-detail-block h4 { color: var(--atlas-ink); }
html.river-atlas .panel-detail-block p { color: var(--atlas-muted); }
html.river-atlas .panel-media-card,
html.river-atlas .related-chip { color: var(--atlas-ink); background: var(--atlas-surface-soft); border-color: var(--atlas-border); }
html.river-atlas .panel-media-card:hover,
html.river-atlas .related-chip:hover { background: var(--atlas-hover); }
html.river-atlas .panel-media-kind { color: var(--cat-technology); }
html.river-atlas .media-podcast .panel-media-kind,
html.river-atlas .media-podcast .panel-media-kind::before { color: var(--cat-religion); }
html.river-atlas .panel-media-audience,
html.river-atlas .panel-media-meta,
html.river-atlas .panel-media-note { color: var(--atlas-muted); }
html.river-atlas #panel-detail-wrap,
html.river-atlas #panel-context-wrap,
html.river-atlas #panel-media-wrap { border-color: var(--line); }
html.river-atlas #panel-wiki { border-color: var(--atlas-link-line); }
html.river-atlas #tour-menu,
html.river-atlas #about,
html.river-atlas #feedback,
html.river-atlas #video-player { background: var(--atlas-overlay); backdrop-filter: blur(5px); }
html.river-atlas #tour-menu-card,
html.river-atlas #about-card,
html.river-atlas #feedback-card,
html.river-atlas #coach-pop,
html.river-atlas #slice,
html.river-atlas #video-player-card { border-color: var(--atlas-scrollbar); box-shadow: 0 24px 80px var(--atlas-shadow); border-radius: 12px; }
html.river-atlas #tour-menu-card { padding: 26px; }
.river-kicker { color: var(--atlas-accent); font-size: 9px; font-weight: 700; letter-spacing: .15em; margin-bottom: 6px; }
html.river-atlas #tour-menu-card h2 { font-size: 32px; color: var(--atlas-heading); margin-bottom: 20px; letter-spacing: -.025em; }
html.river-atlas .tour-category-tabs { border-color: var(--line); }
html.river-atlas #tour-list { overflow: hidden; }
html.river-atlas .tour-category-tabs { flex-shrink: 0; }
html.river-atlas .tour-category-grid { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--atlas-scrollbar) transparent; }
html.river-atlas .tour-category-tab { background: var(--atlas-surface-soft); border-color: var(--atlas-border); border-radius: 5px; color: var(--atlas-muted); }
html.river-atlas .tour-category-tab.active { background: var(--atlas-primary); border-color: var(--atlas-primary); color: var(--atlas-surface); box-shadow: none; }
html.river-atlas .tour-category-tab:hover:not(.active) { background: var(--atlas-hover); }
html.river-atlas .tour-option { background: var(--atlas-surface-soft); border-color: var(--atlas-border); border-radius: 6px; padding: 16px; min-height: 122px; }
html.river-atlas .tour-option:hover { background: var(--atlas-hover); border-color: var(--atlas-focus); }
html.river-atlas .tour-option b { font: 600 19px/1.2 Georgia, serif; margin-bottom: 7px; }
html.river-atlas .tour-option .tour-stops { color: var(--atlas-accent); font-weight: 600; }
html.river-atlas #tour-menu-close { border-color: var(--atlas-border-strong); color: var(--atlas-primary); border-radius: 5px; min-height: 36px; }
html.river-atlas #tour-hud { border-color: var(--atlas-border-strong); border-top: 3px solid var(--atlas-accent); box-shadow: 0 10px 30px var(--atlas-shadow); border-radius: 8px; }
html.river-atlas #tour-note { color: var(--atlas-ink); }
html.river-atlas #tour-controls button,
html.river-atlas #about-close,
html.river-atlas #feedback-actions button,
html.river-atlas #coach-prev { background: var(--atlas-surface-soft); border-color: var(--atlas-border-strong); color: var(--atlas-primary); border-radius: 5px; }
html.river-atlas #tour-controls button:hover:not(:disabled),
html.river-atlas #feedback-actions button:hover,
html.river-atlas #coach-prev:hover { background: var(--atlas-hover); color: var(--atlas-heading); }
html.river-atlas #tour-controls #tour-next,
html.river-atlas #coach-next { background: var(--atlas-primary); border-color: var(--atlas-primary); color: var(--atlas-surface); border-radius: 5px; }
html.river-atlas #coach-tours { background: var(--atlas-tour); border-color: var(--atlas-tour-border); color: var(--atlas-tour-ink); }
html.river-atlas #coach-tours:hover { background: var(--atlas-tour-hover); filter: none; }
html.river-atlas #coach-pop.tour-first { border-color: var(--atlas-tour-border); }
html.river-atlas #coach-pop.tour-first #coach-next { background: transparent; border-color: var(--atlas-border); color: var(--atlas-muted); }
html.river-atlas #about-card p,
html.river-atlas #feedback-card p,
html.river-atlas #coach-body,
html.river-atlas #coach-body i { color: var(--atlas-muted); }
html.river-atlas #coach-pop h3,
html.river-atlas #coach-body b { color: var(--atlas-heading); }
html.river-atlas .feedback-field select,
html.river-atlas .feedback-field textarea { background: var(--atlas-surface-soft); border-color: var(--atlas-border-strong); }
html.river-atlas #toast { color: var(--atlas-ink); border-color: var(--atlas-border-strong); box-shadow: 0 8px 30px var(--atlas-shadow); }
html.river-atlas #toast-text b { color: var(--atlas-accent); }
html.river-atlas #video-player-card { background: var(--atlas-surface); }
html.river-atlas #video-player-title { color: var(--atlas-ink); }
html.river-atlas #video-player-foot,
html.river-atlas #video-player-close { color: var(--atlas-muted); }
html.river-atlas #video-player-external { color: var(--atlas-accent); }
html.river-atlas #slice-close:hover { color: var(--atlas-heading); }
html.river-atlas .cat-civilization { color: var(--cat-civilization); }

@media (min-width: 721px) and (max-width: 1100px) {
  html.river-atlas #topbar { gap: 18px; }
  .river-moment { padding-right: 6px; min-width: 120px; }
  html.river-atlas #era-nav { gap: 10px; }
}
@media (max-width: 720px) {
  html.river-atlas #topbar { padding: 0 10px; gap: 8px; }
  html.river-atlas #brand h1 { font-size: 24px; gap: 7px; }
  html.river-atlas #brand h1 img { width: 26px; height: 26px; }
  html.river-atlas #brand h1 > span { margin-left: -7px; }
  html.river-atlas .brand-caption { font-size: 7px; letter-spacing: .14em; padding-left: 33px; margin-top: 1px; }
  html.river-atlas .brand-caption > * { display: none; }
  .river-moment { width: 128px; min-width: 0; padding: 0; }
  #river-year { font-size: 19px; white-space: nowrap; }
  #river-era { font-size: 7px; letter-spacing: .1em; }
  #river-population { font-size: 7px; }
  html.river-atlas #about-btn { border: 0; background: transparent; width: 30px; flex-basis: 30px; }
  html.river-atlas #era-nav { padding-left: 60px; gap: 8px; }
  html.river-atlas #mobile-region-nav { background: var(--atlas-surface); border-bottom: 1px solid var(--line); }
  html.river-atlas #mobile-region-nav button { color: var(--atlas-muted); }
  html.river-atlas #mobile-region-nav button.active { color: var(--atlas-heading); background: var(--atlas-surface-nav); border-color: var(--atlas-border-strong); }
  html.river-atlas #zoom-controls button { background: var(--atlas-surface); box-shadow: 0 3px 12px var(--atlas-shadow); }
  html.river-atlas #search { background: var(--atlas-surface); }
  html.river-atlas #tabs { padding: 0 8px; }
  html.river-atlas #panel-grip::before { background: var(--atlas-border-strong); }
  html.river-atlas #panel-close { width: 44px; height: 44px; }
  html.river-atlas #panel-connections-jump { color: var(--atlas-primary); background: var(--atlas-surface-nav); border-color: var(--atlas-border-strong); }
  html.river-atlas #tour-menu-card { padding: 18px; }
  html.river-atlas #tour-menu-card h2 { font-size: 28px; margin-bottom: 14px; }
  html.river-atlas .tour-option { flex: 0 0 auto; padding: 13px; min-height: 104px; }
  html.river-atlas .tour-category-list { scrollbar-color: var(--atlas-scrollbar) transparent; }
  html.river-atlas .tour-category-list::-webkit-scrollbar-thumb { background: var(--atlas-scrollbar); }
  html.river-atlas .tour-option b { font-size: 18px; }
}
@media (max-width: 380px) {
  html.river-atlas #topbar { padding: 0 8px; gap: 6px; }
  html.river-atlas #brand h1 { font-size: 20px; }
  .river-moment { width: 105px; }
  #river-year { font-size: 16px; }
  #river-population { font-size: 6.5px; }
  html.river-atlas #about-btn { width: 28px; flex-basis: 28px; }
}

/* Both palettes use the original ribbon geometry and identical control sizes. */
html.river-atlas .atlas-ribbon-stop { stop-color: var(--ribbon-light); }
html.river-atlas[data-theme="dark"] .atlas-ribbon-stop { stop-color: var(--ribbon-dark); }
html.river-atlas[data-theme="dark"] #stars { display: block; opacity: .34; }
html.river-atlas[data-theme="dark"] .stream { stroke: var(--atlas-line); }
html.river-atlas[data-theme="dark"] .stream.dim { opacity: .7; }
html.river-atlas[data-theme="dark"] .marker .m-halo { display: block; opacity: .55; }
html.river-atlas .thread-dot { fill: var(--atlas-thread); }
html.river-atlas #theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 112px; height: 38px; padding: 0 10px;
  border: 1px solid var(--atlas-border); border-radius: 7px;
  background: var(--atlas-surface-soft); color: var(--atlas-heading);
  font: 600 11px var(--font); flex-shrink: 0;
}
html.river-atlas #theme-toggle:hover { background: var(--atlas-hover); border-color: var(--atlas-focus); }
#theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.theme-toggle-label { width: 27px; text-align: left; }
.theme-track { display: block; width: 26px; height: 15px; padding: 3px; border-radius: 20px; background: var(--atlas-border-strong); }
.theme-track i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--atlas-surface); }
[data-theme="dark"] .theme-track { background: var(--atlas-primary); }
[data-theme="dark"] .theme-track i { transform: translateX(11px); }
[data-theme="light"] .theme-moon, [data-theme="dark"] .theme-sun { display: none; }
html.river-atlas .about-edition { margin: 18px 0; padding-top: 14px; border-top: 1px solid var(--line); }
html.river-atlas .about-edition p { margin-bottom: 6px !important; font-size: 11px !important; }
html.river-atlas #about-card #mode-switch { display: inline-flex; background: var(--atlas-surface-soft); border-color: var(--atlas-border); }
html.river-atlas #about-card #mode-switch button { color: var(--ink-dim); }
html.river-atlas #about-card #mode-switch button.active { color: var(--atlas-primary-contrast); background: var(--atlas-primary); }
.kids #about-card #mode-switch { display: inline-flex; margin-bottom: 16px; }
html.river-atlas .tab-menu-opt.edition-opt i { border-color: var(--atlas-focus); }
html.river-atlas .tab-menu-opt.edition-opt.active i { background: var(--atlas-primary); box-shadow: none; }
html.river-atlas #coach.no-target { background: var(--atlas-overlay); }
html.river-atlas #coach.welcome { background: color-mix(in srgb, var(--atlas-overlay) 60%, transparent); }
html.river-atlas #coach-hole { box-shadow: 0 0 0 9999px var(--atlas-overlay), 0 0 0 2px var(--atlas-primary); }
html.river-atlas #coach-dots i { background: var(--atlas-border-strong); }
html.river-atlas #coach-dots i.on { background: var(--atlas-accent); }
html.river-atlas #about-card kbd { background: var(--atlas-surface-soft); border-color: var(--atlas-border); }
html.river-atlas .slice-item:hover { background: var(--atlas-hover); }
html.river-atlas #video-player-close { background: var(--atlas-surface-soft); }
html.river-atlas #video-player-close:hover { color: var(--atlas-heading); background: var(--atlas-hover); }
html.river-atlas #video-player-external:hover { color: var(--atlas-accent-hover); }
@media (min-width: 721px) and (max-width: 1250px) {
  html.river-atlas #progress-counter { display: none; }
  html.river-atlas #topbar { gap: 16px; }
}
@media (min-width: 721px) and (max-width: 850px) {
  html.river-atlas .river-moment { min-width: 114px; padding-right: 0; }
  html.river-atlas #theme-toggle { min-width: 38px; width: 38px; padding: 0; }
  #theme-toggle .theme-track, #theme-toggle .theme-toggle-label { display: none; }
}
@media (max-width: 720px) {
  html.river-atlas #theme-toggle { min-width: 44px; width: 44px; height: 44px; padding: 0; }
  #theme-toggle svg { width: 18px; height: 18px; }
  #theme-toggle .theme-track, #theme-toggle .theme-toggle-label { display: none; }
  html.river-atlas #about-btn { display: none; }
  html.river-atlas .river-moment { width: 120px; }
}
@media (max-width: 380px) {
  html.river-atlas .river-moment { width: 104px; }
}
/* Discovery is centered in the space between the filters and help controls. */
@media (min-width: 721px) {
  #tab-tools { flex: 1 1 auto; margin-left: 0; }
  html #discovery-tools { position: static; transform: none; order: -1; margin-inline: auto; }
}
/* Compact story sections flow directly into the deeper reading. */
html.river-atlas #panel-blurb { font-size: 14px; line-height: 1.55; padding: 12px 22px 0; }
html.river-atlas #panel-media-wrap,
html.river-atlas #panel-books,
html.river-atlas #panel-wiki-wrap,
html.river-atlas #panel-related-wrap {
  margin: 14px 22px 0; padding: 12px 0 0; border-top: 1px solid var(--line);
}
html.river-atlas #panel-summary h3 {
  margin: 0 0 6px; color: var(--ink-faint); font: 600 10.5px/1.4 var(--font);
  letter-spacing: .14em; text-transform: uppercase;
}
html.river-atlas .panel-media-card { flex-direction: row; align-items: center; gap: 10px; padding: 0; min-height: 54px; border: 0; background: transparent; border-radius: 3px; }
html.river-atlas .panel-media-card:hover { background: var(--atlas-hover); }
.panel-media-thumbnail { width: 86px; height: 52px; flex: 0 0 86px; position: relative; display: grid; place-items: center; background: var(--atlas-surface-nav); color: var(--atlas-muted); border-radius: 3px; overflow: hidden; }
.panel-media-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel-media-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.panel-media-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.river-atlas .panel-media-note { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 12px; color: var(--atlas-muted); }
html.river-atlas .media-search { flex-direction: column; align-items: start; justify-content: center; gap: 4px; }
html.river-atlas .media-search .panel-media-note { max-width: 100%; }
html.river-atlas #panel-media { gap: 0; }
html.river-atlas .panel-media-more summary,
html.river-atlas .book-more summary { min-height: 28px; padding: 5px 0; font-size: 12px; }
html.river-atlas #panel-wiki { margin: 0; padding: 0; border: 0; color: inherit; font: inherit; }
html.river-atlas #panel-wiki:hover { color: var(--accent); text-decoration: underline; }
html.river-atlas #panel-wiki:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html.river-atlas #panel-wiki-wrap h3 { margin-bottom: 0; }
html.river-atlas #panel-related { gap: 5px; }
html.river-atlas .related-chip { font-size: 12px; padding: 5px 8px; }
html.river-atlas .connection-guide { margin: 0 0 7px; font-size: 11px; line-height: 1.4; }
.connection-guide summary { cursor: pointer; color: var(--ink-dim); }
.connection-guide p { margin: 6px 0; }
html.river-atlas #panel-connections-jump { display: none; }
@media (min-width: 721px) and (max-height: 800px) {
  html.river-atlas #panel-head { padding-top: 12px; }
  html.river-atlas #panel-title { font-size: 26px; margin-top: 8px; }
  html.river-atlas #panel-blurb { font-size: 13px; line-height: 1.5; padding-top: 10px; }
  html.river-atlas #panel-media-wrap, html.river-atlas #panel-books,
  html.river-atlas #panel-wiki-wrap, html.river-atlas #panel-related-wrap { margin-top: 8px; padding-top: 8px; }
  html.river-atlas .panel-media-card { min-height: 48px; }
  html.river-atlas .panel-media-thumbnail { height: 48px; width: 80px; flex-basis: 80px; }
  html.river-atlas .book-cover { height: 48px; width: 34px; flex-basis: 34px; }
  html.river-atlas .book-more summary, html.river-atlas .panel-media-more summary { min-height: 24px; padding-block: 3px; }
}
@media (max-width: 720px) {
  #discovery-tools { order: 1; }
  #tab-menu-btn { order: 2; }
  html.river-atlas .panel-media-more summary, html.river-atlas .book-more summary { min-height: 44px; padding-block: 12px; }
  html.river-atlas .related-chip { min-height: 44px; }
}