/* #277, the cloze beat's card (#307 split out of study.css). */

/* #277: cloze's sibling card to #278's board -- the cue re-shown with one
   already-answered word blanked, at the same Hebrew size (19px) as the other
   two beats' own cue/board text. */
.cloze-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; }

/* A fixed-width rule, never scaled to the blanked word's own length -- the
   design's own "no length or first-letter hint" (#277). The server does not
   even send the real word for this slot, so there is no length to leak. */
.cloze-gap { display:inline-block; min-width:2.6em; border-bottom:2px solid var(--line); }

.cloze-options { display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
                 max-width:22rem; }
/* #1759, Direction B "Lantern": radius moved from 10 to the tokens table's
   "radius opt / card" 14, and idle chrome now floats on `--shadow` (the same
   token `.opt` reads in shared/beat_card.css -- see that rule's own comment
   for what it holds per theme) instead of leaning on the border alone. */
.cloze-option { 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; box-shadow:var(--shadow);
                /* #1777: publishes this resting elevation to the shared
                   `beatWrongPulse` keyframe, which animates the same
                   property and would otherwise blank it for the 420ms of
                   a wrong answer. See that keyframe's own comment. */
                --rest-shadow:var(--shadow); }
.cloze-option:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.cloze-option[disabled] { cursor:default; }

/* Right and wrong both stay --ink, not --muted -- the same trap
   word-match's `.match-he.matched`/pick-in-cue's `button.pick-word.correct`
   record: dimming this text measured 4.46:1 against the composited green,
   under the 4.5:1 bar. */
/* #1759, 03-motion-system.md §1: the same bloom `.opt.correct` gets in
   shared/beat_card.css, on `@keyframes verdictBloom` -- declared there, not
   here, since keyframes are document-global and that file's own header
   already establishes the pattern for `.rise` (`study.css`'s `.approx-tip`
   reuses it the same way). `--dur-bloom`/`--ease-out` are the six motion
   tokens moved into study.css's/skills.css's `:root` alongside `--ok-halo`/
   `--ok-bloom`. */
.cloze-option.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: the three-pulse red ring a wrong answer gets is
   declared once for every judged surface in `shared/beat_card.css`, which
   names `.cloze-option.wrong` in its own list -- there is deliberately no
   animation property here, and adding one would be the duplication that
   ticket exists to remove (`tests/test_beat_wrong_pulse.py` refuses it). The
   ring animates `box-shadow` and nothing else, so these three declarations
   are the resting state at every frame of it, and they are the WHOLE state
   under `prefers-reduced-motion`. */
.cloze-option.wrong   { border-color:var(--no); background:var(--no-soft); color:var(--ink); }

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

/* #1759: 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.
   Parked, not shortened: the ring and halo stay, because they are in the
   base `.cloze-option.correct` rule above, not the keyframe. */
@media (prefers-reduced-motion: reduce) {
  .cloze-option.correct { animation:none; }
}

/* ---- #2060: the clock (practice hub, Speed rung 2 and up) -------------------

   word_search.css's clock, re-expressed under this beat's own class names --
   a beat may not reach into another beat's stylesheet (#307), and there is no
   shared sheet for beat internals (colour.css says the same about its copy).
   A number AND a bar: the number is the exact reading, the bar is the one a
   learner can take in without looking up from the options. `--mono` so the
   digits do not jitter as they change width. */
.cloze-clock { display:flex; align-items:center; gap:10px; width:100%;
               max-width:22rem; margin:0 0 2px; }
.cloze-seconds { font-family:var(--mono); font-size:13px; color:var(--muted);
                 min-width:2.2ch; text-align:right; font-variant-numeric:tabular-nums; }
.cloze-bar { flex:1; height:4px; border-radius:2px; background:var(--line);
             overflow:hidden; }
/* `--cloze-left` is the fraction still to run, written by `cloze.js` every
   tick. `scaleX`, not `width`, so a repaint is a compositor job. Drains
   leftward whatever the cue's `dir`, word_search.css's own reasoning: the bar
   is a clock, not text. */
.cloze-bar-fill { display:block; height:100%; background:var(--accent);
                  transform-origin:left center; transform:scaleX(var(--cloze-left, 1));
                  transition:transform .25s linear; }
/* The last three seconds, and the face after the clock has run out -- `--no`,
   the red every wrong state in this app already uses. */
.cloze-clock.cloze-low .cloze-bar-fill { background:var(--no); }
.cloze-clock.cloze-low .cloze-seconds { color:var(--no); }
.cloze-clock.cloze-out .cloze-seconds { color:var(--no); }
/* Takes the bar's place in the row (the bar is `hidden` at the same moment),
   so saying it moves nothing else on the card. */
.cloze-timeup { flex:1; font-size:13px; color:var(--no); text-align:left; }

/* The bar's easing is the clock's only motion, so it is parked under reduced
   motion. The COUNT is not motion and does not stop: `cloze.js` never reads
   this media query, and the number and the bar still step down every tick.

   A block of its own, AFTER the rule it overrides, rather than a line in the
   escape further up: at equal specificity the later rule wins, so an escape
   written above `.cloze-bar-fill` is overruled by it and parks nothing --
   which is exactly what this ticket's first draft did, caught by
   `test_cloze_clock_bar_stops_animating_under_reduced_motion_but_the_clock_stays`. */
@media (prefers-reduced-motion: reduce) {
  .cloze-bar-fill { transition:none; }
}

/* #2061: the gap's own English, once the card is answered -- right or wrong
   alike (cloze.py's own docstring on `_translation`/`ClozeBeat` has the
   decision). Shape and rule borrowed from `tense.css`'s `.tense-reveal`/
   `.tense-gloss`, which already carries the same `.beat-reserve` contract
   (#1283) and the same "answer to what does it mean, not a caption" face.

   Built by `cloze.js` only when there is a gloss to show, so an ungapped
   draw never reserves an empty, bordered box -- unlike `.tense-reveal`,
   which is unconditional because that card always has a word line to show
   even without one. */
.cloze-reveal { width:100%; max-width:22rem; border-top:1px dashed var(--line);
                padding-top:12px; margin-top:4px; display:flex; flex-direction:column;
                align-items:center; gap:6px; }
.cloze-gloss { margin:0; font-family:var(--serif);
               font-size:calc(15px * var(--milim-text-scale)); line-height:1.4;
               color:var(--ink); text-align:center; max-width:22rem; }

/* #2094: the cue's whole English line, with the gap's own English marked
   inside it -- same face as `.cloze-gloss` beside it (serif, 15px, centred),
   since the line replaces the gloss line as often as it sits beside it (see
   `cloze.js`'s own comment on the three reveal shapes).

   `.cloze-tgt`'s treatment -- bold plus the shared accent colour -- is
   `study.css`'s own `.stage.lit .english .tgt` rule for the reader card
   (#851/#1472), the "other similar sentences" precedent the owner named.
   Declared here rather than depended on there: `skills.html` does not load
   `study.css` at all (that page's own header), and this beat's CSS ships on
   both pages, so the rule has to live where both can reach it. */
.cloze-english { margin:0; font-family:var(--serif);
                 font-size:calc(15px * var(--milim-text-scale)); line-height:1.4;
                 color:var(--ink); text-align:center; max-width:22rem; }
.cloze-tgt { font-weight:700; color:var(--accent); }

/* #2339: the whole card when this window is exhausted -- no cue, no options,
   just this line and Continue, so it reads as a message rather than as a
   blank round. Serif/15px, the same face `.cloze-gloss`/`.cloze-english`
   already use for English on this card, just centred over the card's own
   width rather than sat under a cue -- an English sentence, not Hebrew, so
   no `dir` and no `--sans-he`. */
.cloze-exhausted { margin:0; font-family:var(--serif);
                    font-size:calc(16px * var(--milim-text-scale)); line-height:1.5;
                    color:var(--ink); text-align:center; max-width:22rem; }