/* Shared precision layout for pencil-and-paper school-method walkthroughs. */

/* Long division: keep every written digit in one true monospace column. */
.division-school-board {
    display: flex;
    justify-content: center;
}

.division-school-sheet {
    grid-template-columns: max-content max-content;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}

.division-school-digit-grid,
.division-school-row {
    grid-template-columns: repeat(var(--division-columns), 1ch);
    width: max-content;
}

.division-school-quotient,
.division-school-dividend,
.division-school-workrows {
    width: max-content;
    padding-left: .5em;
    padding-right: 0;
}

.division-school-dividend {
    position: relative;
    border-left: 0;
}

.division-school-dividend::before {
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    bottom: 0;
    border-left: 3px solid var(--ink);
}

.division-school-value {
    padding-left: 0;
    padding-right: 0;
}

.division-school-brought {
    width: 1ch;
    padding-left: 0;
    padding-right: 0;
}

/* Long multiplication guided paper method. */
.multiplication-school-method-panel {
    width: 100%;
}

.multiplication-school-caption {
    max-width: 920px;
    margin: 0 0 14px;
    color: #4d4941;
    font: 700 .66rem/1.5 "Courier New", monospace;
}

.multiplication-classic {
    min-height: 500px;
}

.multiplication-school-board {
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.multiplication-school-sheet {
    width: max-content;
    max-width: 100%;
    padding: 8px 6px 18px 1.35ch;
    font: 900 var(--multiplication-font-size, 2rem)/1.12 "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.multiplication-digit-grid,
.multiplication-paper-row {
    display: grid;
    grid-template-columns: repeat(var(--multiplication-columns), 1ch);
    width: max-content;
    min-width: 0;
}

.multiplication-carry-row {
    min-height: .72em;
    align-items: end;
}

.multiplication-carry-marker {
    display: block;
    width: 1ch;
    color: var(--orange);
    text-align: center;
    font-size: .56em;
    line-height: 1;
}

.multiplication-paper-row {
    position: relative;
    min-height: 1.22em;
    align-items: center;
}

.multiplication-top-row {
    padding-bottom: .08em;
}

.multiplication-bottom-row {
    padding-bottom: .16em;
    border-bottom: 3px solid var(--ink);
}

.multiplication-bottom-row::before {
    content: "×";
    position: absolute;
    left: -1.12ch;
    bottom: .08em;
    color: var(--ink);
    font: inherit;
}

.multiplication-partial-stack {
    position: relative;
    width: max-content;
}

.multiplication-partial-rows {
    padding-top: .16em;
}

.multiplication-partial-row {
    min-height: 1.22em;
}

.multiplication-partial-row:last-child::before {
    content: "+";
    position: absolute;
    left: -1.12ch;
    bottom: .06em;
    color: var(--ink);
    font: inherit;
    visibility: hidden;
}

.multiplication-school-sheet.is-addition-phase .multiplication-partial-row:last-child::before {
    visibility: visible;
}

/* Addition carries are written above the columns being added without taking up a row. */
.multiplication-add-carry-row {
    position: absolute;
    left: 0;
    top: -.38em;
    z-index: 5;
    height: 0;
    min-height: 0;
    align-items: end;
    pointer-events: none;
}

.multiplication-add-carry-marker {
    position: relative;
    top: 0;
}

/* Keep the final rule and answer completely out of the paper until addition begins. */
.multiplication-answer-row {
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-top: 0;
    overflow: visible;
}

.multiplication-school-sheet.is-addition-phase .multiplication-answer-row {
    height: auto;
    min-height: 1.22em;
    padding-top: .1em;
    border-top: 3px solid var(--ink);
}

.multiplication-digit {
    position: relative;
    display: block;
    width: 1ch;
    min-width: 0;
    text-align: center;
    transition: opacity .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.multiplication-placeholder {
    color: var(--orange);
}

.multiplication-school-sheet .is-future {
    visibility: hidden;
    opacity: 0;
}

.multiplication-school-sheet .is-current {
    z-index: 3;
    background: var(--yellow);
    box-shadow: 0 0 0 .12em var(--orange);
}

.multiplication-school-sheet .multiplication-digit.is-source-active {
    z-index: 2;
    background: #fff1ac;
    box-shadow: 0 0 0 .08em var(--ink);
}

.multiplication-school-sheet .multiplication-partial-digit.is-add-source {
    z-index: 2;
    background: var(--paper-deep);
    box-shadow: inset 0 0 0 .06em var(--ink);
}

.multiplication-row-label {
    display: block;
    margin-top: .15em;
    color: var(--muted);
    font: 800 .56rem/1.2 "Courier New", monospace;
    letter-spacing: .05em;
    text-align: right;
}

@media (max-width: 980px) {
    .multiplication-classic {
        min-height: 400px;
    }
}

@media (max-width: 620px) {
    .multiplication-classic {
        min-height: 340px;
        padding: 22px 12px;
    }

    .multiplication-school-sheet {
        padding-left: 1.2ch;
        padding-right: 2px;
        font-size: min(var(--multiplication-font-size, 1.4rem), 1.4rem);
    }
}