/* Left-to-Right — trainer-local extras layered on top of math-rounds.css and
   number_bonds.css (lesson carousel, mode badge, ladder, band, keypad reused).
   The interaction itself is the UNIFIED step-entry pattern (`.hb-steps`,
   TRAINER_UNIFICATION_SPEC §A) which lives in math-rounds.css — this file only
   keeps the trainer-local extras: the speed ghost, the per-level mastery bar,
   the "show me 3 ways" reflection panel, and the page-scoped mobile
   no-scroll compaction. The old metaphor/scaffold blocks (answer slots,
   #column-assist column stack, place-value steps visual) are gone with the
   unified refactor. */

/* ── Speed ghost + mastery bar ── */
.ltr-meta { text-align: center; margin-top: 8px; }
.ltr-ghost {
    font: 500 12px/1 "Space Grotesk", system-ui, sans-serif;
    color: var(--text-secondary, #94a3b8);
}
.ltr-ghost.beat { color: var(--primary, #10b981); font-weight: 600; }

.ltr-mastery {
    height: 8px;
    background: var(--border, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
    margin: 12px auto 0;
    max-width: 320px;
}
.ltr-mastery-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent, #34d399), var(--primary, #10b981));
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ── Mobile no-scroll compaction (spec §A NO-SCROLL RULE) ──
   At 390×844 the problem + current step + keypad must ALL fit with zero
   scrolling. Scoped to this page via .hb-compact on .math-rounds-container
   so no other trainer's layout changes; desktop is untouched. This trainer
   shows up to 5 step rows (5-digit slots tier), so the step rows themselves
   are also tightened here. */
@media (max-width: 480px) {
    .hb-compact { margin: 8px auto; }
    .hb-compact .math-rounds-header { margin-bottom: 6px; }
    .hb-compact .math-rounds-header h1 { font-size: 1.15rem; }
    .hb-compact .subtitle { font-size: 0.78rem; margin: 2px 0 0; }
    .hb-compact #game-panel { padding: 10px 12px; }
    .hb-compact .nb-ladder { margin-bottom: 4px; }
    .hb-compact .nb-ladder .nb-rung { padding: 3px 8px; font-size: 0.72rem; }
    .hb-compact .nb-band { font-size: 0.78rem; margin-bottom: 4px; }
    .hb-compact .hud { margin-bottom: 6px; font-size: 0.82rem; }
    .hb-compact .question-box { gap: 8px; }
    .hb-compact .question { font-size: 1.6rem; margin: 0; }
    .hb-compact .hb-steps { margin: 4px auto 0; gap: 5px; }
    .hb-compact .hb-step { padding: 5px 10px; gap: 3px; }
    .hb-compact .hb-step-label { font-size: 0.78rem; }
    .hb-compact .hb-input { min-height: 1.3em; padding: 2px 8px; font-size: 1.1rem; }
    .hb-compact .hb-step.bare .hb-input { font-size: 1.45rem; padding: 6px 12px; }
    .hb-compact .ltr-meta { margin-top: 0; }
    .hb-compact .ltr-mastery { margin: 4px auto 0; }
    .hb-compact .keypad { gap: 6px; margin-top: 2px; }
    .hb-compact .keypad button { padding: 9px; font-size: 1.1rem; border-radius: 10px; }
    .hb-compact .ltr-ways-toggle { margin-top: 6px; padding: 4px 12px; }
}

/* ── "Show me 3 ways" reflection (non-scored teaching reveal) ── */
.ltr-ways-toggle {
    display: inline-block;
    margin: 10px auto 0;
    background: none;
    border: 1px dashed var(--border-bright, rgba(255, 255, 255, 0.2));
    border-radius: 10px;
    color: var(--teal, #2dd4bf);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    padding: 6px 14px;
}
.ltr-ways-toggle:hover {
    border-color: var(--teal, #2dd4bf);
    background: color-mix(in srgb, var(--teal, #2dd4bf) 10%, transparent);
}

.ltr-ways-panel {
    width: 100%;
    max-width: 480px;
    margin: 10px auto 0;
    text-align: left;
}
.ltr-ways-panel .fs-head {
    font-family: var(--disp, 'Space Grotesk', system-ui, sans-serif);
    font-size: 0.9rem;
    color: var(--dim, #9aa6c4);
    margin-bottom: 10px;
    text-align: center;
}
.ltr-ways-panel .fs-head b { color: var(--text, #eef2ff); }
.ltr-ways-panel .fs-way {
    border: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    border-radius: 12px;
    background: var(--surface2, #15291f);
    padding: 10px 14px;
    margin-bottom: 8px;
}
.ltr-ways-panel .fs-way-name {
    font-family: var(--disp, 'Space Grotesk', system-ui, sans-serif);
    font-weight: 700;
    color: var(--accent-bright, #34d399);
    font-size: 0.92rem;
    margin-bottom: 4px;
}
.ltr-ways-panel .fs-steps {
    margin: 4px 0 6px;
    padding-left: 20px;
    font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.86rem;
    color: var(--text, #eef2ff);
    line-height: 1.6;
}
.ltr-ways-panel .fs-note {
    font-size: 0.78rem;
    color: var(--faint, #6b7799);
    font-style: italic;
}