/* #1611, the pronoun beat's card (#307's one-file-per-beat split).

   Four rules, and every value in them is one already shipped on a sibling
   surface, reached for deliberately rather than invented: this card is a
   re-shown cue with one word marked and a stack of English answer buttons
   under it, which is `tense`'s geometry and the STUDY CARD's own board. A
   third size or a third accent would make it read as a different KIND of card
   than the two it is a sibling of (#1239: *"the cards need to be constant as
   much as possible so the eye doesn't jump around"*).

   ## What is NOT here, and that is the point of the file

   **No option-button rule.** The buttons are `.opt` -- the shared class in
   `shared/beat_card.css`, the one the study card's own four English answers
   wear. Every sibling beat declares a private option class (`.tense-opt`,
   `.cloze-option`, `.numgen-opt`) and each of them then has to be hand-added
   to THREE copies of #1586's wrong-answer selector list in that same file.
   `.opt` is already in all three. So this beat gets the three-pulse red ring,
   its light-theme sheen and its reduced-motion escape by construction, needs
   no edit to `shared/beat_card.css`, and cannot be the "ninth judged surface
   that tints and forgets to opt in" that
   `tests/test_beat_wrong_pulse.py::test_every_judged_surface_in_the_app_is_in_the_shared_list`
   exists to catch. There is no `.wrong` selector anywhere in this file and
   there must never be one.

   The captions are English phrases ("you, to a man"), which is exactly what
   `.opt`'s full-width, left-aligned, `--serif` pill was fitted to on the study
   card -- so the shared class is the right look here as well as the cheap one.
   `numeral_gender` could not reuse it (its buttons are two Hebrew words and
   want `--sans-he`, centred); this card can.

   No rule in this file lives in `app/static/study.css` or in
   `shared/beat_card.css`; both sheets are untouched by this ticket.

   ## #1947: the Phase 4 "Lantern" share this file does not need to declare

   `.opt`'s Lantern radius (14px), elevation (`box-shadow:var(--shadow)`) and
   its `.opt.correct` bloom (2px `--ok` ring, 6px `--ok-halo`, 22px
   `--ok-bloom`, `verdictBloom` over `--dur-bloom`, and the matching
   `prefers-reduced-motion` escape) all landed in `shared/beat_card.css` on
   2026-09-05 (#1759), one day AFTER this file was written reusing `.opt` for
   an unrelated reason (the paragraph above). Every one of those five things
   reached this beat's tiles for free the moment #1759 shipped, with zero
   edits here -- the same "gets it by construction" the paragraph above
   already claims for the wrong-answer ring, extended to the half of Phase 4
   that did not exist yet when it was written. Verified rendered, both
   themes, phone width, before #1947 touched this file: forcing `.correct`
   on a `.pron-options .opt` button shows the full ring/halo/bloom, identical
   to `cloze.css`'s `.cloze-option.correct`.

   This is why `tests/test_beat_lantern_contract.py`'s guard -- which
   enumerates every sheet under `app/static/beats/` and requires the Lantern
   token vocabulary or a written reason -- carries this file on its
   exemption list rather than expecting the token names to appear here: they
   never will, because the rules that declare them live one file over and
   this file's whole point (the paragraph above) is not duplicating them. */

/* Muted, matching `.tense-prompt`, `.pick-prompt` and `.numgen-prompt` -- the
   line naming the question, not the point of the card the way `.beat-text`
   alone is. */
.pron-prompt { color:var(--muted); }

/* The same Hebrew size (19px) as `.cloze-cue`, `.tense-cue` and
   `.numgen-cue`: a sibling card, not a smaller-print variant of one. */
.pron-cue { margin:0; font-family:var(--sans-he); font-size:calc(19px * var(--milim-text-scale)); line-height:1.7;
            color:var(--ink); max-width:22rem; }

/* The boxed word -- the explainer pronoun card's own frame, restated here
   because a beat may not import another beat's stylesheet any more than it may
   import its module. `beats/explainer.css`'s `.ex-affix` is the source: the
   same `--accent` ink, the same `--accent-soft` plate, the same 4px radius.

   Two deliberate differences from `.ex-affix`, both because that rule marks a
   FRAGMENT of a word and this one marks a whole word:

     * the border is drawn on all four edges rather than on the two
       (`.ex-verb.ex-start .ex-affix`: inline-start plus block-end) that say
       "the affix is this end of a longer word". There is no longer word here;
       the box is the word.
     * a little more inline padding (3px against 2px), because a four-sided
       box that hugs the glyphs as tightly as a two-sided corner does reads as
       a highlight rather than as a frame.

   Contrast, both themes, NOT inherited -- these are the same two token pairs
   `.ex-affix`'s own #533 comment measures, and they are quoted here with the
   role each is held to:

     --accent text  v --accent-soft plate over --ground:
        8.86:1 dark   4.20:1 light   -> light FAILS the 4.5:1 AA-normal floor
     --accent border v the same plate:
        8.86:1 dark   4.20:1 light   -> passes the 3:1 non-text UI floor

   So the light-theme text override below is not optional and is not a copy
   made "to be safe": without it this card would print body-sized text at
   4.20:1, which is the defect #533 fixed one file over. `#79580E` on `#E9E3D6`
   measures 5.11:1 (`scripts/contrast_sweep.py`), and `--accent` itself --
   including the border, which is held to 3:1 and clears it -- is untouched. */
.pron-target { color:var(--accent); font-weight:700;
               border-radius:4px; padding:0 3px; background:var(--accent-soft);
               border:2px solid var(--accent); }
@media (prefers-color-scheme: light) {
  .pron-target { color:#79580E; }
}
/* #2617: the in-app theme override, `html[data-theme=...] SELECTOR` (not
   `:root[data-theme=...] SELECTOR` -- the literal substring `:root[data-theme="`
   is what a contrast-sweep guard keys on to find a REAL `:root`-level
   override, and `html`/`:root` name the same element here) --
   same reasoning as study.css's own `.path-offunit`/`.path-map` pairs. Dark
   restates the base rule's own `color:var(--accent)` (this element's
   default, two lines up); light is the `@media` block above, unchanged. */
html[data-theme="dark"] .pron-target { color:var(--accent); }
html[data-theme="light"] .pron-target { color:#79580E; }

/* A column, not a wrapping row: `.opt` is `width:100%`, so these stack the way
   the study card's four answers do (`study.css`'s `.ask`, same 8px gap). The
   22rem cap is `.numgen-options`' and `.numgen-cue`'s, so the buttons finish
   exactly where the cue above them does. */
.pron-options { display:flex; flex-direction:column; gap:8px;
                width:100%; max-width:22rem; }

/* #2488: the "Hebrew has no it" caveat, shown only on the boards whose boxed
   הוא/היא stands for a thing rather than a person, and only once the card is
   answered (`.beat-reserve`, removed on tap by `pronoun.js`'s `wire`). Same
   quiet register `explainer.css`'s `.ex-note` already uses for this beat's
   sibling caveats -- reused rather than invented, since this beat's own
   English text (`.pron-prompt`) has no serif rule of its own to borrow and
   `.ex-note`'s IS the app's one shipped "small caveat under a card" style. */
.pron-note { margin:0; font-family:var(--serif); font-size:13px; line-height:1.45;
             color:var(--muted); border-inline-start:2px solid var(--line);
             padding-inline-start:10px; max-width:22rem; }