/* learn-recall.css - Quick recall (learn-recall.js): a light warm-up, not a lesson question. The question keeps the
   normal question surface (no tint: green is only ever "correct", owner 11 Oct); one compact row on one line (a neutral
   "Quick recall" pill, icon only under 360 px, "1 of 2", Skip); no marks, no guide time, no pace bar. The lesson's own
   top bar is left as it is. Light and dark come from the tokens. */
.lq.lr-q{margin-top:4px}
.lr-top{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin:0 0 6px;min-height:32px;min-width:0}
.lr-chip{margin:0;align-self:center;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:10px;background:var(--sunk);color:var(--ink);font-weight:700;font-size:.875rem;line-height:1.2;white-space:nowrap;flex:none}
.lr-chip svg{flex:none}
.lr-top .lr-n{white-space:nowrap;flex:none;margin:0;align-self:center;min-height:0;height:auto;display:inline-flex;align-items:center;line-height:1.2;color:var(--ink-2);font-size:.875rem;font-variant-numeric:tabular-nums}
.lr-skip{white-space:nowrap;flex:none;margin:0 0 0 auto;align-self:center;min-height:44px;min-width:44px;padding:0 8px;border:0;background:none;color:var(--study-ink);font:inherit;font-weight:700;font-size:.9375rem;cursor:pointer;border-radius:10px}
.lr-skip:hover{text-decoration:underline;text-underline-offset:3px}
.lr-skip:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.lr-q .lq-title{font-size:1.125rem;line-height:1.3;margin:0 0 10px}
.lr-q .lq-mkh,.lr-q .lq-pace,.lr-q .lq-pacetr{display:none}
@media (max-width:359px){.lr-chip{padding:5px 7px}.lr-chip .lr-cl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (forced-colors:active){.lr-chip{border:2px solid CanvasText}}
.lr-was{margin:0 0 10px;color:var(--ink-2);font-size:.9375rem}
.lr-was a,.lr-was b{color:var(--study-ink);font-weight:700}
.lr-was a{text-underline-offset:3px}

/* Starters (learn-recall.js starter(), music Grades 1 to 8): the owner's classroom starter. A "Starter!" title card in
   Brainlag teal (the #46a9b3 family; a darker teal for text on light) and the course's friend, calm (no decorative
   notes: owner, 12 Oct; the Bravura note stays in the small "Starter" chip); then one question a screen, the choices as tick-box rows; on Check the tick draws in (250 ms) on the right row,
   which fills soft teal and says "Answer", a wrong pick goes muted grey (never red); a close card. No marks, XP,
   timer, streak or pace bar. Reduced motion, data-motion off and minimal mode: nothing moves (body.st-still). */
:root{--st-teal:#46a9b3;--st-ink:#1d6a72;--st-soft:#e4f4f5;--st-card:#46a9b3;--st-on-card:#0d2b2f;--st-mute:#eef0f2;--st-mute-ink:#5d6670;--st-mute-rule:#c9ced4}
:root[data-theme="dark"]{--st-ink:#86d3da;--st-soft:#15393d;--st-card:#2c7d85;--st-on-card:#f2fbfc;--st-mute:#22272d;--st-mute-ink:#a3acb6;--st-mute-rule:#3a424b}
.st-top{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin:0 0 10px;min-height:44px;min-width:0}
.st-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:10px;background:var(--st-soft);color:var(--st-ink);font-weight:700;font-size:.875rem;line-height:1.2;white-space:nowrap;flex:none}
.st-chip .st-notes{width:18px;height:15px;flex:none}
.st-n{margin:0;white-space:nowrap;flex:none;color:var(--ink-2);font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums}   /* "Starter, 2 of 4": plain words, no pill or icon (UI rules, 21 Oct) */
.st-top0{justify-content:flex-end}   /* the first card: Skip starter alone, at the end of the row */
.st-skip{white-space:nowrap;flex:none;margin:0 0 0 auto;min-height:44px;min-width:44px;padding:0 8px;border:0;background:none;color:var(--st-ink);font:inherit;font-weight:700;font-size:.9375rem;cursor:pointer;border-radius:10px}
.st-skip:hover{text-decoration:underline;text-underline-offset:3px}
.st-skip:focus-visible,.st-warm:focus-visible{outline:3px solid var(--st-ink);outline-offset:2px}
/* the title and close cards */
.st-card{max-width:560px;margin:0 auto}
.st-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 20px 30px;border-radius:20px;background:var(--st-card);color:var(--st-on-card)}
.st-art{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4px;min-height:112px}
.st-friend{display:block;width:104px;height:auto}
.st-h{margin:4px 0 0;font-size:clamp(2.25rem,9vw,3.25rem);line-height:1.05;color:var(--st-on-card);letter-spacing:-.02em}
.st-h2{font-size:clamp(1.75rem,7vw,2.5rem)}
.st-sub{margin:4px 0 0;max-width:34ch;font-size:1.0625rem;line-height:1.4;color:var(--st-on-card)}
.st-title .st-top{margin-bottom:12px}
body.st-on:not(.st-still) .st-card.is-on .st-h{animation:stRise .32s cubic-bezier(.22,1,.36,1) .08s backwards}
@keyframes stRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* a question: the choices as tick-box rows, one under another */
.st-q .lq-in.t-mcq{display:flex;flex-direction:column;gap:8px;grid-template-columns:none}
.st-q .t-mcq .lq-tile{min-height:52px;padding:10px 14px;gap:12px;border-radius:14px;transform:none}
.st-q .lq-tile .k{display:none}
.st-box{flex:none;width:28px;height:28px;border-radius:7px;border:2px solid var(--rule-2);background:var(--surface);display:grid;place-items:center}
.st-box svg{width:22px;height:22px}
.st-tk{fill:none;stroke:var(--st-on-card);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.st-q .lq-tile[aria-pressed="true"]{border-color:var(--st-teal);background:var(--st-soft);transform:none}
.st-q .lq-tile[aria-pressed="true"] .st-box{border-color:var(--st-ink);box-shadow:inset 0 0 0 5px var(--surface);background:var(--st-ink)}
.st-q .lq-tile.st-right,.st-q .lq-tile.st-right[aria-pressed="true"],.st-q .lq-tile.right,.st-q .lq-tile.right[aria-pressed="true"]{border-color:var(--st-teal);background:var(--st-soft);color:var(--ink)}
.st-q .lq-tile.st-right .st-box,.st-q .lq-tile.right .st-box{border-color:var(--st-teal);background:var(--st-teal);box-shadow:none}
:root[data-theme="dark"] .st-q .lq-tile.st-right .st-box,.st-q .lq-tile.right .st-box{background:var(--st-card);border-color:var(--st-card)}
.st-q .lq-tile.st-right .st-tk,.st-q .lq-tile.right .st-tk{stroke-dashoffset:0;transition:stroke-dashoffset .25s cubic-bezier(.22,1,.36,1)}
.st-q .lq-tile.st-wrong,.st-q .lq-tile.st-wrong[aria-pressed="true"],.st-q .lq-tile.wrong,.st-q .lq-tile.wrong[aria-pressed="true"]{border-color:var(--st-mute-rule);background:var(--st-mute);color:var(--st-mute-ink)}
.st-q .lq-tile.st-wrong .st-box,.st-q .lq-tile.wrong .st-box{border-color:var(--st-mute-rule);background:var(--st-mute-rule);box-shadow:inset 0 0 0 5px var(--st-mute)}
.st-q.st-shown .lq-tile:not(.st-right):not(.st-wrong){opacity:.72}
.st-q .lq-field.st-right{border-color:var(--st-teal);background:var(--st-soft);color:var(--ink)}   /* a typed answer, checked */
.st-q .lq-field.st-wrong{border-color:var(--st-mute-rule);background:var(--st-mute);color:var(--st-mute-ink)}
.st-typed{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;font-size:1.0625rem;color:var(--ink)}.st-typed .st-ans{margin-inline-start:0}
.st-ans{margin-inline-start:auto;flex:none;padding:2px 8px;border-radius:8px;background:var(--surface);color:var(--st-ink);font-size:.8125rem;font-weight:700;letter-spacing:.01em}
.st-was{margin:0 0 10px;color:var(--ink-2);font-size:.9375rem}
.st-was a,.st-was b{color:var(--st-ink);font-weight:700}
.st-was a{text-underline-offset:3px}
body.st-on:not(.st-still) .st-was{animation:stFade .2s ease-out}
@keyframes stFade{from{opacity:0}to{opacity:1}}
/* the small offer after three skipped in a row */
.st-warm{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 14px;padding:6px 14px 6px 10px;border:2px solid var(--st-teal);border-radius:12px;background:var(--st-soft);color:var(--st-ink);font:inherit;font-weight:700;cursor:pointer}
.st-warm .st-notes{width:22px;height:18px}
/* nothing moves */
body.st-still .st-tk,body.st-still .st-q .lq-tile{transition:none!important}
body.st-still .st-card,body.st-still .st-q,body.st-still .lp-screen.enter{animation:none!important}
@media (prefers-reduced-motion:reduce){.st-tk,.st-q .lq-tile{transition:none!important}.st-h,.st-notes,.st-was{animation:none!important}}
@media (forced-colors:active){.st-chip,.st-hero{border:2px solid CanvasText}.st-q .lq-tile.st-right{border-width:4px}}
@media (max-width:359px){.st-chip span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* the title and close cards: Start (or Start the lesson) sits centred under the card, as wide as it on a wide screen */
@media (min-width:700px){body.st-on:has(.st-card.is-on) .lp-foot .lp-actions{justify-content:center}
  body.st-on:has(.st-card.is-on) .lp-foot .lp-actions .lp-btn{flex:0 1 560px;max-width:560px}}
/* a starter question's music card hugs its music, as a lesson question's does (learn.css, a2aedcd00 and 3f2984fda: those
   rules key on the friend's speech bubble, which the article page never has): as wide and tall as the drawing, Play
   in its own top-right corner gutter */
.st-q .mn-fig .mn-sheet{width:fit-content;min-width:min(100%,320px);max-width:100%}
.st-q .mn-fig .mn-sheet.has-play{position:relative;padding:12px 64px 12px 16px}
.st-q .mn-fig .mn-sheet.has-play > .mn-sheet-bar{position:absolute;top:10px;right:10px;width:auto;margin:0}
.st-q .mn-fig .mn-host{min-height:0}