/* PANIM — polish.css  (Direction B — "The Plate")
   ============================================================================
   WHAT USED TO BE HERE, AND WHY IT IS GONE

   This file previously held an "incredible, not basic" pass: an animated film-
   grain overlay, a gilt gradient painted through the title and every rule, a
   ten-stop dawn gradient on the progress bar, a glass-blurred player, a glow
   behind the play button that breathed with the narration's amplitude, and a
   ghost roman numeral outlined behind each chapter header.

   Every one of those is decoration standing in for design, and stacked together
   they are the reason the site read as generated rather than made. Gradient
   metallic type in particular is a well-known tell — it signals cheap, not
   expensive, because real gilding is an effect of light on a surface and a CSS
   gradient is a picture of one.

   What is left in this file is only what a printed book actually does: correct
   quotation marks and small caps, hanging punctuation on the pull quotes,
   sensible orphan control, a real focus ring, and print styles. Detail work,
   not effects.
   ============================================================================ */

/* ---------- selection ---------- */
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }

/* ---------- focus: one ring, everywhere, high contrast on any paper ---------- */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- progress ----------
   The 2px bar pinned across the top of the viewport is a stock reading-progress
   widget and it belongs to no particular book. It is gone. Progress is now carried
   by the book's own furniture: the chapter numerals in the running head. Numerals
   you have read through go to full ink; the one you are inside carries a hairline
   that fills as you read it. Same information, no extra chrome, and it is legible
   as a position in a BOOK rather than a percentage of a page.
   🛑 THE MARKUP WENT WITH IT, 2026-09-07. `#progress-bar` and `#progress-fill` were
   still in index.html, hidden by a rule here and read by nothing — two elements and
   two selectors doing no work. If a progress widget is ever wanted again it is a new
   decision, not a revival of this one. */

#nav-chapters a { position: relative; }
#nav-chapters a::after {
  content: ''; position: absolute; left: 15%; right: 15%; bottom: 7px; height: 1px;
  background: var(--rule-strong);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) linear;
}
/* chapters already read: full ink, no rule */
#nav-chapters a.is-read { color: var(--ink-soft); }
/* the chapter you are inside: accent, with the rule filling underneath it */
#nav-chapters a.is-active { color: var(--accent); }
#nav-chapters a.is-active::after {
  background: var(--accent);
  transform: scaleX(var(--ch-progress, 0));
}
@media (prefers-reduced-motion: reduce) { #nav-chapters a::after { transition: none; } }

/* ============================================================================
   TYPESETTING DETAIL
   ============================================================================ */

/* Literata ships proper oldstyle figures. Numbers inside running
   prose should be oldstyle so they sit on the x-height and stop shouting; numbers
   in the apparatus (times, chapter counts) should be lining and tabular so columns
   of them line up. */
.block-p, .verse-text, .chapter-hook { font-variant-numeric: oldstyle-nums proportional-nums; }
.meta-time, .hero-meta, .room-clock { font-variant-numeric: lining-nums tabular-nums; }

/* Hanging punctuation on the verse setting: an opening quote that sits inside the
   measure makes the left edge look dented. Browsers that support it hang it. */
.verse-text { hanging-punctuation: first last; }

/* Orphans and widows. `text-wrap: pretty` handles the last line of a paragraph;
   `balance` is only correct on short headline-length text, so it is scoped to
   headings and never applied to body copy, where it would cost layout time on
   every paragraph in a 70,000-word book. */
.block-p { text-wrap: pretty; }
.chapter-title, .hero-title, .sheet h2, .modal-card h2 { text-wrap: balance; }

/* Optical margin: an italic opening line leans away from the rule beside it. */
.verse-text { text-indent: -.02em; }

/* The drop cap. One per chapter, on the first paragraph after the header — set in
   the same face at the same weight, aligned to three lines. No colour trick, no
   gradient: it is simply a large letter, which is what a drop cap is. */
.block-p.has-dropcap::first-letter {
  font-size: 3.3em;
  line-height: .84;
  float: left;
  padding: .04em .09em 0 0;
  font-weight: 400;
  font-variation-settings: var(--lit-display);
  /* ink, not accent. A coloured initial reads decorative; classic book setting
     lets the size do the work and keeps the colour for the apparatus. */
  color: var(--ink);
}
/* the paragraph carrying the drop cap needs its first line to clear the initial */
.block-p.has-dropcap { min-height: 3.1em; }

/* ---------- links in prose ---------- */
.block-p a, .sheet p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.block-p a:hover, .sheet p a:hover { text-decoration-color: var(--accent); }

/* ---------- the running head fades where it would collide with the terminal ---------- */
#site-nav { backdrop-filter: none; }   /* explicit: no glass anywhere in this build */

/* ============================================================================
   PRINT — a book should print like one
   ============================================================================ */
@media print {
  #site-nav, .player, #room, .toast, .listen-from-here,
  #hold-btn, #lightbox, #gloss-card { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 0; display: block; max-width: none; }
  .section-inner { display: block; }
  .block-p, .verse-box, .img-slot, .plate { max-width: none; grid-column: auto; }
  /* 🛑 THE APPARATUS COLUMN DOES NOT PRINT, 2026-08-29. On screen at ≥1100px the
     verse note sits BESIDE its quotation in a subgrid (css/components.css). Print
     media queries resolve against the page box, and a wide page box matches
     min-width:1100 — which would set a two-column grid inside a one-column sheet.
     On paper the note goes back under its verse, which is where a footnote goes. */
  .verse-box { display: block !important; padding-left: 1rem; border-left: 2px solid #999; }
  .verse-box > .verse-text { padding-left: 0 !important; border-left: 0 !important; }
  .verse-box > .verse-note { grid-column: auto; margin-top: 1.15em !important; padding-top: .85em !important; }
  .verse-ref { position: static !important; width: auto !important; text-align: left !important; }
  .verse-ref .vr-book, .verse-ref .vr-loc { display: inline !important; }
  .verse-ref .vr-loc { margin-left: .5em; padding-top: 0 !important; border-top: 0 !important; }
  /* the thread rows are an index and print as one: the leader is a screen device,
     the numerals are the entry. <details> content must be forced open on paper. */
  .thread-item::details-content { display: block; content-visibility: visible; }
  .thread-leader { display: none; }
  .thread-head-body { display: block; }
  .chapter { break-before: page; }
  .plate, .img-slot { break-inside: avoid; }
  .plate-frame { height: auto; overflow: visible; }
  .plate-frame img { height: auto; max-height: 4in; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   PRINT — a book about a book should print like one
   ============================================================================
   Added 2026-08-28. There was no print stylesheet, so printing a chapter gave you
   the running head, the player bar, the contents, a page of dark plate and the
   whole rest of the book. What a reader wants off a printer is one chapter's text,
   its verse citations and its plate.

   EVERYTHING THAT IS MACHINERY IS DROPPED, not hidden behind a toggle: the nav,
   the player, the Listening Room, the invitation, the toast, the lightbox, every
   dialog. What is left is the reading surface.

   NO REVEAL STATE ON PAPER. .reveal, .fw-word and .lex-ink all start invisible and
   are turned on by an IntersectionObserver that a print run never fires — without
   the override below, printing produces blank pages of correctly laid-out nothing.
   That is the one rule in here that is not taste.
   ============================================================================ */
@media print {
  #site-nav, #player, #room, #onboarding-modal, .toast, .lightbox,
  [role="dialog"], .btn, .toc-expand, #hold-btn, .skip-link { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }

  /* the observers never run on paper */
  .reveal, .fivewords-text .fw-word, .chapter-mark, .hairline {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .lex-ink { -webkit-mask-image: none !important; mask-image: none !important; }
  .lex-g, .lex-g.is-root { color: #000 !important; }
  .fivewords-text .fw-word {
    background: none !important; -webkit-text-fill-color: #000 !important;
    color: #000 !important; animation: none !important;
  }

  /* a chapter starts on its own sheet and its plate does not straddle two */
  .chapter { break-before: page; }
  .plate, figure, blockquote, .lex-plate, .thread-item { break-inside: avoid; }

  /* every entry open, because a printed page has no disclosure */
  .thread-item > .thread-detail { display: block !important; }

  /* the reading measure, not the screen grid */
  .section-inner { max-width: 34em; margin: 0 auto; }

  /* THE VERSE NOTES PRINT. They are the apparatus of the book, and a printed
     chapter without them is the chapter with its footnotes cut off. Set a shade
     lighter than the text and kept off a page break, which is what a set book
     does with a note. */
  .verse-note {
    color: #333 !important;
    border-top: 1px solid #bbb !important;
    break-inside: avoid;
    max-width: none;
  }
  .vn-label { color: #000 !important; }
  /* the chapter-head actions and the search sheet are machinery */
  .chapter-actions, .sheet-search { display: none !important; }

  a { text-decoration: none; color: inherit; }
  /* a link to a chapter is meaningless on paper; a scripture reference is not,
     and it is already printed as text beside the verse */
  a[href^="#"]::after { content: ''; }
}

/* ============================================================================
   TAP A PARAGRAPH, HEAR IT — the affordance
   ============================================================================
   The behaviour is in js/sync.js; this is the only thing that tells a reader it
   is there. .can-tap-to-listen is set by that file, and only where a pointer
   exists — a keyboard-only session never gets a hover cue for a thing it cannot
   do.

   The mark is a hairline in the margin, on hover, in the chapter's accent. NOT a
   background tint and NOT a cursor change on the text itself: a paragraph that
   highlights under the pointer reads as selected, and this book already uses a
   glow on a paragraph to mean "this is the line being read aloud right now".
   Two different meanings on one signal is worse than no signal.
   ============================================================================ */
@media (hover: hover) {
  .can-tap-to-listen [data-cue-id] { position: relative; }
  .can-tap-to-listen [data-cue-id]::before {
    content: '';
    position: absolute; left: -.85em; top: .35em; bottom: .35em;
    width: 2px; background: var(--accent);
    opacity: 0; transition: opacity var(--dur-fast) var(--ease);
    pointer-events: none;
  }
  .can-tap-to-listen [data-cue-id]:hover::before { opacity: .55; }
  /* the live paragraph already says something with the accent; do not say it twice */
  .can-tap-to-listen [data-cue-id].is-live::before { opacity: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .can-tap-to-listen [data-cue-id]::before { transition: none; }
}