/* Short division: static place-value figures and scroll-led calculations. Each
   scene supplies its own scroll distance while the inner card remains in view. */

.inline-division {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: end;
    margin: 0 .18em;
    vertical-align: baseline;
    font: 700 1.05em/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.inline-division span:first-child { padding: .18em .3em .12em 0; }
.inline-division span:last-child { padding: .18em .34em .12em; border-top: 2px solid #173849; border-left: 2px solid #173849; border-radius: .45em 0 0 0; }

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

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

.division-scene__sticky {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    height: min(610px, calc(100vh - 104px));
    min-height: 480px;
    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;
}

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

.division-scene__heading {
    margin: 0;
    padding: 18px 24px 10px;
    color: #173849;
    font: 700 1.35rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    text-align: center;
}

.division-stage {
    display: grid;
    min-height: 0;
    padding: 18px 24px;
    overflow: hidden;
    align-items: center;
    background:
        linear-gradient(rgba(93, 145, 176, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 145, 176, .075) 1px, transparent 1px),
        #eaf3f8;
    background-size: 28px 28px;
}

.division-board {
    --cell: 66px;
    --digits: 4;
    --place-row: 32px;
    --place-offset: calc(var(--place-row) - 32px);
    position: relative;
    display: grid;
    width: calc(var(--digits) * var(--cell) + 114px);
    min-height: 198px;
    margin: 0 auto;
    padding: 17px 16px 12px;
    grid-template-columns: 70px repeat(var(--digits), var(--cell)) 44px;
    grid-template-rows: var(--place-row) 54px 74px 38px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(23, 56, 73, .12);
    color: #173849;
    font: 700 1.72rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.division-board__places { display: contents; color: #62747d; font: 700 .63rem/1.1 Aleo, serif; text-align: center; }
.division-board__place { display: grid; grid-row: 1; min-width: 0; place-items: center; padding: 0 4px; white-space: nowrap; }

.division-board--vertical-places {
    --place-row: 116px;
}

.division-board--vertical-places .division-board__place {
    padding: 5px 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}
.division-board__quotient,
.division-board__dividend { display: contents; }

.division-board__cell { position: relative; z-index: 2; display: grid; min-width: 0; place-items: center; will-change: opacity, transform; }
.division-board__cell--quotient { grid-row: 2; color: #09539d; font-size: 1.82rem; opacity: 0; }
.division-board__cell--dividend { grid-row: 3; }
.division-board__cell--appended { color: #687b84; opacity: 0; }

.division-board__divisor { display: grid; grid-column: 1; grid-row: 3; place-items: center end; padding-right: 17px; }

.division-board__bracket {
    grid-row: 3;
    z-index: 1;
    border-top: 4px solid #173849;
    border-left: 4px solid #173849;
    border-radius: 19px 0 0 0;
    pointer-events: none;
}

.division-board__point {
    position: absolute;
    left: calc(86px + var(--point) * var(--cell) - 7px);
    z-index: 5;
    width: 14px;
    color: #173849;
    text-align: center;
    will-change: opacity;
}

.division-board__point--answer { top: calc(68px + var(--place-offset)); color: #09539d; }
.division-board__point--given { top: calc(122px + var(--place-offset)); }

.division-board__point-guide {
    position: absolute;
    top: calc(62px + var(--place-offset));
    left: calc(86px + var(--point) * var(--cell));
    z-index: 0;
    height: 82px;
    border-left: 2px dashed #81a7bc;
    will-change: opacity;
}

/* In subtraction, exchanged digits are written above the original row. The
   division remainder is the inverse: it settles slightly below and just before
   the next large digit. It is plain handwriting, not a badge. */
.division-board__carry {
    position: absolute;
    top: calc(149px + var(--place-offset));
    left: calc(86px + var(--target) * var(--cell) + var(--carry-offset));
    z-index: 6;
    width: 18px;
    color: #a8670e;
    font: 700 1rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    text-align: center;
    opacity: 0;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff;
    will-change: opacity, transform;
}

.division-board__cursor {
    position: absolute;
    top: calc(49px + var(--place-offset));
    left: var(--cursor-left, 90px);
    z-index: 0;
    width: var(--cursor-width, 58px);
    height: 128px;
    box-sizing: border-box;
    border: 2px solid #d99a20;
    border-radius: 13px;
    background: #fff2c9;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
}

.division-board__equation {
    grid-row: 4;
    align-self: end;
    margin: 0;
    color: #667982;
    font: 700 .78rem/1.25 Aleo, serif;
    text-align: center;
}

.division-scene__caption {
    display: grid;
    height: 7.6em;
    padding: 14px 30px 7px;
    align-content: center;
    box-sizing: border-box;
    text-align: center;
}

.division-scene__caption h2,
.division-scene__caption h3 { margin: 0 0 6px; color: #09539d; font-size: 1.1rem; }
.division-scene__caption p { max-width: 680px; margin: 0 auto; color: #344b56; font-size: .96rem; line-height: 1.5; }

.division-scene__progress { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 18px; justify-content: center; }
.division-scene__dot { width: 9px; height: 9px; border-radius: 50%; background: #c6d4dc; transition: width .25s ease, border-radius .25s ease, background-color .25s ease; }
.division-scene__dot.is-current { width: 28px; border-radius: 999px; background: #116e93; }
.division-scene__dot.is-past { background: #6c9bb0; }

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

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

.division-scene__inputs input[data-divisor-input] { width: 105px; }
.division-scene__inputs input:focus { border-color: #116e93; box-shadow: 0 0 0 4px rgba(17, 110, 147, .12); }
.division-scene__operator { margin-top: 20px; color: #b86821; font-size: 1.7rem; font-weight: 700; }

.exchange-strip { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin: 24px 0; padding: 0; list-style: none; }
.exchange-strip li { display: grid; gap: 10px; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px; border: 2px solid #d9e4eb; border-radius: 16px; background: #fff; text-align: center; }
.exchange-strip__amount { padding: 10px 7px; border-radius: 10px; background: #edf3f6; color: #334b56; font-weight: 700; }
.exchange-strip__amount--new { background: #fff2c9; color: #82520e; }
.exchange-strip__arrow { color: #8a5a14; font-size: 1.3rem; }
.exchange-strip p { grid-column: 1 / -1; margin: 0; color: #4b6069; font-size: .88rem; line-height: 1.45; }

.division-rule ol { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; }
.division-rule li { display: grid; gap: 10px; grid-template-columns: 32px 1fr; align-items: center; padding: 12px 14px; border-radius: 12px; background: #eef5fb; }
.division-rule li > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #116e93; color: #fff; font-size: .8rem; }
.division-rule p { margin: 0; font-size: .94rem; line-height: 1.4; }

.finish-choice { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin: 24px 0; }

.finish-choice__card {
    padding: 20px 22px;
    border: 2px solid #d9e4eb;
    border-top-width: 6px;
    border-radius: 16px;
    background: #fff;
}

.finish-choice__card--remainder { border-top-color: #5d91b0; }
.finish-choice__card--decimal { border-top-color: #d99a20; }
.finish-choice__route { color: #62747d; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.finish-choice h2 { margin: 5px 0 10px; color: #173849; font-size: 1.15rem; }
.finish-choice p { margin: 0 0 12px; color: #41535c; font-size: .92rem; line-height: 1.5; }
.finish-choice p:last-child { margin-bottom: 0; }
.finish-choice .finish-choice__answer { color: #09539d; font: 700 1rem/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.finish-choice .finish-choice__check { color: #63757d; font-size: .82rem; }

.decimal-lift { width: 320px; margin: 25px auto 14px; }

.decimal-lift__board {
    position: relative;
    display: grid;
    width: max-content;
    margin: 0 auto;
    grid-template-columns: 56px 52px 52px 18px 52px;
    grid-template-rows: 58px 68px 34px;
    color: #173849;
    font: 700 2rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.decimal-lift__cell,
.decimal-lift__divisor { position: relative; z-index: 2; display: grid; place-items: center; }
.decimal-lift__cell--q2 { grid-column: 3; grid-row: 1; color: #09539d; }
.decimal-lift__cell--qpoint { grid-column: 4; grid-row: 1; color: #d08116; }
.decimal-lift__cell--q7 { grid-column: 5; grid-row: 1; color: #09539d; }
.decimal-lift__divisor { grid-column: 1; grid-row: 2; padding-right: 12px; justify-content: end; }
.decimal-lift__cell--d1 { grid-column: 2; grid-row: 2; }
.decimal-lift__cell--d8 { grid-column: 3; grid-row: 2; }
.decimal-lift__cell--dpoint { grid-column: 4; grid-row: 2; color: #d08116; }
.decimal-lift__cell--d9 { grid-column: 5; grid-row: 2; }

.decimal-lift__bracket {
    z-index: 1;
    grid-column: 2 / 6;
    grid-row: 2;
    border-top: 4px solid #173849;
    border-left: 4px solid #173849;
    border-radius: 18px 0 0 0;
}

.decimal-lift__guide {
    z-index: 0;
    grid-column: 4;
    grid-row: 1 / 4;
    justify-self: center;
    border-left: 2px dashed #d99a20;
}

.decimal-lift__label {
    z-index: 2;
    grid-column: 4 / 6;
    grid-row: 3;
    align-self: end;
    padding-left: 12px;
    background: rgb(235, 237, 218);
    color: #895914;
    font: 700 .78rem/1 Aleo, serif;
    white-space: nowrap;
}

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