/* Yezbi brand for HistoMap's map views (/ and /rivers/). Derek, October 8, 2026; recipe in shared/brand/README.md.
   Loaded last, after shared/brand/yezbi-tokens.css and brand-header.css.
   Preferences are unchanged: histomap-theme keeps its light/dark values and histomap-mode its Kids value.
   js/theme-init.js and js/atlas.js only mirror them onto <html data-yezbi-theme> (Kids is always dark).
   Rebrand the chrome, not the data: civilization, region, category, era and river colors, the map paper,
   the starfield and every map mark keep their existing --atlas-map-*, --atlas-thread*, --cat-* and ribbon values.
   The chrome (bars, panels, dialogs, buttons, focus) maps HistoMap's own variables onto the --yz-* roles, scoped
   to the chrome containers so the map SVG (#map) never sees the new values. The Kids edition keeps its own
   starfield look; only its header lockup changes. */

/* ---- Header lockup: Yezbi wordmark → "HistoMap" → HistoMap icon, both editions ---- */
#brand { --yezbi-brand-size: 21px; }
html.river-atlas #brand { --yezbi-brand-size: 20px; } /* leaves room for the caption row in the 68px bar */
html:is(.river-atlas, .kids) #brand h1 {
  display: flex; align-items: center; margin: 0;
  font-size: var(--yezbi-brand-size); line-height: 1; letter-spacing: 0; font-weight: 400;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit;
}
/* The earlier mark rule sized every header image to 26px on phones; the lockup keeps its own proportions. */
html:is(.river-atlas, .kids) #brand .yezbi-brand :is(.yezbi-wordmark, .yezbi-app-icon) { width: auto; height: 1.5em; }
/* The caption row now carries only the subject-preserving link to Meanwhile ("BY YEZBI" is retired). */
html.river-atlas #brand { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-width: 0; }
html.river-atlas .brand-caption { padding-left: 0; margin: 0; font-size: 11px; letter-spacing: .01em; line-height: 1.2; }
html.river-atlas .brand-caption a { display: inline-flex; align-items: center; min-height: 24px; color: var(--yz-muted); letter-spacing: .01em; }
html.river-atlas .brand-caption a:hover { color: var(--yz-primary); text-decoration: underline; }

/* ---- Chrome palette (full map, light and dark) ---- */
html.river-atlas { --hm-overlay: rgb(20 27 38 / .58); --hm-shadow: rgb(36 50 71 / .14); }
html.river-atlas[data-yezbi-theme="dark"] { --hm-overlay: rgb(5 8 14 / .78); --hm-shadow: rgb(0 0 0 / .45); }
html.river-atlas :is(#topbar, #era-nav, #mobile-region-nav, #scrubber, #tabs, #tab-menu, #panel, #video-player, #slice,
  #tour-menu, #tour-hud, #toast, #about, #feedback, #intro-hint, #overview-zoom-hint, #coach, #progress-dialog) {
  /* Neutral surfaces: white or slate panels, cool paper or deep slate bands. */
  --atlas-surface: var(--yz-surface);
  --atlas-surface-soft: var(--yz-raised);
  --atlas-surface-nav: var(--yz-background);
  --atlas-hover: var(--yz-raised);
  --atlas-ink: var(--yz-text);
  --atlas-heading: var(--yz-text);
  --atlas-muted: var(--yz-muted);
  --atlas-faint: var(--yz-muted);
  /* Softer blue for primary actions, selection and focus; restrained terracotta for dates and kickers. */
  --atlas-primary: var(--yz-primary);
  --atlas-primary-contrast: var(--yz-on-primary);
  --atlas-accent: var(--yz-emphasis);
  --atlas-accent-hover: var(--yz-emphasis);
  /* Guided tours keep HistoMap's gold, as the soft gold surface with a gold edge. */
  --atlas-tour: var(--yz-gold-soft);
  --atlas-tour-hover: var(--yz-gold-soft);
  --atlas-tour-ink: var(--yz-gold);
  --atlas-tour-border: var(--yz-gold);
  /* Dividers stay subtle; field and control edges are 3:1 or better. */
  --atlas-line: var(--yz-border);
  --atlas-border: var(--yz-border);
  --atlas-border-strong: var(--yz-control-border);
  --atlas-focus: var(--yz-focus);
  --atlas-focus-halo: var(--yz-primary-soft);
  --atlas-scrollbar: var(--yz-control-border);
  --atlas-shadow: var(--hm-shadow);
  --atlas-overlay: var(--hm-overlay);
  --atlas-link-line: var(--yz-border);
  /* The year scrubber is a control: neutral track, blue window and readout. */
  --atlas-track: var(--yz-surface);
  --atlas-window: color-mix(in srgb, var(--yz-primary) 9%, transparent);
  --atlas-readout-secondary: var(--yz-on-primary);
  /* style.css names used inside the chrome. */
  --bg: var(--yz-background);
  --ink: var(--yz-text);
  --ink-dim: var(--yz-muted);
  --ink-faint: var(--yz-muted);
  --line: var(--yz-border);
  --panel-bg: var(--yz-surface);
  --card-bg: var(--yz-surface);
  --accent: var(--yz-primary);
  /* body's text color was computed from the map's ink; the chrome takes the brand text color again. */
  color: var(--yz-text);
}

/* Bars: white or slate header (no plate behind the logo), quiet era band, white or slate bottom bar. */
html.river-atlas #topbar { background: var(--yz-header-bg); border-bottom: 1px solid var(--yz-header-border); }
html.river-atlas #era-links button[aria-current="true"] {
  color: var(--yz-primary); background: var(--yz-primary-soft); box-shadow: inset 0 0 0 1px var(--yz-primary); font-weight: 600;
}
html.river-atlas .tab.active,
html.river-atlas .tour-category-tab.active,
html.river-atlas :is(#tour-controls #tour-next, #coach-next, #progress-dialog .progress-primary) { color: var(--yz-on-primary); }
html.river-atlas #intro-hint { color: var(--yz-on-primary); }

/* Fields and outlined controls: surface fill, 3:1 edge, text-colored icons. */
html.river-atlas #search { background: var(--yz-surface); border-color: var(--yz-control-border); color: var(--yz-text); }
html.river-atlas #search::placeholder { color: var(--yz-muted); }
html.river-atlas #search:focus { background: var(--yz-surface); border-color: var(--yz-focus); box-shadow: 0 0 0 1px var(--yz-focus); }
html.river-atlas :is(#zoom-controls button, #about-btn, #account-btn, #theme-toggle, #panel-close) {
  background: var(--yz-surface); border-color: var(--yz-control-border); color: var(--yz-text);
}
html.river-atlas :is(#zoom-controls button, #about-btn, #account-btn, #theme-toggle, #panel-close):hover { background: var(--yz-raised); border-color: var(--yz-primary); }
html.river-atlas #tab-tools button:not(#tours-btn) { border-color: var(--yz-control-border); color: var(--yz-text); }
html.river-atlas #tab-tools button:not(#tours-btn):hover { background: var(--yz-raised); color: var(--yz-text); }
html.river-atlas #tab-tools #tours-btn { box-shadow: none; font-weight: 650; }
html.river-atlas :is(#tab-tools #tours-btn, #coach-tours, #about-tours):hover:not(:disabled) { background: var(--yz-gold-soft); box-shadow: inset 0 0 0 1px var(--yz-gold); }
html.river-atlas :is(#tour-controls button, #about-close, #feedback-actions button, #coach-prev, #tour-menu-close) {
  background: var(--yz-surface); border-color: var(--yz-control-border); color: var(--yz-text);
}
html.river-atlas :is(#tour-controls button, #feedback-actions button, #coach-prev, #tour-menu-close, #about-close):hover:not(:disabled) { background: var(--yz-raised); color: var(--yz-text); }
html.river-atlas :is(#tour-controls #tour-next, #coach-next, #feedback-actions #feedback-send) { background: var(--yz-primary); border-color: var(--yz-primary); color: var(--yz-on-primary); }
html.river-atlas :is(#tour-controls #tour-next, #coach-next, #feedback-actions #feedback-send):hover:not(:disabled) { background: var(--yz-primary-hover); border-color: var(--yz-primary-hover); color: var(--yz-on-primary); }
html.river-atlas #coach-pop.tour-first #coach-next { background: transparent; border-color: var(--yz-control-border); color: var(--yz-text); }
html.river-atlas .related-chip { border-color: var(--yz-control-border); }
html.river-atlas :is(#tour-menu-card, #about-card, #feedback-card, #coach-pop, #slice, #video-player-card) { border-color: var(--yz-border); }
html.river-atlas #video-player-external { color: var(--yz-primary); }
html.river-atlas #video-player-external:hover { color: var(--yz-primary-hover); text-decoration: underline; }
html.river-atlas #theme-toggle .theme-track { background: var(--yz-control-border); }
html.river-atlas[data-yezbi-theme="dark"] #theme-toggle .theme-track { background: var(--yz-primary); }
html.river-atlas #theme-toggle .theme-track i { background: var(--yz-surface); }
html.river-atlas #progress-dialog :is(button, input:not([type=checkbox])) { border-color: var(--yz-control-border); }
html.river-atlas #progress-dialog .progress-primary { background: var(--yz-primary); border-color: var(--yz-primary); }
html.river-atlas #progress-dialog .progress-primary:hover:not(:disabled) { filter: none; background: var(--yz-primary-hover); }
/* Explored moments are completion: green, beside the "N of 619" words. */
html.river-atlas #progress-meter { accent-color: var(--yz-success); }

/* Keyboard focus: one solid ring in the action blue, 3:1 or better on every surface in both themes. */
html.river-atlas :is(button, input, select, textarea, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--yz-focus); outline-offset: 2px; }
html.river-atlas #map :is(.stream, .stream-label, .marker, .m-bar, .cluster, .thread-dot, .thread-secondary-dot, .thread-label):focus-visible { outline: 2px solid var(--yz-focus); outline-offset: 2px; }

/* ---- Sizes ---- */
@media (min-width: 721px) and (max-width: 850px) {
  html:is(.river-atlas, .kids) #brand { --yezbi-brand-size: 18px; }
}
@media (max-width: 720px) {
  html:is(.river-atlas, .kids) #brand { --yezbi-brand-size: clamp(12px, 3.4vw, 15px); }
  html.river-atlas .brand-caption { display: none; }
  /* The home link stays a comfortable target in the 54px phone bar. */
  html:is(.river-atlas, .kids) #brand .yezbi-brand { padding-block: 10px; }
}
@media (max-width: 380px) {
  html.kids #year-pill { max-width: 84px; }
}
/* The narrowest phones keep the whole lockup; the year stays in the timeline scrubber's readout. */
@media (max-width: 340px) {
  html.river-atlas .river-moment, html.kids #year-pill { display: none; }
}

/* ---- Kids edition: same lockup on its starfield header, light name text ---- */
html.kids #brand { align-items: center; }

/* ---- Kids map: feedback hidden, "For grown-ups: privacy" in its place (FOUNDATION-PLAN F part 2b, October 9, 2026;
   link text from the draft children's privacy notice, Part I, marked draft). Small and calm: muted, underlined text.
   Wide screens show the full text, narrow desktops "Grown-ups: privacy", phones a two-line "Grown-ups / privacy";
   the accessible name is always the full text. Feedback stays on the full map. ---- */
#grownup-privacy-link { display: none; }
html.kids #feedback-btn, html.kids #feedback { display: none !important; }
html.kids #grownup-privacy-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; color: var(--yz-muted); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html.kids #grownup-privacy-link:hover { color: var(--yz-text); }
html.kids #grownup-privacy-link:focus-visible { outline: 2px solid var(--yz-focus); outline-offset: 2px; border-radius: 6px; }
html.kids #grownup-privacy-link :is(.gp-mid, .gp-short) { display: none; }
@media (min-width: 721px) and (max-width: 1359px) {
  html.kids #grownup-privacy-link .gp-long { display: none; }
  html.kids #grownup-privacy-link .gp-mid { display: inline; }
}
@media (max-width: 720px) {
  html.kids #grownup-privacy-link { flex: 0 0 auto; padding: 0 4px; font-size: 11px; line-height: 1.15; text-align: center; white-space: normal; }
  html.kids #grownup-privacy-link .gp-long { display: none; }
  html.kids #grownup-privacy-link .gp-short { display: inline; }
}
@media (max-width: 360px) {
  html.kids #grownup-privacy-link { padding: 0 2px; font-size: 10.5px; }
}
/* Video player: YouTube's Terms and Google's Privacy Policy (YouTube API Developer Policies III.A). */
#video-player-foot { flex-wrap: wrap; row-gap: 2px; }
#video-player-legal { flex: 1 0 100%; color: var(--yz-muted); font-size: 12px; }
#video-player-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#video-player-legal a:hover { color: var(--yz-text); }