/* ─────────────────────────────────────────────────────────
   ROOT & THEME
───────────────────────────────────────────────────────── */
:root {
  --bg:          #f2ede3;
  --page-bg:     #faf6ee;
  --page-shadow: rgba(100,80,50,0.18);
  --border:      #d0c4aa;
  --border-light:#e4dcc8;
  --text:        #221808;
  --text2:       #5a4a30;
  --text3:       #9a8a6a;
  --accent:      #7a2a08;
  --gold:        #9a7a20;
  --gold-light:  rgba(154,122,32,0.12);

  /* Heat colors for hot words */
  --heat-warm:   #7a5500;   /* interesting, layered */
  --heat-hot:    #8a1800;   /* philosophically significant */
  --heat-burn:   #2a1070;   /* great untranslatable — ink-deep */

  --panel-bg:    #fdf9f3;
  --rs:          1;        /* support/small-text scale — set by the size control */
  --gs:          1;        /* greek-word scale — grows gently */
  --gear-0:      #4a4440;
  --gear-I:      #2a5030;
  --gear-II:     #1a3a60;
  --gear-III:    #5a2800;
  --gear-IV:     #3a1060;
}

body.dark {
  --bg:          #14100a;
  --page-bg:     #1e1810;
  --page-shadow: rgba(0,0,0,0.4);
  --border:      #3a2e1a;
  --border-light:#2a2418;
  --text:        #e8dfc8;
  --text2:       #b8a880;
  --text3:       #7a6a48;
  --accent:      #d07040;
  --gold:        #c8a030;
  --gold-light:  rgba(200,160,48,0.12);
  --heat-warm:   #c8a030;
  --heat-hot:    #e07050;
  --heat-burn:   #a090e0;
  --panel-bg:    #1a150d;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  background: var(--bg);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 28px,
    rgba(100,80,40,0.03) 28px, rgba(100,80,40,0.03) 29px
  );
  color: var(--text);
  font-family: 'Noto Serif', Georgia, serif;
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}

/* ─────────────────────────────────────────────────────────
   TITLE PAGE
───────────────────────────────────────────────────────── */
.title-page {
  text-align: center;
  padding: 60px 28px 50px;
  max-width: 640px;
  margin: 0 auto;
}

.ornament {
  color: var(--gold);
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  display: block;
  margin-bottom: 20px;
  opacity: 0.7;
}

.title-page h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-bottom: 2px;
}

.author-en {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 12px;
}

.title-page h2 {
  font-family: 'IM Fell English', serif;
  font-size: 2rem;
  color: var(--text);
  font-style: italic;
  margin-bottom: 14px;
}

.title-page .subtitle {
  font-size: 0.82rem;
  color: var(--text3);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 28px;
}
/* About this text (optional, per-book via meta.about) — a short intro paragraph under the
   title. Slightly larger and warmer than the how-to-read subtitle; hides itself when empty. */
.title-page .title-about {
  max-width: 33em;
  margin: 4px auto 20px;
  font-size: 0.97rem;
  line-height: 1.62;
  color: var(--text2);
  white-space: pre-line;   /* a blank line in the about = a new paragraph (plain text, never HTML) */
  text-align: left;        /* one or two paragraphs read better ragged-right than centred */
}
.title-page .title-about:empty { display: none; margin: 0; }
/* Patron dedication (optional, per-book via BOOK.dedication) — the credit economy in the
   title page. Understated, gold, italic; hidden entirely when unset. */
.title-page .title-dedication {
  font-family: 'Noto Serif', Georgia, serif; font-style: italic;
  font-size: 0.9rem; color: var(--gold); letter-spacing: 0.02em;
  margin: -8px 0 26px;
}
.title-page .title-dedication:empty { display: none; margin: 0; }

/* Memorial dedication (optional, per-book via BOOK.memorial) — a dedication page,
   which in print gets a leaf of its own. Quiet, centred, generous. Not gold, not
   ornamented: the restraint is the respect. Hidden entirely when unset. */
.title-page .title-memorial { display: none; }
.title-page .title-memorial.has-memorial {
  display: block;
  max-width: 30rem;
  margin: 30px auto 34px;
  padding: 26px 20px 4px;
  border-top: 1px solid var(--border);
}
.title-memorial .mem-label {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: calc(0.8rem * var(--rs));
  color: var(--text3);
  letter-spacing: 0.09em;
  margin-bottom: 12px;
}
.title-memorial .mem-name {
  font-family: 'GFS Didot', 'Noto Serif', Georgia, serif;
  font-size: calc(1.34rem * var(--rs));
  color: var(--text);
  line-height: 1.35;
}
.title-memorial .mem-epithet {
  font-family: 'Noto Serif', Georgia, serif;
  font-style: italic;
  font-size: calc(1rem * var(--rs));
  color: var(--gold);
  margin-top: 5px;
}
.title-memorial .mem-body {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: calc(0.98rem * var(--rs));
  line-height: 1.75;
  color: var(--text2);
  text-align: left;
  margin-top: 20px;
}
.title-memorial .mem-body p { margin: 0 0 0.85em; }
.title-memorial .mem-closing {
  font-family: 'Noto Serif', Georgia, serif;
  font-style: italic;
  font-size: calc(1rem * var(--rs));
  color: var(--text);
  margin-top: 18px;
}

/* "In the press" notice (optional, per-book via BOOK.press) — a quiet line under the
   dedication that tells readers the edition is still being made, with a link to press it.
   Deliberately understated: reading serif, muted text, one gold-accented link. Hidden
   entirely when unset, so finished books show nothing. */
.title-page .title-press {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 0.85rem; color: var(--text3);
  line-height: 1.65; margin: -6px auto 24px; max-width: 32em;
}
.title-page .title-press:empty { display: none; margin: 0; }
.title-page .title-press .press-dot { color: var(--gold); margin-right: 0.35em; }
.title-page .title-press a {
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; padding-bottom: 1px;
}
.title-page .title-press a:hover { border-bottom-color: var(--gold); }

/* Kindle / EPUB offer (only on books with BOOK.epub — see renderKindle()). Reading stays
   free; the offline file is the comfort feature an account unlocks. */
.title-page .kindle-offer { margin: -6px auto 26px; max-width: 32em; }
.title-page .kindle-offer[hidden] { display: none; }
/* End-of-content note: the honest contribution ask, shown ONLY on in-progress books, AFTER
   the last built passage — never before, never on a finished book. Reading is free; the ask
   funds the compute that finishes the book. Trust layer, 2026-07-17 (Eric: build trust). */
.end-note { max-width: 34em; margin: 8px auto 64px; padding: 30px 30px 34px;
  border: 1px solid var(--border); border-top: 2px solid var(--gold); border-radius: 12px;
  background: var(--page-bg); box-shadow: 0 2px 12px var(--page-shadow, rgba(100,80,50,0.14)); }
.end-note[hidden] { display: none; }
.end-note .en-reached { font-family: 'Noto Serif', Georgia, serif; font-style: italic;
  color: var(--text2); font-size: 1.02rem; text-align: center; margin: 0 0 20px; }
.end-note h4 { font-family: 'Cinzel', 'Noto Serif', serif; font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.03em; color: var(--text); margin: 0 0 10px; }
.end-note p { font-family: 'Noto Serif', Georgia, serif; font-size: 1rem; line-height: 1.7;
  color: var(--text); margin: 0 0 14px; }
.end-note .en-free { color: var(--text3); font-size: 0.92rem; font-style: italic; }
.end-note .en-cta { display: inline-block; margin-top: 6px; font-family: 'Noto Serif', serif;
  font-size: 1rem; color: var(--gold); text-decoration: none; border: 1px solid var(--gold);
  border-radius: 22px; padding: 10px 24px; transition: all 0.15s; }
.end-note .en-cta:hover { background: var(--gold-light); transform: translateY(-1px); }
.end-note .en-sign { font-family: 'Noto Serif', Georgia, serif; font-style: italic; color: var(--text2);
  margin: 18px 0 4px; }
/* Two primary actions — signal (Follow) + help (Support) */
.end-note .en-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; }
.end-note .en-btn { flex: 1 1 160px; text-align: center; font-family: 'Noto Serif', serif; font-size: 1rem;
  text-decoration: none; border-radius: 22px; padding: 11px 20px; transition: all 0.15s; cursor: pointer;
  border: 1px solid var(--gold); background: none; color: var(--gold); }
.end-note .en-btn:hover { background: var(--gold-light); transform: translateY(-1px); }
.end-note .en-btn.primary { background: var(--gold); color: #fff; }
.end-note .en-btn.primary:hover { filter: brightness(1.06); }
/* Follow → inline email capture (reuses the site notify_submit endpoint) */
.end-note .en-follow { margin: 12px 0 2px; }
.end-note .en-follow[hidden] { display: none; }
.end-note .en-follow-row { display: flex; gap: 8px; flex-wrap: wrap; }
.end-note .en-follow input { flex: 1 1 200px; padding: 11px 13px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.98rem; }
.end-note .en-follow button { padding: 11px 18px; border: 1px solid var(--gold); border-radius: 10px;
  background: var(--gold); color: #fff; font-family: inherit; font-size: 0.98rem; cursor: pointer; }
.end-note .en-follow .en-follow-note { font-size: 0.82rem; color: var(--text3); margin: 8px 2px 0; }
.end-note .en-msg { font-size: 0.9rem; color: var(--gold); min-height: 1em; margin-top: 9px; }
/* Quiet wayfinding row — build list · contribute · finished collection */
.end-note .en-links { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center;
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.end-note .en-links a { font-family: 'Noto Serif', serif; font-size: 0.94rem; color: var(--text2);
  text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.15s; }
.end-note .en-links a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.kindle-btn {
  display: inline-block; cursor: pointer;
  font-family: 'Noto Serif', Georgia, serif; font-size: 0.95rem;
  color: var(--gold); background: transparent;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 20px; text-decoration: none;
  transition: border-color .15s, background .15s;
}
.kindle-btn:hover { border-color: var(--gold); background: rgba(160,120,40,0.07); }
.kindle-note {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 0.8rem; color: var(--text3);
  line-height: 1.6; margin-top: 9px;
}
.kindle-note a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--border); }
.kindle-note a:hover { border-bottom-color: var(--gold); }
.kindle-btn.secondary { font-size: 0.85rem; padding: 6px 15px; color: var(--text3); }
.kindle-row { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.kindle-said { color: var(--gold); }

/* Kindle setup card — the one-time Amazon approved-sender step. */
.kset-overlay {
  position: fixed; inset: 0; background: rgba(20,14,6,0.55);
  display: none; z-index: 3000; align-items: center; justify-content: center; padding: 20px;
}
.kset-overlay.open { display: flex; }
.kset-modal {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  max-width: 30em; width: 100%; padding: 26px 26px 22px; text-align: left;
  font-family: 'Noto Serif', Georgia, serif; color: var(--text);
  max-height: 86vh; overflow-y: auto;
}
.kset-modal h3 { font-size: 1.15rem; margin: 0 0 6px; color: var(--text); font-weight: normal; }
.kset-modal p { font-size: 0.92rem; line-height: 1.65; color: var(--text2); margin: 0 0 14px; }
.kset-step { margin: 0 0 16px; }
/* Only the step's own heading is a gold block. Inline <b> inside the prose must
   stay inline, or the sentence shatters across lines. */
.kset-step > b { display: block; font-weight: normal; color: var(--gold); margin-bottom: 5px; }
.kset-step p b { font-weight: 600; color: var(--text); }
.kset-copy {
  display: flex; gap: 8px; align-items: center;
  background: rgba(160,120,40,0.08); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 11px; font-size: 0.9rem;
}
.kset-copy code { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; color: var(--text); flex: 1; }
.kset-modal input[type=email] {
  width: 100%; padding: 10px 12px; font-size: 1rem;
  font-family: 'Noto Serif', Georgia, serif;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text);
}
.kset-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.kset-msg { font-size: 0.85rem; margin-top: 10px; min-height: 1.2em; }
.kset-msg.err { color: #b3402a; }
.kset-msg.ok  { color: var(--gold); }
.kset-x { float: right; cursor: pointer; color: var(--text3); font-size: 1.3rem; line-height: 1; background: none; border: 0; }

/* Masthead emblem (optional, per-book via BOOK.mastheadArt) — a framed medallion of the
   book's own material world (e.g. the Siren Vase for the Odyssey) above the title. Framed
   on the scene, not the whole object. Hidden entirely when unset. */
.title-page .masthead-emblem { display: none; }
.title-page .masthead-emblem.has-emblem {
  display: block; width: 158px; height: 158px; margin: 0 auto 22px;
  border-radius: 50%; overflow: hidden; position: relative;
  box-shadow: 0 0 0 5px var(--page-bg), 0 0 0 6px var(--gold), 0 8px 26px var(--page-shadow);
}
.title-page .masthead-emblem img {
  width: 100%; height: auto; display: block;
  transform: scale(1.95); transform-origin: 50% 40%;
}
@media (max-width: 520px) {
  .title-page .masthead-emblem.has-emblem { width: 128px; height: 128px; }
}

.title-rule {
  border: none;
  border-top: 1px solid var(--border);
  width: 80px;
  margin: 0 auto 28px;
}

/* Gear selector on title page */
.gear-selector {
  display: flex;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: inline-flex;
  margin-bottom: 10px;
}

/* Fit all four stage buttons across a phone without clipping */
@media (max-width: 520px) {
  .gear-selector { display: flex; width: 100%; }
  .gear-selector .gear-btn { flex: 1; min-width: 0; padding: 8px 3px; font-size: 0.58rem; }
}

.gear-btn {
  padding: 8px 18px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  background: var(--page-bg);
  color: var(--text3);
  transition: all 0.15s;
  border-right: 1px solid var(--border);
}

.gear-btn:last-child { border-right: none; }
.gear-btn:hover { color: var(--text); background: var(--gold-light); }
.gear-btn.s1.on { background: var(--gear-0);   color: #fff; }
.gear-btn.s2.on { background: var(--gear-II);  color: #fff; }
.gear-btn.s3.on { background: var(--gear-III); color: #fff; }
.gear-btn.s4.on { background: var(--gear-IV);  color: #fff; }

.gear-legend {
  font-size: 0.73rem;
  color: var(--text3);
  font-style: italic;
  margin-bottom: 24px;
}

.dark-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  font-family: inherit;
}

/* ─────────────────────────────────────────────────────────
   HEAT KEY
───────────────────────────────────────────────────────── */
.heat-key {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 5px 22px;
  margin: 0 auto 6px;
  max-width: 360px;
}

.heat-key-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text3);
}

.heat-swatch {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────
   MAIN READING AREA
───────────────────────────────────────────────────────── */
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 8px 80px;
}

/* Page-like reading block */
.page-block {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow:
    0 2px 8px var(--page-shadow),
    inset 0 0 60px rgba(180,150,80,0.04);
  /* The card scales WITH the type (Eric 2026-07-27: "if a person wants to go small it's because
     they want to fit lots on a page"). These were fixed pixels, so shrinking the text left the
     same frame around it — on Mark, dropping to Small cut the text 23% but the card only 14%,
     and the width not at all. In rem they follow the size stepper, which moves the root font.
     clamp() keeps the ends sane: the frame never collapses at Small, never bloats at XL. */
  padding: clamp(12px, 1.375rem, 30px) clamp(6px, 0.625rem, 14px) clamp(10px, 1.125rem, 24px);
  margin-bottom: clamp(8px, 0.875rem, 20px);
  position: relative;
}

@media (max-width: 520px) {
  .page-block { padding: clamp(8px, 0.875rem, 18px) clamp(4px, 0.375rem, 8px) clamp(7px, 0.75rem, 16px);
                margin-bottom: clamp(6px, 0.625rem, 14px); }
}

.page-block::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--accent), transparent 40%, transparent 60%, var(--accent));
  opacity: 0.15;
  border-radius: 4px 0 0 4px;
}

/* Passage label */
.passage-label {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 6px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.passage-label-text {
  flex: 1;
}
/* On a phone the title takes its own line and the buttons (🔊 Listen, 🐢 Slow, Share) sit under it, so the title is not
   squeezed into a narrow column. */
@media (max-width: 560px) { .passage-label { flex-wrap: wrap; } .passage-label-text { flex: 1 1 100%; } }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--text3);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.share-btn:hover {
  color: var(--text2);
  border-color: var(--text3);
}

/* Favorite (⭐ save) star beside the Share button */
.fav-star {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  padding: 0 2px;
  color: var(--text3);
  transition: color 0.15s, transform 0.15s;
}
.fav-star:hover { color: var(--gold); transform: scale(1.15); }
.fav-star.on { color: var(--gold); }
.pass-star { font-size: 0.95rem; flex-shrink: 0; }

.passage-context {
  font-size: calc(0.8rem * var(--rs));
  font-style: italic;
  color: var(--text3);
  line-height: 1.6;
  margin-bottom: 24px;
  padding-left: 14px;
  border-left: 2px solid var(--border-light);
}

/* ── Gear I: Greek + gloss (2 lines) ── */
.interlinear {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  row-gap: 8px;
  margin-bottom: 12px;
}

/* Verse line break (opt-in: only inserted when words carry a `line` field, i.e. verse
   books like Os Lusíadas). Forces the flex row to wrap at each verse line, preserving
   the ottava-rima shape. A zero-height full-width flex item — like .speaker-label. */
.verse-break { flex-basis: 100%; width: 100%; height: 0; margin: 0; padding: 0; border: 0; }
body.stage-2 .verse-break { display: block; }   /* also break in the inline source view */

/* Speaker label in dialogue passages — forces its own line, sits quietly */
.speaker-label {
  flex-basis: 100%;
  width: 100%;
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 10px 0 3px;
}
.speaker-label:first-child { margin-top: 0; }
body.stage-2 .english-flow .speaker-label,
body.stage-3 .english-flow .speaker-label { margin: 12px 0 4px; }

.word-unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 5px 3px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
  line-height: 1;
}

.word-unit:hover { background: var(--gold-light); }
.word-unit.active { background: var(--gold-light); outline: 1px solid var(--gold); }
.word-unit.noclick { cursor: default; }
.word-unit.noclick:hover { background: none; }

/* Greek text — heat coloring */
.w-greek {
  font-family: 'Noto Serif', 'Times New Roman', serif;
  font-size: calc(1.6rem * var(--gs));
  line-height: 1.25;
  text-align: center;
  font-weight: 400;
  color: var(--text);
}

.word-unit.particle .w-greek {
  color: var(--text3);
}

/* Heat levels */
.word-unit.heat-1 .w-greek { color: var(--heat-warm); }
.word-unit.heat-2 .w-greek { color: var(--heat-hot); }
.word-unit.heat-3 .w-greek {
  color: var(--heat-burn);
  text-shadow: 0 0 12px rgba(42,16,112,0.15);
}

body.dark .word-unit.heat-3 .w-greek {
  text-shadow: 0 0 16px rgba(160,144,224,0.3);
}

/* Heat indicator dot */
.heat-dot {
  position: absolute;
  top: 3px; right: 3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  display: none;
}

.word-unit.heat-1 .heat-dot { background: var(--heat-warm); display: block; }
.word-unit.heat-2 .heat-dot { background: var(--heat-hot);  display: block; }
.word-unit.heat-3 .heat-dot { background: var(--heat-burn); display: block; }

/* ── Clean copy (Eric: "our reader does poorly with copy pasting") ─────────────────────────
   Dragging across the interlinear yielded confetti — Greek, pronunciation and gloss interleaved
   word by word, useless in a paste. The support lines opt out of selection, so a drag across a
   passage takes the SOURCE TEXT only.
   Scope is deliberately narrower than the shadow-page version: the fluent English above each
   passage, the commentary, and the whole lexicon panel stay fully selectable — those are prose
   a reader has every reason to quote. Only the per-word stack beneath the source line opts out. */
.interlinear .w-translit,
.interlinear .w-gloss,
.interlinear .w-gloss-main,
.interlinear .w-gloss-alt,
.interlinear .w-infer,
.interlinear .worder-num,
.interlinear .heat-dot,
.interlinear .punct-sub,
/* The hover tooltips are the worst offenders: invisible on the page but fully selectable, so
   every word smuggled its whole sense list into the clipboard. */
.interlinear .tooltip,
.en-tooltip,
.gram-strip, .gram-sect, .gram-anchor {
  -webkit-user-select: none; user-select: none;
}

/* Gear layers — hidden by default, shown by mode class */
.w-translit {
  /* Pronunciation guide. Lifted 0.68→0.84rem 2026-07-26 (Eric: "still a little hard to
     read… could be brought up in size with the other words") — it sits between the Greek
     and the gloss and was the smallest line on the page. */
  font-size: calc(0.84rem * var(--rs));
  color: var(--text3);
  font-style: italic;
  margin-top: 4px;
  display: none;
  text-align: center;
  /* Reserve one line so a word with no pronunciation still holds the gloss at the same
     baseline as its neighbours — the reading line stays flat instead of bobbing (Eric 2026-08-09).
     Inert while display:none; only reserves space in the modes that show the translit. */
  min-height: 1.2em;
}

.w-gloss {
  font-size: calc(0.92rem * var(--rs));
  color: var(--accent);
  font-weight: 600;
  margin-top: 2px;
  max-width: calc(100px * var(--rs));
  text-align: center;
  display: none;
  line-height: 1.2;
}

/* Per-book opt-in (CFG.translitProminent): the romanization sits at the SAME SIZE as the English
   gloss — a full pronunciation line, not a subordinate one. Set by books that lead with sound
   (Meditations-Greek, Eric 2026-08-07). Scoped to html.translit-prominent so other books are untouched. */
html.translit-prominent .w-translit {
  font-size: calc(0.92rem * var(--rs));
  color: var(--text2);
}

/* Primary sense: prominent, carries the reading flow */
.w-gloss-main {
  display: block;
  color: var(--accent);
  font-weight: 600;
}

/* Alternate senses: stacked below, dimmed out of the eye-track */
.w-gloss-alt {
  display: block;
  color: var(--text3);
  font-weight: 400;
  font-size: 0.88em;
  line-height: 1.15;
  margin-top: 1px;
}

/* Inferred / supplied word — English implied by the Greek but with no token of its own
   (e.g. a pro-dropped subject the verb ending carries). Shown in the word row in a muted,
   italic, bracketed style so the reader can see what the Greek packs in. Additive: only
   fires on a word marked {inferred:true}; existing books have none. */
.word-unit.inferred { cursor: default; align-self: flex-start; }
.word-unit.inferred:hover { background: none; }
.w-infer {
  font-style: italic;
  font-weight: 400;
  opacity: .72;
}
.w-infer-gap { visibility: hidden; }
.w-infer::before { content: '['; opacity: .55; }
.w-infer::after  { content: ']'; opacity: .55; }
body.stage-2 .word-unit.inferred { display: none; }   /* Greek-only stage hides supplied English */

/* Show layers by stage */
body.stage-1 .w-gloss,
body.stage-4 .w-gloss { display: block; }
body.stage-1 .w-translit,
body.stage-4 .w-translit { display: block; }

/* Stage 1: put the natural English ABOVE the interlinear — read the sense first, then
   the word-by-word Greek beneath. Only reorders Stage 1 (page-block is flow-based
   elsewhere); steph-marker and ::before are absolute, so they're unaffected. */
body.stage-1 .page-block { display: flex; flex-direction: column; }
body.stage-1 .translation-text { order: 4; }
body.stage-1 .translation-rule { order: 5; }
body.stage-1 .interlinear      { order: 6; }
/* The commentary and its opener close the passage. Without an explicit order they inherit
   0 and fly to the TOP of this flex column — which is how the "❦ commentary" line ended up
   above the text instead of at the foot of the section. */
body.stage-1 .c-open           { order: 7; }
body.stage-1 .commentary       { order: 8; }

/* ── Stage 1: the scroll — bare Greek, continuous flow ── */
body.stage-2 .interlinear {
  display: block;
  line-height: 2.3;
  text-align: left;
}
body.stage-2 .word-unit {
  display: inline;
  padding: 2px 1px;
  line-height: inherit;
}
body.stage-2 .word-unit .heat-dot { display: none; }
body.stage-2 .w-greek {
  display: inline;
  font-size: calc(1.5rem * var(--gs));
}
body.stage-2 .word-unit.particle .w-greek { font-size: calc(1.5rem * var(--gs)); }
body.stage-2 .passage-context,
body.stage-2 .translation-rule,
body.stage-2 .translation-text { display: none; }

/* Stages 1 & 4: one unbroken scroll — no cards, no titles, no dividers */
body.stage-2 .passage-label,
body.stage-2 .passage-ornament,
body.stage-2 .section-divider,
body.stage-3 .passage-label,
body.stage-3 .passage-ornament,
body.stage-3 .section-divider { display: none; }
body.stage-2 .page-block,
body.stage-3 .page-block {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 12px;
  margin-bottom: 0;
}

@media (max-width: 520px) {
  body.stage-2 .page-block,
  body.stage-3 .page-block { padding: 0 6px; }
  /* No margin gutter on phones — the ref sits as a tiny line above the passage */
  body.stage-2 .steph-marker,
  body.stage-3 .steph-marker {
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 2px;
  }
}
body.stage-2 .page-block::before,
body.stage-3 .page-block::before { display: none; }
body.stage-2 .interlinear { margin-bottom: 1.2em; }

/* Stephanus reference in the margin — the scholar's citation anchor.
   Present only in the scroll stages (Ⅰ, Ⅳ); faint until hovered. */
.steph-marker {
  display: none;
  position: absolute;
  left: 8px;
  top: 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--text2);
  opacity: 0.62;
  user-select: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.steph-marker:hover { opacity: 1; color: var(--gold); }
body.stage-2 .steph-marker,
body.stage-3 .steph-marker { display: block; }

/* ── Stage 4: the translation — fluent English, Greek underneath ── */
.english-flow { display: none; }
body.stage-3 .english-flow {
  display: block;
  font-size: calc(1.12rem * var(--rs));
  line-height: 2;
  margin-bottom: 1.2em;
}
body.stage-3 .interlinear,
body.stage-3 .passage-context,
body.stage-3 .translation-rule,
body.stage-3 .translation-text,
body.stage-3 .commentary { display: none; }

.en-chunk { position: relative; border-radius: 4px; padding: 2px 1px; }
.en-chunk.linked { cursor: pointer; }
.en-chunk.linked:hover { background: var(--gold-light); }
.en-chunk.heat-1 { color: var(--heat-warm); }
.en-chunk.heat-2 { color: var(--heat-hot); }
.en-chunk.heat-3 {
  color: var(--heat-burn);
  text-shadow: 0 0 12px rgba(42,16,112,0.12);
}
body.dark .en-chunk.heat-3 { text-shadow: 0 0 16px rgba(160,144,224,0.25); }

.en-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--page-bg);
  font-family: 'Noto Serif', serif;
  font-size: 0.95rem;
  padding: 4px 12px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 30;
}
.en-chunk.linked:hover .en-tooltip { opacity: 1; }

/* Tooltip (shows in all modes on hover) */
.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--page-bg);
  font-size: 0.7rem;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 30;
}

.word-unit:hover .tooltip { opacity: 1; }

/* ── Natural English line beneath the chunk ── */
.translation-rule {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 6px 0 10px;
}

.translation-text {
  font-size: calc(0.95rem * var(--rs));
  color: var(--text2);
  line-height: 1.7;
  padding: 0 12px;
}

/* ── Stage 3: unified commentary ── */
.commentary {
  display: none;
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--gold-light);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  font-size: calc(0.88rem * var(--rs));
  line-height: 1.85;
  color: var(--text);
}

.commentary-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.commentary .c-para { margin-bottom: 13px; }
.commentary .c-para:last-child { margin-bottom: 0; }

body.stage-4 .commentary { display: block; }

/* ── The quiet commentary opener (Eric 2026-07-26: "at the bottom of each section… a light
   and non-distracting way to open up the commentary, in context"). A single dim line at the
   end of a passage; tapping it unfolds that passage's interpretation right there, so you
   never leave your place. Stage Ⅳ already prints the commentary, so the opener steps aside.
   Hidden in Read/Flow mode, which is deliberately bare. ── */
/* Presented like the palette's toggles — a pill that lights up while its commentary is open,
   so the state is visible at a glance (Eric 2026-07-26). */
.c-open {
  display: block; margin: 10px auto 0; padding: 7px 16px;
  background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 0.84rem; letter-spacing: 0.1em;
  color: var(--text2); transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.c-open:hover { border-color: var(--gold); color: var(--gold); }
.c-open.on { background: var(--gold-light); border-color: var(--gold); color: var(--gold); }
.page-block.c-shown .commentary { display: block; }
body.stage-4 .c-open,
body.flow-mode .c-open,
body.layer-nointerp .c-open { display: none; }

/* ── Passage ornament ── */
.passage-ornament {
  text-align: center;
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  opacity: 0.5;
  margin: 2px 0 10px;
}

/* ─────────────────────────────────────────────────────────
   LEXICAL PANEL
───────────────────────────────────────────────────────── */
.panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,12,4,0.4);
  z-index: 849;
  backdrop-filter: blur(3px);
}

.panel-overlay.open { display: block; }

.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;   /* fallback for browsers without dvh */
  /* A fixed element with bottom:0 is laid out against the LARGE viewport on iOS, so the
     foot of the panel sits UNDER Safari's toolbar: the end of a long entry (the LSJ block)
     is cut off and unreachable — "the panel is smaller than the page it's displaying."
     100dvh is the DYNAMIC viewport, which excludes the browser chrome. Browsers without
     dvh drop this declaration and fall back to top/bottom above. */
  height: 100dvh;
  width: 440px;
  max-width: 100vw;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  z-index: 850;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* momentum scroll inside the drawer on iOS */
  overscroll-behavior: contain;        /* scrolling the panel must not scroll the book behind it */
  transform: translateX(110%);
  transition: transform 0.24s cubic-bezier(0.2, 0, 0.1, 1);
  /* clear the home indicator so the last line isn't buried under it */
  padding: 0 0 calc(48px + env(safe-area-inset-bottom, 0px));
}

.panel.open { transform: translateX(0); }

/* Eric 2026-09-11: opening a lemma blurs the reading text behind it, so the open panel is the
   focus of attention. Scoped to browser windows (>=768px): on desktop the 440px side panel
   leaves the column visible beside it, so the blur reads clearly; on mobile the panel is a
   near-full drawer that already covers the text, and a blur filter on the tall column would jank.
   Uses a direct filter on #main-reader (reliable everywhere, unlike backdrop-filter). */
#main-reader { transition: filter 0.24s ease; }
@media (min-width: 768px) { body.lemma-open #main-reader { filter: blur(5px); } }

.panel-head {
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
  padding: 20px 22px 18px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.panel-close {
  float: right;
  background: none;
  border: 1px solid var(--border);
  color: var(--text3);
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 26px;
  text-align: center;
  margin-left: 10px;
}

/* "Pick this word" — gather the luscious words like berries. The ❧ (fleuron) is the
   mark medieval readers put beside a passage worth keeping: a florilegium, literally a
   gathering of flowers. Picked words sync to the account and feed the flashcard deck. */
.panel-pick {
  float: right;
  display: inline-flex; align-items: center; gap: 6px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text3);
  height: 26px; padding: 0 12px;
  border-radius: 13px;
  cursor: pointer;
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 0.82rem;
  line-height: 1;
  margin-left: 10px;
  transition: color .15s, border-color .15s, background .15s;
}
.panel-pick .fleuron { font-size: 1rem; line-height: 1; }
.panel-pick:hover { color: var(--gold); border-color: var(--gold); }
.panel-pick.picked {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(160,120,40,0.09);
}

.panel-greek-word {
  font-family: 'Noto Serif', serif;
  font-size: 2.6rem;
  line-height: 1.1;
  margin-bottom: 3px;
  color: var(--text);
  clear: both;
  white-space: nowrap;
  overflow: hidden;
}

/* Heat coloring in panel too */
.panel-greek-word.heat-1 { color: var(--heat-warm); }
.panel-greek-word.heat-2 { color: var(--heat-hot); }
.panel-greek-word.heat-3 { color: var(--heat-burn); }

.panel-translit-line {
  font-size: calc(0.88rem * var(--rs));
  font-style: italic;
  color: var(--text3);
  margin-bottom: 6px;
}

/* Pronunciation (audio). Only appears for living languages (CFG.speechLang) with a
   speech voice available — hidden otherwise, so ancient-Greek readers never see it. */
.panel-speak {
  display: none;              /* shown by JS only when speech is available */
  vertical-align: middle;
  margin-left: 10px;
  background: none;
  border: 1px solid var(--border);
  color: var(--gold);
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: border-color .15s, background .15s, transform .1s;
}
.panel-speak.on { display: inline-flex; align-items: center; justify-content: center; }
.panel-speak:hover { border-color: var(--gold); background: rgba(160,120,40,0.08); }
.panel-speak:active { transform: scale(0.92); }
.panel-speak.speaking { background: rgba(160,120,40,0.16); border-color: var(--gold); }
.share-btn.speaking { color: var(--accent); border-color: var(--accent); }   /* "⏹ Stop" state */

.panel-pos-pill {
  display: inline-block;
  background: var(--border-light);
  color: var(--text3);
  font-size: calc(0.68rem * var(--rs));
  padding: 2px 8px;
  border-radius: 5px;
  font-family: 'Noto Serif', serif;
}

.panel-freq {
  margin-top: 7px;
  font-size: calc(0.74rem * var(--rs));
  font-style: italic;
  color: var(--text3);
  font-family: 'Noto Serif', serif;
}
.panel-freq:empty { display: none; }
/* Dialect note for THIS form (e.g. Herodotus's Ionic ἑωυτοῦ, Attic ἑαυτοῦ). Lives in the word
   panel, never on the reading line (Eric 2026-09-30). Only fires on a word carrying `dialect`. */
.panel-dialect { margin-top: 6px; font-size: calc(0.76rem * var(--rs)); color: var(--text3); }
.panel-dialect:empty { display: none; }
/* For learners (LEARNER-STANDARD): old forms, set phrases, false friends, how common a word is. Shown only when the
   word or this occurrence carries a note, so every other book renders unchanged. */
.psec-learn .learn-item { margin: 6px 0 0; line-height: 1.45; }
.psec-learn .learn-kind { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 9px; font-size: calc(0.72rem * var(--rs));
  background: var(--bg2, rgba(0,0,0,.06)); color: var(--text2); letter-spacing: .01em; }
.psec-learn .learn-here { font-weight: 600; }
.word-unit.reading-now .w-greek { background: rgba(255, 205, 80, .42); border-radius: 4px; box-shadow: 0 0 0 2px rgba(255, 205, 80, .42); }
/* An empty Etymology or Related Words section is clutter: hide the heading with it (Orphic Hymns press, 2026-10-04). */
.psec-etymology:has(#p-etymology:empty), .psec-related:has(#p-related:empty) { display: none; }


.panel-body {
  padding: 18px 22px;
}

/* Word construction */
.construction-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 0.82rem;
}

.construction-label {
  font-family: 'Cinzel', serif;
  font-size: calc(0.6rem * var(--rs));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 7px;
}

.construction-parts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.c-part {
  padding: 4px 10px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text2);
}

.c-part .c-greek {
  font-family: 'Noto Serif', serif;
  font-size: 1rem;
  color: var(--text);
  display: block;
  text-align: center;
}

.c-part .c-meaning {
  font-size: calc(0.65rem * var(--rs));
  color: var(--text3);
  display: block;
  text-align: center;
  font-style: italic;
}

.c-plus {
  color: var(--text3);
  font-size: 1.1rem;
  font-weight: 300;
}

.c-arrow {
  color: var(--gold);
  font-size: 0.9rem;
}

/* Section heading */
.p-heading {
  font-family: 'Cinzel', serif;
  font-size: calc(0.86rem * var(--rs));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 16px 0 7px;
}

/* "In this line" — the contextual sense for this occurrence, set apart with a gold rule
   as the immediate answer, above the universal (dictionary) senses. */
.psec-context .p-heading { color: var(--gold); }
.p-context-gloss {
  font-size: calc(1rem * var(--rs));
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--gold);
}

.panel-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 14px 0;
}

/* Meanings */
.meanings-list { list-style: none; }

.meanings-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
}

.meanings-list li:last-child { border-bottom: none; }

.m-sense {
  font-size: calc(0.98rem * var(--rs));
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
}

.m-detail {
  font-size: calc(0.92rem * var(--rs));
  color: var(--text2);
  line-height: 1.6;
}

/* WHERE IT IS — people, peoples and places carry a `geo` block (Herodotus first, Eric 2026-10-01:
   "help the reader place these places"). A small pin under the name in the text; in the word panel a
   locator map (a public-domain base map + one dot), the place named, and links out. Additive: only a
   lexicon entry with `geo` triggers any of it. */
.word-unit.has-geo .w-gloss-main::after {
  content: ''; display: inline-block; width: 0.62em; height: 0.78em; margin-left: 3px; vertical-align: -0.05em;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0C2.7 0 0 2.6 0 5.9 0 10.3 6 16 6 16s6-5.7 6-10.1C12 2.6 9.3 0 6 0zm0 8.2a2.3 2.3 0 1 1 0-4.6 2.3 2.3 0 0 1 0 4.6z' fill='%23b0893e'/%3E%3C/svg%3E");
  opacity: .75;
}
.word-unit.has-geo.geo-person .w-gloss-main::after {   /* people and gods: a small bust, not a pin */
  width: 0.7em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Ccircle cx='7' cy='4.6' r='3.6' fill='%23b0893e'/%3E%3Cpath d='M0.6 16c0-4.1 2.9-6.9 6.4-6.9s6.4 2.8 6.4 6.9z' fill='%23b0893e'/%3E%3C/svg%3E");
}
.psec-geo .p-heading, .psec-who .p-heading { color: var(--gold); }
.geo-map { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--border-light);
  aspect-ratio: 16 / 10; background: #d6e2e6; cursor: zoom-out; margin: 2px 0 8px; }
.geo-map.whole { cursor: zoom-in; }
.geo-map img { position: absolute; max-width: none; display: block; user-select: none; -webkit-user-drag: none; }
.geo-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #b5482f; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.geo-tag { position: absolute; transform: translate(10px, -50%); font-size: calc(0.72rem * var(--rs));
  background: rgba(255,255,255,.88); color: #3b2f1c; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.geo-hint { font-size: calc(0.68rem * var(--rs)); color: var(--text3); margin: -4px 0 6px; }
.geo-label { font-size: calc(0.9rem * var(--rs)); color: var(--text2); margin-bottom: 6px; }
.geo-links { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: calc(0.8rem * var(--rs)); }
.geo-links a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted currentColor; }
.geo-credit { font-size: calc(0.64rem * var(--rs)); color: var(--text3); margin-top: 8px; }
.geo-zoom { display: inline-block; margin: 0 0 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-light);
  background: var(--page-bg); color: var(--accent); font: inherit; font-size: calc(0.78rem * var(--rs)); cursor: pointer; }
.geo-live { height: 300px; border-radius: 8px; border: 1px solid var(--border-light); margin: 2px 0 8px; overflow: hidden;
  position: relative; z-index: 0; isolation: isolate; }   /* keep Leaflet's z-index 400+ panes under the sticky panel header */
.geo-live .leaflet-tooltip { font-size: 12px; }
.geo-portrait { margin: 0 0 12px; text-align: center; }
.geo-portrait img { max-width: 100%; max-height: 240px; border-radius: 6px; border: 1px solid var(--border-light); background: var(--page-bg); }
.geo-portrait figcaption { font-size: calc(0.68rem * var(--rs)); color: var(--text3); margin-top: 4px; line-height: 1.4; }
.geo-portrait figcaption a { color: inherit; }

/* The plant — botanical block (Galen/Dioscorides on effects + a plate + a note) */
.psec-botanical { order: 3; }
.botanical-fig {
  margin: 2px 0 12px; padding: 0; text-align: center;
}
.botanical-fig img {
  max-width: 100%; max-height: 340px; border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--page-bg);
}
.botanical-fig figcaption {
  font-size: calc(0.7rem * var(--rs)); color: var(--text3);
  margin-top: 6px; font-style: italic; line-height: 1.5;
}
.botanical-name {
  font-family: 'Cinzel', 'Noto Serif', serif;
  font-size: calc(0.95rem * var(--rs)); color: var(--text);
  margin-bottom: 8px;
}
.botanical-effect {
  font-size: calc(0.92rem * var(--rs)); color: var(--text2);
  line-height: 1.65; margin-bottom: 8px;
}
.botanical-effect .botanical-cite {
  color: var(--text3); font-size: calc(0.82rem * var(--rs));
}
.botanical-note {
  background: var(--gold-light);
  border-left: 3px solid var(--gold);
  padding: 10px 13px; border-radius: 0 7px 7px 0;
  font-size: calc(0.9rem * var(--rs)); line-height: 1.65; color: var(--text);
}

/* Lost in translation */
.lost-box {
  background: var(--gold-light);
  border-left: 3px solid var(--gold);
  padding: 11px 14px;
  border-radius: 0 7px 7px 0;
  font-size: calc(0.82rem * var(--rs));
  line-height: 1.65;
  color: var(--text);
  font-style: italic;
}

/* Related */
.related-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.rel-tag {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 10px;
  font-size: calc(0.72rem * var(--rs));
  color: var(--text2);
  font-style: italic;
  font-family: 'Noto Serif', serif;
}

.rel-tag.linked {
  cursor: pointer;
  border-color: var(--gold);
  color: var(--text);
  transition: background 0.15s;
}
.rel-tag.linked:hover { background: var(--gold-light); }
.rel-tag.linked::after {
  content: ' ↗';
  color: var(--gold);
  font-style: normal;
  font-size: 0.65rem;
}

/* ── Stage-aware panel sections ─────────────────────────────
   Stage 1 (philologist): LSJ-first, lean — no beginner scaffolding.
   Stage 2 (learning Greek): language layers, no interpretive layers.
   Stage 3 (context beginner): everything, interpretation-forward. */
.panel-body { display: flex; flex-direction: column; }

body.stage-2 .psec-construction,
body.stage-2 .psec-meanings,
body.stage-2 .psec-lost { display: none; }
body.stage-2 .psec-readings { display: none !important; }

body.stage-1 .psec-readings { display: none !important; }
body.stage-1 .psec-lost { display: none; }

/* Stage 2 reads the text itself — scene-setting context belongs to stage 3 */
body.stage-1 .passage-context { display: none; }

/* Stage 2: lexicon after the learning layers */
/* SIMPLE AT THE TOP, DEPTH THROUGH SCROLLING (Eric, 2026-07-21). The panel is also
   the research surface: everything known about the word is on one page, ordered so a
   reader meets the easy answer first and the apparatus only if they keep going. */
body.stage-1 .psec-context      { order: 0; }
body.stage-1 .psec-construction { order: 1; }
body.stage-1 .psec-meanings     { order: 2; }
body.stage-1 .psec-etymology    { order: 3; }
body.stage-1 .psec-lost         { order: 4; }
body.stage-1 .psec-related      { order: 5; }
body.stage-1 .psec-lexica       { order: 6; }
body.stage-1 .psec-lsj          { order: 7; }
body.stage-1 .psec-lookups      { order: 8; }
body.stage-1 .psec-notes        { order: 9; }
body.stage-1 .psec-witnesses    { order: 10; }   /* always last — depth on request, never in the way */

/* Stages 3 & 4: interpretation before the lexicon */
body.stage-4 .psec-context,      body.stage-3 .psec-context      { order: 0; }
body.stage-4 .psec-construction, body.stage-3 .psec-construction { order: 1; }
body.stage-4 .psec-meanings,     body.stage-3 .psec-meanings     { order: 2; }
body.stage-4 .psec-etymology,    body.stage-3 .psec-etymology    { order: 3; }
body.stage-4 .psec-lost,         body.stage-3 .psec-lost         { order: 4; }
body.stage-4 .psec-readings,     body.stage-3 .psec-readings     { order: 5; }
body.stage-4 .psec-related,      body.stage-3 .psec-related      { order: 6; }
body.stage-4 .psec-lexica,       body.stage-3 .psec-lexica       { order: 7; }
body.stage-4 .psec-lsj,          body.stage-3 .psec-lsj          { order: 8; }
body.stage-4 .psec-lookups,      body.stage-3 .psec-lookups      { order: 9; }
body.stage-4 .psec-notes,        body.stage-3 .psec-notes        { order: 10; }
body.stage-4 .psec-witnesses,    body.stage-3 .psec-witnesses    { order: 11; }

/* ── "in the old dictionaries": the ancient authorities behind a word ──────────────────────
   Closed by default and last in the panel, so the Kindle-simple surface is untouched for a
   reader who only wants the sense. Opens to a short list — who said it, where, and our plain
   synthesis, with any verbatim quote set in the source's own script. `kind` stays data-only
   (Eric 2026-07-26): "variant"/"lost-sense" is our vocabulary, not a reader's. ── */
.wit-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; padding: 8px 0; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.12em;
  color: var(--text3); text-align: left; transition: color 0.15s;
}
.wit-toggle:hover { color: var(--gold); }
.wit-caret { display: inline-block; transition: transform 0.18s; font-size: 0.9rem; line-height: 1; }
.wit-toggle[aria-expanded="true"] .wit-caret { transform: rotate(90deg); }
.wit-toggle[aria-expanded="true"] { color: var(--gold); }
.wit-count { margin-left: auto; opacity: 0.6; font-family: inherit; }
.wit-list { padding: 2px 0 6px; }
.wit-item { padding: 10px 0; border-top: 1px solid var(--border); }
.wit-item:first-child { border-top: none; }
.wit-src {
  font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.08em;
  color: var(--gold); display: block; margin-bottom: 2px;
}
.wit-cite { color: var(--text3); font-size: calc(0.8rem * var(--rs)); font-style: italic; margin-left: 6px; letter-spacing: 0; }
.wit-note { font-size: calc(0.94rem * var(--rs)); line-height: 1.7; color: var(--text); margin: 4px 0 0; }
.wit-quote {
  display: block; margin: 6px 0 0; padding: 6px 0 6px 12px;
  border-left: 2px solid var(--gold-light);
  font-size: calc(0.9rem * var(--rs)); line-height: 1.55; color: var(--text2);
}
.wit-ed { display: block; margin-top: 5px; font-size: calc(0.78rem * var(--rs)); color: var(--text3); }
.wit-ed a { color: var(--text3); }
.wit-ed a:hover { color: var(--gold); }

/* ── Source links (Eric 2026-07-26) ────────────────────────────────────────────────────────
   A citation you can follow is worth more than one you must trust — the Mark precedent, where
   every entry names Dodson and links its repository. These leave the site, so they say so: the
   ↗ marks a new tab, and the title spells out the shift-click escape for anyone who would
   rather not accumulate tabs. Sized for older eyes, and underlined — colour alone is not a
   signal a reader with poor contrast vision can rely on. ── */
/* Written to beat .lex-source-link / .lex-block-name, which set colour:inherit and
   text-decoration:none — a source link that renders as plain dark text reads as dead. */
a.src-link, .lex-block-name.src-link {
  color: var(--gold); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; border-bottom: none; font-size: inherit;
}
a.src-link:hover, .lex-block-name.src-link:hover { color: var(--accent); }
.src-link::after { content: '\00a0↗'; font-size: 0.85em; opacity: 0.75; }
/* Older eyes: the small print in this panel was doing real work at 0.72–0.82rem. */
.lost-box { font-size: calc(0.9rem * var(--rs)) !important; }
.rel-tag  { font-size: calc(0.82rem * var(--rs)) !important; }
.m-detail { line-height: 1.65; }

/* LSJ abbreviation tooltips + key */
.lsj-abbr {
  border-bottom: 1px dotted var(--gold);
  cursor: help;
}
.lsj-abbr-key {
  margin-top: 10px;
  padding: 8px 12px 10px;
  border-top: 1px dashed var(--border-light);
  font-size: calc(0.68rem * var(--rs));
  color: var(--text3);
  line-height: 1.7;
}
.lsj-abbr-key b { color: var(--text2); font-weight: 600; }

/* ── LSJ Lexicon Section ────────────────────────────────── */
.lsj-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* "Look it up" — external lexica we may link to but not reproduce. */
/* ── The lexica stack — one block per dictionary, each naming its own source ── */
.lex-block { margin-bottom: 14px; }
.lex-block:last-child { margin-bottom: 0; }
.lex-block-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.lex-block-name {
  font-family: 'Noto Serif', serif;
  font-size: calc(0.95rem * var(--rs));
  color: var(--text);
  letter-spacing: 0.02em;
}
.lex-block-ed {
  font-family: 'Noto Serif', serif;
  font-size: calc(0.86rem * var(--rs));
  color: var(--text3);
  font-style: italic;
}
.lex-block-body {
  background: var(--bg);
  border-left: 2px solid var(--gold);
  border-radius: 0 6px 6px 0;
  padding: 9px 12px;
  font-family: 'Noto Serif', serif;
  font-size: calc(1.06rem * var(--rs));   /* was 0.95 — Eric 2026-08-09: dictionary text "super small
                                             and hard to read". The definition is the payload; give it
                                             the same weight as the reading line, not a footnote size. */
  line-height: 1.66;
  color: var(--text);                      /* was --text2 — lift the definition off the muted grey */
}
/* Plain English AND as printed, both shown. A toggle hides one of them; a reader
   learning the sigla needs to see the code beside its expansion. */
.lex-view { margin-top: 10px; }
.lex-view-label {
  font-family: 'Noto Serif', serif;
  font-size: calc(0.82rem * var(--rs));
  color: var(--text2);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.lex-view-note-row {
  display: block;
  margin: 6px 0 2px;
}

.lex-view-note {
  color: var(--text3);
  font-style: italic;
  font-size: calc(0.78rem * var(--rs));
}
/* the printed form is the reference copy — same size, quieter frame */
.lex-body-orig { border-left-color: var(--border); }

/* Greek quotations and LSJ's OWN translation of them, told apart. The plain view
   leans on the translation; the printed view keeps LSJ's own typographic habit.
   Nothing here is machine-translated — these are LSJ's renderings, recovered. */
.lex-block-body .lx-gk {
  font-family: 'GFS Didot', 'Noto Serif', serif;
  color: var(--text);
}
.lex-block-body .lx-tr {
  font-style: italic;
  color: var(--text);
}
.lex-plain .lx-tr {
  font-style: normal;
  border-bottom: 1px solid var(--gold-light);
}
.lex-plain .lx-gk { color: var(--text2); }

/* LSJ's own rendering of the Greek it just quoted, bracketed in the explained
   view only. The printed view stays exactly as LSJ sets it. */
.lex-block-body .lx-trp {
  color: var(--gold);
  font-style: normal;
}

/* Perseus links on LSJ's own citations — follow the reference to the passage. */
.lex-block-body .lx-src {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--gold);
}
.lex-block-body .lx-src:hover { border-bottom-style: solid; color: var(--gold); }

/* A real lexical entry, not a paragraph: headword, hanging-indent senses, and
   citations set apart. Nothing here is smaller than the body — a citation a
   researcher cannot read is not a citation. */
.lex-block-body .lx-hw {
  font-family: 'GFS Didot', 'Noto Serif', serif;
  font-size: calc(1.12rem * var(--rs));
  color: var(--text);
  margin-bottom: 7px;
}
.lex-block-body .lx-sense {
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 6px;
}
.lex-block-body .lx-sense:last-child { margin-bottom: 0; }
.lex-block-body .lx-n {
  color: var(--gold);
  font-weight: 600;
  margin-right: 4px;
}
.lex-block-body .lx-cite {
  color: var(--text3);
  font-style: italic;
  white-space: nowrap;
}
.lex-block-body .lx-cite .lx-cite { white-space: normal; }

.lex-block-body b { color: var(--text); font-weight: 600; }
.lex-block-body i { color: var(--text); font-style: italic; }
.lex-licence {
  font-size: calc(0.86rem * var(--rs));
  line-height: 1.55;
  color: var(--text3);
  font-style: italic;
  margin-top: 5px;
  line-height: 1.45;
}

/* matches .rel-tag, the shell's existing chip idiom */
.lookup-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lookup-chip {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--gold);
  padding: 3px 9px;
  border-radius: 10px;
  font-size: calc(0.9rem * var(--rs));
  color: var(--text);
  font-family: 'Noto Serif', serif;
  text-decoration: none;
  transition: background 0.15s;
}
.lookup-chip:hover { background: var(--gold-light); }
.lookup-chip::after { content: ' \2197'; color: var(--gold); font-size: 0.65rem; }
.lookup-chip .lk-note { color: var(--text3); font-style: italic; }

/* Per-sense provenance — every sense says where it came from, on its own line. */
.m-from {
  font-size: calc(0.88rem * var(--rs));
  font-family: 'Noto Serif', serif;
  letter-spacing: 0.02em;
  margin-top: 4px;
  opacity: 0.9;
}
.m-from-link {
  color: var(--text3);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.m-from-link:hover { border-bottom-style: solid; }
.m-from-link::after { content: ' ↗'; font-size: 0.8em; opacity: 0.6; }
.m-from-ours { color: var(--text3); font-style: italic; }

/* A citation the reader can FOLLOW is worth more than one they must trust. */
.lex-source-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
}
.lex-source-link:hover { border-bottom-style: solid; opacity: 0.85; }
/* One arrow, not two: where the link also carries .src-link that rule supplies the ↗, so this
   legacy arrow applies only to links that don't. */
.lex-source-link:not(.src-link)::after { content: ' ↗'; font-size: 0.75em; opacity: 0.65; }

.meanings-provenance {
  font-size: calc(0.88rem * var(--rs));
  font-family: 'Noto Serif', serif;
  color: var(--text3);
  font-style: italic;
  letter-spacing: 0.02em;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  line-height: 1.5;
}

.lsj-edition {
  font-size: calc(0.86rem * var(--rs));
  font-family: 'Noto Serif', serif;
  color: var(--text3);
  font-weight: 400;
  letter-spacing: 0.03em;
  font-style: italic;
}

.lsj-headword-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 6px;
  padding: 5px 10px;
  background: var(--gold-light);
  border-radius: 6px;
  border: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.lsj-headword-label {
  font-size: 0.67rem;
  color: var(--text3);
  font-family: 'Noto Serif', serif;
  font-style: italic;
}

.lsj-headword-word {
  font-family: 'IM Fell English', serif;
  font-size: calc(1rem * var(--rs));
  color: var(--gold);
  letter-spacing: 0.02em;
}

.lsj-headword-note {
  font-size: 0.67rem;
  color: var(--text3);
  font-family: 'Noto Serif', serif;
  font-style: italic;
}

.lsj-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 6px;
}

.lsj-tab-row {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.lsj-tab {
  flex: 1;
  padding: 7px 0;
  background: none;
  border: none;
  font-family: 'Noto Serif', serif;
  font-size: calc(0.85rem * var(--rs));
  color: var(--text3);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}

.lsj-tab.active {
  background: var(--gold-light);
  color: var(--gold);
  font-weight: 600;
}

.lsj-tab:hover:not(.active) {
  background: var(--border-light);
  color: var(--text2);
}

.lsj-content {
  padding: 12px 14px;
  font-size: calc(0.77rem * var(--rs));
  line-height: 1.65;
  color: var(--text2);
  font-family: 'Noto Serif', serif;
}

/* The decoded "Plain English" IS the meaning — dark + a touch heavier so the eye
   scans the sense fast; the original/reference stays dim. (Eric, 2026-08-09) */
#lsj-decoded { color: var(--text); font-weight: 600; }

#lsj-raw {
  font-style: italic;
  color: var(--text3);
  font-size: 0.73rem;
}

/* Two readings */
.readings-section {
  margin-top: 2px;
}
.readings-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  font-family: 'Cinzel', serif;
  padding: 12px 14px 6px;
}
.reading-item {
  padding: 8px 14px 10px;
  border-left: 2px solid var(--border);
  margin: 0 14px 10px;
  border-radius: 0 6px 6px 0;
  background: var(--bg);
}
.reading-frame {
  font-size: calc(0.68rem * var(--rs));
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.reading-text {
  font-size: calc(0.77rem * var(--rs));
  line-height: 1.6;
  color: var(--text2);
  font-family: 'Crimson Text', serif;
}

/* Personal notes */
.note-area {
  width: 100%;
  min-height: 84px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Noto Serif', serif;
  font-size: 0.82rem;
  color: var(--text);
  resize: vertical;
  margin-top: 6px;
  transition: border-color 0.15s;
}

.note-area:focus { outline: none; border-color: var(--gold); }

.save-btn {
  margin-top: 8px;
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.save-btn:hover { opacity: 0.85; }

.saved-msg {
  font-size: 0.72rem;
  color: var(--gear-I);
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.3s;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────
   RETURN BOOKMARK BANNER
───────────────────────────────────────────────────────── */
.bookmark-bar {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--page-bg);
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 0.8rem;
  cursor: pointer;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  white-space: nowrap;
  animation: rise 0.4s ease;
}

@keyframes rise {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* ─────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────── */
.reader-footer {
  text-align: center;
  padding: 30px 28px 50px;
  border-top: 1px solid var(--border);
  max-width: 720px;
  margin: 0 auto;
}

.reader-footer p {
  font-size: 0.78rem;
  color: var(--text3);
  font-style: italic;
  line-height: 1.7;
}

/* Key shortcut hints */
.key-hints {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.key-hint {
  font-size: 0.7rem;
  color: var(--text3);
  display: flex;
  gap: 5px;
  align-items: center;
}

.key {
  background: var(--border-light);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  color: var(--text2);
  font-size: 0.68rem;
}

/* ─────────────────────────────────────────────────────────
   READING PROGRESS BAR
───────────────────────────────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--gold);
  z-index: 2000;
  transition: width 0.15s linear;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   TOAST NOTIFICATION
───────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--page-bg);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.73rem;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 3000;
  white-space: nowrap;
}
.toast.show { opacity: 0.92; }

/* ─────────────────────────────────────────────────────────
   CONTENTS TOC TRAY
───────────────────────────────────────────────────────── */
.toc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 900;
}
.toc-overlay.open { display: block; }

.toc-tray {
  position: fixed;
  top: 0; left: 0;
  width: 280px;
  height: 100%;
  background: var(--panel-bg);
  border-right: 1px solid var(--border);
  z-index: 950;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,0.12);
}
.toc-tray.open { transform: translateX(0); }

.toc-head {
  padding: 22px 20px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--panel-bg);
}

.toc-title {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text2);
}

.toc-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--text3);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.toc-close:hover { color: var(--text); }

.toc-book-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 14px 20px 6px;
}

/* Quiet link into the About / Core-Vocabulary page — sits above the chapters. */
.toc-about-link {
  display: block;
  margin: 4px 14px 2px;
  padding: 9px 12px;
  font-family: 'Noto Serif', serif;
  font-size: 0.82rem;
  color: var(--text2);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.toc-about-link:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-light, rgba(154,122,32,0.10)); }

.toc-list {
  overflow-y: auto;
  flex: 1;
  padding: 6px 0 20px;
}

/* Division marker in the Contents — sticks to the top of the list while you scroll that book,
   so you always know where you are in a long work, and clicking it returns to that book's start. */
.toc-book-marker {
  position: sticky; top: 0; z-index: 2;
  padding: 9px 20px 8px;
  background: var(--page-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: 'Cinzel', serif; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--gold);
  cursor: pointer; transition: background 0.15s;
}
.toc-book-marker:first-child { border-top: none; }
.toc-book-marker:hover { background: var(--gold-light); }

.toc-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 20px;
  cursor: pointer;
  transition: background 0.15s;
  border-left: 3px solid transparent;
}
.toc-item:hover { background: var(--gold-light); }
.toc-item.current {
  border-left-color: var(--gold);
  background: var(--gold-light);
}

.toc-stephanus {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  min-width: 38px;
  flex-shrink: 0;
}

.toc-passage-title {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.35;
}

.toc-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
}

.library-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  text-decoration: none;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: all 0.15s;
  text-align: center;
  justify-content: center;
}
.library-link:hover {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--accent);
}

/* Always-visible back-to-library link, top-left (conventional "back" position).
   The TOC-tray one is easy to miss, so this makes the way back obvious. */
.library-btn {
  position: fixed;
  top: 14px;
  /* Wide screens: pull in to a centered ~1200px frame instead of hugging the
     window corner (below ~1228px this stays at the original 14px). */
  left: max(14px, calc(50% - 600px));
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  text-decoration: none;
  transition: all 0.15s;
}
.library-btn:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 520px) {
  /* tighten on phones so it doesn't crowd the passage text */
  .library-btn { padding: 0 10px; font-size: 0.6rem; }
}

/* TOC open button */
.toc-btn {
  position: fixed;
  top: 14px;
  right: max(62px, calc(50% - 552px));
  width: 36px;
  height: 36px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.15s;
  font-size: 1rem;
  color: var(--text2);
}
.toc-btn:hover {
  background: var(--gold-light);
  border-color: var(--gold);
  color: var(--gold);
}

/* Share this book — a standard share glyph, always reachable while reading.
   Sits in the top-right cluster, just left of the Contents button. */
.share-book-btn {
  position: fixed;
  top: 14px;
  right: max(108px, calc(50% - 506px));
  width: 36px;
  height: 36px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.15s;
  color: var(--text2);
  padding: 0;
}
.share-book-btn:hover { background: var(--gold-light); border-color: var(--gold); color: var(--gold); }
.share-book-btn svg { width: 18px; height: 18px; display: block; }

/* ─────────────────────────────────────────────────────────
   SETTINGS / TEXT SIZE PANEL
───────────────────────────────────────────────────────── */
.sz-btn {
  position: fixed;
  top: 14px;
  left: 58px;
  width: 36px;
  height: 36px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.15s;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text2);
  font-family: 'Noto Serif', serif;
}
.sz-btn:hover {
  background: var(--gold-light);
  border-color: var(--gold);
  color: var(--gold);
}
.sz-panel {
  position: fixed;
  top: 58px;
  left: 14px;
  width: 196px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
  z-index: 799;
  padding: 12px 12px 10px;
  display: none;
}
.sz-panel.open { display: block; }
.sz-panel-title {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 9px;
}
.sz-options {
  display: flex;
  gap: 6px;
}
.sz-opt {
  flex: 1;
  min-width: 0;                 /* localized labels ("Pequeno", "Ordem do inglês") shrink, not overflow */
  overflow-wrap: anywhere;
  padding: 7px 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.68rem;
  color: var(--text2);
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
}
.sz-opt:hover { background: var(--gold-light); border-color: var(--gold); color: var(--gold); }
.sz-opt.on { background: var(--gold-light); border-color: var(--gold); color: var(--gold); font-weight: 700; }

/* ── Text-size scales ──
   Two knobs, because bigger text is for reading the SMALL words, not for
   inflating the Greek. --gs (Greek) grows gently so the Greek word never
   balloons; --rs (support text) grows more, so glosses and the whole
   definition panel become legible for older eyes. ── */
body.size-sm { --rs: 0.90; --gs: 0.82; }
body.size-lg { --rs: 1.32; --gs: 1.05; }
body.size-xl { --rs: 1.62; --gs: 1.12; }
body.size-xl .word-unit { padding: 8px 8px 7px; }

/* ── FLOAT CONTROL — gear + text size, always accessible while scrolling ── */
.float-ctrl-btn::after {
  content: '▾';
  font-size: 0.55rem;
  position: absolute;
  right: 4px;
  bottom: 3px;
  opacity: 0.55;
}

.float-ctrl-btn {
  position: fixed;
  top: 14px;
  right: max(14px, calc(50% - 600px));
  width: 40px;
  height: 36px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.15s;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  color: var(--text2);
}
.float-ctrl-btn:hover { background: var(--gold-light); border-color: var(--gold); color: var(--gold); }
.float-ctrl-btn.fg-1 { color: var(--gear-0);   border-color: var(--gear-0); }
.float-ctrl-btn.fg-2 { color: var(--gear-II);  border-color: var(--gear-II); }
.float-ctrl-btn.fg-3 { color: var(--gear-III); border-color: var(--gear-III); }
.float-ctrl-btn.fg-4 { color: var(--gear-IV);  border-color: var(--gear-IV); }
.float-ctrl-panel {
  position: fixed;
  top: 58px;
  right: 14px;
  width: 232px;
  /* Scroll when the panel is taller than the window, so the bottom controls are always reachable.
     dvh (dynamic viewport) accounts for the iOS address bar; vh is the fallback. */
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
  z-index: 799;
  padding: 12px 12px 11px;
  display: none;
}
/* Use the extra room on larger screens — the base width is a phone panel. */
@media (min-width: 640px)  { .float-ctrl-panel { width: 300px; right: 18px; } }
@media (min-width: 1000px) { .float-ctrl-panel { width: 340px; right: 22px; } }

/* ── DOCKED PALETTE (Eric 2026-07-26): "when the screen is wide enough the palette simply
   docks on the right hand side… keeping it open and out of the way… and then collapsing
   back into a closed menu when the screen is small enough."
   Wide (≥1180px) + body.dock → the palette becomes a flush full-height sidebar that PUSHES
   the reading column left rather than covering it, and stays open across passages. The Ⅰ
   button closes it (body.dock drops) and re-opens it. Below 1180px the dock rules simply
   stop applying and it reverts to the floating popover — no separate markup, one panel. ── */
@media (min-width: 1180px) {
  body.dock .float-ctrl-panel {
    display: block;
    top: 0; right: 0; bottom: 0;
    width: 320px; max-height: none; height: 100dvh;
    border: none; border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: -2px 0 18px var(--page-shadow, rgba(0,0,0,0.10));
    padding: 56px 16px 28px;          /* clear the corner chips up top */
    z-index: 802;                      /* just over the toolbar so the two never fight */
  }
  /* Push the page instead of overlapping it — the 720px column still centres in what's left. */
  /* Reserve the dock's width on the BODY, not with a margin on the column.
     `margin-right: 320px` on #main-reader looked equivalent but wasn't: it killed the column's
     own auto-centering (margin-left:auto then swallows all the slack and shoves the text right),
     and repeating it on .art-plate/.art-figure — which live INSIDE #main-reader — applied the
     offset twice AND replaced their `margin: … auto` with an explicit value, so the plates
     stopped centering at all. The Zeus frontispiece sat 160px left of its column.
     Padding on the body shrinks the containing block instead, so everything inside keeps
     centering on its own, and the column's centre lands exactly on 50% − 160px — which is what
     the toolbar and the ❧ Read button already assume, at every width. (2026-07-27) */
  body.dock { padding-right: 320px; }
  /* Re-centre the floating toolbar inside the remaining space. */
  body.dock .reader-toolbar { left: calc(50% - 160px); }
  /* The whole top-right cluster steps clear of the dock. Moving only the Ⅰ chip left the
     ☰ contents and share buttons stranded UNDERNEATH the panel — they simply vanished
     (Eric 2026-07-26). They travel together, keeping their original spacing. */
  /* Shifted with a transform rather than by re-setting `right`: these chips resolve a used
     value for BOTH left and right, so a right-only override is silently ignored and they stay
     buried under the panel. A translate always lands. */
  body.dock .float-ctrl-btn,
  body.dock .toc-btn,
  body.dock .share-book-btn { transform: translateX(-336px); }
  /* The reading column shifted left, so centre the ❧ Read button on the text, not the window. */
  body.dock #flow-enter { left: calc(50% - 160px); }
  /* A quiet × in the dock's top corner — the obvious way to close it. */
  body.dock .dock-close { display: block; }
}
/* ══ PHONE: the palette becomes the whole screen ══════════════════════════════════════════
   A phone has no keyboard and no hover, so every shortcut the desktop offers has to exist as
   something a thumb can hit. Rather than shrink the desktop panel, the palette opens as a
   full sheet and spends the space: 48–56px targets, larger switches, segmented controls that
   fill the width, and no keyboard legend (nothing there to press). The shortcuts still fire
   for anyone with a keyboard attached to a phone or iPad — they're just no longer advertised
   where they can't be used. ── */
/* Phone quick-rail. Right edge, vertically centred: the notch owns the top, and the bottom
   corners are where a scrolling thumb lands, so the middle-right is the one calm strip. The
   real trick isn't placement though — it's that the rail goes inert while the page moves
   (iOS reading apps hide their chrome entirely while you read; this is the quiet version). */
/* ── PHONE BAR: one row, all buttons the same size, across the top. Replaces the scattered
   corner chips (library pill top-left, share/contents/gear top-right) and the right-edge rail,
   which are all hidden on a phone now. It does NOT disappear — see the always-visible note
   below; the rail's dim-while-scrolling trick was tried here and withdrawn 2026-07-27. ── */
.phone-bar { display: none; }
@media (max-width: 739px) {
  .phone-bar {
    display: flex; align-items: stretch; gap: 4px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 800;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 6px;
    background: color-mix(in srgb, var(--page-bg) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.1) blur(8px); backdrop-filter: saturate(1.1) blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .pbar-btn {
    flex: 1 1 0; min-width: 0; height: 44px;   /* the iOS minimum, not a pixel under */
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 10px;
    color: var(--text2); font-family: inherit; font-size: 0.95rem; font-weight: 600;
    cursor: pointer; padding: 0; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pbar-btn svg { width: 20px; height: 20px; display: block; }
  .pbar-btn:active { background: var(--gold-light); }
  .pbar-btn.on { color: var(--accent); border-color: var(--gold); background: var(--gold-light); }
  /* ALWAYS VISIBLE (Eric 2026-07-27: "the menu on the iPhone should always be visible, it's
     hard to use now"). The bar used to auto-hide — scrolling down put it away, and it also
     retired itself after 4s untouched. Both were borrowed from Safari/Books, and both were
     wrong here: this bar is not browser chrome you occasionally need, it's the ONLY control
     surface on a phone (the desktop toolbar and every corner chip are hidden below 739px),
     so hiding it left the reader with nothing to press and no gesture to get it back. It now
     simply stays. The one thing it still yields to is a screen that IS a control surface —
     the settings sheet and Read mode, below. */
  /* Not over the reading sheet or Read mode. */
  body.sheet-open .phone-bar, body.flow-mode .phone-bar { display: none; }
  /* The bar owns the top strip, so the page starts below it. Tracks the SAME env() the bar's
     own top padding uses (6 + 44 button + 6 + 1 border = 57, plus a little air): a flat 62px
     was fine only while the bar could scroll away, but a permanently-visible bar in a home-
     screen/PWA window (where safe-area-inset-top is ~47px, not 0) would have sat permanently
     on top of the first line of text. */
  main { padding-top: calc(env(safe-area-inset-top, 0px) + 62px); }
  /* Everything the bar replaced. */
  .library-btn, .toc-btn, .share-book-btn, .float-ctrl-btn, .phone-rail { display: none !important; }
  /* …and the palette sections the bar now duplicates — word order, text size, reading-order
     numbers all live in the top row on a phone, so repeating them in the sheet is just more
     to scroll past (Eric 2026-07-26). The desktop palette keeps the full set. */
  .dupe-on-phone { display: none !important; }
}

.phone-rail { display: none; }
@media (max-width: 739px) {
  .phone-rail {
    display: flex; flex-direction: column; gap: 6px;
    position: fixed; right: 6px; top: 50%; transform: translateY(-50%);
    z-index: 790; transition: opacity 0.25s;
  }
  /* Absent where it would intrude: the reading sheet, Read mode, and while a panel is open. */
  body.flow-mode .phone-rail, body.sheet-open .phone-rail { display: none; }
  .prail-btn {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-bg); border: 1px solid var(--border); color: var(--text2);
    font-size: 0.95rem; font-family: inherit; cursor: pointer; padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  .prail-btn.on { color: var(--accent); border-color: var(--gold); background: var(--gold-light); }
  /* Scrolling: dimmed AND untappable, so an edge button can't fire under a moving thumb. */
  body.scrolling .phone-rail { opacity: 0.16; pointer-events: none; }
}

.sheet-head { display: none; }
@media (max-width: 739px) {
  .float-ctrl-panel {
    /* full sheet, safe-area aware so nothing hides under the notch or the home indicator */
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; max-width: none; height: 100dvh; max-height: none;
    border: none; border-radius: 0;
    padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
    box-shadow: none;
    z-index: 1200;                        /* over every scrim — it IS the screen now */
    overscroll-behavior: contain;
  }
  .float-ctrl-panel.open .sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2;
    margin: 0 -16px 6px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
    background: var(--panel-bg); border-bottom: 1px solid var(--border);
  }
  .sheet-title {
    font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text2);
  }
  .sheet-close {
    min-height: 44px; padding: 0 18px; border-radius: 999px;
    background: var(--gold-light); border: 1px solid var(--gold); color: var(--gold);
    font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  }
  /* Section headings get room to breathe on a full screen */
  .float-ctrl-label { font-size: 0.62rem; margin: 18px 0 9px; }
  .float-ctrl-divider { margin: 4px 0; }
  /* Segmented controls fill the width, one thumb per cell */
  .float-gear-row { gap: 8px; }
  .float-gear-btn { min-height: 60px; font-size: 0.72rem; border-radius: 10px; }
  .sz-options { gap: 8px; }
  .sz-opt { flex: 1 1 0; min-height: 48px; font-size: 0.82rem; border-radius: 10px; }
  .float-nav-btn { min-height: 48px; font-size: 0.82rem; border-radius: 10px; }
  /* Rows: a whole row is the target, not just the switch */
  .lrow { min-height: 54px; padding: 6px 2px; gap: 14px; }
  .lrow-label { font-size: 0.92rem; }
  .glp-sw { width: 46px; height: 27px; }
  .glp-sw::after { width: 21px; height: 21px; }
  .glp-sw.on::after { transform: translateX(19px); }
  /* The specimen is the explanation — give it real type on a phone */
  .spec { padding: 12px 14px; border-radius: 12px; }
  .spec-row { padding: 10px 0; }
  .spec-name { font-size: 0.58rem; }
  .spec-gk { font-size: 1.3rem; }
  .spec-tr { font-size: 0.9rem; }
  .spec-g  { font-size: 1rem; }
  .spec-alt { font-size: 0.86rem; }
  .float-toggle-btn { min-height: 48px; font-size: 0.86rem; border-radius: 10px; }
  /* No keyboard on a phone — don't advertise shortcuts that can't be pressed. */
  .float-keys { display: none; }
  /* The Ⅰ chip that opens all this is itself a thumb target. */
  .float-ctrl-btn { width: 46px; height: 42px; }
  /* Hold the book still behind the open sheet. */
  body.sheet-open { overflow: hidden; }
}

.dock-close {
  display: none; position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px; line-height: 26px; text-align: center;
  background: transparent; border: 1px solid var(--border); border-radius: 7px;
  color: var(--text3); font-size: 15px; cursor: pointer; padding: 0;
}
.dock-close:hover { color: var(--gold); border-color: var(--gold); }
.float-ctrl-panel.open { display: block; }
/* Language switcher (glp-i18n dropdown) inside the settings panel — full-width & compact */
.float-ctrl-label {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 7px;
}
.float-ctrl-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 0 8px;
}
.float-gear-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.float-gear-btn {
  min-width: 0;                 /* let long localized labels ("Interlineal") shrink, not overflow */
  overflow-wrap: anywhere;
  hyphens: auto;
  padding: 6px 2px 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.6rem;
  color: var(--text2);
  cursor: pointer;
  text-align: center;
  line-height: 1.35;
  transition: all 0.12s;
}
.float-gear-btn:hover { background: var(--gold-light); border-color: var(--gold); color: var(--gold); }
.float-gear-btn.s1.on { background: var(--gear-0);   color: #fff; border-color: var(--gear-0); }
.float-gear-btn.s2.on { background: var(--gear-II);  color: #fff; border-color: var(--gear-II); }
.float-gear-btn.s3.on { background: var(--gear-III); color: #fff; border-color: var(--gear-III); }
.float-gear-btn.s4.on { background: var(--gear-IV);  color: #fff; border-color: var(--gear-IV); }

/* Nav row: touch navigation — prev/next passage, night mode */
.float-nav-row {
  display: flex;
  gap: 6px;
}
.float-nav-btn {
  flex: 1;
  padding: 9px 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.68rem;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
}
.float-nav-btn:hover { background: var(--gold-light); color: var(--text); }

/* ── The layer specimen (Eric 2026-07-26): rather than a stack of word-buttons whose names
   ("Alternate senses") mean nothing until you've seen the thing, show ONE real word from this
   book with every line it can carry, and put each line's switch on that line. You read the
   example, not the label. ── */
.spec {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; background: var(--bg); margin-bottom: 4px;
}
/* Each line is NAMED as well as shown (Eric 2026-07-26): the name tells you what to call it,
   the specimen beneath tells you what it looks like on the page, and the switch beside the
   name turns that exact line off. */
.spec-row { display: block; padding: 7px 0; }
.spec-row + .spec-row { border-top: 1px dashed var(--border); }
.spec-head { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.spec-name {
  flex: 1 1 auto; min-width: 0;
  font-family: 'Cinzel', serif; font-size: 0.52rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text3);
}
.spec-text { min-width: 0; line-height: 1.3; padding: 2px 0 0; }
.spec-gk   { font-family: var(--font-greek, 'Noto Serif', Georgia, serif); font-size: 1.05rem; color: var(--text); }
.spec-tr   { font-style: italic; font-size: 0.76rem; color: var(--text3); }
.spec-g    { font-weight: 600; font-size: 0.84rem; color: var(--accent); }
.spec-alt  { font-size: 0.72rem; color: var(--text3); }
.spec-fixed { font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: 'Cinzel', serif; color: var(--text3); opacity: 0.6; flex: none; }
/* One switch, used by the specimen and the layer rows alike. */
.glp-sw {
  flex: none; width: 32px; height: 18px; border-radius: 999px; padding: 0;
  background: var(--border); border: none; position: relative; cursor: pointer;
  transition: background 0.15s;
}
.glp-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--page-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.28);
  transition: transform 0.15s;
}
.glp-sw.on { background: var(--gold); }
.glp-sw.on::after { transform: translateX(14px); }
/* Passage-level layers — the ones that aren't part of a single word's stack.
   The whole row is the tap/click target (see the delegated handler), so it shows a pointer. */
.lrow, .spec-head { cursor: pointer; }
.lrow:hover .lrow-label, .spec-head:hover .spec-name { color: var(--text); }
/* An "always" line has nothing to toggle — don't invite a tap that does nothing. */
.spec-head:has(.spec-fixed) { cursor: default; }
.spec-head:has(.spec-fixed):hover .spec-name { color: var(--text3); }
.lrow { display: flex; align-items: center; gap: 10px; padding: 5px 1px; }
.lrow + .lrow { border-top: 1px solid var(--border); }
.lrow-label { flex: 1 1 auto; font-size: 0.72rem; color: var(--text2); line-height: 1.25; }
.lrow-label .lr-icon { color: var(--text3); margin-right: 5px; }

.float-toggle-btn {
  width: 100%;
  margin-top: 6px;
  padding: 8px 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.68rem;
  color: var(--text2);
  cursor: pointer;
}
.float-toggle-btn:hover { background: var(--gold-light); color: var(--text); }
.float-toggle-btn.on { border-color: var(--gold); color: var(--accent); }

/* Colour-coding off: everything on the reading surface goes to one ink colour */
body.colors-off .word-unit .w-greek,
body.colors-off .word-unit.particle .w-greek,
body.colors-off .word-unit.heat-1 .w-greek,
body.colors-off .word-unit.heat-2 .w-greek,
body.colors-off .word-unit.heat-3 .w-greek { color: var(--text); text-shadow: none; }
body.colors-off .en-chunk.heat-1,
body.colors-off .en-chunk.heat-2,
body.colors-off .en-chunk.heat-3 { color: inherit; text-shadow: none; }

/* Keyboard hints — desktop only; meaningless on touch screens */
.float-keys {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
  font-size: 0.6rem;
  color: var(--text3);
  line-height: 2;
}
@media (pointer: coarse) {
  .float-keys { display: none; }
}
/* Title-page text size row */
.title-sz-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.title-sz-row .sz-opt {
  flex: 0 0 auto;
  padding: 6px 18px;
}

/* ─────────────────────────────────────────────────────────
   SECTION DIVIDERS between passage groups
───────────────────────────────────────────────────────── */
.section-divider {
  text-align: center;
  padding: 2px 0;
  max-width: 720px;
  margin: 0 auto;
}
.section-divider-line {
  width: 60px;
  height: 1px;
  background: var(--border);
  margin: 0 auto;
}

/* Chapter divider — a full break between chapters, grander than the passage rule. */
.chapter-divider {
  text-align: center;
  margin: 56px auto 40px;
  max-width: 720px;
}
.chapter-divider-orn { display: block; color: var(--gold); font-size: 1.1rem; letter-spacing: 0.1em; }
.chapter-divider-title {
  font-family: 'Cinzel', 'Noto Serif', serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 1.35rem;
  color: var(--text);
  margin: 12px 0 0;
}
@media (max-width: 640px) { .chapter-divider { margin: 40px auto 28px; } .chapter-divider-title { font-size: 1.15rem; } }

/* ── Loading splash — shown during parse + first render, lifted on first paint.
   Pure CSS (no @font-face / no network asset) so it renders before Google Fonts
   arrive and works offline on file://. Gated on html.loading so it paints during
   initial parse with zero JS. ── */
#load-splash {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 24px;
  background: var(--page-bg);
  transition: opacity 0.4s ease;
}
html.loading #load-splash { display: flex; animation: splashFail 12s forwards; }
html.loaded  #load-splash { opacity: 0; pointer-events: none; }
.splash-ring {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(154,122,32,0.18);
  border-top-color: var(--gold);
  animation: splashSpin 0.9s linear infinite;
}
.splash-title { font-family: 'Cinzel', serif; letter-spacing: 0.14em; color: var(--accent); font-size: 1.15rem; }
.splash-sub   { font-family: 'Noto Serif', Georgia, serif; color: var(--text2); font-size: 0.78rem; letter-spacing: 0.05em; }
@keyframes splashSpin { to { transform: rotate(360deg); } }
/* failsafe: a mid-build JS exception can never strand the splash — fade it after 12s */
@keyframes splashFail { 0%,92% { opacity: 1; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } }
/* dark preset (applied in <head> before init, so no light flash for dark readers) */
html.pre-dark #load-splash { background: #1e1810; }
html.pre-dark .splash-title { color: #d07040; }
html.pre-dark .splash-sub   { color: #b8a880; }

/* ═══ GRAMMAR NOTES (§ twist-tie) — the sentence machinery, Stages I & IV only ═══ */
.interlinear { position: relative; }

/* The grammar mark at a sentence's end — a small gold badge, quietly visible
   (Eric: the faint § was too easy to miss; make it read as a real control). */
.gram-sect {
  font-family: 'IM Fell English', serif;
  font-size: calc(0.95rem * var(--gs));
  color: var(--gold); opacity: 0.8;
  background: var(--gold-light);
  border: 1px solid var(--border); border-radius: 50%;
  width: calc(1.7rem * var(--gs)); height: calc(1.7rem * var(--gs));
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0; margin: 6px 2px 0 5px;
  align-self: flex-start; line-height: 1;
  transition: all 0.15s;
  /* fire on the first tap: no 300ms double-tap-zoom wait, no grey flash */
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* Hover only on real pointers. On iOS a :hover rule makes the FIRST tap merely apply
   hover (and here, scale the § up 12%) — the user must tap twice and sees a jump.
   Gating on (hover:hover) means touch fires the tap immediately, with no resize. */
@media (hover: hover) and (pointer: fine) {
  .gram-sect:hover { opacity: 1; border-color: var(--gold); transform: scale(1.12); }
}
.gram-sect.open  { opacity: 1; color: var(--page-bg); background: var(--gold); border-color: var(--gold); }

/* Grammar lives on Stage I (where the clunkiness lives) and Stage IV (study) */
body.stage-2 .gram-sect,  body.stage-3 .gram-sect,
body.stage-2 .gram-notes, body.stage-3 .gram-notes,
body.stage-2 .gram-ghost, body.stage-3 .gram-ghost { display: none !important; }

/* Notes strip — opens IN the interlinear flow, directly beneath the sentence
   whose § you tapped (flex-basis:100% breaks the wrap right there, accordion-style;
   closed = display:none so it adds zero height mid-passage). */
.gram-notes { display: none; flex-basis: 100%; width: 100%; }
.gram-notes.open { display: block; position: relative; animation: gramFadeUp 0.25s ease; }
.gram-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 34px 4px 2px; }
/* close (×) — dismiss the grammar strip back to the plain, un-highlighted text */
.gram-close {
  position: absolute; top: 7px; right: 3px;
  width: 23px; height: 23px; line-height: 21px; text-align: center; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--bg); color: var(--text3);
  font-size: 15px; cursor: pointer; transition: all 0.15s; z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .gram-close:hover { border-color: var(--gold); color: var(--gold); }
}
.gram-chip {
  font-family: 'Noto Serif', serif; font-size: 0.76rem;
  color: var(--text2); background: none;
  border: 1px solid var(--border); border-radius: 16px;
  padding: 5px 12px; cursor: pointer; transition: all 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .gram-chip:hover { border-color: var(--gold); color: var(--gold); }
}
.gram-chip.on { background: var(--gold-light); border-color: var(--gold); color: var(--gold); }

.gram-card {
  margin: 8px 2px 6px; padding: 12px 15px;
  background: var(--bg);
  border-left: 2px solid var(--gold);
  border-radius: 0 8px 8px 0;
  font-size: 0.88rem; line-height: 1.65; color: var(--text2);
  display: none;
}
.gram-card.show { display: block; animation: gramFadeUp 0.3s ease; }
.gram-card .gc-gear {
  font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 3px;
}
.gram-card .gc-title {
  font-family: 'Cinzel', serif; font-size: 0.74rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.gram-card .gk { font-family: 'Noto Serif', serif; color: var(--text); }
@keyframes gramFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* illumination — the words that drive the active mechanism */
.interlinear .gram-lit { background: var(--gold-light); border-radius: 6px; box-shadow: 0 0 0 1px var(--gold-light); }
.interlinear .gram-dim { opacity: 0.35; }
.interlinear .word-unit { transition: opacity 0.25s, background 0.25s; }

/* ── art plates (per-passage art[] — additive; renders only when a unit carries art) ──
   Contract (books/odyssey/art/ART-DIRECTION.md): the art WRAPS the text, never restyles it.
   opener = line-art on a mat mount, a calm divider before its unit; full-bleed = a color
   plate as an event, gradient caption + anchor badge. Every plate is a button → lightbox. */
.art-figure { margin: 46px auto 30px; max-width: 720px; text-align: center; }
.art-plate-btn { display: block; width: 100%; border: none; background: none; padding: 0; cursor: zoom-in; }
.art-opener .art-plate-btn {
  background: var(--page-bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 26px 26px 18px; box-shadow: 0 1px 8px rgba(60,40,10,0.06);
}
/* Art tracks the size stepper via plain rem, NOT rem*--rs. --rs is the SUPPORT-text
   compensation and RISES to 1.3 as the type shrinks, so multiplying by it cancelled most of
   the effect: the plates came down only 9% while the text came down 30%. clamp() keeps the
   ends sane. (Fix from the Odyssey session, corrected here 2026-07-27.) */
.art-opener img { max-width: 100%; max-height: clamp(180px, 21.25rem, 460px); object-fit: contain; filter: sepia(0.12); }
/* plate = a full painting shown UNCROPPED at full height (contain), on the parchment mat */
.art-plate { max-width: 780px; margin: 48px auto 32px; }
.art-plate .art-plate-btn {
  background: var(--page-bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 18px; box-shadow: 0 1px 8px rgba(60,40,10,0.06);
}
.art-plate img { max-width: 100%; max-height: clamp(320px, 48.75rem, 1000px); height: auto; object-fit: contain; display: block; margin: 0 auto; filter: sepia(0.06); border-radius: 2px; }
.art-fullbleed { max-width: none; margin: 54px 0 38px; position: relative; }
.art-fullbleed .art-plate-btn { position: relative; overflow: hidden; border-radius: 4px; }
.art-fullbleed img { width: 100%; max-height: clamp(240px, 32.5rem, 700px); object-fit: cover; display: block; }
.art-fullbleed .art-caption-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 18px 10px; text-align: left;
  background: linear-gradient(transparent, rgba(20,12,4,0.72));
  color: #f2e8d8; font-size: 0.82rem; font-style: italic;
}
.art-anchor-badge {
  position: absolute; top: 10px; right: 10px; background: var(--accent, #8a1800);
  color: #f6efe2; font-family: 'Noto Serif', serif; font-style: normal; font-size: 0.68rem;
  padding: 2px 8px; border-radius: 10px; letter-spacing: 0.04em; opacity: 0.92;
}
.art-caption {
  margin-top: 12px; font-size: 0.78rem; font-style: italic; color: var(--text3); line-height: 1.5;
}
.art-caption .art-credit { display: block; font-size: 0.7rem; opacity: 0.85; }
/* lightbox — full-size view. Any click or tap closes it, the picture included, and so do the
   "✕ close" button and Esc; a hint line says so; focus returns to the plate. It sits above all
   reader chrome: at z-index 300 the toolbar hid the ✕ on a phone and crowded it on desktop, and a
   tap on the picture did nothing (Eric, 2026-10-05). glp-share.js gives older builds the same. */
.art-lightbox {
  position: fixed; inset: 0; z-index: 5000; display: none; cursor: zoom-out;
  background: #0e0a04; align-items: center; justify-content: flex-start; flex-direction: column;
  padding: calc(68px + env(safe-area-inset-top, 0px)) 18px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
}
.art-lightbox.open { display: flex; animation: gramFadeUp 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .art-lightbox.open { animation: none; } }
.art-lightbox img { max-width: 94vw; max-height: 74vh; max-height: 74dvh; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,0.5); margin-top: auto; }
.art-lightbox .lb-caption { color: #e8dcc4; font-style: italic; font-size: 0.86rem; margin: 14px 0 auto; text-align: center; max-width: 700px; }
.art-lightbox .lb-caption .art-credit { color: #b7a684; }
.art-lightbox .lb-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 15px;
  border-radius: 22px; border: 1.5px solid rgba(242,232,216,0.8); background: rgba(48,36,20,0.92);
  color: #f2e8d8; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
.art-lightbox .lb-close .lb-x { font-size: 1.1rem; }
.art-lightbox .lb-close:hover, .art-lightbox .lb-close:focus-visible { background: rgba(84,62,34,0.96); border-color: #f2e8d8; outline: none; }
/* the hint sits just left of the close button, so it shows on every screen: "tap anywhere to close  ✕ close" */
.art-lightbox .lb-hint {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 18px; right: 150px; min-height: 44px;
  display: flex; align-items: center; justify-content: flex-end; text-align: right;
  color: #c9b994; font-size: 0.82rem; line-height: 1.3;
}
body.dark .art-opener .art-plate-btn { box-shadow: 0 1px 8px rgba(0,0,0,0.35); }

/* chunk seam — a soft breath between english-order chunks in the interlinear */
.chunk-seam { flex-basis: 14px; display: inline-block; width: 14px; }

/* ghost word — an elided word materializing into the sentence */
.gram-ghost {
  display: inline-block; text-align: center;
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  vertical-align: top;
  transition: max-width 0.5s ease, opacity 0.5s ease, padding 0.5s;
  padding: 4px 0;
}
.gram-ghost.show { max-width: 9em; opacity: 1; padding: 4px 4px; }
.gram-ghost .gg-greek {
  display: block; font-family: 'Noto Serif', serif;
  font-size: calc(1.6rem * var(--gs)); line-height: 1.25;
  color: var(--accent); font-style: italic;
}
.gram-ghost .gg-gloss {
  display: block; font-family: 'Noto Serif', serif;
  font-size: 0.68rem; color: var(--accent); opacity: 0.8; font-style: italic;
}

/* ═══ PUNCTUATION — welded to its word (never wraps alone) + translated mark ═══
   Greek ; is a QUESTION MARK and the ano teleia (·) ≈ our semicolon — show the
   English equivalent dimmed beneath, like a gloss, only where they differ. */
.w-group { display: inline-flex; align-items: flex-start; }
.punct-unit {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 4px 3px 0 0; line-height: 1;
}
.punct-greek {
  font-size: calc(1.6rem * var(--gs)); line-height: 1.25; color: var(--text3);
}
.punct-sub {
  font-size: calc(0.7rem * var(--rs)); font-style: italic;
  color: var(--text3); opacity: 0.75; margin-top: 4px;
}
body.stage-2 .punct-sub { display: none; }   /* pure-Greek immersion stays pure */
/* Stage-2 renders words as flowing inline text — the weld must flow with it */
body.stage-2 .w-group { display: inline; }
body.stage-2 .punct-unit { display: inline; padding: 0 2px 0 0; }
body.stage-2 .punct-greek { display: inline; font-size: calc(1.5rem * var(--gs)); line-height: inherit; }

/* ── Wide-screen breathing room ──────────────────────────
   The tight paddings above were crammed in for the iPhone; on a laptop
   pulled wide the book gets its margins and buffer gaps back. Prose rows
   (fluent English, translation, commentary) keep a readable measure and
   center within the wider page, while the interlinear itself spreads. */
@media (min-width: 900px) {
  main { max-width: 880px; padding: 16px 24px 100px; }
  /* Bottom padding trimmed 32→18 and the gap between cards 28→18 (Eric 2026-07-26: "a lot of
     trapped white space at the bottom of these sections"). The generous top and side margins
     are what make the page feel like a printed leaf; the dead band UNDER the last line just
     pushed the next passage off screen. */
  /* Desktop card, in rem so it tracks the size stepper. At Small the side padding drops from
     48px to ~34px, which is ~28px more line for the words as well as a shorter card. */
  .page-block { padding: clamp(18px, 2.25rem, 46px) clamp(20px, 3rem, 62px) clamp(10px, 1.125rem, 24px);
                margin-bottom: clamp(10px, 1.125rem, 24px); border-radius: 6px; }
  /* the flat scroll stages keep their flat layout (these rules sit late in the
     sheet, so re-assert the stage-2/3 look or the card padding would win) */
  body.stage-2 .page-block, body.stage-3 .page-block { padding: 0 12px; margin-bottom: 0; }
  body.stage-3 .english-flow { margin-left: auto; margin-right: auto; }
  .section-divider, .reader-footer { max-width: 880px; }
  .title-page { max-width: 720px; padding: 80px 28px 60px; }
  .interlinear { row-gap: 14px; }
  /* Prose rows keep a readable measure but share the block's ONE left rail —
     centering them created a second "tab start", which read as misalignment. */
  .page-block .english-flow,
  .page-block .translation-text,
  .page-block .commentary { max-width: 680px; margin-left: 0; margin-right: auto; }
}
@media (min-width: 1400px) {
  main { max-width: 1000px; }
  .page-block { padding: clamp(20px, 2.625rem, 54px) clamp(24px, 4.25rem, 88px) clamp(11px, 1.25rem, 26px); }
  .section-divider, .reader-footer { max-width: 1000px; }
  body.stage-2 .page-block, body.stage-3 .page-block { padding: 0 12px; }
  /* ── Marginalia: on a big screen, Stage IV's interpretation moves into the
     right margin beside the text, like a scholar's annotated edition ── */
  body.stage-4 .page-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 40px;
  }
  body.stage-4 .page-block > * { grid-column: 1; }
  body.stage-4 .page-block .commentary {
    grid-column: 2;
    grid-row: 1 / span 40;
    align-self: start;
    margin-top: 0;
    border-left: 1px solid var(--border-light);
    padding-left: 22px;
    font-size: 0.85rem;
    line-height: 1.7;
  }
}

/* ═══ STANZA LAYERS — switch off rows of the word-column for a cleaner read ═══ */
/* Motif markers — a faint glyph in the reading line beside a word that belongs to a named
   thread (medicine/pharmakon = 🌿, the first). In-flow discovery: the door announces itself
   without a tap. Data-driven by lexicon entry `tags`; books without tags render nothing.
   Toggle: body.layer-nomotif hides them. */
.w-herb { font-size: 0.58em; margin-left: 0.12em; vertical-align: super; opacity: 0.72;
          cursor: help; -webkit-user-select: none; user-select: none; line-height: 0; }
body.layer-nomotif .w-herb { display: none; }
/* Joke marks (the comedy layer; Clouds first) — a passage may carry jokes[] {kind, words[],
   title, note, src?}. A small numbered 🎭 rides the first word of each joke in the reading line,
   and "the joke" notes sit under the passage in plain English. Tap a 🎭 (or a note) and the
   joke's words light up. Data-driven: books without jokes[] render nothing.
   Toggle: body.layer-nojoke hides marks and notes. */
.w-joke { cursor: pointer; font-size: 0.6em; margin-left: 0.14em; vertical-align: super; line-height: 0;
          -webkit-user-select: none; user-select: none; white-space: nowrap; }
.w-joke b { font-family: var(--font-ui, sans-serif); font-weight: 600; font-size: 0.85em; color: var(--accent, #8a3a1a); margin-left: 0.05em; }
.word-unit.joke-lit .w-greek, .word-unit.joke-lit .w-gloss-main { background: rgba(214, 160, 40, 0.22); border-radius: 3px; }
.joke-notes { margin: 10px 0 6px; padding: 10px 14px; border-left: 3px solid rgba(214, 160, 40, 0.75);
              background: rgba(214, 160, 40, 0.07); border-radius: 0 6px 6px 0; }
.joke-notes:empty { display: none; }
.joke-notes .jn-head { font-size: calc(0.8rem * var(--rs, 1)); color: var(--text2); margin-bottom: 4px; letter-spacing: 0.02em; }
.joke-note { padding: 6px 0; cursor: pointer; line-height: 1.6; font-size: calc(0.95rem * var(--rs, 1)); color: var(--text); }
.joke-note + .joke-note { border-top: 1px dotted var(--border-light); }
.joke-note .jn-n { font-weight: 600; color: var(--accent, #8a3a1a); margin-right: 0.35em; }
.joke-note .jn-kind { font-size: 0.78em; color: var(--text2); margin-left: 0.4em; white-space: nowrap; }
.joke-note .jn-title { font-weight: 600; }
.joke-note .jn-src { display: block; font-size: 0.78em; color: var(--text2); margin-top: 2px; }
.joke-note.on { background: rgba(214, 160, 40, 0.14); border-radius: 4px; }
.joke-note.jn-flag .jn-n { color: var(--text2); }
body.stage-1 .joke-notes { order: 6; }
body.layer-nojoke .w-joke, body.layer-nojoke .joke-notes { display: none !important; }
body.layer-noalt .w-gloss-alt { display: none; }
body.layer-notr  .w-translit  { display: none; }
html.no-translit .w-translit  { display: none; }
body.layer-noeng .translation-text, body.layer-noeng .translation-rule { display: none !important; }
body.layer-nointerp .commentary { display: none !important; }
body.layer-nogram .gram-sect, body.layer-nogram .gram-notes, body.layer-nogram .gram-ghost { display: none !important; }

/* the bridge between a split pair */
.gram-arc { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; }
.gram-arc path {
  fill: none; stroke: var(--gold); stroke-width: 1.6; opacity: 0.9;
  animation: gramDraw 0.7s ease forwards;
}
@keyframes gramDraw { to { stroke-dashoffset: 0; } }

/* Reading-order ("construe") numbers — opt-in study aid (the #layer-num toggle).
   A source word's rank in the English reading order, so a learner can walk Homer's
   scrambled line 1→2→3 without physically reordering it. Default off (body carries
   .layer-nonum until toggled on). */
.worder-num { font-size: 0.46em; font-weight: 600; color: var(--gold); opacity: 0.6;
  vertical-align: super; line-height: 0; margin-left: 1px; }
.layer-nonum .worder-num { display: none; }
/* numbersFollowOrder books: numbers mean something only in the poet's order; in flow they would just count up */
body.num-follow .interlinear.flowed .worder-num { display: none; }
/* The english-flow note: what the reader is looking at, and the way back to the poet's order */
.flow-note { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 900;
  width: min(34em, calc(100vw - 28px)); background: var(--bg2, #fffaf0); color: var(--text);
  border: 1px solid var(--border, rgba(120,90,40,.25)); border-radius: 14px; padding: 18px 20px 14px;
  box-shadow: 0 14px 40px rgba(60,40,10,.18); font-size: calc(1.02rem * var(--rs, 1)); line-height: 1.5; }
.flow-note h3 { margin: 0 0 6px; font-size: 1.12em; font-weight: 600; }
.flow-note p { margin: 0 0 8px; }
.flow-note .fn-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 10px; }
.flow-note button { font: inherit; font-size: .95em; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border, rgba(120,90,40,.3)); background: transparent; color: var(--text); }
.flow-note button.fn-keep { background: var(--gold, #9a6a1e); border-color: transparent; color: #fff; }

/* Melody — the pitch-accent tune, marked OVER each syllable of the Greek (the ♪ toggle,
   Greek books only, default off). Each syllable of the word gets its own little bar, set
   HIGH when the voice rises there (acute / circumflex) and LOW when it stays down (grave or
   unaccented) — read the heights left to right and you follow the sung line, no music-reading
   needed. The bars sit directly above their own syllables, so they span and match the word.
   Default off ⇒ the syllable spans render as the plain word and the read is untouched. */
.w-greek .gsyl { position: relative; }
.gpitch { display: none; }
body:not(.layer-nomelody) .w-greek { padding-top: 0.95em; }        /* room for the bars above */
body:not(.layer-nomelody) .gsyl .gpitch {
  display: block; position: absolute; left: 10%; right: 10%; height: 3px;
  border-radius: 2px; background: var(--gold); pointer-events: none; }
.gsyl[data-p="acute"] .gpitch { top: -0.72em; opacity: 0.85; }     /* voice up */
.gsyl[data-p="circ"]  .gpitch { top: -0.72em; opacity: 0.85; }     /* up (then falls) */
.gsyl[data-p="grave"] .gpitch { top: -0.30em; opacity: 0.5; }      /* held low */
.gsyl[data-p="none"]  .gpitch { top: -0.40em; opacity: 0.3; }      /* baseline, faint */

/* ── Reader toolbar: the always-visible frame of controls across the TOP of the
   desktop interlinear reader. Surfaces the toggles that used to hide in the Ⅰ gear
   panel (word order, reading-order numbers, colour/heat, text size, night).
   Size is LOCKED in px so the A−/A+ text stepper resizes the reading text, never the
   bar itself. NOT shown in Flow ("Read") mode (own controls). HIDDEN on phones — the
   smartphone control surface is a separate design; phones keep the Ⅰ gear panel until
   it ships (so the bar can never collide with the bottom ❧ Read button either). ── */
.reader-toolbar {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  /* Sits in the persistent-chrome band (Library/share/contents buttons are 800) so the
     Ⅰ palette popover (799) can never bury it. The modal drawers — lexicon (850) and
     contents (950) — and their scrims still come out on top, which is deliberate: they
     are full-height side drawers that geometrically overlap this pill, so the bar dims
     with the page while one is open and returns the moment it closes. */
  z-index: 801; display: flex; gap: 3px; align-items: center;
  padding: 4px 7px; border-radius: 999px;
  background: var(--panel-bg); border: 1px solid var(--border);
  box-shadow: 0 3px 16px var(--page-shadow, rgba(0,0,0,0.22));
  max-width: calc(100vw - 360px); overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-size: 13px;                 /* px base — immune to the A−/A+ root-font scaling */
}
.reader-toolbar::-webkit-scrollbar { display: none; }
body.flow-mode .reader-toolbar { display: none; }
.rtb-btn {
  font-family: inherit; font-size: 13px; line-height: 1; white-space: nowrap;
  padding: 6px 9px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text2); border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  display: inline-flex; align-items: center; gap: 5px;
}
.rtb-btn:hover { background: var(--gold-light); color: var(--text); }
.rtb-btn.on { color: var(--accent); border-color: var(--gold); }
.rtb-sz { font-weight: 600; padding: 6px 8px; }
.rtb-sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; flex: none; }
/* keyboard-shortcut hint badge beside each option — desktop only (a phone has no keyboard) */
/* Palette keyboard hints (Eric 2026-07-26: "every button on this palette should have a
   keypress shortcut when viewed on the wide screen"). Painted in by paintPaletteKeys()
   from each control's data-key, so a re-label (language switch, on/off toggle) can never
   strip them. Hidden on narrow screens, which have no keyboard. */
.fk { font-size: 9px; line-height: 1; padding: 1px 4px; margin-left: 6px; border: 1px solid var(--border);
  border-radius: 4px; color: var(--text3); opacity: 0.7; font-weight: 700; font-family: inherit;
  vertical-align: middle; }
@media (max-width: 739px) { .fk { display: none; } }
.rtb-key { font-size: 10px; line-height: 1; padding: 1px 4px; border: 1px solid var(--border);
  border-radius: 4px; color: var(--text3); opacity: 0.75; font-weight: 600; }
.rtb-btn.on .rtb-key { border-color: var(--gold); }
/* Phones + narrow tablets: hide the bar pending the dedicated smartphone control design;
   the Ⅰ gear panel remains the control path there, nothing overlaps the bottom Read button,
   and the bar never collides with the corner Library/share/menu/gear chips. It shows only
   once the window is wide enough to seat it cleanly between the corners. */
/* Cutoff 820→739px (Eric 2026-07-26) so every iPad gets the bar in BOTH orientations —
   mini 744, 10.2" 810, Air/Pro-11 820 are all portrait-visible now. A phone held sideways
   (844+) also clears it, which is acceptable; upright phones (≤430) stay on the gear
   palette until the dedicated smartphone surface ships. */
/* Between the phone cutoff and a roomy desktop the bar is wider than the space between the
   corner chips, so it was quietly scrolling "☾ Night" out of sight — a control you can't see
   is a control you don't have. Drop to icons + key badges there; every button stays visible,
   and each keeps its tooltip. */
@media (max-width: 900px) {
  .rtb-btn > span[data-rt] { display: none; }
  .rtb-btn { padding: 6px 7px; gap: 3px; }
  .reader-toolbar { max-width: calc(100vw - 280px); }
}
@media (max-width: 739px) {
  .reader-toolbar { display: none; }
}

/* Gloss/target language axis. The control only exists for books that ship a second target
   track (BOOK.glossLangs). Under a Portuguese primary gloss we hide the dim alternate-sense
   line, because the lexicon's senses are still English — mixing the two reads as a bug. */
/* Gloss-language switcher — PARKED 2026-07-26 (Eric): no book yet offers a second
   readable gloss track worth choosing between, so the control is hidden rather than
   offering a switch that changes nothing. The mechanism below is intact: restore by
   re-enabling the two `body.has-glosslangs` rules. */
.gloss-lang-ui { display: none; }
body.has-glosslangs .gloss-lang-ui { display: none; }
body.has-glosslangs .sz-options.gloss-lang-ui { display: none; }
body.gloss-pt .w-gloss-alt { display: none; }

/* Adjective word-order flip (⇄) — a small signifier on a source noun whose next
   word is its post-posed adjective/participle, which English reads first
   ("barões⇄ assinalados" = "distinguished men"). Cues the eye to swap the pair.
   Source order only; opt-out via the "⇄ Adjective order" layer toggle. */
.wswap { font-size: 0.6em; font-weight: 700; color: var(--gold); opacity: 0.72;
  vertical-align: super; line-height: 0; margin-left: 1px; cursor: help; }
.layer-noswap .wswap { display: none; }

.geo-portrait img { object-fit: contain; }
.glp-tocsearch{padding:12px 16px 11px;border-bottom:1px solid var(--border-light,#e4dcc8);background:var(--panel-bg,var(--page-bg,#faf6ee));}.glp-tocsearch input{width:100%;box-sizing:border-box;padding:11px 13px;font:inherit;font-size:1rem;color:var(--text,#221808);background:var(--page-bg,#faf6ee);border:1px solid var(--border,#d0c4aa);border-radius:9px;outline:none;-webkit-appearance:none;}.glp-tocsearch input:focus{border-color:var(--gold,#9a7a20);}.glp-tocsearch input::placeholder{color:var(--text3,#9a8a6a);}.glp-tocsearch-note{margin-top:7px;font-size:.8rem;color:var(--text3,#9a8a6a);min-height:1em;line-height:1.3;}.glp-toc-hidden{display:none !important;}.word-unit.glp-hit{background:rgba(212,160,48,.30);box-shadow:0 0 0 2px rgba(212,160,48,.6);border-radius:6px;transition:background .2s;}#glp-searchbtn{position:fixed;top:14px;right:max(154px,calc(50% - 460px));width:36px;height:36px;background:var(--page-bg);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:800;box-shadow:0 2px 8px rgba(0,0,0,.08);color:var(--text2);transition:all .15s;}#glp-searchbtn:hover{background:var(--gold-light);border-color:var(--gold);color:var(--gold);}#glp-searchbtn svg{display:block;}@media (max-width:739px){#glp-searchbtn{display:none !important;}}@media (min-width:1180px){body.dock #glp-searchbtn{transform:translateX(-336px);}}
.glp-cover-plate { display:block; max-width:560px; width:92%; margin:22px auto 10px; border-radius:8px; box-shadow:0 12px 34px rgba(0,0,0,0.32); }@media (max-width:640px){ .glp-cover-plate { width:94%; max-width:420px; } }
.title-page .title-about{max-width:33em;margin:4px auto 20px;font-size:0.97rem;line-height:1.62;color:var(--text2);white-space:pre-line;text-align:left;}.title-page .title-about:empty{display:none;margin:0;}
.glp-source{display:flex;gap:18px;align-items:center;max-width:32em;margin:6px auto 26px;padding:16px 2px;border-top:1px solid var(--border,#d0c4aa);border-bottom:1px solid var(--border,#d0c4aa);text-align:left;}.glp-source .gs-scan{flex:0 0 auto;display:block;width:88px;padding:0;border:0;background:none;cursor:zoom-in;}.glp-source .gs-scan img{display:block;width:100%;height:auto;border:1px solid rgba(0,0,0,.18);border-radius:2px;box-shadow:0 4px 14px rgba(0,0,0,.28);background:#f3ead6;}.glp-source .gs-cap{flex:1 1 auto;min-width:0;line-height:1.45;}.glp-source .gs-label{font-size:.78rem;letter-spacing:.08em;color:var(--gold,#9a7a20);margin-bottom:3px;}.glp-source .gs-title{font-family:"Noto Serif",Georgia,serif;font-style:italic;font-size:1.02rem;color:var(--text,#2a2010);}.glp-source .gs-by,.glp-source .gs-imprint{font-size:.88rem;color:var(--text2,#5a4a30);}.glp-source .gs-note{font-size:.86rem;color:var(--text2,#5a4a30);margin-top:7px;}.glp-source .gs-via{font-size:.78rem;color:var(--text3,#8a7a5a);margin-top:7px;}.glp-source .gs-via a{color:var(--gold,#9a7a20);text-decoration:none;white-space:nowrap;}.glp-source.no-scan{justify-content:center;text-align:center;}@media (max-width:480px){.glp-source{gap:14px}.glp-source .gs-scan{width:72px}}.gs-zoom{position:fixed;inset:0;z-index:99999;background:rgba(10,8,4,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;cursor:zoom-out;}.gs-zoom img{max-width:min(94vw,640px);max-height:84vh;width:auto;height:auto;box-shadow:0 10px 40px rgba(0,0,0,.6);background:#f3ead6;}.gs-zoom .gs-zbar{margin-top:12px;font-size:.95rem;color:#e8dcc0;display:flex;gap:22px;}.gs-zoom .gs-zbar a{color:#e0b84a;text-decoration:none;}
.glp-map{max-width:32em;margin:2px auto 22px;text-align:left;}.glp-map .gm-label{font-size:.78rem;letter-spacing:.08em;color:var(--gold,#9a7a20);margin:0 0 6px;}.glp-map .gm-shape{font-size:.93rem;line-height:1.55;color:var(--text2,#5a4a30);margin:0 0 10px;}.glp-map ol{list-style:none;margin:0;padding:0;}.glp-map li{margin:0;padding:9px 0;border-top:1px solid var(--border,#d0c4aa);}.glp-map li:last-child{border-bottom:1px solid var(--border,#d0c4aa);}.glp-map .gm-go{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:inherit;cursor:pointer;}.glp-map .gm-n{flex:0 0 auto;min-width:1.4em;font-family:"Noto Serif",Georgia,serif;color:var(--gold,#9a7a20);font-size:.95rem;}.glp-map .gm-t{flex:1 1 auto;}.glp-map .gm-l{display:block;font-family:"Noto Serif",Georgia,serif;font-size:1rem;color:var(--text,#2a2010);}.glp-map a.gm-go .gm-l{text-decoration:underline;text-decoration-color:rgba(154,122,32,.45);text-underline-offset:3px;}.glp-map a.gm-go:hover .gm-l{color:var(--gold,#9a7a20);}.glp-map .gm-w{display:block;font-size:.86rem;line-height:1.45;color:var(--text2,#5a4a30);margin-top:2px;}.glp-map .gm-r{flex:0 0 auto;font-size:.74rem;color:var(--text3,#8a7a5a);white-space:nowrap;}.glp-map .gm-later{font-size:.84rem;line-height:1.5;color:var(--text3,#8a7a5a);margin-top:10px;}.glp-map .gm-later b{font-weight:normal;color:var(--gold,#9a7a20);letter-spacing:.04em;}

/* The suggest affordances are OFF by default — pristine reading, no accidental
   taps on mobile. They appear only when "Suggestion mode" is turned on from the menu. */
/* Account control inside the reader's menu — same button the rest of the site shows. */
.float-acct { display: flex; justify-content: center; padding: 2px 0 4px; }
.float-acct .glp-acct-btn { max-width: 100%; }

/* The ⚑ is ALWAYS present. It used to be hidden behind a "Suggestion mode" toggle, which meant
   a reader who spotted a typo had no way to say so without first finding a setting — so nobody
   ever did (the feedback table sat at zero). Contribution is now available everywhere. */
.suggest-flag { margin-left: 4px; display: inline-flex; }
.psec-suggest { display: block; }   /* always offered — see .suggest-flag above */
.suggest-open-btn {
  width: 100%; text-align: center; font-family: 'Cinzel', serif; font-size: 0.72rem;
  letter-spacing: 0.05em; color: var(--gold); background: none; border: 1px solid var(--gold);
  border-radius: 6px; padding: 9px 12px; cursor: pointer; transition: all 0.15s;
}
.suggest-open-btn:hover { background: var(--gold-light); }
.suggest-overlay {
  position: fixed; inset: 0; background: rgba(20,12,4,0.44); opacity: 0; pointer-events: none;
  transition: opacity 0.2s; z-index: 1400;
}
.suggest-overlay.open { opacity: 1; pointer-events: auto; }
.suggest-modal {
  position: fixed; z-index: 1401; left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(0.98);
  width: min(460px, 92vw); max-height: 88vh; overflow-y: auto;
  background: var(--panel-bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 50px var(--page-shadow); padding: 26px 26px 22px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
  font-family: 'Noto Serif', Georgia, serif; color: var(--text);
}
.suggest-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.suggest-modal .panel-close { position: absolute; top: 12px; right: 14px; }
.suggest-title { font-family: 'Cinzel', serif; font-size: 1.05rem; letter-spacing: 0.03em; margin-bottom: 4px; }
.suggest-sub { font-size: 0.76rem; color: var(--text3); font-style: italic; margin-bottom: 16px; }
.suggest-field-label { display: block; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text2); margin: 12px 0 5px; }
.suggest-opt { color: var(--text3); font-style: italic; letter-spacing: 0; }
.suggest-current { background: var(--gold-light); border: 1px solid var(--border-light); border-radius: 6px;
  padding: 8px 11px; font-size: 0.9rem; color: var(--text2); }
.suggest-select, .suggest-textarea {
  width: 100%; font-family: inherit; font-size: 0.92rem; color: var(--text); background: var(--page-bg);
  border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px;
}
.suggest-textarea { resize: vertical; line-height: 1.5; }
.suggest-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.suggest-cancel, .suggest-send {
  font-family: 'Cinzel', serif; font-size: 0.74rem; letter-spacing: 0.05em;
  border-radius: 22px; padding: 9px 20px; cursor: pointer; transition: all 0.15s;
}
.suggest-cancel { background: none; border: 1px solid var(--border); color: var(--text3); }
.suggest-cancel:hover { color: var(--text2); }
.suggest-send { background: var(--gold); border: 1px solid var(--gold); color: #fff; }
.suggest-send:hover { filter: brightness(1.06); }
.suggest-send:disabled { opacity: 0.6; cursor: default; }
.suggest-err { color: var(--accent); font-size: 0.78rem; margin-top: 10px; min-height: 1em; }
.suggest-credit { font-size: 0.8rem; line-height: 1.5; color: var(--text3); margin-top: 12px; }
.suggest-credit-link {
  background: none; border: none; padding: 0; font: inherit; color: var(--gold);
  text-decoration: underline; cursor: pointer;
}
.suggest-credit-link:hover { filter: brightness(1.15); }
.suggest-gate-msg { font-size: 0.92rem; line-height: 1.55; color: var(--text2); margin: 6px 0 4px; }
body.dark .suggest-send { color: #1a140a; }

/* ══════════════ FLOW MODE (prototype) — the simplest interlinear, page-turned ══════════════
   Opt-in overlay: stripped chrome, source word + ONE gloss (gloss sized up for legibility),
   paginated like an ebook. Clones the rendered word-runs so gloss quality matches exactly. */
#flow-enter { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 800;
  background: var(--gold); color: #fff; border: none; border-radius: 26px; padding: 12px 26px;
  font-family: 'Vollkorn', Georgia, serif; font-size: 1rem; letter-spacing: 0.01em; cursor: pointer;
  box-shadow: 0 6px 20px rgba(100,80,50,0.32); }
#flow-enter:hover { filter: brightness(1.06); transform: translateX(-50%) translateY(-1px); }
body.flow-mode { overflow: hidden; }
body.flow-mode #flow-enter { display: none; }
/* ❧ Read WITHDRAWN across the shelf (Eric 2026-07-27: "get rid of the reader button across the
   site for now"). It floated over the foot of every passage card — colliding with the ❦
   commentary pill — and the Read experience itself is being rethought (voice + word-by-word
   highlight). Nothing else is removed: Flow/Page mode and all its code are intact and still
   reachable at ?flow=1, so bringing the button back is deleting this one rule. */
#flow-enter { display: none !important; }
#flow-vp { position: fixed; inset: 0; z-index: 1000; background: #f4ecda;   /* a warm paper sheet */
  display: none; flex-direction: column; }
body.dark #flow-vp { background: var(--page-bg); }
body.flow-mode #flow-vp { display: flex; }
/* Word-definition panel must sit ABOVE the Read overlay when opened from Read mode */
body.flow-mode #overlay { z-index: 1009; }
body.flow-mode .panel { z-index: 1010; }
/* Textured-paper feel: a fine fractal-noise grain + a soft edge vignette, behind the words.
   Pure CSS (data-URI SVG) — no image files, so it also travels into the EPUB. */
#flow-bar, #flow-clip, #flow-nav { position: relative; z-index: 1; }
#flow-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(130% 100% at 50% 42%, rgba(0,0,0,0) 62%, rgba(92,60,20,0.09) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100% 100%, 150px 150px;
  mix-blend-mode: multiply; }
body.dark #flow-grain { mix-blend-mode: soft-light; opacity: 0.55;
  background-image:
    radial-gradient(130% 100% at 50% 42%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.28) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); }
#flow-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--border); }
#flow-bar .fb-title { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;                     /* never scrunch — ellipsize on narrow screens */
  font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text3); }
#flow-exit { flex: 0 0 auto; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px;
  color: var(--text2); font-family: 'Noto Serif', serif; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
#flow-exit:hover { border-color: var(--gold); color: var(--gold); }
#flow-clip { flex: 1 1 auto; position: relative; overflow: hidden; }
body.flow-layout-page #flow-clip { touch-action: none; }        /* paginated: swipe turns pages, no rubber-band */
#flow-content { position: absolute; top: 0; left: 0; column-fill: auto; box-sizing: border-box;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1); }
/* Reading-progress bar + where-in-the-book readout */
#flow-progress { flex: 0 0 2px; position: relative; z-index: 1; background: var(--border); }
#flow-progress-fill { height: 100%; width: 0; background: var(--gold); transition: width 0.2s ease; }
#flow-nav { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 3px 8px; }                              /* slim bottom strip — reclaim a line of reading */
.flow-arrow { background: none; border: none; font-size: 1.15rem; color: var(--text3); cursor: pointer;
  padding: 1px 16px; border-radius: 8px; line-height: 1; }
.flow-arrow:hover { color: var(--gold); background: var(--gold-light); }
#flow-page { font-family: 'Noto Serif', serif; font-size: 0.72rem; color: var(--text3);
  min-width: 56px; text-align: center; }
@media (max-width: 600px) {   /* phone: no arrows needed (swipe / tap the sides), so the strip is tiny */
  .flow-arrow { display: none; }
  #flow-nav { padding: 2px 6px; }
}
.flow-zone { position: absolute; top: 0; bottom: 0; width: 28%; z-index: 2; cursor: pointer; }
.flow-zone-l { left: 0; } .flow-zone-r { right: 0; }
/* the flowing interlinear */
#flow-content .flow-para { break-inside: auto; margin: 0 0 0.7em; }
#flow-content .word-unit { cursor: default; padding: 2px 5px 9px; }   /* room BELOW the gloss so it groups with its word above */
#flow-content .word-unit:hover { background: none; }
/* Read-mode typography: Literata (a screen-reading book face, à la Google Play Books) for the
   source, and a lighter, calmer gloss — muted slate rather than the heavy saturated accent. */
#flow-content .w-greek { font-family: 'Vollkorn', Georgia, serif;
  font-size: calc(1.3rem * var(--gs)); font-weight: 500; color: var(--text) !important;
  text-shadow: none !important; line-height: 1.22; }
#flow-content .w-gloss { display: block; font-family: 'Vollkorn', Georgia, serif; font-weight: 500;
  font-size: calc(1.15rem * var(--rs)); margin-top: 1px; line-height: 1.15;   /* gloss brought UP toward the source so it needn't shout */
  color: var(--flow-gloss, #b0590f);
  max-width: 6.5em; overflow-wrap: break-word; }   /* long glosses wrap instead of ballooning the word's width */
#flow-content .w-gloss-main { color: inherit; font-weight: 500; }
body.dark #flow-content { --flow-gloss: #e0924a; }   /* pumpkin, lifted for the dark page */
#flow-content .w-gloss-alt { display: none; }                 /* one gloss only — the flow word */
#flow-content .w-translit { display: none; }
body.flow-mode.flow-translit #flow-content .w-translit { display: block;
  font-size: calc(0.82rem * var(--rs)); }                     /* pronunciation stays for non-Latin scripts */
#flow-content .heat-dot, #flow-content .worder-num, #flow-content .wswap, #flow-content .punct-sub,
#flow-content .gram-sect, #flow-content .gram-strip, #flow-content .gram-arc, #flow-content .gram-anchor
  { display: none !important; }
/* Read mode never shows the § grammar machinery — no highlights/dimming either */
#flow-content .gram-lit { background: none !important; box-shadow: none !important; }
#flow-content .gram-dim { opacity: 1 !important; }
#flow-content .speaker-label { font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text3); width: 100%; margin: 0.55em 0 0.1em; }
/* Flow⇆Page toggle (Kindle/iBooks-style layout choice) in the top bar */
#flow-layout-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
#flow-layout-toggle button { background: none; border: none; padding: 5px 13px; font-family: 'Noto Serif', serif;
  font-size: 0.82rem; color: var(--text3); cursor: pointer; }
#flow-layout-toggle button.on { background: var(--gold); color: #fff; }
/* A / a text-size stepper */
#flow-bar-right { display: inline-flex; align-items: center; gap: 14px; }
#flow-size { display: inline-flex; align-items: center; gap: 10px; }
/* A / a — real, finger-sized buttons */
.flow-size-btn { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
  color: var(--text2); font-family: 'Vollkorn', Georgia, serif; line-height: 1;
  min-width: 46px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; font-size: 1rem; }
.flow-size-btn.big { font-size: 1.5rem; }
.flow-size-btn:hover, .flow-size-btn:active { border-color: var(--gold); color: var(--gold); background: var(--gold-light); }
/* ── Toolbar: uniform icon buttons (back · chapters · share · gear) ── */
.flow-tools { display: inline-flex; align-items: center; gap: 8px; }
.flow-bar-spacer { flex: 1 1 auto; }
.flow-tool-btn { flex: 0 0 auto; width: 40px; height: 38px; display: inline-flex; align-items: center;
  justify-content: center; background: none; border: 1px solid var(--border); border-radius: 9px;
  color: var(--text2); cursor: pointer; padding: 0; }
.flow-tool-btn svg { width: 20px; height: 20px; display: block; }
.flow-tool-btn:hover, .flow-tool-btn:active { border-color: var(--gold); color: var(--gold); }
/* Thin chapter strip under the toolbar — current section · tap to open chapters */
#flow-chapterbar { flex: 0 0 auto; position: relative; z-index: 1; width: 100%; display: block;
  background: none; border: none; border-bottom: 1px solid var(--border); cursor: pointer;
  font-family: 'Vollkorn', Georgia, serif; font-size: 0.74rem; letter-spacing: 0.02em; color: var(--text3);
  padding: 4px 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#flow-chapterbar:hover { color: var(--gold); }
/* Chapters panel */
#flow-chapters { position: absolute; top: 54px; right: 12px; z-index: 1002; width: 280px; max-width: 88vw;
  max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--page-bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(40,30,15,0.26); padding: 6px; display: none; }
#flow-chapters.open { display: block; }
body.dark #flow-chapters { background: #241c10; }
.flow-chap-item { display: block; width: 100%; text-align: left; background: none; border: none;
  border-radius: 8px; padding: 10px 12px; cursor: pointer; color: var(--text2);
  font-family: 'Vollkorn', Georgia, serif; font-size: 0.92rem; line-height: 1.3; }
.flow-chap-item:hover { background: var(--gold-light); color: var(--gold); }
.flow-chap-item.on { color: var(--gold); font-weight: 600; }
/* Preferences panel */
#flow-prefs { position: absolute; top: 52px; right: 12px; z-index: 1002; width: 244px; max-width: 82vw;
  max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--page-bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(40,30,15,0.26); padding: 4px 15px 10px; display: none; }
#flow-prefs.open { display: block; }
body.dark #flow-prefs { background: #241c10; }
.flow-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--border); }
.flow-pref-row:last-child { border-bottom: none; }
.flow-pref-label { font-family: 'Vollkorn', Georgia, serif; font-size: 0.95rem; color: var(--text2); }
.flow-pref-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px;
  font-family: 'Vollkorn', Georgia, serif; font-size: 0.92rem; color: var(--text2); cursor: pointer; white-space: nowrap; }
.flow-pref-btn:hover { border-color: var(--gold); color: var(--gold); }
/* SCROLL ("Flow") layout — continuous vertical reading; page furniture hidden. */
body.flow-layout-scroll #flow-clip { overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; overscroll-behavior: contain; }   /* smooth one-axis scroll, no rubber-band into the page */
body.flow-layout-scroll #flow-content { position: static; height: auto !important;
  column-width: auto !important; column-gap: 0 !important; transform: none !important;
  max-width: 42em; margin: 0 auto; padding: 26px 22px 60px !important; }
@media (max-width: 600px) {   /* phones: bring the text closer to the edges */
  body.flow-layout-scroll #flow-content { padding-left: 15px !important; padding-right: 15px !important; }
}
body.flow-layout-scroll #flow-content .flow-para { margin: 0 0 1.1em; }
body.flow-layout-scroll .flow-zone, body.flow-layout-scroll .flow-arrow { display: none; }