/* #1812 / #1403, the prefix-letter beat's card (#307's one-file-per-beat split).

   `pronoun.css`'s geometry and the same values, for the same reason: this is a
   re-shown cue with one word boxed and a stack of English buttons under it, and
   #1239's rule is that sibling cards read as one family. Nothing here is a new
   size or a new accent.

   ## What is NOT here

   **No option-button rule and no `.wrong` selector.** The buttons are `.opt`,
   the shared class in `shared/beat_card.css`, which is already in all three
   copies of #1586's wrong-answer selector list -- `pronoun.css` argues it in
   full. Its Lantern tokens (radius, elevation, the `.correct` bloom) arrive the
   same way, which is why `tests/test_beat_lantern_contract.py` carries this
   sheet on its exemption list.

   ## The two marks

   The BOX is the written word, `pronoun.css`'s `.pron-target` frame: `--accent`
   ink on an `--accent-soft` plate, a 2px `--accent` border, 4px radius. The
   MARK is the letter inside it: the reverse -- `--ground` ink on a solid
   `--accent` plate -- so the eye lands on the letter first and the rest of the
   word reads as its host. Contrast, both themes, NOT inherited:

     --accent text on --accent-soft plate: 8.86:1 dark, 4.20:1 light -> light
        FAILS 4.5:1, so the light override below is required (`#79580E` on
        `#E9E3D6`, 5.11:1, `scripts/contrast_sweep.py`), exactly as in
        `.pron-target`.
     the mark's own pair (`--ground` on `--accent`) is the app's `.advance`
        button's, the one solid accent plate already shipped.
*/

/* Muted, matching `.pron-prompt`: the line naming the question. The letter in
   it is in the ink colour, so the one thing the question is about stands out. */
.pfx-prompt { color:var(--muted); }
.pfx-letter { color:var(--ink); font-family:var(--sans-he); font-weight:700; padding:0 1px; }

/* `.pron-cue`'s Hebrew size, line-height and cap, the sibling cards' 19px. */
.pfx-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 written word: `.pron-target`'s frame. */
.pfx-word { 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) {
  .pfx-word { color:#79580E; }
}
/* #2617: the in-app theme override, `html[data-theme=...] SELECTOR`, as
   `.pron-target` does it (the `:root[data-theme="` literal is what the
   contrast-sweep guard keys on for a real `:root`-level override). */
html[data-theme="dark"] .pfx-word { color:var(--accent); }
html[data-theme="light"] .pfx-word { color:#79580E; }

/* The prefix letter: a solid plate inside the box. Ink is the ground colour,
   which is what `.advance` puts on its accent plate in both themes. */
.pfx-mark { color:var(--ground); background:var(--accent); border-radius:3px; padding:0 3px; margin-inline:1px; }
@media (prefers-color-scheme: light) {
  .pfx-mark { color:var(--ground); background:#79580E; }
}
html[data-theme="dark"] .pfx-mark { color:var(--ground); background:var(--accent); }
html[data-theme="light"] .pfx-mark { color:var(--ground); background:#79580E; }

/* A column, `.pron-options`': `.opt` is `width:100%`, the 22rem cap is the
   cue's, so the buttons finish where the cue above them does. */
.pfx-options { display:flex; flex-direction:column; gap:8px;
               width:100%; max-width:22rem; }

/* The after-answer line, "ב = in, at": `.pron-note`'s quiet register (the
   app's one shipped "small caption under a card" style), shown on the tap by
   `prefix_letter.js` (`.beat-reserve` removed), never before. */
.pfx-explain { margin:0; font-family:var(--serif); font-size:15px; line-height:1.45;
               color:var(--ink); border-inline-start:2px solid var(--line);
               padding-inline-start:10px; max-width:22rem; }