/*
 * number-bonds — part-part-whole bond model. A whole circle joined by
 * two arms to two part circles, chunky counters inside the parts, big
 * IWB-friendly + / − buttons. Built for 4-8 year olds: huge touch
 * targets, instant visual feedback, minimal text.
 */

.maths-activity [hidden] { display: none !important; }

.maths-activity .nb-stage {
    background: #fffaf0;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(20, 40, 80, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.maths-activity .nb-prompt {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--maths-primary-dark, #1b5e20);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.maths-activity .nb-bond-wrap {
    width: 100%;
    max-width: 620px;
    background: #fff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(20, 40, 80, 0.04);
}

.maths-activity .nb-bond {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 430px;
    aspect-ratio: 600 / 440;
    display: block;
    margin: 0 auto;
}

/* ---------- Diagram ---------- */

.maths-activity .nb-bond .nb-arm {
    stroke: #b0bec5;
    stroke-width: 10;
    stroke-linecap: round;
}

.maths-activity .nb-bond .nb-circle {
    fill: #ffffff;
    stroke-width: 5;
}

.maths-activity .nb-bond .nb-whole-circle { stroke: var(--maths-primary, #2E7D32); }
.maths-activity .nb-bond .nb-part-a-circle { stroke: #f9a825; }
.maths-activity .nb-bond .nb-part-b-circle { stroke: #1565c0; }

.maths-activity .nb-bond .nb-missing-circle {
    fill: #f8fafc;
    stroke: #90a4ae;
    stroke-dasharray: 10 7;
}

.maths-activity .nb-bond .nb-correct {
    fill: #e8f5e9;
    stroke: var(--maths-primary, #2E7D32);
    stroke-dasharray: none;
}

/* Explore: the whole circle lights up when the target bond is made. */
.maths-activity .nb-bond .nb-made {
    fill: #e8f5e9;
    stroke-width: 9;
    animation: nbMadePulse 700ms ease;
}

@keyframes nbMadePulse {
    0%   { stroke-width: 5; }
    50%  { stroke-width: 12; }
    100% { stroke-width: 9; }
}

.maths-activity .nb-bond .nb-num {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    fill: var(--maths-ink, #1F2933);
    text-anchor: middle;
    dominant-baseline: central;
    font-variant-numeric: tabular-nums;
}

.maths-activity .nb-bond .nb-num-whole { font-size: 68px; }
.maths-activity .nb-bond .nb-num-part { font-size: 58px; }
.maths-activity .nb-bond .nb-num-badge { font-size: 28px; }
.maths-activity .nb-bond .nb-num-unknown { fill: #78909c; }

.maths-activity .nb-bond .nb-counter { stroke-width: 2; }
.maths-activity .nb-bond .nb-counter-a { fill: #fbc02d; stroke: #8d6e00; }
.maths-activity .nb-bond .nb-counter-b { fill: #42a5f5; stroke: #0d47a1; }

/* Newly added counters pop in. */
.maths-activity .nb-bond .nb-pop {
    transform-box: fill-box;
    transform-origin: center;
    animation: nbPop 260ms ease-out backwards;
}

@keyframes nbPop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

.maths-activity .nb-bond .nb-badge {
    fill: #ffffff;
    stroke-width: 3;
}

.maths-activity .nb-bond .nb-badge-a { stroke: #f9a825; }
.maths-activity .nb-bond .nb-badge-b { stroke: #1565c0; }

/* ---------- Number sentence ---------- */

.maths-activity .nb-sentence {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: var(--maths-ink, #1F2933);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ---------- Steppers (explore + challenge) ---------- */

.maths-activity .nb-explore-row {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 620px;
}

.maths-activity .nb-stepper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.maths-activity .nb-step-btn {
    width: 72px;
    height: 72px;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.maths-activity .nb-step-plus { background: var(--maths-primary, #2E7D32); }
.maths-activity .nb-step-minus { background: #d84315; }

.maths-activity .nb-step-btn:hover { filter: brightness(1.08); }
.maths-activity .nb-step-btn:active { transform: translateY(2px); box-shadow: none; }

.maths-activity .nb-step-btn:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
    filter: none;
}

/* ---------- Challenge row ---------- */

.maths-activity .nb-challenge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.maths-activity .nb-chosen-display {
    min-width: 90px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 3px solid #90a4ae;
    border-radius: 16px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 2.4rem;
    color: var(--maths-ink, #1F2933);
    font-variant-numeric: tabular-nums;
}

.maths-activity .nb-check-btn {
    height: 72px;
    padding: 0 2rem;
    border: none;
    border-radius: 20px;
    background: #1565c0;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
    touch-action: manipulation;
}

.maths-activity .nb-check-btn:hover { filter: brightness(1.08); }
.maths-activity .nb-check-btn:active { transform: translateY(2px); box-shadow: none; }
.maths-activity .nb-check-btn:disabled { opacity: 0.5; cursor: default; }

.maths-activity .nb-check-btn.is-correct { background: var(--maths-primary, #2E7D32); }
.maths-activity .nb-check-btn.is-miss { background: #c62828; }

/* ---------- Feedback ---------- */

.maths-activity .nb-feedback {
    border-radius: 14px;
    padding: 0.875rem 1.125rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-variant-numeric: tabular-nums;
}

.maths-activity .nb-feedback.success { background: #e8f5e9; color: #1b5e20; border: 1px solid #66bb6a; }
.maths-activity .nb-feedback.miss { background: #fff8e1; color: #8d4e0b; border: 1px solid #f0c14b; }
.maths-activity .nb-feedback.hint { background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9; }

/* ---------- Mode chip ---------- */

.maths-activity .nb-mode-chip {
    display: inline-block;
    background: var(--maths-primary, #2E7D32);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    margin-top: 0.25rem;
}

/* ---------- Display mode ----------
 * Completed bond narrated by the teacher: hide every control, keep the
 * diagram + number sentence, and tighten spacing so the display-resize
 * self-sizing reports a compact height.
 */
body.display-mode .nb-explore-row,
body.display-mode .nb-challenge-row,
body.display-mode .nb-feedback,
body.display-mode .nb-prompt,
body.display-mode #challengeRunner { display: none !important; }

body.display-mode .nb-stage {
    padding: 0.85rem;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

body.display-mode .nb-bond-wrap {
    padding: 0.4rem;
}

body.display-mode .nb-bond {
    max-height: 280px;
}

body.display-mode .nb-sentence {
    font-size: 1.6rem;
}