/* ===========================================================================
 * passage-item.css — canonical visual for PassageItem.
 * ===========================================================================
 * Single source of truth for .pi-eyebrow / .pi-stem / .pi-verdict-adorn and
 * the line-numbered passage measure. The ANSWER ROW is not here: it is the
 * shared `.mcq-*` block in mc-item.css, which PassageItem emits alongside its
 * `.pi-*` names (study S-04).
 *
 * Replaces the per-surface scoped duplicates that previously lived in
 * subjects/reading/styles.css (.reading-screen .pi-*). The diagnostic-ui.css
 * .diag-passage-region .pi-* block stays as a surface-specific override
 * (the diagnostic genuinely uses a different visual treatment per the
 * passage-item-spec).
 *
 * Uses global tokens directly (--ink-*, --accent-*, --surface, --radius)
 * rather than the .reading-screen scoped --rd-* aliases — the canonical
 * applies anywhere PassageItem is mounted, not just under .reading-screen.
 * Loaded BEFORE surface stylesheets in index.html so per-surface overrides
 * (where they exist) win on specificity.
 * ========================================================================= */

.pi-item {
  font-family: var(--font-ui, var(--font-display));
  color: var(--ink);
}

/* --- Eyebrow chip above each question stem (q.type) ------------------- */
.pi-eyebrow {
  display: inline-block;
  padding: 4px 10px;
  background: var(--accent-coral-tint);
  color: var(--accent-coral);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* --- Question stem ----------------------------------------------------- *
 * A question inside a testlet is the SAME question served alone, so its stem
 * carries no typography of its own: the text blocks inside it are `.mc-stem`
 * (McItem's block renderer — see PassageItem.jsx) and inherit body type from
 * the item, exactly as a standalone McItem does. Setting display type here is
 * what turned a three-block vocab-in-context stem into three bold headings.
 * This rule keeps only the box: colour, spacing and wrapping. */
.pi-stem {
  color: var(--ink);
  margin-bottom: 14px;
  text-wrap: pretty;
}
/* stemBlocks stream: space between blocks (text or figure) */
.pi-stem--blocks > * + * { margin-top: 10px; }

/* --- The answer rows ---------------------------------------------------- *
 * THE ROW RECIPE IS SHARED (study S-04). PassageItem now emits the `.mcq-*`
 * choice primitives alongside its own `.pi-*` names, so the list, the row, the
 * button, the letter chip, the strike and the eliminate × come from ONE block
 * in mc-item.css. The copy that used to live here pinned `font-size: 14px`
 * (twice — on the button AND on `.pi-choice-main`) long after mc-item.css
 * dropped that pin with the L1-08 note explaining why, which put the SMALLEST
 * type in the product on its LONGEST text: a reading choice. It also pinned the
 * UI family outright, so no register could reach a passage question's choices —
 * which is why the sealed paper's own serif stopped at the passage section.
 *
 * Nothing passage-specific survives: a question inside a testlet is the same
 * question served alone. `.pi-verdict-adorn` below is the one exception, and it
 * is an adornment the HOST renders, not part of the row. */

/* --- Reveal adornment (✓ / ✗) ------------------------------------------
 * The graded glyph the host renders into the right-edge column via
 * renderRightAdornment (runner.jsx emits `mc-verdict-adorn pi-verdict-adorn`
 * so one span lands correctly in either renderer's stylesheet). Same footprint
 * as .mcq-elim-spacer, so a row's height and text column are identical whether
 * it is holding the ×, the glyph, or nothing. `currentColor` inherits the
 * row's own semantic ink — sage on the key, danger on the student's wrong
 * pick — so the glyph can never disagree with the fill it sits on. */
.pi-verdict-adorn {
  width: 28px;
  height: 28px;
  align-self: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: currentColor;
}

/* --- Inline why panel after reveal ------------------------------------ */
/* The reveal panel is McItem's `.mc-why-block` (study B1/A17) — one design,
   one verdict head, one reading treatment for every item kind. The `.pi-why*`
   rules that used to live here are gone with it. */

/* --- Line-numbered passage: centre the fixed measure -------------------- *
 * A line-numbered passage is hard-wrapped at a fixed measure (~420px). In a
 * pane wider than that (stacked layout: iPad portrait, narrow desktop windows)
 * the block hung against the left edge with a dead region beside it.
 *
 * The centring must not move what usePbFit measures (subjects/reading/ui.jsx):
 * it reads .pb-linefit's own box (clientWidth + a ResizeObserver) and each
 * row's span rect. So .pb-linefit stays full-pane-width — only its single grid
 * TRACK is content-sized, and minmax(0, min-content) clamps that track to the
 * pane. Wider pane → track = the measure, centred; narrower → track = the pane,
 * i.e. today's boxes exactly, so the gutter/flow verdict and the shrink
 * threshold are untouched. The observed box never changes width, so no
 * measure↔resize feedback is possible.
 * min-content rather than fit-content is what makes a NON-numbered sibling
 * block (an ACT front-matter line) wrap to the same measure instead of the
 * pane — the nowrap rows set the track, every block shares it.
 * The FLOW presentation is excluded: it has no nowrap rows, so a min-content
 * track would collapse it to one word per line, and flowing text fills the
 * pane anyway. WRAP (verse that will not fit — subjects/reading/styles.css) is
 * excluded for exactly the same reason: its rows soft-wrap, so their
 * min-content is the longest WORD, and there is nothing to centre anyway — by
 * definition the lines are already wider than the pane. */
.passage-pane .pb-linefit:not(.pb-linefit-flow):not(.pb-linefit-wrap) {
  display: grid;
  grid-template-columns: minmax(0, min-content);
  justify-content: center;
}
/* …EXCEPT VERSE (study SHSAT-26). Centring is a nudge for prose, whose nowrap
 * lines nearly fill the measure; a poem's lines are half that, so on an iPad
 * the whole block sat about 380pt in from a passage TITLE that is flush left,
 * and it read as a layout fault rather than as verse setting. The poem keeps
 * its line breaks, its gutter numbers and its intrinsic track — it just starts
 * where the title starts. `.pp-verse` is stamped by PassagePane. */
.passage-pane.pp-verse .pb-linefit:not(.pb-linefit-flow):not(.pb-linefit-wrap) {
  justify-content: start;
}
/* The track is sized from the same intrinsic text width the fit hook then
 * measures against, so the two can land on a rounding tie and read as an
 * overflow. 3px of slack inside the row's own box keeps rect > ink; it is
 * inside the box, so the constrained case (track = pane) keeps the shipped
 * threshold to the pixel. */
.passage-pane .pb-linefit:not(.pb-linefit-flow):not(.pb-linefit-wrap) .pb-fixed-line { padding-right: 3px; }