/* Mental Math Trainer (RT-FUN-110).
 *
 * Layout notes that matter:
 *  - Every panel that swaps (setup / drill / results) sits in a container with
 *    a reserved min-height, so starting and finishing a drill does not shift
 *    the page. The question area in particular must not move: the answer box
 *    has to stay under the user's cursor between questions.
 *  - The question glyph is a fixed height regardless of operand width, so
 *    "7 + 8" and "487 + 926" do not resize the box.
 *  - Tabular numerals everywhere a number changes, or the timer visibly
 *    jitters as digits change width.
 */

.mmt-stage {
    min-height: 20rem;
    border-radius: 12px;
    background: var(--rt-result-bg);
    color: var(--rt-result-ink);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
}

.mmt-question {
    font-size: 2.6rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mmt-answer-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: .35rem;
}

.mmt-answer-row input[type="text"] {
    width: 8.5rem;
    font-size: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Fixed height: this line appears and clears on every question. */
.mmt-feedback {
    min-height: 1.9rem;
    font-size: .88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rt-result-muted);
}

.mmt-feedback.is-right { color: #7fd6a6; }
.mmt-feedback.is-wrong { color: #ffb3a3; }

.mmt-meter {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--rt-result-muted);
    margin-bottom: .25rem;
}

.mmt-meter b {
    color: var(--rt-result-ink);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
}

.mmt-setup {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.mmt-setup .field { display: flex; flex-direction: column; gap: .25rem; }
.mmt-setup label { font-size: .74rem; font-weight: 600; color: var(--rt-ink-soft); }

.mmt-ops { display: flex; flex-wrap: wrap; gap: .5rem; }

.mmt-ops label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--rt-ink, #1a1814);
}

.mmt-modes { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* ── Results ──────────────────────────────────────────────────────────── */

.mmt-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .6rem;
    width: 100%;
    margin-top: .5rem;
}

.mmt-stat {
    background: rgba(255, 255, 255, .07);
    border-radius: 10px;
    padding: .6rem .5rem;
}

.mmt-stat .v {
    font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
    color: var(--rt-result-ink);
}

.mmt-stat .l {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rt-result-muted);
}

.mmt-weak {
    margin-top: .85rem;
    width: 100%;
    text-align: left;
}

.mmt-weak h4 {
    font-size: .78rem;
    color: var(--rt-result-muted);
    margin: 0 0 .35rem;
    font-weight: 600;
}

.mmt-weak ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }

.mmt-weak li {
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, .09);
    border-radius: 999px;
    padding: .2rem .6rem;
    color: var(--rt-result-ink);
}

/* Streak strip sits on the LIGHT surface below the card, so it uses the
   light-surface token, not the result-box one. */
.mmt-streak {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--rt-ink-soft);
    margin-top: .75rem;
    justify-content: center;
}

.mmt-streak b { color: var(--rt-ink, #1a1814); font-variant-numeric: tabular-nums; }

.mmt-note {
    font-size: .76rem;
    color: var(--rt-ink-soft);
    margin-top: .6rem;
    min-height: 1.4rem;
    text-align: center;
}

@media (max-width: 480px) {
    .mmt-question { font-size: 2.1rem; }
    .mmt-stage { min-height: 18rem; }
    .mmt-answer-row input[type="text"] { width: 7rem; font-size: 1.3rem; }
}