/* Number Bonds — game-specific extras layered on top of math-rounds.css.
   Only the bits math-rounds.css doesn't cover: the CPA lesson carousel, the
   bridging number-line visual, and the train/test mode badge. Consumes the
   same emerald design-system tokens (fallbacks mirror the dark palette). */

/* ── Mode badge (train vs test) ── */
.nb-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-bright, rgba(255, 255, 255, 0.16));
    color: var(--teal, #2dd4bf);
    background: var(--surface, #0f1f1a);
}
.nb-mode-badge.test {
    color: #fbbf24;
    border-color: color-mix(in srgb, #fbbf24 45%, transparent);
}

/* ── Adaptive level ladder pip strip ── */
.nb-ladder {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 4px 0 12px;
    flex-wrap: wrap;
}
.nb-rung {
    font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    color: var(--faint, #6b7799);
    background: var(--surface2, #15291f);
    transition: all 0.18s ease;
}
.nb-rung.active {
    color: #04110b;
    background: var(--accent, #10b981);
    border-color: var(--accent, #10b981);
    font-weight: 700;
}
.nb-rung.cleared { color: var(--teal, #2dd4bf); border-color: color-mix(in srgb, var(--teal, #2dd4bf) 40%, transparent); }

.nb-band {
    text-align: center;
    font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.82rem;
    color: var(--dim, #9aa6c4);
    margin-bottom: 6px;
}
.nb-band strong { color: var(--accent-bright, #34d399); }

/* ── CPA lesson carousel ── */
.nb-lesson-card { text-align: center; }
.nb-lesson-card h3 {
    font-family: var(--disp, 'Space Grotesk', system-ui, sans-serif);
    margin: 0 0 8px;
    color: var(--text, #eef2ff);
}
.nb-lesson-card p {
    color: var(--dim, #9aa6c4);
    line-height: 1.6;
    margin: 8px auto;
    max-width: 460px;
}
.nb-lesson-card .nb-eq {
    font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--teal, #2dd4bf);
    margin: 10px 0;
}
.nb-lesson-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}
.nb-dots { display: flex; gap: 6px; }
.nb-dots span {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border-bright, rgba(255, 255, 255, 0.2));
}
.nb-dots span.on { background: var(--accent, #10b981); }
.nb-skip {
    background: none;
    border: none;
    color: var(--faint, #6b7799);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

/* ── Bridging number line (the teaching visual) ── */
.nb-numberline {
    width: 100%;
    max-width: 420px;
    margin: 6px auto 2px;
}
.nb-numberline svg { width: 100%; height: 96px; display: block; }
.nb-nl-track { stroke: var(--border-bright, rgba(255,255,255,0.18)); stroke-width: 2; }
.nb-nl-tick { stroke: var(--border-bright, rgba(255,255,255,0.28)); stroke-width: 2; }
.nb-nl-arc { fill: none; stroke: var(--accent, #10b981); stroke-width: 2.5; }
.nb-nl-arc.second { stroke: var(--teal, #2dd4bf); }
.nb-nl-label {
    font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
    fill: var(--text, #eef2ff);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
}
.nb-nl-jump {
    font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
    fill: var(--accent-bright, #34d399);
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
}
.nb-nl-jump.second { fill: var(--teal, #2dd4bf); }
.nb-node { fill: var(--surface, #0f1f1a); stroke: var(--accent, #10b981); stroke-width: 2.5; }

.nb-hint-toggle {
    background: none;
    border: 1px solid var(--border, rgba(255,255,255,0.09));
    border-radius: 10px;
    color: var(--dim, #9aa6c4);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    padding: 6px 12px;
    margin-top: 4px;
}
.nb-hint-toggle:hover { color: var(--teal, #2dd4bf); border-color: var(--teal, #2dd4bf); }

.feedback.good { color: var(--good, #34d399); }