/* #278, the pick-in-cue beat's card (#307 split out of study.css). */

/* #278's board: the cue re-shown whole, with the option words wired as
   buttons and everything else -- function words, punctuation -- left as
   plain, untappable spans in the same line. Harder than word-match on
   purpose: the target sits among real distractors in real context instead
   of on a clean list. */
.pick-prompt { color:var(--muted); }
/* The gloss alone in --accent, matching `.beat-text`'s own scale -- not a
   smaller caption, the one line on this card that names the question. */
.pick-target { color:var(--accent); font-weight:700; }

/* Same Hebrew size as word-match's `.match-he` (19px): this is the sibling
   beat to #160's board, not a smaller-print variant of it. */
.pick-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; }
.pick-word { font:inherit; color:inherit; }
button.pick-word { background:none; border:none; border-bottom:2px solid var(--line);
                    padding:0 1px; cursor:pointer; }
/* #3060: "Draw thin, hit fat" (#127). A word's button is as wide as the word -- 20px for
   אז, 24px for ביי -- and 34px tall, under #482's 44px floor, and no padding can fix that:
   the buttons sit INSIDE a running sentence, so padding re-sets the sentence. Two
   transparent pseudo-elements take the HIT box out instead; neither draws anything and
   neither moves a pixel of the line (they are absolutely positioned). Each reaches 44px
   where the line has room and stops where it has not.

   `::before` is the width. It is as tall as the word's box and reaches out to 44px wide
   (`(100% - 44px) / 2` a side; `min(0px, ...)` so a word already wider than 44px is left
   alone). It sits ABOVE the plain words, which tap nothing, so the few pixels it takes of a
   function word's edge were dead taps before. Where the next/previous ELEMENT is another
   button (`+` and `:has(+)` read elements, so the space between them does not matter) the
   shared side stops at HALF the word space, `.14em`: the two buttons split the gap at its
   midpoint, and neither reaches into the other's own box.

   `::after` is the height, 5px above and below. It is BEHIND everything (`z-index:-1`
   inside `.pick-cue`'s own stacking context, `isolation:isolate` below), so it only takes
   the strip of leading no word or button already occupies: it can never take a tap from a
   word on the line above or below. Lines sit 32px apart, so a middle line of a wrapped
   sentence cannot reach 44px without doing exactly that; tests/test_pick_word_hit_area_3060.py
   measures what each button actually gets. */
.pick-cue { isolation:isolate; }
button.pick-word { position:relative; }
button.pick-word::before,
button.pick-word::after { content:""; position:absolute; }
button.pick-word::before {
  top:0; bottom:0;
  inset-inline-start:min(0px, calc((100% - 44px) / 2));
  inset-inline-end:min(0px, calc((100% - 44px) / 2));
}
button.pick-word + button.pick-word::before {
  inset-inline-start:max(-.14em, min(0px, calc((100% - 44px) / 2)));
}
button.pick-word:has(+ button.pick-word)::before {
  inset-inline-end:max(-.14em, min(0px, calc((100% - 44px) / 2)));
}
button.pick-word::after {
  z-index:-1; left:0; right:0;
  top:min(0px, calc((100% - 44px) / 2));
  bottom:min(0px, calc((100% - 44px) / 2));
}
button.pick-word:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button.pick-word[disabled] { cursor:default; }

/* Right and wrong both stay --ink, and are NOT dimmed to --muted -- the same
   trap word-match's `.match-he.matched` records: dimming this text measured
   4.46:1 against the composited green, under the 4.5:1 bar. The colour and
   underline already carry the verdict; a second signal here is legibility
   paid for on the one word a wrong tap most needs the learner to read. */
/* #1798, Phase 4 of the Lantern rollout: the correct-answer moment
   (03-motion-system.md §1) arrives on this beat as a GLOW and not as the
   shared tile recipe. The four numbers differ from `.opt.correct`'s and the
   reason is geometry, measured in the browser before it was written --
   it is the same reason `--wrong-pulse-spread` below is 2px here and 3px
   everywhere else, one step further.

   `shared/beat_card.css`'s bloom is `0 0 0 2px var(--ok), 0 0 0 6px
   var(--ok-halo), 0 0 22px var(--ok-bloom)`. The first two layers are
   SPREAD, i.e. a hard-edged rectangle 8px outside the border box. On a full
   -width `.opt` pill with air around it that reads as a ring on a tile. A
   pick-word is a button set INSIDE a 19px Hebrew line at `line-height:1.7`
   with `padding:0 1px` -- rendered at 393px, both themes, the 8px rectangle
   overlapped the adjacent word on the same line and reached the line above,
   and what it read as was a BOX DRAWN AROUND A WORD rather than a tile
   lighting up. Four treatments were rendered side by side (the shared
   2/6/22; an inline-scaled 1/3/14; this glow; and today's flat tint); the
   two ringed ones both drew that box, at different sizes.

   So the ring and the halo go and the outer glow stays, at a blur with a
   little spread behind it: no hard edge anywhere, the falloff dies before
   it reaches the neighbouring word, and a word in a sentence reads as LIT.
   `--ok-bloom` is the same token the shared bloom's own outer layer uses,
   so this is Lantern's glow at this beat's scale, not a second recipe.

   The settled tint and the `--ok` underline are unchanged and are still
   what carries the verdict; this adds the moment on top of them. */
button.pick-word.correct { border-color:var(--ok); background:var(--ok-soft); color:var(--ink);
                           box-shadow:0 0 12px 3px var(--ok-bloom);
                           animation:pickBloom var(--dur-bloom) var(--ease-out) 1; }
/* The tint only -- #1586/#1411 declares the three-pulse red ring once, in
   `shared/beat_card.css`, whose list names `button.pick-word.wrong`. No
   animation property belongs in this file (`tests/test_beat_wrong_pulse.py`
   fails if one reappears).

   `--wrong-pulse-spread` IS this beat's own, and it is the shape of override
   that block asks for: a custom property on this beat's selector, never a
   second animation. Every other judged surface is a pill or a tile with air
   around it and takes the shared 3px. A pick-word is a button set INSIDE a
   19px Hebrew line at `line-height:1.7` with `padding:0 1px` -- ~5px of word
   spacing either side and ~5px of leading above and below -- so a 3px ring
   lands on the neighbouring words and very nearly on the line above. 2px
   keeps the ring clear of both while reading as the same feedback; the count
   and the duration are not this beat's to change and are not restated here.
   The ring is a `box-shadow`, so neither value costs any layout and the
   sentence cannot reflow whichever it is. */
button.pick-word.wrong   { border-color:var(--no); background:var(--no-soft); color:var(--ink);
                           --wrong-pulse-spread:2px; }

@media (hover: hover) {
  button.pick-word:not([disabled]):hover { border-color:var(--accent); }
}

/* #1798: the glow's own keyframe. It is NOT `verdictBloom`
   (`shared/beat_card.css`) because that keyframe's every frame states the
   ring-and-halo geometry the rule above measured its way out of -- borrowing
   it would overshoot to a 9px hard rectangle at 55% and then snap to this
   rule's ringless glow at the frame the animation ends, which is the visible
   jump that keyframe's own comment exists to prevent.

   Same shape as the shared one otherwise, deliberately: one run, no
   `animation-fill-mode`, `box-shadow` the only animated property, and a 55%
   overshoot that settles on exactly the value the rule above declares. "Wrong
   is never louder than right" (03 §1): this is one run of `--dur-bloom`
   against the wrong pulse's three of .14s, and the wrong side's ring is hard
   while this is not.

   `pickBloom`, not a name containing "wrong": `tests/test_beat_wrong_pulse.py
   ::test_exactly_one_wrong_answer_keyframe_ships_in_the_whole_app` holds that
   `beatWrongPulse` is the only wrong-answer keyframe in the app, and this is
   the right-answer side. */
@keyframes pickBloom {
  0%   { box-shadow:0 0 0 0 var(--ok-bloom); }
  55%  { box-shadow:0 0 22px 6px var(--ok-bloom); }
  100% { box-shadow:0 0 12px 3px var(--ok-bloom); }
}

/* #2512: the clock, on `/skills` only (`pick_in_cue.js`'s `isTimed`).
   cloze.css's #2060 row, in this beat's own classes -- same sizes, same
   tokens, same meaning -- so the two one-tap games that carry a clock read
   as one family. The row is as wide as the cue it sits over. */
.pick-clock { display:flex; align-items:center; gap:10px; width:100%;
              max-width:22rem; margin:0 0 2px; }
.pick-seconds { font-family:var(--mono); font-size:13px; color:var(--muted);
                min-width:2.2ch; text-align:right; font-variant-numeric:tabular-nums; }
.pick-bar { flex:1; height:4px; border-radius:2px; background:var(--line);
            overflow:hidden; }
/* `--pick-left` is the fraction still to run, written by `pick_in_cue.js`
   every tick. `scaleX`, not `width`, so a repaint is a compositor job. Drains
   leftward whatever the cue's `dir`: the bar is a clock, not text. */
.pick-bar-fill { display:block; height:100%; background:var(--accent);
                 transform-origin:left center; transform:scaleX(var(--pick-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. */
.pick-clock.pick-low .pick-bar-fill { background:var(--no); }
.pick-clock.pick-low .pick-seconds { color:var(--no); }
.pick-clock.pick-out .pick-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. */
.pick-timeup { flex:1; font-size:13px; color:var(--no); text-align:left; }

/* This file's FIRST and only `prefers-reduced-motion` block, and it arrives
   with the animation above rather than after someone notices -- #1036's
   finding, which `word_match.css` records in full: the guard tests that read
   a file's reduced-motion rules slice the FIRST such block, so whatever this
   beat gates next joins THIS one and does not open a second.

   `animation:none`, never a shortened duration, for the reason `study.css`
   records for `.hooray`: a `.01ms` run leaves the outcome to
   `animation-fill-mode`, a property this rule would then depend on without
   saying so. The glow, the tint and the `--ok` underline are all on
   `button.pick-word.correct`'s own base rule and not inside the keyframe, so
   a learner who asked for less motion still sees the whole verdict the
   instant the tap is judged and simply never sees it arrive.

   The wrong side's escape is not here: `.wrong`'s ring is the shared
   `beatWrongPulse`, and `shared/beat_card.css` parks it for every judged
   surface in the app at once. */
@media (prefers-reduced-motion: reduce) {
  button.pick-word.correct { animation:none; }
  /* #2512: the clock bar's easing is its only motion. The COUNT is not
     motion and does not stop -- `pick_in_cue.js` never reads this query.
     This block sits AFTER `.pick-bar-fill`, which is what lets it win at
     equal specificity (cloze.css records the draft that got this wrong). */
  .pick-bar-fill { transition:none; }
}