/*
 * column-addition — the written column-addition algorithm. Addends stacked
 * and right-aligned by place, worked one column at a time from the right
 * with the regroup (carry) shown above the next column to the left.
 * Layered on shared/css/maths-activity.css (uses its --maths-* tokens,
 * .maths-target-panel, .maths-callout, .maths-check-btn).
 */

.maths-activity .ca-stage {
    background: #fffaf0;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 14px;
    padding: 1.4rem 1rem 1rem;
    box-shadow: 0 2px 10px rgba(20, 40, 80, 0.05);
    margin-bottom: 1rem;
    text-align: center; /* centres the inline-flex sum grid */
}

/* The vertical sum. --ca-cell sets one digit column's width; every row
 * shares it so columns line up perfectly. */
.maths-activity .ca-grid {
    --ca-cell: 2.75rem;
    --ca-point: 0.9rem;
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 auto 0.5rem;
    font-variant-numeric: tabular-nums;
}

.maths-activity .ca-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.maths-activity .ca-op {
    width: 1.75rem;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--maths-accent, #E86A33);
    flex: 0 0 auto;
}

.maths-activity .ca-cell {
    width: var(--ca-cell);
    height: 2.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--maths-ink, #1F2933);
    flex: 0 0 auto;
}

.maths-activity .ca-point {
    width: var(--ca-point);
    text-align: center;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--maths-ink, #1F2933);
    flex: 0 0 auto;
}

/* Place-label header row (U / T / H / Th ... and t / h for decimals). */
.maths-activity .ca-labels .ca-cell {
    height: 1.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--maths-ink-muted, #6b7280);
}

/* Carry row — small, sits above the addends in the accent colour. */
.maths-activity .ca-carries .ca-cell {
    height: 1.5rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--maths-accent-dark, #BA4C1A);
    align-items: flex-end;
}

/* Challenge-mode answer / carry boxes are tappable cells filled by the
 * number pad (no native input, so no OS keyboard pops up on tablets). */
.maths-activity .ca-ans-cell,
.maths-activity .ca-carry-cell {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    border: 2px solid var(--maths-border, #C7CFDB);
    border-radius: 8px;
    background: var(--maths-surface, #fff);
    color: var(--maths-primary-dark, #155484);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.maths-activity .ca-ans-cell {
    width: 2.4rem;
    height: 2.6rem;
    font-size: 1.6rem;
}

.maths-activity .ca-carry-cell {
    width: 1.6rem;
    height: 1.4rem;
    font-size: 1rem;
    border-style: dashed;
    color: var(--maths-accent-dark, #BA4C1A);
}

/* Highlight the cell the number pad is currently filling. */
.maths-activity .ca-active {
    border-color: var(--maths-primary, #1F6FB2);
    box-shadow: 0 0 0 3px rgba(31, 111, 178, 0.25);
    outline: none;
}

/* Number pad — same idiom as the other maths activities (fact-race). */
.maths-activity .ca-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    width: 100%;
    max-width: 250px;
    margin: 0.9rem auto 0;
}
.maths-activity .ca-numpad[hidden] { display: none; }

.maths-activity .ca-key {
    background: #fff;
    border: 2px solid var(--maths-border, #cfd8dc);
    border-radius: 12px;
    padding: 0.5rem 0;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--maths-ink, #1F2933);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    transition: background-color 100ms, border-color 100ms, transform 80ms;
}
.maths-activity .ca-key:hover { background: #fff8e1; border-color: #f0c14b; }
.maths-activity .ca-key:active { transform: scale(0.94); }
.maths-activity .ca-key-back { color: #c62828; }
.maths-activity .ca-key-enter {
    background: var(--maths-primary, #1F6FB2);
    border-color: var(--maths-primary, #1F6FB2);
    color: #fff;
}
.maths-activity .ca-key-enter:hover {
    background: var(--maths-primary-dark, #155484);
    border-color: var(--maths-primary-dark, #155484);
}

/* Challenge mode: the number pad sits to the RIGHT of the sum (and wraps
 * below it on a narrow screen). */
.maths-activity .ca-stage.ca-challenge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
}
.maths-activity .ca-stage.ca-challenge .ca-grid { margin-bottom: 0; }
.maths-activity .ca-stage.ca-challenge .ca-numpad { margin: 0; }

/* The horizontal rule under the last addend. */
.maths-activity .ca-rule {
    height: 3px;
    background: var(--maths-ink, #1F2933);
    border-radius: 2px;
    margin: 0.2rem 0 0.3rem;
}

.maths-activity .ca-answer .ca-cell,
.maths-activity .ca-answer .ca-point {
    color: var(--maths-primary-dark, #155484);
}

/* Reveal/regroup animation — a digit pops in as its column is worked. */
@keyframes ca-pop {
    0%   { transform: translateY(-6px) scale(0.7); opacity: 0; }
    60%  { transform: translateY(0) scale(1.12); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.maths-activity .ca-anim { animation: ca-pop 360ms ease-out; }

/* Step toolbar. */
.maths-activity .ca-steptools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--maths-border, #C7CFDB);
}
.maths-activity .ca-steptools .btn-control {
    min-height: 40px;
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
}
/* "Next column" is the primary step action. */
.maths-activity .ca-steptools .ca-next {
    background: var(--maths-primary, #1F6FB2);
    color: #fff;
    border-color: var(--maths-primary, #1F6FB2);
    font-weight: 800;
}
.maths-activity .ca-steptools .ca-next:hover {
    background: var(--maths-primary-dark, #155484);
    border-color: var(--maths-primary-dark, #155484);
}
/* Reveal-all and Start-over are quieter secondary controls. */
.maths-activity .ca-steptools #caRevealAll,
.maths-activity .ca-steptools #caResetWork {
    background: transparent;
    border-color: transparent;
    color: var(--maths-ink-muted, #556070);
}
.maths-activity .ca-steptools #caRevealAll:hover,
.maths-activity .ca-steptools #caResetWork:hover {
    background: var(--maths-surface-alt, #EEF3F9);
    border-color: var(--maths-border, #C7CFDB);
}
.maths-activity .ca-steptools .btn-control:disabled { opacity: 0.4; cursor: not-allowed; }

.maths-activity .ca-step-status {
    margin-left: auto;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--maths-surface-alt, #EEF3F9);
    font-weight: 800;
    color: var(--maths-primary-dark, #155484);
    font-variant-numeric: tabular-nums;
}

/* Explore editor. */
/* Compact setup bar that hugs its content (inline-flex) rather than a
 * full-width block. */
.maths-activity .ca-editor {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    padding: 0.4rem 0.55rem;
    background: var(--maths-surface-alt, #EEF3F9);
    border: 1px solid var(--maths-border, #C7CFDB);
    border-radius: 10px;
}
.maths-activity .ca-editor[hidden] { display: none; }
.maths-activity .ca-editor-op { font-size: 1.15rem; font-weight: 800; color: var(--maths-accent, #E86A33); }
/* The extra class specificity beats the shared `input[type=text] { width:100% }`. */
.maths-activity .ca-editor .ca-editor-input {
    width: 5rem;
    min-height: 38px;
    padding: 0.3rem 0.45rem;
    text-align: center;
    font-weight: 800;
    font-size: 1.1rem;
}
.maths-activity .ca-editor .ca-editor-btn {
    min-height: 38px;
    padding: 0.35rem 0.85rem;
    font-size: 0.9rem;
    margin-left: 0.1rem;
}

/* Mode chip + target panel labels (mirror place-value-blocks). */
.maths-activity .ca-mode-chip {
    display: inline-block;
    background: var(--maths-primary, #1F6FB2);
    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;
}

.maths-activity .ca-target-label {
    font-weight: 800;
    color: #8d4e0b;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.maths-activity .ca-target-prompt { flex: 1; font-weight: 800; color: #1f2937; font-size: 1.05rem; }

.maths-activity .ca-your-turn {
    margin-top: 1.25rem;
    background: #f1f8e9;
    border: 1px solid #aed581;
    border-radius: 14px;
    padding: 1rem 1.25rem;
}
.maths-activity .ca-your-turn-label {
    font-weight: 800;
    color: #33691e;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.maths-activity .ca-your-turn-list { margin: 0; padding-left: 1.25rem; color: #1f2937; font-weight: 600; }
.maths-activity .ca-your-turn-list li { margin-bottom: 0.25rem; }

/* Display mode — flush worked snapshot. Header/editor/target hidden by the
 * shared rule + here; the step toolbar stays so a teacher can replay the
 * regroup on the IWB. */
body.display-mode .ca-editor,
body.display-mode .ca-target-panel,
body.display-mode #challengeRunner { display: none !important; }

body.display-mode .ca-stage {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .maths-activity .ca-grid { --ca-cell: 2.1rem; }
    .maths-activity .ca-cell { font-size: 1.5rem; height: 2.4rem; }
    .maths-activity .ca-point { font-size: 1.5rem; }
}