/**
 * Math Practice Widget styles
 *
 * No !important, no hardcoded URLs. Interactive + typographic selectors are
 * prefixed with `.math-practice-root` to beat Elementor kit specificity the
 * clean way. Touch targets >= 44px; mobile-first breakpoints at 768 / 480px.
 *
 * Design language (from the source demo): ONE action color (the family blue)
 * = anything you touch. Static = quiet neutral. GOLD = the ten moment only.
 */

/* ====================================================================== */
/* ROOT + CONTAINER                                                       */
/* ====================================================================== */

.math-practice-root {
    --mp-accent: #2563eb;
    --mp-accent-deep: #1e40af;
    --mp-accent-soft: #dbeafe;
    --mp-success: #16a34a;
    --mp-success-soft: #f0fdf4;
    --mp-danger: #dc2626;
    --mp-danger-soft: #fef2f2;
    --mp-gold: #e6ae2e;
    --mp-gold-soft: #faedc4;
    --mp-fill: #bfdbfe;
    --mp-cell: #eef3f8;
    --mp-cell-line: #d6deea;
    --mp-text: #1f2937;
    --mp-text-muted: #64748b;
    --mp-border: #e5e7eb;
    --mp-bg-panel: #f8fafc;
    --mp-radius: 12px;
    /* Header v3 geometry: align the merged header card to this widget's
       720px container (fleet polish item 2) */
    --as-header-max: 720px;

    font-family: var(--as-font);
    color: var(--mp-text);
    box-sizing: border-box;
}

.math-practice-root *,
.math-practice-root *::before,
.math-practice-root *::after {
    box-sizing: inherit;
}

.math-practice-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 20px;
    background: #ffffff;
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border);
}

.math-practice-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--mp-text-muted);
}

.math-practice-loading .loading-spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    border: 3px solid var(--mp-border);
    border-top-color: var(--mp-accent);
    border-radius: 50%;
    animation: mp-spin 0.8s linear infinite;
}

@keyframes mp-spin { to { transform: rotate(360deg); } }

/* ====================================================================== */
/* MERGED HEADER ADAPTATIONS                                              */
/* universal-header renders the chrome; these scope math's flavor of it.  */
/* ====================================================================== */

/* Directive-blue instruction band is now the header v3 DEFAULT
   (universal-header.css .te-mh-instruction) — no local override needed. */

/* Op toggle + level picker inside the ⚙ Options panel: compact wrap row */
.math-practice-root .te-mh-settings .mp-picker {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0;
}

.math-practice-root .te-mh-settings .mp-op-toggle {
    width: auto;
    min-width: 240px;
    max-width: 320px;
}

/* Match the dropdown's compact 44px height inside the settings row. */
.math-practice-root .te-mh-settings .mp-op-btn { min-height: 44px; padding: 10px 16px; }

.math-practice-root .te-mh-settings .mp-level-select { min-width: 240px; min-height: 44px; }

/* Visible picker on the session-complete screen (level-hopping moment) */
.mp-complete-picker { margin-bottom: 16px; }

/* ====================================================================== */
/* LEGACY HEADER — login screen + no-universal-header fallback only       */
/* ====================================================================== */

.mp-header {
    margin-bottom: 16px;
}

.math-practice-root .mp-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--mp-text);
    text-align: center;
}

/* operation toggle — the first choice: Addition vs Subtraction */
.mp-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mp-op-toggle {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 360px;
}

.math-practice-root .mp-op-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    min-height: 48px;
    border: 2px solid var(--mp-border);
    border-radius: 12px;
    background: #ffffff;
    color: var(--mp-text-muted);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.math-practice-root .mp-op-btn:hover { border-color: var(--mp-accent); color: var(--mp-accent); }

.math-practice-root .mp-op-btn.active {
    background: var(--mp-accent);
    border-color: var(--mp-accent);
    color: #ffffff;
}

.mp-op-sym { font-size: 20px; font-weight: 800; line-height: 1; }

.mp-level-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.mp-picker .mp-level-row { margin-bottom: 0; }

.mp-level-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--mp-text);
    letter-spacing: 0.3px;
}

.math-practice-root .mp-level-select {
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    padding: 10px 34px 10px 14px;
    min-width: 320px;
    max-width: 100%;
    min-height: 44px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Muted gray chevron (fleet) — the old dark-navy triangle read heavy. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color 0.15s ease;
}

.math-practice-root .mp-level-select:hover { border-color: #cbd5e1; }

/* Fleet focus: thin inset blue outline, no heavy 2px blue border + glow. */
.math-practice-root .mp-level-select:focus {
    outline: 2px solid #3b82f6;
    outline-offset: -1px;
    border-color: var(--mp-border);
}

/* Support ladder is now driven entirely by the footer 💡 Hint button
   (one press = one rung more supportive) — no visible tab strip. */

/* ====================================================================== */
/* BODY + EQUATION                                                        */
/* ====================================================================== */

.mp-body { margin: 8px 0 0; }

.mp-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mp-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
}

.mp-eq-num { color: var(--mp-text); }
.mp-eq-op { color: var(--mp-text-muted); }

.mp-eq-answer {
    min-width: 64px;
    text-align: center;
    color: var(--mp-text-muted);
    opacity: 0.55;
}

.mp-eq-answer.solved { color: var(--mp-success); opacity: 1; }
.mp-eq-answer.revealed { color: var(--mp-accent); opacity: 1; }

/* Inline answer field (Numbers view): replaces the "?" right in the equation
   row — a small box just wide enough for a number, no giant workspace panel.
   Green = "where you act" (fleet action token). */
.math-practice-root .mp-eq-input {
    width: 100px;
    max-width: 100px;
    height: 66px;
    font-family: inherit;
    font-size: 40px;
    font-weight: 800;
    text-align: center;
    color: var(--as-action-text);
    border: 3px solid var(--as-action-border);
    border-radius: 14px;
    background: var(--as-action-bg);
    padding: 0 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.math-practice-root .mp-eq-input::placeholder { color: #6ee7b7; opacity: 1; }

.math-practice-root .mp-eq-input:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

/* Fleet audio button: quiet circular affordance next to the stimulus
   (matches clock-practice's cp-prompt-audio-btn). */
.math-practice-root .mp-speak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--mp-bg-panel);
    border: 1.5px solid var(--mp-border);
    border-radius: 50%;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.math-practice-root .mp-speak-btn:hover {
    border-color: var(--mp-accent);
    background: #eff6ff;
    transform: scale(1.05);
}

.math-practice-root .mp-speak-btn:active { transform: scale(0.95); }

/* ====================================================================== */
/* SCAFFOLD PANEL                                                         */
/* ====================================================================== */

/* The workspace panel is self-contained: manipulables (counter ball,
   Start over) render INSIDE it, and the height is FIXED — every view at
   every level fits 250px (tenframe gated to ≤20 = max 2 frames, nl-track
   210), so switching support levels never moves the rows below. */
.mp-scaffold {
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 20px;
    background: var(--mp-bg-panel);
    border: 1px solid var(--mp-border);
    border-radius: 18px;
}

/* Keyed per view: tool swaps fade in instead of hard-replacing. */
.mp-scaffold-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    animation: mp-view-fade 0.15s ease-out;
}

@keyframes mp-view-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---- ten-frame (concrete) ---- */
.mp-tenframe { display: grid; place-items: center; gap: 20px; }

.mp-frames {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

.mp-frame {
    display: grid;
    grid-template-columns: repeat(5, 46px);
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    outline: 3px solid transparent;
    transition: background 0.2s ease, outline-color 0.2s ease;
}

.mp-frame.flashing {
    background: var(--mp-gold-soft);
    outline-color: var(--mp-gold);
}

.mp-cell {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    border: 2px solid var(--mp-cell-line);
    background: var(--mp-cell);
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.mp-cell.filled { background: var(--mp-fill); border-color: #9fc2f3; }

.mp-cell.removable {
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
}

/* counter source (add) — horizontal row; Start-over space always reserved */
.mp-counter-source {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.math-practice-root .mp-counter-ball {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: #10b981;
    cursor: grab;
    touch-action: none;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    animation: mp-pulse-ball 2s infinite;
}

.math-practice-root .mp-counter-ball:active { cursor: grabbing; }

@keyframes mp-pulse-ball {
    0%, 100% { box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 4px 22px rgba(16, 185, 129, 0.65); }
}

.mp-counter-hint { font-size: 13px; color: var(--mp-text-muted); }
.mp-counter-hint-sub { min-height: 30px; display: flex; align-items: center; }

.math-practice-root .mp-reset-btn {
    background: none;
    border: none;
    color: var(--mp-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 6px 10px;
    min-height: 32px;
}

.math-practice-root .mp-reset-btn:hover { color: var(--mp-accent); }

/* Idle = nothing to undo: invisible but still occupying its slot, so the
   row never resizes when the button becomes available. */
.math-practice-root .mp-reset-btn.is-idle { visibility: hidden; }

.mp-drag-clone {
    position: fixed;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #10b981;
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* ---- number line (representational) ---- */
.mp-numberline {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

/* Track height lives HERE only (JS positions in percentages). Sized so the
   handle at max value (-25px overhang) stays inside the panel's clip box. */
.mp-nl-track {
    position: relative;
    width: 110px;
    height: 200px;
    margin-left: 34px;
}

.mp-nl-line {
    position: absolute;
    left: 0;
    height: 1px;
    background: var(--mp-border);
}

.mp-nl-line.major {
    height: 2px;
    background: var(--mp-cell-line);
}

.mp-nl-label {
    position: absolute;
    right: calc(100% + 8px);
    top: -11px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mp-text-muted);
}

.mp-nl-start {
    position: absolute;
    left: 58%;
    right: 6px;
    height: 2px;
    background: #a7f3d0;
}

.mp-nl-fill {
    position: absolute;
    left: 62%;
    width: 8px;
    border-radius: 5px;
    background: #d1fae5;
}

.math-practice-root .mp-nl-handle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 50px;
    border-radius: 13px;
    background: #10b981;
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 25px;
    font-weight: 800;
    cursor: grab;
    box-shadow: 0 5px 16px rgba(16, 185, 129, 0.4);
    touch-action: none;
    user-select: none;
}

.math-practice-root .mp-nl-handle:active { cursor: grabbing; }

.mp-nl-steppers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.math-practice-root .mp-step {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid var(--mp-border);
    background: #ffffff;
    color: var(--mp-text-muted);
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.math-practice-root .mp-step:hover { border-color: #10b981; color: #047857; }

/* ---- abstract (bare equation) ---- */
/* No workspace panel: the answer field is inline in the equation row
   (.mp-eq-input, defined up in the EQUATION section). */

/* ---- choices (MC) ---- */
.mp-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 360px;
}

.math-practice-root .mp-choice-btn {
    padding: 18px 12px;
    min-height: 64px;
    background: #ffffff;
    border: 2px solid var(--mp-border);
    border-radius: 12px;
    font-family: inherit;
    font-size: 26px;
    font-weight: 800;
    color: var(--mp-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.math-practice-root .mp-choice-btn:hover:not(:disabled) {
    border-color: #10b981;
    background: #ecfdf5;
    color: #047857;
}

.math-practice-root .mp-choice-btn:disabled { cursor: default; }

.math-practice-root .mp-choice-btn.correct {
    background: var(--mp-success-soft);
    border-color: var(--mp-success);
    color: var(--mp-success);
}

.math-practice-root .mp-choice-btn.wrong {
    background: var(--mp-danger-soft);
    border-color: var(--mp-danger);
    color: var(--mp-danger);
}

.math-practice-root .mp-choice-btn.reveal {
    background: var(--mp-success-soft);
    border-color: var(--mp-success);
    color: var(--mp-success);
    animation: mp-reveal 0.6s ease;
}

@keyframes mp-reveal {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ====================================================================== */
/* MAKE-A-TEN WALKTHROUGH                                                 */
/* Trigger = a final press of the footer 💡 Hint when already on the most */
/* supportive view. The walkthrough card borrows the action-slot +        */
/* try-line footprint (94px) — zero shift.                                */
/* ====================================================================== */

/* slot-region card: height = action-slot 56 + board gap 12 + try-line 26.
   Amber hint-box family (gold stays for the in-frame "ten moment" only). */
.mp-how-card {
    width: 100%;
    height: 94px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 18px;
    background: #fffbeb;
    border: 2px solid #fde68a;
    border-radius: 16px;
}

.mp-how-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mp-howto-expr {
    font-size: 24px;
    font-weight: 800;
    color: var(--mp-text);
    line-height: 1.1;
}

.mp-gold-num { color: var(--mp-gold); }
.mp-act-num { color: var(--mp-accent); }

.mp-howto-caption { font-size: 13px; color: var(--mp-text-muted); }

.math-practice-root .mp-howto-next {
    flex-shrink: 0;
    padding: 12px 22px;
    min-height: 48px;
    border: none;
    border-radius: 14px;
    background: #10b981;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.math-practice-root .mp-howto-next:hover { background: #059669; color: #ffffff; }

/* ====================================================================== */
/* ACTION/FEEDBACK SLOT + TRY-LINE                                        */
/* One fixed home: Check lives here; on resolve the feedback card         */
/* REPLACES it in the same slot (tap = advance early). Reserved-empty in  */
/* Choices view so the slot never collapses. The try-line is a fixed      */
/* 26px lane for "Not yet — try again".                                   */
/* ====================================================================== */

.mp-action-slot {
    min-height: 56px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Primary CTA = compact SOLID fleet green (--as-primary-bg), white text —
   the single primary action on screen. !important: the kit contests button
   backgrounds with per-property !important (see feedback-card note). */
.math-practice-root .mp-check-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 36px;
    min-height: 48px;
    border: none;
    border-radius: 9999px;
    background: var(--as-primary-bg) !important;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    animation: mp-action-pulse 2.5s ease-in-out infinite;
    transition: background 0.15s ease, transform 0.15s ease;
}

.math-practice-root .mp-check-btn:hover {
    background: #166534 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.math-practice-root .mp-check-btn:active { transform: translateY(0); }

@keyframes mp-action-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.25); }
}

.math-practice-root .mp-feedback-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 28px;
    border-radius: 9999px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mp-fb-icon { font-size: 19px; font-weight: 800; line-height: 1; }
.mp-fb-answer-label { font-size: 15px; font-weight: 600; }

/* background/color carry !important: the Elementor kit styles buttons with
   per-property !important (same collision auditory-comprehension hit), and
   the card IS a button — without these the card paints kit-blue. */
.math-practice-root .mp-feedback-card.good {
    background: var(--mp-success-soft) !important;
    border: 2px solid var(--mp-success);
    color: var(--mp-success) !important;
}

.math-practice-root .mp-feedback-card.good:hover { background: #dcfce7 !important; color: var(--mp-success) !important; }

.math-practice-root .mp-feedback-card.reveal {
    background: var(--mp-danger-soft) !important;
    border: 2px solid #fca5a5;
    color: var(--mp-text) !important;
}

.math-practice-root .mp-feedback-card.reveal:hover { background: #fee2e2 !important; color: var(--mp-text) !important; }

.mp-fb-text {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Accessibility fallback: manual Next, rendered only when auto-advance is off. */
.mp-fb-next {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--mp-text-muted);
    white-space: nowrap;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0 10px;
}

.mp-try-line {
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.mp-fb { font-size: 16px; font-weight: 600; }
.mp-fb-try { color: var(--mp-text-muted); }

/* ====================================================================== */
/* FOOTER NAV (← Back | 💡 Hint | Skip →)                                 */
/* The fleet ex-nav row — same Back/Hint/Skip footer as VNeST, Naming,    */
/* Listening. Back/Skip + layout come from shared-components.css (.ex-nav);*/
/* only the center 💡 Hint pill is widget-local (amber hint token).        */
/* ====================================================================== */

.mp-footer-nav {
    width: 100%;
    margin-top: 4px;
    border-top: 1px solid var(--mp-border);
}

/* Center Hint pill — match the shared .ex-nav-btn metrics so Back · Hint ·
   Skip line up at the same height. Amber = help (fleet hint token). */
.math-practice-root .mp-footer-nav .ex-nav-hint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    padding: 10px 22px;
    border-radius: 9999px;
    border: 2px solid #fcd34d;
    background: var(--as-hint-bg-soft);
    color: var(--as-hint-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.math-practice-root .mp-footer-nav .ex-nav-hint-btn:hover:not(:disabled) {
    background: var(--as-hint-bg);
    border-color: #f59e0b;
}

.math-practice-root .mp-footer-nav .ex-nav-hint-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.mp-footer-nav .ex-nav-hint-icon { font-size: 15px; line-height: 1; }

/* Fallback footer (no universal-header script): plain Back/Skip pills. */
.mp-footer-nav--fallback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
}

.math-practice-root .mp-skip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    min-height: 44px;
    background: transparent;
    border: 1.5px solid var(--mp-border);
    border-radius: 8px;
    color: var(--mp-text-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.math-practice-root .mp-skip-btn:hover {
    border-color: #9ca3af;
    color: #374151;
}

.math-practice-root .mp-skip-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ====================================================================== */
/* PROGRESS PIPS                                                          */
/* ====================================================================== */

/* Pips sit between the equation and the workspace (standard position:
   below stimulus, above the action zone) — no divider, no extra margins.
   Dot + counter styling comes from the shared .ex-pip / .ex-nav-counter
   classes (shared-components.css); only the row container is math's own. */
.mp-progress-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 28px;
}

/* ====================================================================== */
/* LOGIN PROMPT + COMPLETE FALLBACK                                       */
/* ====================================================================== */

.mp-login-prompt { text-align: center; padding: 40px 20px; }
.math-practice-root .mp-login-prompt h3 { margin: 0 0 8px; font-size: 20px; }
.math-practice-root .mp-login-prompt p { margin: 0 0 20px; color: var(--mp-text-muted); }

.mp-login-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.math-practice-root .mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    min-height: 48px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.math-practice-root .mp-btn-primary {
    background: var(--mp-accent);
    color: #ffffff;
    border-color: var(--mp-accent);
}

.math-practice-root .mp-btn-primary:hover {
    background: var(--mp-accent-deep);
    border-color: var(--mp-accent-deep);
    color: #ffffff;
}

.math-practice-root .mp-btn-secondary {
    background: #ffffff;
    color: var(--mp-text);
    border-color: var(--mp-border);
}

.math-practice-root .mp-btn-secondary:hover { border-color: var(--mp-accent); color: var(--mp-accent); }

.mp-complete-fallback { text-align: center; padding: 30px 20px; }
.math-practice-root .mp-complete-fallback h3 { margin: 0 0 8px; }
.math-practice-root .mp-complete-fallback p { color: var(--mp-text-muted); margin: 0 0 20px; }

/* ====================================================================== */
/* MOBILE (<=768px)                                                       */
/* ====================================================================== */

@media (max-width: 768px) {
    .math-practice-container { padding: 14px; }

    .math-practice-root .mp-level-select { font-size: 14px; min-width: 0; width: 100%; padding: 10px 32px 10px 12px; }
    .math-practice-root .mp-title { font-size: 18px; margin-bottom: 10px; }

    .mp-equation { font-size: 40px; gap: 10px; }
    .mp-eq-answer { min-width: 52px; }

    .mp-scaffold { height: 230px; padding: 16px; }
    /* A2's two frames stack on narrow screens — taller fixed panel there */
    .mp-scaffold.mp-frames-2 { height: 300px; }

    .mp-frame { grid-template-columns: repeat(5, 38px); gap: 5px; }
    .mp-cell { width: 38px; height: 38px; }

    .mp-nl-track { height: 180px; }

    .math-practice-root .mp-eq-input { width: 84px; max-width: 84px; height: 58px; font-size: 34px; }

    .math-practice-root .mp-choice-btn { font-size: 22px; padding: 14px 8px; min-height: 56px; }

    .mp-howto-expr { font-size: 19px; }
    .mp-how-card { padding: 8px 12px; gap: 10px; }
    .math-practice-root .mp-howto-next { padding: 10px 16px; font-size: 15px; }
}

@media (max-width: 480px) {
    .math-practice-root .mp-level-select { font-size: 13px; padding: 9px 28px 9px 10px; }
    .math-practice-root .mp-op-btn { font-size: 15px; padding: 11px 12px; }

    .mp-equation { font-size: 34px; }

    .mp-fb-text { font-size: 15px; }

    .mp-frame { grid-template-columns: repeat(5, 32px); gap: 4px; }
    .mp-cell { width: 32px; height: 32px; border-radius: 8px; }
}

/* ====================================================================== */
/* REDUCED MOTION                                                         */
/* ====================================================================== */

@media (prefers-reduced-motion: reduce) {
    .math-practice-root .mp-counter-ball,
    .math-practice-root .mp-choice-btn.reveal,
    .math-practice-root .mp-check-btn,
    .math-practice-root .mp-scaffold-content {
        animation: none;
    }
    .math-practice-loading .loading-spinner { animation-duration: 2s; }
}

/* ====================================================================== */
/* FOCUS RINGS                                                            */
/* ====================================================================== */

.math-practice-root .mp-level-select:focus-visible,
.math-practice-root .mp-op-btn:focus-visible,
.math-practice-root .mp-choice-btn:focus-visible,
.math-practice-root .mp-check-btn:focus-visible,
.math-practice-root .mp-btn:focus-visible,
.math-practice-root .mp-step:focus-visible,
.math-practice-root .mp-speak-btn:focus-visible,
.math-practice-root .mp-howto-next:focus-visible,
.math-practice-root .mp-reset-btn:focus-visible,
.math-practice-root .mp-eq-input:focus-visible,
.math-practice-root .mp-nl-handle:focus-visible,
.math-practice-root .mp-counter-ball:focus-visible,
.math-practice-root .mp-skip-btn:focus-visible,
.math-practice-root .mp-feedback-card:focus-visible,
.math-practice-root .mp-footer-nav .ex-nav-hint-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.5);
    outline-offset: 2px;
}