/* Multiplying decimals. 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. */

/* A short calculation set out the way it is written, used for the static
   figures. Monospace and preserved spaces keep the columns true without a
   cell for every digit. */
.stack {
    display: grid;
    justify-content: center;
    width: max-content;
    margin: 0 auto;
    padding: 16px 22px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(23, 56, 73, .12);
}

.stack__line {
    padding: 2px 4px;
    color: #173849;
    font: 700 1.35rem/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    white-space: pre;
}

.stack__line--ruled { padding-bottom: 5px; border-bottom: 4px solid #173849; }
.stack__line--answer { padding-top: 5px; color: #09539d; }
.stack__line--faint { color: #8a9aa2; }
.stack__note { margin: 10px 0 0; color: #52666f; font: 700 .74rem/1.3 Aleo, serif; text-align: center; }

/* Counting the places, which is the whole rule once the reason is known. */
.count-figure { margin: 24px 0; padding: 20px 24px; border: 2px solid #c9dce8; border-radius: 20px; background: linear-gradient(145deg, #f7fbff 0%, #fff 60%, #fffaf0 100%); }
.count-figure__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.count-figure__op { color: #b86821; font-size: 1.4rem; font-weight: 700; }

.count-figure__num {
    display: grid;
    gap: 5px;
    min-width: 96px;
    padding: 11px 14px 9px;
    justify-items: center;
    border-radius: 13px;
    background: #eaf2fb;
    color: #09539d;
    font: 700 1.42rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.count-figure__num i { color: #52666f; font: 700 .68rem/1.1 Aleo, serif; font-style: normal; }
.count-figure__num--answer { background: #fff8df; color: #9b5f12; }
.count-figure__num--answer i { color: #9b5f12; }
.count-figure figcaption { margin-top: 16px; color: #41535c; font-size: .92rem; line-height: 1.55; text-align: center; }

/* Setting out for adding against setting out for multiplying. */
.setout-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0; }
.setout-card { padding: 18px 20px 20px; border: 2px solid #d9e2ec; border-top: 5px solid #5d91b0; border-radius: 17px; background: #fff; }
.setout-card:last-child { border-top-color: #d99a20; }
.setout-card h3 { margin: 0 0 14px; color: #09539d; font-size: 1.02rem; text-align: center; }
.setout-card p { margin: 14px 0 0; color: #41535c; font-size: .9rem; line-height: 1.5; }

/* Where the method turns up. */
.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; }

.dec-rule ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.dec-rule li { padding: 13px; border-radius: 12px; background: #eef5fb; }
.dec-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; }
.dec-rule p { margin: 0; color: #41535c; font-size: .88rem; line-height: 1.45; }

/* THE SQUARE — the calculation as an area. The whole square is 1, so every
   small square in it is worth 0.01 and the answer can be counted. */
.area-figure { display: grid; gap: 14px; justify-items: center; }
.area-frame { display: grid; grid-template-columns: 46px 320px; grid-template-rows: 26px 320px; gap: 6px; width: max-content; margin: 0 auto; }

.area-bracket {
    position: relative;
    display: grid;
    place-items: center;
    color: #52666f;
    font: 700 .82rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.area-bracket::before,
.area-bracket::after { content: ""; position: absolute; background: currentColor; }

.area-bracket--top { grid-area: 1 / 2; align-self: end; justify-self: start; width: 100%; height: 20px; border-bottom: 2px solid currentColor; }
.area-bracket--top::before { bottom: 0; left: 0; width: 2px; height: 7px; }
.area-bracket--top::after { right: 0; bottom: 0; width: 2px; height: 7px; }
.area-bracket--side { grid-area: 2 / 1; align-self: start; justify-self: end; width: 40px; height: 100%; border-right: 2px solid currentColor; }
.area-bracket--side::before { top: 0; right: 0; width: 7px; height: 2px; }
.area-bracket--side::after { right: 0; bottom: 0; width: 7px; height: 2px; }
.area-bracket--part { opacity: 0; }
.area-bracket--top.area-bracket--part { color: #09539d; }
.area-bracket--side.area-bracket--part { color: #9b5f12; }

.area-square {
    position: relative;
    grid-area: 2 / 2;
    width: 320px;
    height: 320px;
    box-sizing: border-box;
    border: 2px solid #173849;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.area-rule { position: absolute; background: #c9dce8; opacity: 0; }
.area-rule--column { top: 0; bottom: 0; width: 1px; }
.area-rule--row { right: 0; left: 0; height: 1px; }

.area-unit {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    width: 10%;
    height: 10%;
    place-items: center;
    background: #fff2c9;
    box-shadow: inset 0 0 0 2px #d99a20;
    color: #9b5f12;
    font: 700 .58rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    opacity: 0;
}

/* The two bands are multiplied together where they cross, so the rectangle
   they make appears on its own without being drawn. */
.area-band { position: absolute; top: 0; left: 0; mix-blend-mode: multiply; opacity: 0; }
.area-band--across { height: 100%; background: rgba(93, 145, 176, .32); }
.area-band--down { width: 100%; background: rgba(217, 154, 32, .34); }

.area-cell { position: absolute; width: 10%; height: 10%; box-sizing: border-box; box-shadow: inset 0 0 0 2px #b86821; opacity: 0; }
.area-tally { min-height: 1.4em; margin: 0; color: #09539d; font: 700 1.12rem/1.25 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; opacity: 0; }

/* THE COLUMNS — a fixed set of place-value columns with the point drawn as the
   boundary it is. The digits are placed by what they are worth, so making a
   number whole is one movement of every digit and nothing else. */
.dec-board { position: relative; margin: 0 auto; }

.dec-board__pointline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed #b8cbd7;
    transform: translateX(-50%);
}

.dec-row { position: relative; height: 54px; margin: 0 auto; }
.dec-row--head { height: 26px; }
.dec-row--answer { height: 60px; margin-top: 6px; }

.dec-row--ruled::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--dec-width);
    height: 4px;
    border-radius: 2px;
    background: #173849;
}

.dec-row__slot { position: absolute; top: 4px; bottom: 4px; border-radius: 10px; background: rgba(238, 245, 251, .85); }
.dec-row__slot--decimal { background: rgba(255, 248, 223, .85); }
.dec-row--head .dec-row__slot { display: none; }

.dec-row__label { position: absolute; top: 0; display: grid; height: 100%; place-items: center; color: #52666f; font: 700 .66rem/1.1 Aleo, serif; }

.dec-row__digit {
    position: absolute;
    top: 0;
    display: grid;
    height: 100%;
    place-items: center;
    color: #173849;
    font: 700 1.62rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    will-change: left, opacity;
}

/* A zero that holds an empty place is doing a different job from a digit that
   came out of the multiplication, and is marked as such. */
.dec-row__digit--holder { color: #9b5f12; }
.dec-row--answer .dec-row__digit { color: #09539d; font-size: 1.72rem; }
.dec-row--answer .dec-row__digit--holder { color: #9b5f12; }

/* The written point, drawn as the mark it is rather than as a monospace full
   stop, which all but disappears at this size. The character stays in the
   element so the board still reads as a number to anything but the eye. */
.dec-row__point {
    position: absolute;
    bottom: 14px;
    width: 6px;
    height: 6px;
    overflow: hidden;
    border-radius: 50%;
    background: #173849;
    color: transparent;
    font-size: 6px;
    line-height: 6px;
    transform: translateX(-50%);
}

.dec-row--answer .dec-row__point {
    bottom: 15px;
    width: 7px;
    height: 7px;
    background: #09539d;
    font-size: 7px;
    line-height: 7px;
}
.dec-row__op { position: absolute; top: 0; left: 0; display: grid; height: 100%; place-items: center; color: #b86821; font-size: 1.5rem; font-weight: 700; }

.dec-row__note {
    position: absolute;
    top: 0;
    display: grid;
    height: 100%;
    place-items: center start;
    color: #52666f;
    font: 700 .86rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    white-space: nowrap;
    opacity: 0;
}

.dec-row--answer .dec-row__note { color: #09539d; }
.dec-row__note--divide { color: #9b5f12; }

/* What was borrowed and what was given back, kept side by side so the second
   is never the surprise it usually is. */
.dec-balance { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; justify-content: center; }
.dec-balance__chip { display: grid; gap: 3px; min-width: 132px; padding: 9px 14px; justify-items: center; border-radius: 12px; opacity: 0; }
.dec-balance__chip b { font: 700 1.05rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.dec-balance__chip i { font: 700 .68rem/1.2 Aleo, serif; font-style: normal; }
.dec-balance__chip--up { background: #eaf2fb; color: #09539d; }
.dec-balance__chip--down { background: #fff8df; color: #9b5f12; }

/* The scroll-led calculation. */
.dec-scene { position: relative; min-height: 470px; margin: 26px 0 8px; overflow-anchor: none; }
.dec-scene.is-ready { height: var(--scene-height); min-height: var(--scene-min-height); }

/* The card is as tall as its own calculation: a wider board or an extra
   division changes what has to fit, so a fixed height would either clip the
   first or leave the second half empty. */
.dec-scene__sticky {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    box-sizing: border-box;
    grid-template-rows: auto auto 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;
}

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

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

.dec-scene__inputs input {
    width: 175px;
    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;
}

.dec-scene__inputs input:focus { border-color: #116e93; box-shadow: 0 0 0 4px rgba(17, 110, 147, .12); }
.dec-scene__times { 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. */
.dec-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; }

.dec-stage { display: grid; min-height: 0; padding: 14px 24px; overflow: hidden; align-items: center; background: #eaf3f8; }
.dec-paper { position: relative; width: max-content; margin: 0 auto; padding: 18px 24px 22px; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(23, 56, 73, .12); }

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

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

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

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

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