/* Write from Dictation — only what section-shared.css and writing-practice.css do not already give. */

/* The stage itself (.speaking-audio-stage box + its children) is Repeat Sentence's, reused atom for
   atom — see the markup comment on #listeningAudioStage in index.html. This is only the spacing before
   the answer textarea below it, which RS gets for free from its own .speaking-answer-zone wrapper. */
.wfd-audio-stage {
    margin-bottom: var(--space-16);
}

/* Write from Dictation's own phase classes (is-idle/is-waiting/is-countdown/is-playing/is-played/
   is-review) never appear on Speaking's stage, so every rule here is #listeningAudioStage-scoped and
   can't leak into Repeat Sentence's box. */

/* D2 (owner, second live review 2026-09-22): "played" (pre-submit, after the one play has finished) no
   longer collapses the box on laptop/desktop — the earlier collapse-on-every-viewport version flickered
   and there is room, so the framed box stays exactly as is there (just the "Played" head + an inert round
   button). Only a narrow/mobile layout still falls back to a single compact eyebrow line — no border, no
   round button, no track — so the answer box stays visible above a phone keyboard. Same breakpoint as
   #listeningTaskSurface below and speaking-practice.css's #speakingRecordAgainButton (max-width: 767px).
   listening-practice.js always fills #listeningAudioStatus's text on "played" and always clears its
   [hidden] attribute then — CSS alone decides whether it's ever actually shown. */
@media (min-width: 768px) {
    #listeningAudioStage.is-played #listeningAudioStatus {
        display: none;
    }
}

@media (max-width: 767px) {
    #listeningAudioStage.is-played {
        border: none;
        padding: 0;
    }

    #listeningAudioStage.is-played .speaking-stage-live,
    #listeningAudioStage.is-played .speaking-prompt {
        display: none;
    }
}

/* "review" (after Check answer): the freely replayable player appears in every type — framed exactly like
   RS's own result screen (.speaking-stage-player is display:none by default, see speaking-practice.css).
   It sits after #listeningPromptMount in the markup, so it lands in the strip the progress track occupied
   while the clip played (listening-practice.js hides that track outside "playing"/"played"). */
#listeningAudioStage.is-review .speaking-stage-player {
    display: block;
}

/* What differs per type is whether the rest of the box survives the swap.
   Write from Dictation, Fill in the Blanks and Highlight Incorrect Words drop the head, the speaker and
   the label and leave the player alone in the box.
   Multiple Answers keeps them (owner, 2026-09-24: "не убирать этот динамик... просто нижнюю панель делать
   с плеером"): the stage is that screen's whole left column, so emptying it down to a bare player left a
   tall gap beside the options and made the column look like it had lost something. Keeping the face means
   only the bottom strip changes — the track becomes a player — and the column holds its shape.
   The MCMA scope is carried by #listeningTaskSurface, the stage's ancestor, so the other three types are
   reached by :not() and keep their current behaviour untouched. */
#listeningTaskSurface:not(.listening-mcma-scope) #listeningAudioStage.is-review .speaking-stage-live {
    display: none;
}

/* The round button is a play control only while the stage is "waiting" for a touch tap; every other
   state (countdown, playing, played, review, idle) leaves it present but visibly inert — WFD has no
   early-start feature, unlike RS's mic circle. */
#listeningStageButton:disabled {
    cursor: default;
    opacity: 0.7;
}

#listeningStageButton:disabled:hover {
    color: var(--text-secondary);
    border-color: var(--border-default);
}

/* Matches .pf-collapsible-summary (practice-feedback.css) exactly — same tokens, same literal
   size/tracking — so "Missed:" / "Misspelled:" read as the same small-caps label family as the
   "Sentence transcript" disclosure summary right below them. The colon stays in the string
   (listening-wfd.js); only the type treatment changes here. */
.wfd-missed-label {
    color: var(--text-secondary);
    font-size: 0.71875rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Write from Dictation has no criteria panel, so listening-wfd.js's renderFeedback() never builds the
   shared .methodical-layout--split shell — its blocks (missed words, strategy tip, model answer,
   skills) land as flat children of #listeningResult instead of inside the .methodical-left grid that
   gives every other result type the block-to-block gap. Reproduce that same rhythm directly with the
   token .methodical-left already uses, and the same breathing room .methodical-layout--split gives
   Writing/Speaking before the "Your history" divider (docs: A4 owner-fixes-A). */
#listeningResult > * + * {
    margin-top: var(--gap-feedback-block);
}

#listeningResult > *:last-child {
    margin-bottom: var(--space-24);
}

/* D3 (owner, second live review 2026-09-22): "Missed:" and "Misspelled:" read as one pair, so the gap
   between them steps down to --gap-feedback-heading (the same tighter, heading-to-body token
   .pf-collapsible already uses — practice-feedback.css) instead of the block-to-block
   --gap-feedback-block the generic rule above gives every other pair. The gap before Strategy tip (and
   everywhere else) is untouched. */
#listeningResult .wfd-missed + .wfd-missed {
    margin-top: var(--gap-feedback-heading);
}

/* A word the learner typed that isn't in the sentence (annotated-text.js EXTRA) is a different signal
   from a misspelling: not "wrong letters", but "this word doesn't belong". Warning, not danger — the
   same distinction Speaking already draws for an inserted word (speaking-practice.css
   .speaking-word--inserted) — with a dotted underline instead of spelling's wavy one. */
.spellmark.spellmark--extra {
    text-decoration-color: var(--warning-text);
    text-decoration-style: dotted;
}

.spellmark.spellmark--extra:hover,
.spellmark.spellmark--extra:focus-visible {
    background: var(--warning-fill);
}

/* Completion screen vertical centering — same as #writingCompletion / #speakingCompletion: no tall
   parent, so it takes the height itself and the shared .completion (justify-center) centers the
   content. */
#listeningCompletion {
    min-height: calc(100dvh - (var(--space-32) * 7));
}

.section-tab-group--listening {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Same content inset as Writing and Speaking; the card supplies the gutter on mobile. */
#listeningTaskSurface {
    padding: var(--space-20) var(--space-32) 0;
}

@media (max-width: 767px) {
    #listeningTaskSurface {
        padding-left: 0;
        padding-right: 0;
    }
}

/* A type's answer surface is hidden while another type is active. Explicit, because app-shell.css's
   [hidden] rule is nested and a class display can outrank it. */
#listeningWfdResponseBlock[hidden],
#listeningFibText[hidden],
#listeningHiwText[hidden],
#listeningMcmaArea[hidden] {
    display: none;
}

/* Fill in the Blanks — the transcript with its gaps. Reading's passage rhythm, so an input or a chip sits
   in the line without jolting it. */
.listening-fib-text {
    margin: 0 0 var(--space-16);
    color: var(--text-primary);
    font-size: var(--font-size-100);
    font-weight: var(--font-weight-regular);
    line-height: 2;
    letter-spacing: var(--tracking-soft-tightest);
}

/* The passage's own size (1rem): the typed word matches the text around it, and iOS Safari does not
   zoom on focus. Border, hover and focus tokens follow Reading's blank trigger. */
.listening-fib-input {
    min-height: var(--size-inline-gap-min-height);
    margin: 0 var(--space-3);
    padding: var(--space-2) var(--space-8);
    border: 1px solid var(--input-border-default);
    border-radius: var(--radius-inline-gap);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    line-height: 1.4;
    vertical-align: baseline;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.listening-fib-input:hover {
    border-color: var(--input-border-hover);
}

.listening-fib-input:focus,
.listening-fib-input:focus-visible {
    outline: none;
    border-color: var(--input-border-focus);
}

/* Highlight Incorrect Words — the transcript as clickable words. FIB's passage rhythm (line-height 2), so a
   word button sits in the line the same way FIB's input does. */
.listening-hiw-text {
    margin: 0 0 var(--space-16);
    color: var(--text-primary);
    font-size: var(--font-size-100);
    font-weight: var(--font-weight-regular);
    line-height: 2;
    letter-spacing: var(--tracking-soft-tightest);
}

.listening-hiw-word {
    margin: 0;
    padding: var(--space-3) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-inline-gap);
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.listening-hiw-word:focus-visible {
    outline: var(--border-focus-width) solid var(--accent-action);
    outline-offset: var(--space-2);
    border-radius: var(--radius-inline-gap);
}

/* Selected but not yet checked: the platform's own selection blue (the accent-action family the audio
   track and level fill use), not a semantic colour — picking a word does not yet mean right or wrong.
   Kept off the warning/success/danger palette entirely so only the post-check chips carry graded
   meaning; before checking, blue only ever means "this is what I picked". The exact pair Reading's
   drag-and-drop word button uses when you pick a word up (.dd-fib-word-button.selected) — full-strength
   border over the soft fill — so a word you have selected looks the same wherever the platform asks you
   to select one. */
.listening-hiw-word.is-selected {
    border-color: var(--accent-action);
    background: var(--accent-action-soft-bg);
}

/* Inside the green "found" chip, the word on screen is struck but not red — it is the learner's success. */
.listening-hiw-chip-shown {
    color: var(--text-muted);
    text-decoration-line: line-through;
    text-decoration-thickness: 0.5px;
}

/* A wrong click: the word was right, so it is red but not struck. */
.listening-hiw-chip-word {
    color: var(--danger-text);
}

/* Multiple Choice, Multiple Answers — Reading's Multiple answers screen with the audio stage where Reading
   puts its passage: the stage on the left, the question with its checkbox options on the right, and the
   options staying put and taking their colour after Check answer. Reading's own rules are scoped under
   #readingWorkspaceRoot.multiple-answers-scope #question and cannot be reached from Listening markup, so
   they are repeated here with the same tokens rather than imported — Reading carries five task types and
   is not being re-cut for this. Promoting the pair into section-shared.css is a separate cleanup slice
   (backlog.md). */
#listeningMcmaArea {
    margin: var(--space-8) 0 var(--space-16);
}

/* The question is the anchor: the largest type on the screen, and the only medium weight here. */
.listening-mcma-prompt {
    margin: 0 0 var(--space-12);
    color: var(--text-primary);
    font-size: var(--text-body-large-size);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: var(--tracking-soft-tight);
}

/* The two-column screen, above 1024px only. The audio stage takes the place Reading gives its passage;
   the question, its options and the action row sit beside it; everything from the error line down spans
   both columns. Proportions are Reading's own (#question.mcq-layout, reading-practice.css). The scope
   class is added by listening-mcma.js's mount() and removed by its hide() — nothing else touches it — so
   Write from Dictation, Fill in the Blanks and Highlight Incorrect Words keep the plain stack they share
   this surface with. The three sibling answer blocks carry [hidden] (display:none above), so they take no
   grid slot. At 1024px and below there is no grid at all: the single stack is the mobile layout.

   The two columns line up with the result's own two below them (owner, 2026-09-24): the options column
   is exactly as wide as "Why others are wrong". practice-feedback.css splits the result as
   1fr | divider | 1fr with a --space-28 gap either side of the divider, so equal columns with a gap of
   two of those plus the divider put both edges of the options column on the edges of that column. */
@media (min-width: 1025px) {
    #listeningTaskSurface.listening-mcma-scope {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "instr instr"
            "stage opts"
            "sub sub";
        --mcma-row-gap: var(--space-16);
        row-gap: var(--mcma-row-gap);
        column-gap: calc(var(--space-28) * 2 + var(--border-width-default));
    }

    /* Every participating child is placed by hand: an unplaced one would auto-place and break the grid. */
    #listeningTaskSurface.listening-mcma-scope .prompt-service-row {
        grid-area: instr;
    }

    /* The stage must not stretch to the height of a six-option list. */
    #listeningTaskSurface.listening-mcma-scope #listeningAudioStage {
        grid-area: stage;
        align-self: start;
        margin-bottom: 0;
    }

    #listeningTaskSurface.listening-mcma-scope #listeningMcmaArea {
        grid-area: opts;
        align-self: start;
        margin: 0;
    }

    /* The other three types' answer surfaces share this surface and sit between the stage and the options
       in document order. They carry [hidden] (display: none above) whenever MCMA is mounted, so they take
       no slot in practice — but that is a runtime invariant, not a structural one. Naming the same slot
       they would occupy if they ever showed keeps the grid correct by construction instead of by luck.
       No new row: an empty named row would still draw the row gap. */
    #listeningTaskSurface.listening-mcma-scope #listeningWfdResponseBlock,
    #listeningTaskSurface.listening-mcma-scope #listeningFibText,
    #listeningTaskSurface.listening-mcma-scope #listeningHiwText {
        grid-area: opts;
    }

    /* Full width, under both columns — the action band is one block across the screen in every other task
       type, and .writing-actions draws its divider as its own border-top, so a row confined to the right
       column drew a half-width line (owner, 2026-09-24). Spanning both columns puts the keyboard hint at
       the far left, the divider across the whole width and the buttons clustered right, exactly as
       Writing, Reading and the other Listening types already read. The row's own margins would double the
       grid gap. */
    #listeningTaskSurface.listening-mcma-scope .actions {
        grid-area: sub;
        align-self: start;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Below the action row, rows exist only for what is on screen. Named rows for the error line, the
       result and the history drew their row gap even while empty, so the hidden error line doubled the
       space between the action row and the Result Row (owner, 2026-09-24). Spanning both columns with
       no area auto-places each one after the action row, and a [hidden] one makes no row at all. */
    #listeningTaskSurface.listening-mcma-scope #listeningError,
    #listeningTaskSurface.listening-mcma-scope #listeningResult,
    #listeningTaskSurface.listening-mcma-scope #listeningAttemptsPanel {
        grid-column: 1 / -1;
    }

    /* The gap between the result and the "Your history" divider is --space-24 in every task type: the
       result's own bottom margin (block flow). Here the grid row-gap comes on top of that margin, so the
       margin is dropped and the panel takes only what the row-gap does not already give (owner, 2026-09-26). */
    #listeningTaskSurface.listening-mcma-scope #listeningResult > *:last-child {
        margin-bottom: 0;
    }

    #listeningTaskSurface.listening-mcma-scope #listeningResult:not([hidden]) + #listeningAttemptsPanel {
        margin-top: max(0px, calc(var(--space-24) - var(--mcma-row-gap)));
    }
}

@media (min-width: 1200px) {
    #listeningTaskSurface.listening-mcma-scope {
        --mcma-row-gap: var(--space-12);
    }
}

@media (min-width: 1440px) {
    #listeningTaskSurface.listening-mcma-scope {
        --mcma-row-gap: var(--space-22);
    }
}

#listeningMcmaOptions {
    display: grid;
    gap: var(--space-6);
}

/* The option row itself. app-shell.css already carries .option-label, .selected, the four review-* states
   and .option-review-note with its three state-* variants, unscoped — they apply here as they do in
   Reading. What follows is only Reading's refinement on top (reading-practice.css, scoped to
   #readingWorkspaceRoot.multiple-answers-scope and so unreachable from Listening markup), repeated here
   under the same tokens. Promoting the pair into section-shared.css is a separate cleanup slice
   (backlog.md).
   The whole row is the hit target; the real checkbox lies invisible across it so Tab and Space still
   work. The right padding is the seat of the review note, which is positioned into it. */
#listeningMcmaArea .option-label {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: flex-start;
    gap: var(--space-12);
    padding: var(--space-10) var(--space-13);
    padding-right: var(--space-80);
    border: var(--border-width-default) solid transparent;
    border-radius: var(--space-7);
    background: transparent;
}

/* Two things Reading's row does not need and this one does. The rows are checkboxes on the section's
   phone-heaviest surface, so the hit target keeps the 44px floor it had before the rebuild; and because
   the whole row is a <label>, iOS Safari would otherwise flash its grey tap highlight across the entire
   row on every tick. */
#listeningMcmaOptions .option-label {
    min-height: var(--space-44);
    -webkit-tap-highlight-color: transparent;
}

#listeningMcmaArea .option-label input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

#listeningMcmaArea .option-label:has(input:focus-visible) {
    outline: var(--border-width-strong) solid var(--accent-action);
    outline-offset: var(--space-2);
}

#listeningMcmaArea .option-control {
    width: var(--space-16);
    height: var(--space-16);
    margin-top: var(--space-2);
    border: var(--border-width-accent) solid var(--warm-gray-strong);
    border-radius: var(--space-4);
    background: var(--bg-page);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex: 0 0 auto;
}

#listeningMcmaArea .option-control-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#listeningMcmaArea .option-control-icon svg {
    width: var(--space-10);
    height: var(--space-10);
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Single answer's dot: the tick box's frame made round, with a dot where the tick sits. The state
   rules below colour the frame; the radio variants after them keep its middle the page colour and
   paint the dot instead, so a chosen row reads as a radio button, not a filled box. */
#listeningMcmaArea .option-control--radio {
    border-radius: 50%;
}

#listeningMcmaArea .option-control-dot {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    background: currentColor;
}

/* 15px, Reading's Single answer size (reading-practice.css, its last .option-copy rule): Listening's
   rows had Reading's Multiple answers 14.5px and read smaller beside it (owner, 2026-09-24). */
#listeningMcmaArea .option-letter {
    min-width: var(--space-20);
    color: var(--text-primary);
    font-size: var(--space-15);
    font-weight: var(--font-weight-medium);
    line-height: 1.55;
}

#listeningMcmaArea .option-copy {
    color: var(--text-primary);
    font-size: var(--space-15);
    font-weight: var(--font-weight-regular);
    line-height: 1.55;
    letter-spacing: var(--tracking-soft-tightest);
}

/* Highlight Correct Summary: the options are 35–70-word paragraphs, so they get a reading line-height and
   more air between them. Spacing, not frames, keeps them apart — the same flat list as the other two modes. */
#listeningMcmaArea.listening-mcma-area--paragraphs .option-copy {
    line-height: 1.6;
}

#listeningMcmaArea.listening-mcma-area--paragraphs #listeningMcmaOptions {
    gap: var(--space-12);
}

/* After Check answer the inputs are disabled: the row is a readout, so it stops offering itself — the
   hover tint is gated on an enabled input rather than switched off afterwards, which would outrank the
   review colours. */
#listeningMcmaArea .option-label:has(input:not(:disabled)):hover {
    background: var(--warm-gray-soft);
}

#listeningMcmaArea .option-label:has(input:disabled) {
    cursor: default;
}

#listeningMcmaArea .option-label input:disabled {
    cursor: default;
}

/* Ticked but not yet checked: a border alone, no fill — picking an option does not yet mean right or
   wrong, so the row stays the colour of the page.

   Reading's selected row renders `transparent`, and this screen matches it deliberately (owner,
   2026-09-24). Reading arrives there by accident: `.option-label.selected` is declared four times in its
   single-answer scope at equal specificity with three different backgrounds, and the last one in the file
   wins with `transparent`. The accident is the look the owner wants, so it is written here as an
   intention. When the cross-section option-colour cleanup in backlog.md settles the palette, this rule is
   the one to reconcile against, not the four in reading-practice.css.

   box-shadow: none keeps the row off app-shell.css's unscoped `inset 0 0 0 1px rgba(21, 101, 192, 0.14)`,
   a raw colour rather than a token. It was never the cause of the blue the owner saw — that was the fill
   on the line below. */
#listeningMcmaArea .option-label.selected {
    background: transparent;
    border-color: var(--accent-action-soft-border-subtle);
    box-shadow: none;
}

#listeningMcmaArea .option-label.selected .option-control {
    background: var(--accent-action);
    border-color: var(--accent-action);
    color: var(--text-on-emphasis);
}

/* An answer the learner found. */
#listeningMcmaArea .option-label.review-selected-correct {
    background: var(--success-fill);
    border-color: var(--success-fill-darker);
    box-shadow: none;
}

#listeningMcmaArea .option-label.review-selected-correct .option-control {
    background: var(--success-text);
    border-color: var(--success-text);
    color: var(--success-fill);
}

#listeningMcmaArea .option-label.review-selected-correct .option-letter {
    color: var(--success-text-stronger);
}

/* An answer the learner did not find — the one to look at first: the dashed warning row with a hollow
   control. Reading paints this with inline styles (applyInlineMissedMultipleStyles); the same result is
   expressed here as plain CSS, so this screen carries no inline styles. */
#listeningMcmaArea .option-label.review-missed-correct,
#listeningMcmaArea .option-label.review-missed-correct-multiple {
    background: var(--warning-fill);
    border-color: var(--warning-border-strong);
    border-style: dashed;
    border-width: var(--border-width-accent);
    box-shadow: none;
}

#listeningMcmaArea .option-label.review-missed-correct .option-control,
#listeningMcmaArea .option-label.review-missed-correct-multiple .option-control {
    background: var(--bg-page);
    border-color: var(--warning-text);
    border-style: dashed;
    color: transparent;
}

#listeningMcmaArea .option-label.review-missed-correct .option-letter,
#listeningMcmaArea .option-label.review-missed-correct-multiple .option-letter {
    color: var(--warning-text-dark);
}

/* Not an answer, but the learner ticked it — the one that took a point off. */
#listeningMcmaArea .option-label.review-selected-incorrect {
    background: var(--danger-fill);
    border-color: var(--danger-fill-darker);
    box-shadow: none;
}

#listeningMcmaArea .option-label.review-selected-incorrect .option-control {
    background: var(--danger-text);
    border-color: var(--danger-text);
    color: var(--danger-fill);
}

#listeningMcmaArea .option-label.review-selected-incorrect .option-letter {
    color: var(--danger-text);
}

#listeningMcmaArea .option-label.selected .option-control--radio {
    background: var(--bg-page);
    color: var(--accent-action);
}

#listeningMcmaArea .option-label.review-selected-correct .option-control--radio {
    background: var(--bg-page);
    color: var(--success-text);
}

#listeningMcmaArea .option-label.review-selected-incorrect .option-control--radio {
    background: var(--bg-page);
    color: var(--danger-text);
}

/* The one word each row says about itself, seated in the right padding. */
#listeningMcmaArea .option-review-note {
    position: absolute;
    top: var(--space-11);
    right: var(--space-13);
    margin-left: 0;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-065625);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

#listeningMcmaArea .option-review-note.state-correct {
    background: var(--success-fill-stronger);
    color: var(--success-text-stronger);
    border: var(--border-width-default) solid var(--success-border);
}

#listeningMcmaArea .option-review-note.state-missed {
    background: var(--warning-fill);
    color: var(--warning-text-dark);
    border: var(--border-width-default) solid var(--warning-border-strong);
}

#listeningMcmaArea .option-review-note.state-incorrect {
    background: var(--danger-fill-stronger);
    color: var(--danger-text);
    border: var(--border-width-default) solid var(--danger-border);
}

/* The feedback column beside the learning notes. practice-feedback.css scopes the .methodical-option-*
   shell to #listeningResult but gives the chip and the status line no colour of their own, so both used
   to fall through to the UNSCOPED rules in reading-practice.css (.methodical-option-chip at ~1467,
   .methodical-option-status.correct / .incorrect at ~1494/1498). Those reach for --pte-success-600,
   --pte-danger-600 and --color-blue-600, which tokens.css labels "Legacy compatibility aliases for
   partially migrated Reading screens" — the bright accent palette, not the muted one the result
   surfaces use. Reading never shows it because its own multiple-answers scope overrides all three; this
   result had no such override, so it rendered a bright red/green on a blue chip.

   These rules are that override, in the same tokens Reading lands on. The chip carries the row's status
   too (owner, 2026-09-24: the letter should be coloured like the verdict, not left a blue pill). Reading
   needs no "correct" colour because it filters its list down to the wrong and the missed; this column
   shows every option, so --success-text is the one value Reading never had to choose. */
#listeningResult .methodical-option-status.correct {
    color: var(--success-text);
}

#listeningResult .methodical-option-status.incorrect {
    color: var(--danger-text);
}

#listeningResult .methodical-option-status.missed {
    color: var(--warning-text);
}

#listeningResult .methodical-option-chip--correct {
    background: var(--success-fill);
    color: var(--success-text);
}

#listeningResult .methodical-option-chip--incorrect {
    background: var(--danger-fill);
    color: var(--danger-text);
}

#listeningResult .methodical-option-chip--missed {
    background: var(--warning-fill);
    color: var(--warning-text-dark);
}

/* The learner's own wrong pick is marked by its status line, not by a tinted row: the shared shell
   already leaves .methodical-option-item flat, and Reading pins the same thing in its own scope. */
#listeningResult .methodical-option-item--user-choice {
    background: transparent;
}