/* css/activity.css — shared styles for the reusable activity kit
   (js/activity/quiz.js, cloze.js, shadow.js, vocab.js, order.js,
   retell.js, combine.js, session.js).

   Follows this app's existing split: the LOGIC is shared in js/activity/, the
   SHARED look lives here, and a page that wants a variation overrides these
   classes locally. Everything is built from the same design tokens the rest of
   the app uses (--surface/--border/--accent/--text-muted), so an activity
   embedded in any page inherits that page's theme without adjustment — all
   five themes and the admin design settings come along for free.

   Prefixes: .aq- quiz, .ac- cloze, .as- shadow, .av- vocab, .ao- order,
   .ar- retell, .acb- combine, .asx- session. */

/* ── Shared primitives ──────────────────────────────────────────────────── */
.activity-quiz, .activity-cloze, .activity-shadow,
.activity-vocab, .activity-order, .activity-retell,
.activity-combine, .activity-session { font-family: var(--font-body); color: var(--text); }

.aq-foot, .ac-foot, .av-foot, .ao-foot {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: 1.1rem;
    flex-wrap: wrap;
}
.aq-progress, .ac-progress {
    flex: 1;
    min-width: 120px;
    height: 6px;
    border-radius: 99px;
    background: var(--border);
    overflow: hidden;
}
.aq-progress > span, .ac-progress > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: var(--accent);
    transition: width .25s ease;
}
.aq-submit, .ac-submit {
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 700;
    padding: .5rem 1.2rem;
    border-radius: 99px;
    border: none;
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    transition: filter .15s, opacity .15s;
}
.aq-submit:hover:not(:disabled), .ac-submit:hover:not(:disabled) { filter: brightness(1.08); }
.aq-submit:disabled, .ac-submit:disabled { opacity: .45; cursor: not-allowed; }

/* ── Quiz ───────────────────────────────────────────────────────────────── */
.aq-item {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    padding: 1rem 1.1rem;
    margin-bottom: .8rem;
    transition: border-color .2s;
}
.aq-item.correct { border-color: #3fb950; }
.aq-item.wrong   { border-color: #f85149; }
.aq-head { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .8rem; }
.aq-num {
    flex: none;
    width: 1.5rem; height: 1.5rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: .74rem; font-weight: 800;
}
.aq-prompt { font-size: .95rem; line-height: 1.5; font-weight: 600; }
.aq-body { display: flex; flex-wrap: wrap; gap: .5rem; }
.aq-opt {
    font-family: var(--font-body);
    font-size: .85rem;
    padding: .45rem .9rem;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s;
}
.aq-opt:hover:not(:disabled) { border-color: var(--accent); }
.aq-opt.selected { border-color: var(--accent); background: var(--accent-soft); }
/* After grading, colour carries the meaning — but the icons matter too, so a
   red/green distinction is never the only signal. */
.aq-opt.is-answer { border-color: #3fb950; background: rgba(63,185,80,.14); }
.aq-opt.is-answer::after { content: ' ✓'; font-weight: 800; color: #3fb950; }
.aq-opt.is-wrong  { border-color: #f85149; background: rgba(248,81,73,.13); }
.aq-opt.is-wrong::after { content: ' ✕'; font-weight: 800; color: #f85149; }
.aq-input {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: .5rem .8rem;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text);
    min-width: min(320px, 100%);
}
.aq-input:focus { outline: none; border-color: var(--accent); }
.aq-input.is-answer { border-color: #3fb950; }
.aq-input.is-wrong  { border-color: #f85149; }
.aq-explain {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--border);
    font-size: .82rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ── Cloze ──────────────────────────────────────────────────────────────── */
.ac-bank {
    display: flex; flex-wrap: wrap; gap: .45rem;
    padding: .9rem;
    margin-bottom: 1.1rem;
    background: var(--surface);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-lg, 14px);
}
.ac-word {
    font-family: var(--font-body);
    font-size: .84rem; font-weight: 600;
    padding: .32rem .75rem;
    border-radius: 99px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    transition: opacity .15s, border-color .15s, transform .1s;
}
.ac-word:hover:not(.used):not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.ac-word.picked { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
/* Used words stay visible rather than disappearing: a bank that shrinks as you
   work loses the overview of what is left, and hides where a word went. */
.ac-word.used { opacity: .28; cursor: default; text-decoration: line-through; }

.ac-text { font-size: 1rem; line-height: 2.4; }
.ac-line { margin-bottom: .5rem; }
.ac-gap {
    font-family: var(--font-body);
    font-size: .92rem;
    font-weight: 600;
    padding: .12rem .5rem;
    margin: 0 .12rem;
    border: none;
    border-bottom: 2px solid var(--accent);
    background: var(--accent-soft);
    color: var(--text);
    border-radius: 6px 6px 0 0;
    min-width: 4.5rem;
    cursor: pointer;
    transition: background .15s;
}
.ac-gap-slot:hover:not(.correct):not(.wrong) { background: var(--border); }
.ac-gap-input { cursor: text; }
.ac-gap-input:focus { outline: none; background: var(--border); }
.ac-gap.correct { border-bottom-color: #3fb950; background: rgba(63,185,80,.16); }
.ac-gap.wrong   { border-bottom-color: #f85149; background: rgba(248,81,73,.14); text-decoration: line-through; opacity: .75; }
.ac-answer {
    display: inline-block;
    margin-left: .3rem;
    padding: .1rem .45rem;
    border-radius: 6px;
    background: rgba(63,185,80,.16);
    color: #3fb950;
    font-size: .84rem;
    font-weight: 700;
}

/* ── Shadowing ──────────────────────────────────────────────────────────── */
.as-item {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    padding: .95rem 1.1rem;
    margin-bottom: .7rem;
    transition: border-color .2s;
}
.as-item.scored { border-color: var(--accent); }
.as-line { font-size: .98rem; line-height: 1.55; }
.as-speaker {
    display: inline-block;
    margin-right: .5rem;
    padding: .1rem .5rem;
    border-radius: 99px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: .1em;
}
.as-translation { font-size: .82rem; color: var(--text-dim); margin-top: .25rem; font-style: italic; }
.as-actions { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
/* M633: activity rows (shadow/quiz/cloze) keep their compact pill button —
   the full-size ds-btn recipe made every row taller and wrap at 375 px. */
.as-btn {
    font-family: var(--font-body);
    font-size: .78rem; font-weight: 600;
    min-height: 36px;
    padding: .35rem .8rem;
    border-radius: 99px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.as-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); transform: none; }
.as-btn:disabled { opacity: .45; cursor: not-allowed; }
.as-rec.recording { border-color: #f85149; color: #f85149; animation: as-pulse 1.2s ease-in-out infinite; }
@keyframes as-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
/* Respect a reduced-motion preference — a pulsing record button is exactly the
   kind of persistent animation that setting exists for. */
@media (prefers-reduced-motion: reduce) {
    .as-rec.recording { animation: none; }
    .aq-progress > span, .ac-progress > span { transition: none; }
}
.as-score {
    margin-left: auto;
    font-size: .78rem; font-weight: 800;
    padding: .2rem .6rem;
    border-radius: 99px;
}
.as-score.good { background: rgba(63,185,80,.16); color: #3fb950; }
.as-score.mid  { background: rgba(240,165,0,.16);  color: var(--accent-text); }
.as-score.low  { background: rgba(248,81,73,.14);  color: #f85149; }
.as-result { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--border); }
.as-heard { font-size: .82rem; color: var(--text-muted); margin-bottom: .5rem; }
.as-heard-label { font-weight: 700; color: var(--text-dim); }
.as-diff { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .88rem; }
.as-w { padding: .1rem .4rem; border-radius: 6px; }
.as-ok    { background: rgba(63,185,80,.16); color: #3fb950; }
.as-near  { background: rgba(240,165,0,.16); color: var(--accent-text); }
.as-miss  { background: rgba(248,81,73,.14); color: #f85149; }
.as-extra { background: var(--border); color: var(--text-dim); text-decoration: line-through; }
.as-note { font-size: .8rem; color: var(--text-dim); margin-top: .8rem; line-height: 1.6; }
.as-error { font-size: .82rem; color: #f85149; line-height: 1.5; }
.as-play-rec { display: block; margin-bottom: .6rem; }
.as-play-rec:hover:not(:disabled) { border-color: #3fb950; color: #3fb950; }
.as-analysis-score { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .82rem; margin-bottom: .65rem; }
.as-analysis-score strong { color: var(--accent-text); font-size: 1.1rem; }
.as-analysis-score span, .as-analysis-note { color: var(--text-muted); }
.as-chart { margin-top: .55rem; padding: .5rem .65rem; background: var(--surface-2); border-radius: 8px; }
.as-chart-label { display: flex; justify-content: space-between; gap: .5rem; color: var(--text); font-size: .76rem; font-weight: 700; }
.as-chart-label span { color: var(--text-dim); font-weight: 500; }
.as-chart svg { display: block; height: 4rem; width: 100%; margin-top: .25rem; overflow: visible; }
.as-analysis-empty { color: var(--text-dim); font-size: .8rem; margin-top: .5rem; }
.as-analysis-note { font-size: .78rem; margin-top: .6rem; }

/* ── Vocabulary match ─────────────────────────────────────────── */
/* Two columns on a desktop, stacked on a phone. The stack order matters: words
   first, then definitions, because the interaction is "pick a word, then pick
   its meaning" and a stacked layout that reversed them would read backwards. */
.av-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }
@media (max-width: 640px) { .av-grid { grid-template-columns: 1fr; } }
.av-col { display: flex; flex-direction: column; gap: .55rem; }

.av-word, .av-def {
    text-align: left;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    padding: .7rem .85rem;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s, opacity .15s;
}
.av-word:hover, .av-def:hover { border-color: var(--accent); }
.av-word.picked { border-color: var(--accent); background: var(--surface-2); }
.av-word.correct { border-color: #3fb950; }
.av-word.wrong   { border-color: #f85149; }
.av-term { display: block; font-weight: 700; font-size: 1rem; }
.av-context { font-size: .78rem; color: var(--text-dim); line-height: 1.5; margin-top: .3rem; }
.av-context mark { background: rgba(240,165,0,.22); color: inherit; border-radius: 4px; padding: 0 .15rem; }
.av-slot { display: block; font-size: .84rem; color: var(--accent-text); margin-top: .35rem; min-height: 1.1em; }
/* A used definition stays visible rather than vanishing: a column that shrinks
   as you work narrows the choice for the remaining items and turns the last
   pair into a freebie. Same reasoning as the cloze bank. */
.av-def.used { opacity: .4; }
.av-def:disabled { cursor: default; }
.av-progress, .ao-progress { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.av-progress > span { display: block; height: 100%; background: var(--accent); transition: width .25s; }
.av-submit, .ao-submit {
    background: var(--accent); color: var(--on-accent, #1b1b1b);
    border: none; border-radius: 10px; padding: .6rem 1.1rem;
    font: inherit; font-weight: 700; cursor: pointer;
}
.av-submit:disabled, .ao-submit:disabled { opacity: .45; cursor: default; }

/* ── Ordering ──────────────────────────────────────────────────── */
.ao-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ao-item {
    display: flex; align-items: flex-start; gap: .7rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    padding: .7rem .85rem;
    cursor: pointer;
    touch-action: pan-y;
    transition: border-color .15s, background .15s;
}
.ao-item:hover { border-color: var(--accent); }
.ao-item.picked { border-color: var(--accent); background: var(--surface-2); }
.ao-item.dragging { opacity: .45; cursor: grabbing; }
.ao-item.drag-before { box-shadow: 0 -3px 0 var(--accent); }
.ao-item.drag-after { box-shadow: 0 3px 0 var(--accent); }
.ao-item.correct { border-color: #3fb950; }
.ao-item.wrong   { border-color: #f85149; }
.ao-rank {
    flex: 0 0 auto; min-width: 1.6rem; height: 1.6rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .2rem;
    border-radius: 50%; background: var(--surface-2); color: var(--text-dim);
    font-size: .8rem; font-weight: 700;
}
/* After grading a moved item shows struck-through wrong rank then right rank,
   so the circle has to stop being a circle rather than clipping the pair. */
.ao-item.wrong .ao-rank { border-radius: 10px; padding: 0 .4rem; color: #f85149; }
.ao-text { flex: 1; font-size: .92rem; line-height: 1.55; }
.ao-moves { display: flex; flex-direction: column; gap: .2rem; }
.ao-up, .ao-down {
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 6px; width: 1.8rem; height: 1.2rem; line-height: 1; cursor: pointer; font-size: .6rem;
}
.ao-up:disabled, .ao-down:disabled { opacity: .3; cursor: default; }
.ao-hint { flex: 1; font-size: .78rem; color: var(--text-dim); }

/* ── Retell ─────────────────────────────────────────────────────────────── */
.ar-prompt { font-size: .92rem; color: var(--text-muted); margin-bottom: .7rem; }
.ar-mode { display: flex; gap: .4rem; margin-bottom: .7rem; }
.ar-mode-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); border-radius: 999px; padding: .3rem .7rem; font: inherit; font-size: .8rem; cursor: pointer; }
.ar-mode-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 700; }
.ar-minimum, .ar-audio-note { color: var(--text-dim); font-size: .78rem; line-height: 1.5; margin: 0 0 .6rem; }
.ar-audio { padding: .8rem; border: 1px dashed var(--border); border-radius: 10px; margin-bottom: .7rem; }
.ar-record { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: .45rem .7rem; font: inherit; cursor: pointer; }
.ar-preview { display: block; width: 100%; margin-top: .65rem; }
.ar-keywords { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.ar-kw {
    font-size: .78rem; padding: .2rem .55rem; border-radius: 999px;
    background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border);
    transition: background .2s, color .2s, border-color .2s;
}
/* A covered keyword lights up as it is used — the scaffold doubles as a
   checklist, which is the only reason to show it during writing at all. */
.ar-kw.hit { background: rgba(63,185,80,.16); color: #3fb950; border-color: #3fb950; }
.ar-input, .acb-input {
    width: 100%; box-sizing: border-box;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
    color: var(--text); font: inherit; padding: .7rem .8rem; line-height: 1.6; resize: vertical;
}
.ar-input:focus, .acb-input:focus { outline: none; border-color: var(--accent); }
.ar-count { font-size: .8rem; color: var(--text-dim); flex: 1; }
.ar-count.ok { color: #3fb950; font-weight: 600; }
.ar-submit, .acb-submit {
    background: var(--accent); color: var(--on-accent, #1b1b1b);
    border: none; border-radius: 10px; padding: .6rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer;
}
.ar-submit:disabled, .acb-submit:disabled { opacity: .45; cursor: default; }
.ar-report { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.ar-verdict { font-size: .87rem; line-height: 1.55; padding: .65rem .8rem; border-radius: 10px; }
.ar-verdict.warn { background: rgba(240,165,0,.12); border: 1px solid var(--accent); }
.ar-copied { margin-top: .4rem; font-style: italic; color: var(--text-dim); font-size: .82rem; }
.ar-cov { font-size: .87rem; color: var(--text-muted); }
.ar-mech-score { font-weight: 700; color: var(--accent-text); margin-right: .35rem; }
.ar-crit { display: grid; grid-template-columns: auto auto; gap: .2rem .6rem; align-items: baseline;
           padding: .55rem .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.ar-crit-name { font-weight: 700; font-size: .85rem; }
.ar-crit-score { font-size: .85rem; color: var(--accent-text); font-weight: 700; text-align: right; }
.ar-crit-fb { grid-column: 1 / -1; font-size: .82rem; color: var(--text-dim); line-height: 1.5; }
.ar-note { font-size: .84rem; color: var(--text-muted); line-height: 1.55; }
.ar-note.ok { color: #3fb950; }

/* ── Combine ────────────────────────────────────────────────────────────── */
.acb-item {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--radius-lg, 14px); padding: .9rem 1rem; margin-bottom: .8rem;
}
.acb-item.correct { border-color: #3fb950; }
.acb-item.partial { border-color: var(--accent); }
.acb-item.wrong   { border-color: #f85149; }
.acb-source { font-size: .9rem; line-height: 1.6; margin-bottom: .6rem; color: var(--text-muted); }
.acb-plus { display: inline-block; margin: 0 .4rem; color: var(--accent-text); font-weight: 700; }
.acb-hints { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.acb-hint {
    font-size: .76rem; padding: .18rem .5rem; border-radius: 999px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); font-family: inherit;
}
.acb-hint:hover { border-color: var(--accent); color: var(--text); }
.acb-warning { margin: -.1rem 0 .55rem; font-size: .76rem; line-height: 1.45; color: var(--text-dim); }
.acb-verdict { margin-top: .5rem; font-size: .84rem; color: var(--text-muted); line-height: 1.55; }
.acb-score { font-weight: 700; color: var(--accent-text); margin-right: .35rem; }

/* ── Session runner ─────────────────────────────────────────────────────── */
.asx-rail { list-style: none; display: flex; gap: .3rem; padding: 0; margin: 0 0 1.1rem; overflow-x: auto; }
.asx-dot {
    flex: 1 1 0; min-width: 3.4rem; text-align: center; padding: .45rem .3rem;
    border-radius: 10px; background: var(--surface); border: 1.5px solid var(--border);
    color: var(--text-dim); transition: border-color .2s, color .2s, background .2s;
}
.asx-dot.active { border-color: var(--accent); color: var(--text); background: var(--surface-2); }
.asx-dot.done   { border-color: #3fb950; color: #3fb950; }
.asx-ico { display: block; font-size: 1rem; }
.asx-label { display: block; font-size: .66rem; margin-top: .15rem; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.asx-step-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .8rem; }
.asx-step-n { font-size: .75rem; color: var(--text-dim); font-weight: 700; }
.asx-step-title { margin: 0; font-size: 1.05rem; }
.asx-foot { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.1rem; }
.asx-next, .asx-skip {
    border-radius: 10px; padding: .6rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer;
    background: var(--accent); color: var(--on-accent, #1b1b1b); border: none;
}
.asx-skip { background: transparent; color: var(--text-dim); border: 1px solid var(--border); font-weight: 500; }
.asx-summary { text-align: center; padding: 1.2rem 0; }
.asx-sum-head { display: flex; align-items: baseline; justify-content: center; gap: 1rem; }
.asx-sum-pct { font-size: 2.4rem; font-weight: 800; }
.asx-sum-pct.great { color: #3fb950; }
.asx-sum-pct.ok    { color: var(--accent-text); }
.asx-sum-pct.low   { color: #f85149; }
.asx-sum-xp { font-size: 1rem; font-weight: 700; color: var(--accent-text); }
.asx-sum-skills { display: flex; justify-content: center; gap: 1.2rem; margin-top: .7rem; flex-wrap: wrap; }
.asx-sum-skill-name { font-size: .78rem; color: var(--text-dim); display: block; }
.asx-sum-skill-score { font-size: .95rem; font-weight: 700; }
.asx-sum-steps { display: flex; justify-content: center; gap: .4rem; margin-top: .9rem; flex-wrap: wrap; }
.asx-sum-step { font-size: .75rem; padding: .2rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); }
.asx-sum-step.great { color: #3fb950; }
.asx-sum-step.ok    { color: var(--accent-text); }
.asx-sum-step.low   { color: #f85149; }
.asx-sum-step.skipped { opacity: .5; }

/* Shadowing (M406): score reasons, heard words, chart key, stored takes */
.as-reasons { margin: .2rem 0 .5rem 1rem; padding: 0; font-size: .8rem; color: var(--text-muted); }
.as-heard { font-size: .8rem; color: var(--text-dim); font-style: italic; margin-bottom: .4rem; }
.as-key { display: inline-block; width: .8rem; height: 2px; vertical-align: middle; margin: 0 .25rem 0 .6rem; }
.as-key-ref { background: var(--text-dim); }
.as-stored { display: inline-flex; gap: .35rem; }
.as-modal-head { display: flex; justify-content: space-between; align-items: center; }
.as-modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }
.as-modal-line { font-size: .85rem; color: var(--text-muted); margin: .4rem 0 .8rem; }
.as-modal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.as-modal-item { display: flex; align-items: center; gap: .6rem; font-size: .82rem; }
.as-modal-date { flex: 1; color: var(--text-muted); }

/* Vocab matching on a phone (M411, js/activity/vocab.js): definitions as a
   bottom sheet for the picked word. */
.av-sheet-head { display: none; }
.activity-vocab.av-compact .av-grid { display: block; }
.activity-vocab.av-compact .av-word { padding: .55rem .75rem; margin-bottom: .45rem; width: 100%; }
.activity-vocab.av-compact .av-context { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.activity-vocab.av-compact .av-defs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    max-height: 60vh; overflow-y: auto; margin: 0;
    padding: .75rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1.5px solid var(--accent); border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px rgba(0,0,0,.45);
    transform: translateY(105%); transition: transform .22s ease; display: grid; gap: .45rem;
}
.activity-vocab.av-compact.av-picking .av-defs { transform: translateY(0); }
.activity-vocab.av-compact .av-sheet-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: -.75rem; background: var(--surface); padding: .2rem 0 .4rem; }
.av-sheet-word { font-weight: 800; color: var(--accent-text); }
.av-sheet-close { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }
.activity-vocab.av-compact .av-def.used { opacity: .45; }

/* ── Session runner, focus flow (M472) ──────────────────────────────────
   One step at a time: a segmented progress bar replaces the tab-like rail
   (the rail stays in the DOM for tests and screen readers but collapses to
   thin segments), the action bar sticks to the thumb zone above the tab bar,
   and a short feedback sheet says how the last step went. Tokens only. */
.asx-progress { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: .6rem; }
.asx-progress > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width var(--dur-med, .25s) var(--ease-out, ease-out); }
.asx-rail { gap: .35rem; margin-bottom: 1rem; }
.asx-dot { min-width: 0; padding: .35rem .2rem .3rem; border-radius: 99px; border-width: 1px; }
.asx-ico { font-size: .9rem; }
.asx-label { display: none; }
.asx-dot.active .asx-label { display: block; }
.asx-dot.active { border-color: var(--accent); background: var(--accent-soft, var(--surface-2)); }
.asx-dot.done { border-color: color-mix(in srgb, var(--green, #3fb950) 60%, var(--border)); color: var(--green, #3fb950); }
.asx-step-head { align-items: center; }
.asx-step-n { padding: .15rem .55rem; border-radius: 99px; background: var(--surface-2); }
.asx-step-title { font-size: 1.2rem; }
.asx-next { min-height: 48px; padding: .7rem 1.6rem; border-radius: 99px; box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.asx-next:active { transform: translateY(1px); box-shadow: none; }
.asx-skip { min-height: 48px; border-radius: 99px; }
.asx-toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 280;
    display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem; border-radius: 16px; background: var(--surface); color: var(--text);
    border: 1px solid var(--border); box-shadow: var(--elev-2, 0 8px 30px rgba(0, 0, 0, .35)); font-weight: 700; font-size: .9rem; white-space: nowrap;
    animation: asx-pop var(--dur-med, .25s) var(--ease-spring, ease-out); }
.asx-toast[hidden] { display: none; }
.asx-toast b { color: var(--accent-text); }
.asx-toast.great { border-color: var(--green, #3fb950); }
.asx-toast.low { border-color: var(--red, #f85149); }
.asx-toast.skip { color: var(--text-dim); }
@keyframes asx-pop { from { opacity: 0; transform: translate(-50%, 12px); } }
.asx-sum-title { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin: 0 0 .6rem; }
@media (max-width: 768px) {
    .asx-foot { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 5; margin: 1.1rem -1rem 0; padding: .7rem 1rem;
        background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--border); }
    .asx-next { flex: 1; }
}
.asx-sum-fox { display: flex; justify-content: center; margin-bottom: .2rem; }

/* M639: the result toast wraps instead of running off a 320px screen. */
@media (max-width: 768px) {
    .asx-toast { white-space: normal; max-width: calc(100vw - 32px); }
}
/* M639: 16px on touch so iOS doesn't zoom the page when an answer box gets focus. */
@media (pointer: coarse) { .aq-input { font-size: 16px; } }

/* M642: inline gap inputs sit inside running text — no 44px box on phones */
@media (max-width:767px){input.ac-gap-input{min-height:0}}