/* Column addition. The scroll-led panel keeps the page a normal document: the
   scene height supplies the scroll distance and JavaScript pins the inner card
   within that space. No wheel or touch input is intercepted. */

/* Sums set out in place-value columns, used for the static figures. */
.sum-board {
    display: grid;
    grid-template-columns: 34px var(--sum-columns);
    width: max-content;
    margin: 0 auto;
    padding: 18px 24px 20px;
    border-radius: 16px;
    background-color: #fff;
    background-image: linear-gradient(rgba(53, 104, 184, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 104, 184, .075) 1px, transparent 1px);
    background-size: 22px 22px;
    box-shadow: 0 8px 24px rgba(23, 56, 73, .12);
}

.sum-board--intro { --sum-columns: repeat(3, 52px); }
.sum-board--whole { --sum-columns: repeat(4, 52px); }

.sum-board__op,
.sum-board__cell {
    display: grid;
    min-height: 46px;
    place-items: center;
    color: #173849;
    font: 700 1.55rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.sum-board__op { color: #b86821; }
.sum-board__cell--label { min-height: 28px; color: #52666f; font: 700 .68rem/1.1 Aleo, serif; }
.sum-board__cell--point { color: #b86821; font-family: Aleo, serif; }
.sum-board__cell--placeholder { color: #a8b5bf; font-weight: 400; }
.sum-board__cell--carry { min-height: 36px; }
.sum-board__cell--addend { background: rgba(238, 245, 251, .82); }
.sum-board__rule { padding-bottom: 6px; border-bottom: 4px solid #173849; }
.sum-board__cell--answer { padding-top: 7px; color: #09539d; font-size: 1.68rem; }

.sum-board__carry {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 2px solid #d99a20;
    border-radius: 50%;
    background: #fff8df;
    color: #9b5f12;
    font-size: .95rem;
}

/* Introduction figure: the same board with its parts named. */
.anatomy {
    display: grid;
    grid-template-columns: auto minmax(250px, 1fr);
    gap: 28px;
    margin: 26px 0;
    padding: 24px;
    align-items: center;
    border: 2px solid #c9dce8;
    border-radius: 22px;
    background: linear-gradient(145deg, #f7fbff 0%, #fff 55%, #fffaf0 100%);
}

.anatomy figcaption { grid-column: 2; }
.anatomy__flow { display: flex; gap: 8px; margin: 13px 0 0; align-items: center; justify-content: center; color: #7a3c09; font-size: .82rem; font-weight: 700; }
.anatomy__flow span { font-size: 1.15rem; line-height: 1; }
.anatomy__key { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.anatomy__key li {
    padding: 12px 16px;
    border-left: 5px solid #c9dce8;
    border-radius: 0 12px 12px 0;
    background: #fff;
}

.anatomy__key b { display: block; margin-bottom: 4px; color: #173849; }
.anatomy__key span { color: #41535c; font-size: .9rem; line-height: 1.5; }
.anatomy__key li:nth-child(1) { border-left-color: #5d91b0; }
.anatomy__key li:nth-child(2) { border-left-color: #d99a20; }
.anatomy__key li:nth-child(3) { border-left-color: #09539d; }

/* One column lifted out of a calculation: the digits, their total, and where
   the two halves of that total go. */
.mini-column {
    display: grid;
    width: 76px;
    padding: 7px 0 8px;
    justify-items: center;
    border-radius: 12px;
    background: #eef5fb;
}

.mini-column em { min-height: 19px; color: #9b5f12; font: 700 .95rem/1 ui-monospace, monospace; font-style: normal; }
.mini-column b { color: #173849; font: 700 1.32rem/1.3 ui-monospace, monospace; }
.mini-column b.is-faint { color: #a8b5bf; font-weight: 400; }

.mini-column strong {
    width: 52px;
    margin-top: 4px;
    padding-top: 5px;
    border-top: 3px solid #173849;
    color: #09539d;
    font: 700 1.32rem/1.3 ui-monospace, monospace;
    text-align: center;
}

.split-figure__source { display: grid; justify-items: center; }

/* Ten ones become one ten. */
.regroup-model { display: flex; align-items: center; justify-content: center; gap: 34px; margin: 24px 0; padding: 24px; border: 2px solid #d9e2ec; border-radius: 18px; background: #f8fbfd; }
.regroup-model__group { display: grid; justify-items: center; gap: 12px; color: #173849; }
.regroup-model__ones { display: grid; grid-template-columns: repeat(5, 19px); gap: 5px; }
.regroup-model__ones i { width: 17px; height: 17px; border: 2px solid #3568b8; border-radius: 5px; background: #dceaff; }
.regroup-model__ten { display: flex; padding: 5px; border: 2px solid #b86821; border-radius: 7px; background: #fff4e6; }
.regroup-model__ten i { width: 9px; height: 32px; border-right: 1px solid #ddb888; background: #f4cb92; }
.regroup-model__ten i:last-child { border-right: 0; }
.regroup-model__arrow { display: grid; justify-items: center; color: #116e93; }
.regroup-model__arrow span { font-size: 2.6rem; line-height: 1; }
.regroup-model__arrow small { font-weight: 700; }

/* A column total splitting into the digit written and the amount regrouped. */
.split-figure {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 24px 0;
    padding: 22px 26px;
    align-items: center;
    justify-content: center;
    border: 2px solid #d9e2ec;
    border-radius: 18px;
    background: #f8fbfd;
}

.split-figure__caption { display: block; margin-bottom: 9px; color: #52666f; font-size: .73rem; font-weight: 700; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.split-figure__arrow { color: #116e93; font-size: 2.3rem; line-height: 1; }
.split-figure__parts { display: grid; gap: 13px; }
.split-figure__part { display: flex; gap: 15px; margin: 0; align-items: center; }
.split-figure__part strong { display: grid; width: 44px; height: 44px; flex: none; place-items: center; font: 700 1.32rem ui-monospace, monospace; }
.split-figure__part--write strong { border: 2px solid #09539d; border-radius: 11px; background: #eaf2fb; color: #09539d; }
.split-figure__part--regroup strong { border: 2px solid #d99a20; border-radius: 50%; background: #fff8df; color: #9b5f12; }
.split-figure__part span { color: #41535c; font-size: .95rem; line-height: 1.45; }

/* Correct and incorrect alignment, side by side. */
.alignment-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0; }
.alignment-card { padding: 19px 20px; border: 2px solid #d9e2ec; border-radius: 17px; background: #fff; }
.alignment-card--correct { border-top: 5px solid #2f7c62; }
.alignment-card--wrong { border-top: 5px solid #a3352b; }
.alignment-card__verdict { display: block; margin-bottom: 15px; font-weight: 700; }
.alignment-card--correct .alignment-card__verdict { color: #25664f; }
.alignment-card--wrong .alignment-card__verdict { color: #923027; }
.alignment-card p { margin: 14px 0 0; color: #41535c; font-size: .9rem; line-height: 1.5; }
.alignment-sum { display: grid; grid-template-columns: 24px repeat(2, 28px) 13px repeat(2, 28px); grid-auto-rows: 34px; width: max-content; margin: auto; border-bottom: 3px solid #173849; font: 700 1.3rem/1 ui-monospace, monospace; }
.alignment-sum > * { display: grid; place-items: center; font-style: normal; }
.alignment-sum > span,
.alignment-sum > i { color: #b86821; }
.alignment-sum > em { color: #a8b5bf; font-weight: 400; }

/* Short application examples use the same two-card rhythm as the other
   written-method pages. */
.reading-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0; }
.reading-card { padding: 18px 20px 20px; border: 2px solid #d9e2ec; border-top: 5px solid #5d91b0; border-radius: 17px; background: #fff; }
.reading-card:last-child { border-top-color: #d99a20; }
.reading-card h2 { margin: 0 0 6px; color: #09539d; font-size: 1.02rem; }
.reading-card p { margin: 0; color: #41535c; font-size: .92rem; line-height: 1.55; }

.addition-rule ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.addition-rule li { padding: 13px; border-radius: 12px; background: #eef5fb; }
.addition-rule li > span { display: grid; width: 28px; height: 28px; margin-bottom: 9px; place-items: center; border-radius: 50%; background: #116e93; color: #fff; font-size: .82rem; font-weight: 700; }
.addition-rule p { margin: 0; color: #41535c; font-size: .88rem; line-height: 1.45; }

/* The scroll-led calculation. */
.addition-scene {
    position: relative;
    min-height: 470px;
    margin: 26px 0 8px;
    overflow-anchor: none;
}

.addition-scene.is-ready { height: var(--scene-height); min-height: var(--scene-min-height); }

.addition-scene__sticky {
    --addition-cell: 58px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    height: min(640px, calc(100vh - 104px));
    min-height: 470px;
    box-sizing: border-box;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    overflow: hidden;
    border: 2px solid #c9dce8;
    border-radius: 22px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f8fc 100%);
    box-shadow: 0 12px 30px rgba(20, 57, 78, .14);
    contain: layout paint;
    overflow-anchor: none;
    will-change: transform;
}

.addition-scene__sticky.is-pinned {
    position: fixed;
    right: auto;
    z-index: 900;
    transform-origin: top left;
}

.addition-scene__inputs { display: flex; gap: 16px; padding: 20px 24px 16px; align-items: center; justify-content: center; }
.addition-scene__inputs label { display: grid; gap: 6px; }
.addition-scene__inputs label span { color: #41535c; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }

.addition-scene__inputs input {
    width: 190px;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 2px solid #b8cbd7;
    border-radius: 12px;
    outline: none;
    background: #fff;
    color: #173849;
    font: 700 1.18rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.addition-scene__inputs input:focus { border-color: #116e93; box-shadow: 0 0 0 4px rgba(17, 110, 147, .12); }
.addition-scene__plus { margin-top: 20px; color: #b86821; font-size: 1.7rem; font-weight: 700; }

/* A worked example names itself inside the card, because the card leaves the
   page while it is being read. */
.addition-scene[data-a] .addition-scene__sticky { height: auto; min-height: 0; }
.addition-scene__heading { margin: 0; padding: 20px 24px 2px; color: #173849; font: 700 1.42rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; text-align: center; }

.addition-board { display: grid; min-height: 0; padding: 16px 24px; overflow: hidden; align-items: center; background: #eaf3f8; }
.addition-board__paper { position: relative; width: max-content; margin: 0 auto; padding: 18px 26px 22px; border-radius: 18px; background-color: #fff; background-image: linear-gradient(rgba(53, 104, 184, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 104, 184, .075) 1px, transparent 1px); background-size: 22px 22px; box-shadow: 0 8px 24px rgba(23, 56, 73, .12); }

.addition-board__row { display: flex; align-items: stretch; width: max-content; margin-left: auto; }
.addition-board__row--labels { margin-bottom: 7px; }
.addition-board__operator { display: grid; width: 38px; place-items: center; color: #b86821; font-size: 1.6rem; font-weight: 700; }
.addition-board__operator--blank { color: transparent; }
.addition-board__digits { display: grid; grid-template-columns: var(--addition-columns); }

.addition-board__cell {
    position: relative;
    display: grid;
    width: var(--addition-cell);
    min-height: 52px;
    box-sizing: border-box;
    place-items: center;
    border-radius: 10px;
    color: #173849;
    z-index: 1;
    font: 700 1.65rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.addition-board__cell--label { min-height: 30px; color: #52666f; font: 700 .68rem/1.1 Aleo, serif; text-align: center; }
.addition-board__cell--point { width: 18px; min-width: 18px; color: #b86821; font-family: Aleo, serif; }
.addition-board__cell--placeholder { color: #a8b5bf; font-weight: 400; }
.addition-board__row--addend .addition-board__cell:not(.addition-board__cell--point) { background: rgba(238, 245, 251, .82); }
.addition-board__row--second { padding-bottom: 8px; border-bottom: 4px solid #173849; }
.addition-board__row--carry { position: relative; z-index: 3; min-height: 40px; }
.addition-board__row--carry .addition-board__cell { min-height: 40px; color: #9b5f12; font-size: 1rem; }
.addition-board__row--result { padding-top: 7px; }
.addition-board__row--result .addition-board__cell { color: #09539d; font-size: 1.75rem; }

/* The travelling highlight. Its position, size and opacity are set by the
   scroll, so it carries no transition of its own. */
.addition-board__cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    box-sizing: border-box;
    border: 2px solid #d99a20;
    border-radius: 13px;
    background: #fff2c9;
    pointer-events: none;
}

/* The regrouped amounts travel across the rows beneath them, so the carry row
   and its badges stay on top. */
.addition-board__carry {
    position: relative;
    z-index: 3;
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 2px solid #d99a20;
    border-radius: 50%;
    background: #fff8df;
    opacity: 0;
    will-change: transform, opacity;
}

.addition-board__answer { opacity: 0; will-change: transform, opacity; }
.addition-board__paper.is-complete .addition-board__row--result .addition-board__cell { text-shadow: 0 0 18px rgba(9, 83, 157, .28); }

.addition-scene__caption { display: grid; align-content: center; height: 6.6em; box-sizing: border-box; padding: 14px 28px 6px; text-align: center; }
.addition-scene__caption h3 { margin: 0 0 5px; color: #09539d; font-size: 1.1rem; }
.addition-scene__caption p { margin: 0; color: #243a45; font-size: .97rem; line-height: 1.5; }

.addition-scene__progress { display: flex; gap: 8px; padding: 0 22px 18px; justify-content: center; }

.addition-scene__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c6d4dc;
    transition: width .25s ease, border-radius .25s ease, background-color .25s ease;
}

.addition-scene__dot.is-current { width: 28px; border-radius: 999px; background: #116e93; }
.addition-scene__dot.is-past { background: #6c9bb0; }

@media (max-width: 700px) {
    .reading-pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .addition-scene.is-ready { height: auto; min-height: 0; }
    .addition-scene__sticky { position: relative; height: auto; transform: none !important; }
    .addition-board__cursor { display: none; }
    .addition-scene__dot { transition: none; }
    .addition-scene__inputs input { transition: none; }
}