/* Manzar — reading views.
 *
 * Two read-only views of an existing deck, on the Manzar tokens (base.css):
 *   .reading-page  — light, somber, app-side: the whole poem to read, Roman
 *                    paired with its English, set in Spectral. (/r/<slug>)
 *   .recite-page   — DARK, a reading cousin of the presenter: one continuous
 *                    scroll, Roman the star, faint English, slim sticky bar.
 *                    (/r/<slug>/recite)
 * No deck data is changed; these only render slides[].lines[].roman/english. */

/* ============================================================
   Desktop reading view (light)
   ============================================================ */
.reading-page { background: var(--surface-canvas); color: var(--text-body); min-height: 100vh; }

/* Brand/nav now come from the shared .site-header (base.css). Below it sits a
   per-poem actions, now centered under the byline in .reading__head (no second
   bar competing with the global header). */
.reading { max-width: var(--measure); margin: 0 auto; padding: var(--space-9) var(--space-6) var(--space-10); }

.reading__head { text-align: center; margin-bottom: var(--space-8); }
/* Per-poem controls, centered beneath the title/byline. */
.reading__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.reading__eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.reading__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.reading__attrib {
  margin: var(--space-3) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
}

/* Stanza separator: a numbered hairline ornament. */
.stanza-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-7) 0;
}
.stanza-rule span { width: 40px; height: 1px; background: var(--border-default); }
.stanza-rule i {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.stanza { text-align: center; }
.stanza__roman { margin-bottom: var(--space-3); }
.stanza__roman p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 23px;
  line-height: 1.75;
  letter-spacing: 0.004em;
  color: var(--text-strong);
  text-wrap: balance;
}
.stanza__en p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: balance;
}

@media (max-width: 560px) {
  .reading { padding: var(--space-7) var(--space-5) var(--space-9); }
  .reading__title { font-size: var(--fs-h1); }
  .stanza__roman p { font-size: 21px; }
}

/* ============================================================
   Mobile reciting view (dark) — a reading cousin of the presenter
   ============================================================ */
html.recite-html { background: var(--slide-bg); }
.recite-page {
  background: var(--slide-bg);
  color: var(--slide-fg);
  min-height: 100vh;
  overflow-x: hidden; /* never let the verse or bar cause a sideways scroll */
  /* roman text size is driven by the stepper (5 levels); english scales with it */
  --roman-size: 35px;
}

/* Slim sticky bar — translation toggle + text size. 44px touch targets. */
.recite-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding: 8px 14px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: rgba(16, 18, 22, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Translation switch */
.recite-tx {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin: -6px;
}
.recite-tx__label { font-family: var(--font-ui); font-size: 15px; font-weight: var(--fw-medium); color: rgba(244, 242, 236, 0.82); white-space: nowrap; }
.recite-tx__track {
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  border: 1px solid var(--accent);
  transition: background var(--dur) var(--ease-calm), border-color var(--dur) var(--ease-calm);
  flex-shrink: 0;
  order: -1;
}
.recite-tx__knob {
  position: absolute;
  top: 2.5px;
  left: 20px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: left var(--dur) var(--ease-calm);
}
.recite-tx[aria-checked="false"] .recite-tx__track { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.18); }
.recite-tx[aria-checked="false"] .recite-tx__knob { left: 2.5px; background: rgba(255, 255, 255, 0.7); }

/* Text-size stepper */
.recite-size { display: inline-flex; align-items: center; gap: 6px; }
.recite-size__btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(244, 242, 236, 0.9);
  cursor: pointer;
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 0;
}
.recite-size__btn span { font-size: 14px; }
.recite-size__btn--lg span { font-size: 21px; }
.recite-size__btn:disabled { color: rgba(255, 255, 255, 0.25); cursor: default; }

/* Poem body */
.recite { /* scrolls with the page; the bar is sticky above it */ }
.recite__head { padding: 28px 26px 6px; text-align: center; }
.recite__title { margin: 0; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: 27px; letter-spacing: 0.01em; color: #F4F2EC; }
.recite__attrib { margin: 10px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 15px; color: rgba(244, 242, 236, 0.5); }
.recite__awake { margin: 12px 0 0; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.04em; color: rgba(244, 242, 236, 0.3); }
.recite__altlink { margin: 6px 0 0; font-family: var(--font-ui); font-size: 12px; }
.recite__altlink a { color: rgba(244, 242, 236, 0.45); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.recite__altlink a:hover { color: rgba(244, 242, 236, 0.8); }

.recite-stanza { padding: 26px 22px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.recite-stanza:first-of-type { border-top: none; }
.recite-stanza__roman p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--roman-size);
  line-height: 1.5;
  letter-spacing: 0.004em;
  color: #F6F4EE;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.recite-stanza__en {
  margin-top: 14px;
}
.recite-stanza__en p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: calc(var(--roman-size) * 0.52 + 1px);
  line-height: 1.55;
  color: rgba(244, 242, 236, 0.42);
  text-wrap: pretty;
}
/* Hide all translations when toggled off. */
.recite.tx-hidden .recite-stanza__en { display: none; }

.recite-end {
  text-align: center;
  padding: 30px 0 max(40px, env(safe-area-inset-bottom));
  color: rgba(244, 242, 236, 0.22);
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.3em;
}

/* --- List sequence nav (reading view, light): prev / position / next --- */
.seq-bar { background: var(--surface-canvas); border-bottom: var(--bw-hair) solid var(--border-default); }
.seq-bar__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.seq-bar__pos { font-family: var(--font-ui); font-size: var(--fs-body-sm); color: var(--text-muted); text-decoration: none; text-align: center; }
.seq-bar__pos:hover { color: var(--text-strong); }
.btn.is-off { opacity: 0.4; pointer-events: none; }

/* --- List sequence nav (reciting view, dark) --- */
.recite__seq { display: inline-flex; align-items: center; gap: var(--space-3); margin: 12px 0 0; font-family: var(--font-ui); font-size: 12px; }
.recite__seq a { color: rgba(244, 242, 236, 0.78); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.recite__seq a:hover { color: #fff; }
.recite__seq .is-off { color: rgba(244, 242, 236, 0.25); }
.recite__seqpos { color: rgba(244, 242, 236, 0.4); }