/* ============================================================================
   Reading settings — popover, theme modal, focus mode
   ----------------------------------------------------------------------------
   Shared chrome for every host: the ByteByteGo course shell, the notes.css
   sheets and the almanac pages. It re-skins itself along with the page,
   through the vocabulary bridge below.

   Active-state trick: segmented controls fill with the accent and set their
   text to the page colour. Every theme already guarantees those two contrast
   (that is what makes accent legible on the page), so one rule reads correctly
   across all fifteen palettes without a per-theme "on-accent" token.
   ========================================================================== */

/* ── vocabulary bridge ────────────────────────────────────────────────────
   This chrome renders inside three different design systems, which name
   their tokens differently and share none of them:

     ByteByteGo chapters   --bg      --text      --border    --bg-card
     notes.css sheets      --paper   --ink       --hairline  --card
     almanac.css pages     (notes tokens, plus --alm-* for type)

   Each alias falls through the chain and finally to a hardcoded literal, so
   the panel is still legible on a page that defines neither — and, critically,
   when no theme is selected at all and reading.js has emitted nothing.
   ────────────────────────────────────────────────────────────────────────── */
.rd-pop, .rd-modal, .rd-btn {
  --rd-page:        var(--bg, var(--paper, #ffffff));
  --rd-bg:          var(--bg-card, var(--card, #ffffff));
  --rd-soft:        var(--bg-soft, var(--paper, #f7f7f8));
  --rd-elev:        var(--bg-elev, var(--paper-2, #eeeef0));
  --rd-line:        var(--border, var(--hairline, #dcdce2));
  --rd-line2:       var(--border-soft, var(--hairline-2, #e8e8ee));
  --rd-text:        var(--text, var(--ink, #16181d));
  --rd-soft-text:   var(--text-soft, var(--ink-soft, #464a55));
  --rd-mute:        var(--text-mute, var(--ink-faint, #767d8a));
  --rd-accent:      var(--accent, #2f6fe0);
  --rd-accent-soft: var(--accent-soft, #e6efff);
  --rd-accent-line: var(--accent-line, var(--rd-accent));
  --rd-sans:        var(--sans, var(--font-body, var(--alm-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)));
  --rd-mono:        var(--mono, var(--font-mono, var(--alm-mono, ui-monospace, Menlo, monospace)));
  /* The panel is chrome, not content: it stays in a neutral UI sans whatever
     reading face is selected. Without this it would render in the reader's own
     choice — Newsreader on the notes sheets, or EB Garamond once picked. */
  --rd-ui-font:     -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
.rd-pop, .rd-modal { font-family: var(--rd-ui-font); }

/* ── the Aa trigger ───────────────────────────────────────────────────── */
/* Two hosts, two shapes: a 32px square in the ByteByteGo reader topbar, and
   a 34px round-cornered button alongside the pin/contrast pair on the notes
   sheets. Each inherits its host's own button styling; only the glyph and the
   open state are defined here. */
.rd-btn .aa { font: 700 15px/1 var(--rd-sans); letter-spacing: -.01em; }
.ibtn.rd-btn[aria-expanded="true"] { color: var(--rd-accent); border-color: var(--rd-accent); }

/* pages with no topbar or masthead to sit in — float clear of the content */
.rd-btn.rd-float {
  position: fixed; top: 14px; right: 14px; z-index: 90;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
@media print { .rd-btn.rd-float { display: none !important; } }

/* notes.css / almanac sheets — matches .theme-toggle and .pin-toggle */
.rd-btn.rd-round .aa { font-family: var(--font-mono, var(--alm-mono, monospace)); font-size: 13px; }
.rd-btn.rd-round[aria-expanded="true"] {
  color: var(--rd-accent);
  background: var(--rd-accent-soft);
  border-color: var(--rd-accent-line);
}

/* ── popover ──────────────────────────────────────────────────────────── */
.rd-pop {
  position: fixed;
  z-index: 120;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  border-radius: 16px;
  background: var(--rd-bg);
  border: 1px solid var(--rd-line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .18);
  animation: rd-in .16s var(--ease, ease) both;
}
.rd-pop[hidden] { display: none; }

@keyframes rd-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-pop { animation: none; }
}

.rd-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.rd-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.rd-reset {
  background: none; border: 0; padding: 2px 4px; margin: -2px -4px;
  font-size: 14px; color: var(--rd-mute); border-radius: 6px; transition: color .15s;
}
.rd-reset:hover { color: var(--rd-text); }

.rd-grp { margin-bottom: 18px; }
.rd-grp:last-child { margin-bottom: 0; }
.rd-lbl {
  display: block; margin-bottom: 9px;
  font-size: 13.5px; font-weight: 500; color: var(--rd-mute);
}

/* ── theme swatches ───────────────────────────────────────────────────── */
.rd-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }

.rd-sw {
  display: block; width: 100%; padding: 0;
  background: none; border: 0; text-align: center;
  color: var(--rd-mute); font-size: 12.5px; line-height: 1.3;
  border-radius: 12px; transition: color .15s;
}
.rd-sw .chip {
  display: grid; place-items: center;
  height: 62px; margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid var(--rd-line);
  background: var(--sw-bg, var(--rd-elev));
  color: var(--sw-fg, var(--rd-text));
  font: 700 17px/1 Georgia, "Times New Roman", serif;
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.rd-sw:hover { color: var(--rd-text); }
.rd-sw:hover .chip { border-color: var(--rd-mute); }
.rd-sw[aria-pressed="true"] { color: var(--rd-text); }
.rd-sw[aria-pressed="true"] .chip {
  border-color: var(--rd-accent);
  box-shadow: 0 0 0 2px var(--rd-accent);
}
/* the System chip is a hard diagonal split — light above, dark below */
.rd-sw .chip.split {
  background: linear-gradient(135deg, #ffffff 0 50%, #0d0d0f 50% 100%);
  color: #7d7d84;
}
.rd-sw:focus-visible .chip { outline: 2px solid var(--rd-accent); outline-offset: 2px; }

/* ── font tiles ───────────────────────────────────────────────────────── */
/* Each tile renders its own specimen, so the grid is the preview. The chip
   sits on --bg-elev rather than a colour swatch: the face is the subject
   here, and a tinted background would misrepresent how it reads on the page. */
.rd-sw-font .chip {
  height: 50px;
  font: 400 24px/1 inherit;      /* family comes from an inline style */
  background: var(--rd-elev);
  color: var(--rd-text);
  letter-spacing: .01em;
}
.rd-sw-font .nm {
  display: block;
  font-size: 12px; line-height: 1.25;
  overflow-wrap: anywhere;
}
.rd-sw-font .cat {
  display: block; margin-top: 3px;
  font: 600 9.5px/1 var(--rd-mono);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--rd-mute); opacity: .85;
}
.rd-sw-font[aria-pressed="true"] .cat { color: var(--rd-accent); opacity: 1; }

/* names run long ("Atkinson Hyperlegible"), so fonts get wider cells */
.rd-pop .rd-fonts { grid-template-columns: repeat(2, 1fr); }
.rd-modal-body .rd-fonts { grid-template-columns: repeat(3, 1fr); }

.rd-more {
  display: block; width: 100%; margin-top: 14px; padding: 7px;
  background: none; border: 0;
  font-size: 14.5px; color: var(--rd-soft-text); border-radius: 8px;
  transition: background .15s, color .15s;
}
.rd-more:hover { background: var(--rd-elev); color: var(--rd-text); }

/* ── segmented controls ───────────────────────────────────────────────── */
.rd-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 2px;
  background: var(--rd-elev);
  border: 1px solid var(--rd-line2);
  border-radius: 11px;
}
.rd-seg button {
  padding: 9px 4px;
  background: none; border: 0; border-radius: 9px;
  font-size: 14.5px; color: var(--rd-soft-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, color .15s;
}
.rd-seg button:hover { color: var(--rd-text); background: var(--rd-bg); }
.rd-seg button[aria-pressed="true"] {
  background: var(--rd-accent);
  color: var(--rd-page);
  font-weight: 600;
}
.rd-seg button:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: -2px; }
.rd-seg[data-kind="family"] button[data-v="serif"] { font-family: Georgia, "Times New Roman", serif; }
.rd-seg[data-kind="family"] button[data-v="mono"]  { font-family: var(--rd-mono); font-size: 13.5px; }

/* ── focus-mode row ───────────────────────────────────────────────────── */
.rd-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 16px; border-top: 1px solid var(--rd-line2);
}
.rd-row b { display: block; font-size: 15px; font-weight: 500; }
.rd-row small { display: block; font-size: 12.5px; color: var(--rd-mute); margin-top: 2px; }

.rd-switch {
  flex: none; width: 52px; height: 30px; padding: 3px;
  background: var(--rd-elev); border: 1px solid var(--rd-line);
  border-radius: 100px; transition: background .18s, border-color .18s;
}
.rd-switch i {
  display: block; width: 22px; height: 22px; border-radius: 50%;
  background: var(--rd-mute);
  transition: transform .18s var(--ease, ease), background .18s;
}
.rd-switch[aria-checked="true"] { background: var(--rd-accent-soft); border-color: var(--rd-accent); }
.rd-switch[aria-checked="true"] i { transform: translateX(22px); background: var(--rd-accent); }
.rd-switch:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; }

/* ── "More themes" modal ──────────────────────────────────────────────── */
.rd-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.rd-modal[hidden] { display: none; }
.rd-modal .rd-scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  border: 0; padding: 0;
  animation: rd-fade .18s both;
}
@keyframes rd-fade { from { opacity: 0; } to { opacity: 1; } }

.rd-dlg {
  position: relative;
  width: min(1060px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 30px 32px 32px;
  border-radius: 18px;
  background: var(--rd-bg);
  border: 1px solid var(--rd-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  animation: rd-in .18s var(--ease, ease) both;
}
.rd-dlg h2 { margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -.015em; }
.rd-dlg .rd-sub { margin: 0 0 24px; font-size: 15px; color: var(--rd-mute); }

.rd-x {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 9px;
  color: var(--rd-mute); transition: background .15s, color .15s;
}
.rd-x:hover { background: var(--rd-elev); color: var(--rd-text); }
.rd-x svg { width: 17px; height: 17px; }

.rd-modal-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.rd-modal-body .rd-swatches { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; align-content: start; }

/* ── live preview pane ────────────────────────────────────────────────── */
.rd-prev {
  padding: 24px 26px 26px;
  border-radius: 14px;
  border: 1px solid var(--p-border);
  background: var(--p-bg);
  color: var(--p-text);
  align-self: start;
  /* set only in font mode; in theme mode it falls back and the pane inherits */
  font-family: var(--p-font, inherit);
}

/* why this face is in the list — the whole point of the font picker is that
   you shouldn't have to already know typography to choose well */
.rd-why {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--p-border);
  font-size: 14px; line-height: 1.55;
  color: var(--p-mute);
  font-family: var(--rd-ui-font);   /* explanation is chrome, not a specimen */
}
.rd-why[hidden] { display: none; }
.rd-prev-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.rd-prev-name { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.rd-prev-tag {
  font: 600 10.5px/1 var(--rd-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--p-mute);
}
.rd-prev h3 { margin: 0 0 12px; font-size: 27px; font-weight: 750; letter-spacing: -.02em; }
.rd-prev p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--p-text); }
.rd-prev a { color: var(--p-accent); text-decoration: none; }
.rd-prev .rd-prev-note {
  padding: 14px 16px; border-radius: 10px;
  background: var(--p-card); border: 1px solid var(--p-border);
  margin-bottom: 16px;
}
.rd-prev .rd-prev-note b {
  display: block; margin-bottom: 5px;
  font: 700 11px/1 var(--rd-mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--p-mute);
}
.rd-prev .rd-prev-note p { margin: 0; font-size: 15.5px; color: var(--p-soft); }
.rd-prev code {
  padding: 4px 9px; border-radius: 7px;
  background: var(--p-elev); color: var(--p-text);
  font: 500 13.5px/1.4 var(--rd-mono);
}
.rd-prev .rd-prev-foot { font-size: 14.5px; color: var(--p-mute); }

@media (max-width: 860px) {
  .rd-modal-body { grid-template-columns: minmax(0, 1fr); }
  .rd-dlg { padding: 24px 20px 26px; }
  .rd-dlg h2 { font-size: 22px; }
}

/* ── focus mode ───────────────────────────────────────────────────────── */
/* The rail and pager collapse out; the topbar stays but recedes until the
   pointer comes near, so navigation is one hover away rather than gone. */
.app[data-focus="true"] { grid-template-columns: 0 1fr; }
.app[data-focus="true"] .rail { opacity: 0; pointer-events: none; }
.app[data-focus="true"] .pager { display: none; }
.app[data-focus="true"] .topbar { opacity: .28; transition: opacity .25s var(--ease, ease); }
.app[data-focus="true"] .topbar:hover,
.app[data-focus="true"] .topbar:focus-within { opacity: 1; }

@media (max-width: 900px) {
  .app[data-focus="true"] { grid-template-columns: var(--rail-w) 1fr; }
  .app[data-focus="true"] .rail { opacity: 1; pointer-events: auto; }
}

/* notes.css / almanac sheets — the same idea against different furniture:
   the section jumper and back-to-top go, the topbar recedes until approached.
   The trigger itself is exempt, or you could never switch focus mode back off. */
html[data-focus="true"] .quicknav,
html[data-focus="true"] .to-top { display: none !important; }
html[data-focus="true"] .topbar,
html[data-focus="true"] .masthead {
  opacity: .3;
  transition: opacity .25s var(--ease, ease);
}
html[data-focus="true"] .topbar:hover,
html[data-focus="true"] .topbar:focus-within,
html[data-focus="true"] .masthead:hover,
html[data-focus="true"] .masthead:focus-within { opacity: 1; }