/* #1437, the numeral-gender beat's card (#307's one-file-per-beat split).

   Every rule here is a value already shipped on a sibling card, reached for
   deliberately rather than invented: this beat is a two-choice card over a
   re-shown cue with a blank in it, which is `cloze`'s geometry and `tense`'s
   question, and 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. What is genuinely
   this beat's own is `.numgen-counted` -- no other card marks a second word
   for the learner to compare the answer against.

   No rule in this file lives in `app/static/study.css`; that sheet keeps only
   the shared beat-card mechanic (`.beat`/`.beat-text`/`.beat-dismiss`/
   `.beat-reserve`/`.advance`), all of which this card uses as they are. */

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

/* The same Hebrew size (19px) as `.cloze-cue`, `.tense-cue` and pick-in-cue's
   own line: a sibling card, not a smaller-print variant of one. */
.numgen-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; }

/* `.cloze-gap`'s rule, to the pixel, and for a reason this card needs even
   harder than cloze does: a gap scaled to the blanked word would hand over the
   answer outright, because the two options differ by one or two letters
   (`תשע` / `תשעה`). Fixed width, no length hint, and the server does not send
   the word for this slot at all. */
.numgen-blank { display:inline-block; min-width:2.6em; border-bottom:2px solid var(--line); }

/* The counted noun -- what the missing numeral has to agree with, and the only
   thing on this card that answers "agree with WHAT". `--accent` is the colour
   the reader gives the word a session is teaching, and `.tense-target` already
   uses it for the same job (the one word the question is about) on the same
   ground. */
.numgen-counted { color:var(--accent); font-weight:700; }

.numgen-options { display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
                  max-width:22rem; }
/* Hebrew captions, so `--sans-he` and `.cloze-option`'s rule -- NOT
   `.tense-opt`'s `--serif`, which is right there only because tense's two
   buttons say "Past" and "Future". These say `תשע` and `תשעה`. */
.numgen-opt { font-family:var(--sans-he); font-size:calc(16px * var(--milim-text-scale)); color:var(--ink);
              background:var(--surface); border:1px solid var(--line);
              border-radius:14px; padding:10px 14px; cursor:pointer;
              min-height:44px; min-width:96px;
              /* #1764, Direction B "Lantern": radius 14 and the two-layer
                 elevation, reading the same `--shadow` token `.opt` and
                 `.cloze-option` read (defined per theme in the host page's
                 own `:root`). Phase 1 (#1759) restyled `.opt` and
                 `.cloze-option`, which was the whole of its stated scope --
                 but `03-motion-system.md` §1's selector list is four
                 selectors, so these two kept Lantern's COLOURS on the old
                 flat shape. Visible to anyone playing two beats in a row.
                 `--rest-shadow` publishes the elevation to the shared
                 `beatWrongPulse` keyframe (#1777); without it a wrong answer
                 blanks the shadow for 420ms. */
              box-shadow:var(--shadow); --rest-shadow:var(--shadow); }
.numgen-opt:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.numgen-opt[disabled] { cursor:default; }

/* Right and wrong both stay --ink, not --muted -- the same measured trap
   `cloze.css`/`tense.css`/`pick_in_cue.css` each record: dimming this text
   measured 4.46:1 against the composited green, under the 4.5:1 bar. */
/* #1764 / 03-motion-system.md §1, "the one 'moment'": the same bloom `.opt`
   and `.cloze-option` already run -- 2px `--ok` ring, 6px halo, 22px outer
   glow, arriving over `--dur-bloom` and never looping. The keyframe is
   document-global and is declared once in `shared/beat_card.css`; this
   references it by name rather than redeclaring it, exactly as cloze.css
   does. The resting `box-shadow` here settles on the keyframe's own 100%
   values, so there is no jump at the frame the animation ends. */
.numgen-opt.correct { border-color:var(--ok); background:var(--ok-soft); color:var(--ink);
                      box-shadow:0 0 0 2px var(--ok), 0 0 0 6px var(--ok-halo), 0 0 22px var(--ok-bloom);
                      animation:verdictBloom var(--dur-bloom) var(--ease-out) 1; }
/* The tint only -- #1586/#1411 declares the three-pulse red ring once, in
   `shared/beat_card.css`, and that block's list names `.numgen-opt.wrong`.
   No animation property belongs in this file; `tests/test_beat_wrong_pulse.py`
   fails if one reappears. */
.numgen-opt.wrong   { border-color:var(--no); background:var(--no-soft); color:var(--ink); }

@media (hover: hover) {
  .numgen-opt:not([disabled]):hover { border-color:var(--accent); }
}

/* #1764: this file's first `animation` declaration, so it needs its own
   `prefers-reduced-motion` escape -- `tests/test_reduced_motion_escape.py`
   asks the question per file, the same way `shared/beat_card.css`'s own
   escape (foot of that file) does for `.opt.correct`'s identical bloom, and
   `cloze.css` for `.cloze-option.correct`. Parked, not shortened: the ring
   and halo stay, because they are in the base `.numgen-opt.correct` rule above,
   not the keyframe, so a reduced-motion learner still sees the full verdict
   shape at the instant the answer is judged and simply never sees it arrive
   over 540ms. */
@media (prefers-reduced-motion: reduce) {
  .numgen-opt.correct { animation:none; }
}