/*
 * column-subtraction — the written column-subtraction algorithm by
 * decomposition. Minuend over subtrahend, right-aligned by place; worked
 * one column at a time from the right with the borrow shown the schoolbook
 * way (left digit crossed out and reduced, small 1 beside the taker).
 * Layered on shared/css/maths-activity.css.
 */

.maths-activity .cs-stage {
    background: #fffaf0;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 14px;
    padding: 1.6rem 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 */
}

.maths-activity .cs-grid {
    --cs-cell: 2.75rem;
    --cs-point: 0.9rem;
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 auto 0.5rem;
    font-variant-numeric: tabular-nums;
}

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

.maths-activity .cs-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 .cs-cell {
    width: var(--cs-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;
    position: relative;
}

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

.maths-activity .cs-labels .cs-cell {
    height: 1.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--maths-ink-muted, #6b7280);
}

/* Minuend (top) row needs extra height so the borrow annotations
 * (crossed-out original + small reduced digit + small leading 1) fit. */
.maths-activity .cs-minuend .cs-cell { height: 3.1rem; gap: 0.1rem; }

.maths-activity .cs-top-main { line-height: 1; }

/* Original digit struck through in place when a ten is decomposed out of it. */
.maths-activity .cs-top-main.cs-struck {
    text-decoration: line-through;
    text-decoration-color: var(--maths-danger, #B04A3F);
    text-decoration-thickness: 2px;
}

/* The reduced value, written small above the crossed-out original. */
.maths-activity .cs-reduced {
    position: absolute;
    top: -0.55rem;
    right: 0.1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--maths-accent-dark, #BA4C1A);
    line-height: 1;
}

/* The small 1 written beside a digit that took a decomposed ten. Red — the same
 * colour as the strike-through — so the eye traces the ten leaving the struck
 * digit and arriving here. (The reduced value above stays accent-orange.) */
.maths-activity .cs-borrow-one {
    position: absolute;
    top: 0.05rem;
    left: -0.05rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--maths-danger, #B04A3F);
}

/* Challenge-mode regroup scratch — interactive twins of the Display-mode borrow
 * marks. A FILLED slot is positioned and sized identically to .cs-reduced /
 * .cs-borrow-one above, so a pupil's working ends up looking exactly like the
 * worked example: the reduced value snug at the lending digit's top-right (that
 * digit struck via syncStrike), a small "1" at the receiving digit's top-left.
 * An EMPTY slot is just a small faint hint in that same spot — always visible,
 * like column-addition's carry boxes, so pupils see where to write. Scratch
 * only; checkAnswer ignores them. The .cs-minuend cell height above already
 * leaves room for the marks, so no extra padding (that was the floating-gap
 * bug — the digit must stay put and the marks hug it). */
.maths-activity .cs-reduced-cell,
.maths-activity .cs-borrow-cell {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--maths-accent-dark, #BA4C1A);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    box-sizing: border-box;
}
/* Reduced value — top-right of its digit (matches .cs-reduced). */
.maths-activity .cs-reduced-cell { top: -0.55rem; right: 0.1rem; font-weight: 700; }
/* Borrow-in "1" — top-left of its digit (matches .cs-borrow-one), red to trace
 * the ten's journey from the struck digit. */
.maths-activity .cs-borrow-cell { top: 0.05rem; left: -0.05rem; font-weight: 800; color: var(--maths-danger, #B04A3F); }

/* Empty: a small faint placeholder in the mark's spot. Filling it (:empty stops
 * matching) drops the box and leaves just the worked-example mark. */
.maths-activity .cs-reduced-cell:empty,
.maths-activity .cs-borrow-cell:empty {
    width: 0.85rem;
    height: 0.85rem;
    border: 1px dashed rgba(120, 130, 150, 0.4);
    border-radius: 4px;
}
/* Active (number-pad target) — a quiet ring sized to the slot, not the big
 * answer-box highlight. */
.maths-activity .cs-reduced-cell.cs-active,
.maths-activity .cs-borrow-cell.cs-active {
    border-color: var(--maths-primary, #1F6FB2);
    box-shadow: 0 0 0 2px rgba(31, 111, 178, 0.3);
    border-radius: 4px;
}

/* Challenge-mode answer boxes are tappable cells filled by the number pad
 * (no native input, so no OS keyboard pops up on tablets). */
.maths-activity .cs-ans-cell {
    width: 2.4rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    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;
    box-sizing: border-box;
}

/* Highlight the cell the number pad is currently filling. */
.maths-activity .cs-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 .cs-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    width: 100%;
    max-width: 250px;
    margin: 0.9rem auto 0;
}
.maths-activity .cs-numpad[hidden] { display: none; }

.maths-activity .cs-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 .cs-key:hover { background: #fff8e1; border-color: #f0c14b; }
.maths-activity .cs-key:active { transform: scale(0.94); }
.maths-activity .cs-key-back { color: #c62828; }
.maths-activity .cs-key-enter {
    background: var(--maths-primary, #1F6FB2);
    border-color: var(--maths-primary, #1F6FB2);
    color: #fff;
}
.maths-activity .cs-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 .cs-stage.cs-challenge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
}
.maths-activity .cs-stage.cs-challenge .cs-grid { margin-bottom: 0; }
.maths-activity .cs-stage.cs-challenge .cs-numpad { margin: 0; }

.maths-activity .cs-rule {
    height: 3px;
    background: var(--maths-ink, #1F2933);
    border-radius: 2px;
    margin: 0.2rem 0 0.3rem;
}

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

@keyframes cs-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 .cs-anim { animation: cs-pop 360ms ease-out; }

.maths-activity .cs-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 .cs-steptools .btn-control {
    min-height: 40px;
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
}
/* "Next column" is the primary step action. */
.maths-activity .cs-steptools .cs-next {
    background: var(--maths-primary, #1F6FB2);
    color: #fff;
    border-color: var(--maths-primary, #1F6FB2);
    font-weight: 800;
}
.maths-activity .cs-steptools .cs-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 .cs-steptools #csRevealAll,
.maths-activity .cs-steptools #csResetWork {
    background: transparent;
    border-color: transparent;
    color: var(--maths-ink-muted, #556070);
}
.maths-activity .cs-steptools #csRevealAll:hover,
.maths-activity .cs-steptools #csResetWork:hover {
    background: var(--maths-surface-alt, #EEF3F9);
    border-color: var(--maths-border, #C7CFDB);
}
.maths-activity .cs-steptools .btn-control:disabled { opacity: 0.4; cursor: not-allowed; }

.maths-activity .cs-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;
}

/* Compact setup bar that hugs its content (inline-flex) rather than a
 * full-width block. */
.maths-activity .cs-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 .cs-editor[hidden] { display: none; }
.maths-activity .cs-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 .cs-editor .cs-editor-input {
    width: 5rem;
    min-height: 38px;
    padding: 0.3rem 0.45rem;
    text-align: center;
    font-weight: 800;
    font-size: 1.1rem;
}
.maths-activity .cs-editor .cs-editor-btn {
    min-height: 38px;
    padding: 0.35rem 0.85rem;
    font-size: 0.9rem;
    margin-left: 0.1rem;
}

.maths-activity .cs-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 .cs-target-label {
    font-weight: 800;
    color: #8d4e0b;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.maths-activity .cs-target-prompt { flex: 1; font-weight: 800; color: #1f2937; font-size: 1.05rem; }

.maths-activity .cs-your-turn {
    margin-top: 1.25rem;
    background: #f1f8e9;
    border: 1px solid #aed581;
    border-radius: 14px;
    padding: 1rem 1.25rem;
}
.maths-activity .cs-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 .cs-your-turn-list { margin: 0; padding-left: 1.25rem; color: #1f2937; font-weight: 600; }
.maths-activity .cs-your-turn-list li { margin-bottom: 0.25rem; }

body.display-mode .cs-editor,
body.display-mode .cs-target-panel,
body.display-mode #challengeRunner { display: none !important; }

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

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