/* Column subtraction: the static figures and the scroll-led calculation. The
   scene height supplies the scroll distance and JavaScript pins the inner card
   within it, so the page stays a normal document. */

/* Calculations 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: 24px 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 {
    position: relative;
    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--term { 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__cell--answer.sum-board__cell--placeholder { color: #a8b5bf; font-weight: 400; }

/* The column the reader is being asked to look at. */
.sum-board__cell--asked { background: #fff2c9; }
.sum-board__cell--asked.sum-board__cell--answer { color: #9b5f12; }

.sum-board__cell--exchange {
    display: flex;
    min-height: 34px;
    gap: 2px;
    align-items: center;
    justify-content: center;
}

.sum-board__reduced,
.subtraction-board__reduced {
    color: #9b5f12;
    font: 700 1.05rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* The exchanged ten is written in front of the digit it joins, never above it,
   so the column reads as the two-digit number it now holds. Where that digit
   has itself been reduced, the ten goes in front of the reduced digit on the
   line above; otherwise it is tucked against the digit in the number itself. */
.sum-board__ten,
.subtraction-board__ten {
    color: #b8770f;
    font: 700 1.05rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.sum-board__cell--term .sum-board__ten {
    position: absolute;
    top: 7px;
    right: calc(50% + 8px);
    font-size: .95rem;
}

.subtraction-board__row--term .subtraction-board__ten {
    position: absolute;
    top: 6px;
    right: calc(50% + 9px);
    font-size: 1rem;
}

/* A digit that has given part of its value away is struck through rather than
   erased, so the reader can still see what the number was. */
.sum-board__cell--spent,
.subtraction-board__cell.is-spent {
    color: #a8b5bf;
    text-decoration: line-through;
    text-decoration-color: #c1553f;
    text-decoration-thickness: 2px;
}

/* The same number written twice, once with a ten moved down into the ones. */
.rename-strip { display: grid; gap: 12px; margin: 24px 0; padding: 22px 26px; border: 2px solid #d9e2ec; border-radius: 18px; background: #f8fbfd; }
.rename-strip__line { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; align-items: center; justify-content: center; color: #173849; font: 700 1.1rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.rename-strip__line b { min-width: 62px; text-align: right; }
.rename-strip__chip { display: grid; min-width: 78px; padding: 9px 12px; place-items: center; border: 2px solid #c9dce8; border-radius: 11px; background: #fff; }
.rename-strip__chip--moved { border-color: #d99a20; background: #fff8df; color: #9b5f12; }

/* The empty decimal places of a whole number, filled before the method starts. */
.pad-strip { display: flex; gap: 5px; margin: 24px 0; align-items: center; justify-content: center; color: #173849; font: 700 1.6rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.pad-strip span { display: grid; width: 46px; height: 50px; place-items: center; border-radius: 10px; background: #eef5fb; }
.pad-strip i { width: 16px; color: #b86821; font-family: Aleo, serif; font-style: normal; text-align: center; }
.pad-strip b { display: grid; width: 46px; height: 50px; place-items: center; border: 2px dashed #cfa96e; border-radius: 10px; background: #fffdf6; color: #b8894a; }

/* The one decision subtraction adds to the method, as a branch rather than a
   list of steps. */
.decision { display: grid; gap: 13px; }
.decision__question { margin: 0; color: #173849; font-size: 1rem; font-weight: 700; text-align: center; }
.decision__branches { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.decision__branch { padding: 14px 18px 16px; border: 2px solid #d9e2ec; border-radius: 14px; background: #eef5fb; }
.decision__branch--exchange { border-color: #e6c893; background: #fffdf7; }
.decision__verdict { display: block; margin-bottom: 6px; color: #116e93; font-weight: 700; }
.decision__branch--exchange .decision__verdict { color: #9b5f12; }
.decision__branch p { margin: 0; color: #41535c; font-size: .9rem; line-height: 1.5; }

/* The two readings of one calculation: what is left, and how far apart. */
.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 h3 { margin: 0 0 6px; color: #09539d; font-size: 1.02rem; }
.reading-card p { margin: 0 0 12px; color: #41535c; font-size: .92rem; line-height: 1.55; }
.reading-card p:last-child { margin-bottom: 0; }

.number-line { position: relative; height: 62px; margin: 18px 0 10px; border-bottom: 3px solid #173849; }
.number-line__span { position: absolute; top: 12px; height: 20px; border: 2px solid #d99a20; border-bottom: 0; border-radius: 9px 9px 0 0; background: rgba(255, 244, 214, .75); }
.number-line__span b { position: absolute; top: -21px; left: 50%; color: #9b5f12; font-size: .84rem; transform: translateX(-50%); white-space: nowrap; }
.number-line__mark { position: absolute; bottom: -3px; width: 3px; height: 14px; background: #173849; }
.number-line__mark span { position: absolute; top: 15px; left: 50%; color: #41535c; font-size: .82rem; font-weight: 700; transform: translateX(-50%); white-space: nowrap; }

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

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

.subtraction-scene__sticky {
    --subtraction-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;
}

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

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

.subtraction-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;
}

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

/* Shown only while the second number is the larger one, when the difference
   would fall below zero and this method no longer applies. */
.subtraction-scene__notice { margin: 0 24px; padding: 7px 14px 9px; border-radius: 10px; background: #fdf1ef; color: #923027; font-size: .84rem; line-height: 1.45; text-align: center; }
.subtraction-scene__notice[hidden] { display: none; }
.subtraction-scene__notice a { color: #923027; }

/* A worked example names itself inside the card, because the card leaves the
   page while it is being read. */
.subtraction-scene[data-a] .subtraction-scene__sticky { height: auto; min-height: 0; }
.subtraction-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; }

.subtraction-board { display: grid; min-height: 0; margin-top: 10px; padding: 16px 24px; overflow: hidden; align-items: center; background: #eaf3f8; }
.subtraction-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); }

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

.subtraction-board__cell {
    position: relative;
    display: grid;
    width: var(--subtraction-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;
    transition: color .2s ease, text-decoration-color .2s ease;
}

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

/* The reduced digits sit above the number they rewrite; the row is kept clear
   of the travelling highlight beneath it. */
.subtraction-board__row--exchange { position: relative; z-index: 3; min-height: 38px; }

.subtraction-board__row--exchange .subtraction-board__cell {
    display: flex;
    min-height: 38px;
    gap: 2px;
    align-items: center;
    justify-content: center;
}

.subtraction-board__ten,
.subtraction-board__reduced { opacity: 0; will-change: transform, opacity; }

/* The travelling highlight. Its position, size and opacity are set by the
   scroll, so it carries no transition of its own. */
.subtraction-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;
}

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

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

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

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

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

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