/* Yezbi brand for Meanwhile, HistoMap's horizontal view (Derek, October 8, 2026; shared/brand/README.md).
   Loaded last, after shared/brand/yezbi-tokens.css and brand-header.css. The saved histomap-theme value is
   unchanged; the head script and updates.js only mirror it onto <html data-yezbi-theme>.
   The chrome (header, time machine, reader, dialogs, buttons, focus) uses the --yz-* roles. The timeline's
   region colors, bars, dots and moment cursor, the region accents on the world cards and the hero orbit keep
   their existing colors, and the serif editorial type stays. */

/* ---- Interface roles: Meanwhile's own variable names, mapped onto the tokens in both themes ---- */
:root[data-theme] {
  --paper: var(--yz-background);
  --surface: var(--yz-surface);
  --ink: var(--yz-text);
  --muted: var(--yz-muted);
  --rule: var(--yz-border);
  --rust: var(--yz-emphasis);
  --tour: var(--yz-gold-soft);
  --tour-ink: var(--yz-gold);
  --card: var(--yz-raised);
  --hover: var(--yz-raised);
  --label-halo: var(--yz-surface);
  --accent: var(--yz-primary);
  /* Names the shared progress dialog and account button read (css/progress.css). */
  --atlas-surface: var(--yz-surface);
  --atlas-surface-soft: var(--yz-surface);
  --atlas-hover: var(--yz-raised);
  --atlas-border: var(--yz-border);
  --atlas-heading: var(--yz-text);
  --atlas-primary: var(--yz-primary);
}
/* The timeline is data: its connection lines and dots keep their earlier rust (light) and gold (dark). */
:root[data-theme="light"] #timeline { --rust: #ad4e35; }
:root[data-theme="dark"] #timeline { --rust: #dbc08b; }
::selection { background: var(--yz-primary-soft); }

/* ---- Header: Yezbi HistoMap lockup (home link back to the map, keeping the story), then the Meanwhile name ---- */
.masthead { --yezbi-brand-size: 21px; background: var(--yz-header-bg); border-bottom-color: var(--yz-header-border); }
.masthead .wordmark { padding-left: 18px; border-left: 1px solid var(--yz-border); font-size: 17px; color: var(--yz-text); }
.masthead .wordmark svg { width: 26px; height: 26px; margin-right: 9px; stroke: var(--yz-text); }
@media (min-width: 1801px) {
  /* The header bar spans the window; its contents keep the 1800px column. */
  .masthead { max-width: none; padding-inline: calc(50% - 820.8px); }
}

/* ---- Controls: neutral surfaces, 3:1 edges, the action blue for selection ---- */
.search-launch { border-color: var(--yz-control-border); color: var(--yz-muted); background: var(--yz-surface); }
.search-launch kbd { background: var(--yz-raised); border-color: var(--yz-border); color: var(--yz-text); }
:root[data-theme] :is(#view-theme, .masthead #account-btn, .time-machine-heading>button:not(.guided-tour-launch), .timeline-zoom button, .round-button,
  .moment-controls button, .dialog-close, .reader .locate-button, .load-status button) { background: var(--yz-surface); border-color: var(--yz-control-border); color: var(--yz-text); }
:is(#view-theme, .masthead #account-btn, .time-machine-heading>button:not(.guided-tour-launch), .timeline-zoom button, .round-button, .moment-controls button, .dialog-close):hover:not(:disabled) { background: var(--yz-raised); filter: none; }
.guided-tour-launch, .top-nav [data-open-tours] { background: var(--yz-gold-soft); color: var(--yz-gold); border: 1px solid var(--yz-gold); font-weight: 650; }
:is(.guided-tour-launch, .top-nav [data-open-tours]):hover:not(:disabled) { filter: none; box-shadow: inset 0 0 0 1px var(--yz-gold); }
.tour-total { background: var(--yz-surface); color: var(--yz-gold); }
.time-machine { border-color: var(--yz-border); background: var(--yz-surface); }
.era-nav button { border-left-color: var(--yz-border); color: var(--yz-muted); }
:root[data-theme] .era-nav button[aria-current=true] { background: var(--yz-primary-soft); color: var(--yz-primary); box-shadow: inset 0 0 0 1px var(--yz-primary); font-weight: 600; }
.slider-wrap input { accent-color: var(--yz-primary); }
.slider-ends { color: var(--yz-muted); }
:root[data-theme] .tour-category-tab[aria-selected=true] { background: var(--yz-primary); color: var(--yz-on-primary); }
.category-count { background: var(--yz-raised); }
.tour-category-tab[aria-selected=true] .category-count { background: var(--yz-primary-hover); color: var(--yz-on-primary); }
:root[data-theme="dark"] .tour-category-tab[aria-selected=true] .category-count { background: var(--yz-primary-soft); color: var(--yz-primary); }
.tour-list-button { background: var(--yz-raised); border-color: var(--yz-border); }
:root[data-theme] .tour-list-button:hover { background: var(--yz-raised); border-color: var(--yz-primary); }
.tour-list-button small { color: var(--yz-muted); }
.timeline-scroll, #tour-list { scrollbar-color: var(--yz-control-border) transparent; }

/* ---- Reading surfaces and secondary text ---- */
.hero-description, #hero-era, .timeline-key, .timeline-note, .world-card .world-excerpt, .reader .eyebrow,
.tour-card .tour-stop-count, .tour-card .tour-match { color: var(--yz-muted); }
.portrait-content { background: radial-gradient(ellipse, var(--yz-background) 40%, transparent 71%); }
/* Featured tour cards share one quiet raised surface, as they already did in dark mode. */
.tour-card, .tour-card:nth-child(2), .tour-card:nth-child(3) { background: var(--yz-raised); border-color: var(--yz-border); color: var(--yz-text); }
.reader .reader-category { border-color: var(--yz-control-border); }
.reader .read-more { border-bottom-color: var(--yz-control-border); }
.reader .connections, .connection { border-color: var(--yz-border); }
.text-button { border-bottom-color: var(--yz-control-border); }
dialog { border-color: var(--yz-border); box-shadow: 0 25px 100px rgb(20 27 38 / .2); }
dialog::backdrop { background: rgb(20 27 38 / .58); }
:root[data-theme="dark"] dialog::backdrop { background: rgb(5 8 14 / .78); }
#search-input { background: var(--yz-surface); border-color: var(--yz-control-border); color: var(--yz-text); }
#view-feedback-dialog :is(select, textarea) { background: var(--yz-surface); border-color: var(--yz-control-border); }
#view-feedback-dialog form>button { background: var(--yz-surface); border-color: var(--yz-control-border); color: var(--yz-text); }
.masthead #progress-counter .progress-count { color: var(--yz-text); }
#progress-dialog :is(button, input:not([type=checkbox])) { border-color: var(--yz-control-border); }
#progress-dialog .progress-primary { background: var(--yz-primary); border-color: var(--yz-primary); color: var(--yz-on-primary); }
#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. */
#progress-meter { accent-color: var(--yz-success); }
/* The guided-journey bar: a raised panel with the terracotta edge the map's tour bar uses. */
:root[data-theme] .journey-player { background: var(--yz-surface); color: var(--yz-text); border: 1px solid var(--yz-control-border); border-top: 3px solid var(--yz-emphasis); box-shadow: 0 12px 40px rgb(20 27 38 / .18); }
.journey-player .eyebrow, .journey-player p { color: var(--yz-muted); }
:root[data-theme] .journey-actions button { border-color: var(--yz-control-border); color: var(--yz-text); background: var(--yz-surface); }
:root[data-theme] .journey-actions #journey-next { background: var(--yz-primary); border-color: var(--yz-primary); color: var(--yz-on-primary); }

/* ---- Keyboard focus: one solid ring in the action blue, 3:1 or better in both themes ---- */
:is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--yz-focus); outline-offset: 3px; }
.masthead .yezbi-brand:focus-visible { outline-offset: 4px; }

/* ---- Narrow screens: the lockup stays whole on the first row; the Meanwhile name moves to the second ---- */
@media (max-width: 1100px) {
  .masthead { --yezbi-brand-size: 19px; }
}
@media (max-width: 700px) {
  .masthead { --yezbi-brand-size: clamp(12px, 3.4vw, 15px); }
  .masthead .yezbi-brand { padding-block: 10px; }
  .masthead .wordmark { order: 5; flex: 0 0 100%; padding-left: 0; border-left: 0; font-size: 15px; min-height: 28px; }
  .masthead .wordmark svg { width: 22px; height: 22px; margin-right: 7px; }
  .masthead .search-launch { margin-left: auto; }
}

/* Video player: YouTube's Terms and Google's Privacy Policy (YouTube API Developer Policies III.A;
   FOUNDATION-PLAN F part 2b, October 9, 2026). */
#reader-video-player .reader-video-legal { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
#reader-video-player .reader-video-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }