* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    overflow: hidden;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #172b3a;
    background: #edf3f7;
}

#whiteboard {
    width: 100vw;
    height: 100vh;

    display: grid;
    grid-template-rows: 68px 1fr;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 26px;

    background: #ffffff;
    border-bottom: 1px solid #cfdae3;

    box-shadow:
        0 2px 12px rgba(20,45,65,.06);
}

.brand {
    font-size: 21px;
    font-weight: 850;
}

.lesson-id {
    margin-top: 3px;

    color: #718291;

    font-size: 11px;
    font-weight: 750;
}

.status {
    padding: 8px 13px;

    border-radius: 999px;

    background: #eef4f8;
    color: #526a7e;

    font-size: 12px;
    font-weight: 800;
}

.status.ready {
    background: #e8f6ec;
    color: #28713b;
}

.status.error {
    background: #fff0f0;
    color: #9c3030;
}

.workspace {
    min-height: 0;

    display: grid;
    grid-template-columns: 440px 1fr;

    gap: 18px;

    padding: 18px;
}


/* ============================================================
   PINNED PROBLEM
   ============================================================ */

.problem-panel {
    align-self: start;

    padding: 22px;

    background: #ffffff;

    border: 2px solid #cbd8e3;
    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(35,55,75,.08);
}

.small-label {
    margin-bottom: 16px;

    color: #65798b;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .11em;
}

.problem-display {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 5px;
}


/* ============================================================
   UNIVERSAL MATH BOX
   ============================================================ */

.math-box {
    width: 46px;
    height: 54px;

    flex: 0 0 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #b8c7d3;
    border-radius: 9px;

    background: #ffffff;

    color: #102f49;

    font-size: 32px;
    line-height: 1;
    font-weight: 850;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.math-box.active {
    background: #fff2a8;
    border-color: #d49b00;

    box-shadow:
        0 0 0 4px rgba(229,177,0,.15);

    transform: translateY(-2px);
}

.math-box.completed {
    background: #e8f4ec;
    border-color: #77a987;
}

.math-box.write-here {
    border-style: dashed;
    border-color: #2671b8;
    background: #eef7ff;
}

.carry-box,
.work-box {
    width: 46px;
    height: 54px;
    flex-basis: 46px;
}


/* ============================================================
   DIVISION DISPLAY
   ============================================================ */

.long-division-problem {
    display: flex;
    align-items: flex-end;

    min-width: max-content;
}

.divisor-boxes,
.dividend-boxes {
    display: flex;
    align-items: center;
    gap: 3px;
}

.division-symbol {
    margin: 0 -3px 3px 6px;

    color: #203f58;

    font-family: Georgia, serif;
    font-size: 74px;
    line-height: .82;
}

.dividend-wrap {
    position: relative;

    padding-top: 5px;
}

.division-line {
    position: absolute;

    top: 2px;
    left: -4px;
    right: 0;

    height: 4px;

    background: #203f58;
    border-radius: 2px;
}

.math-punctuation {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;

    width: 10px;
    height: 54px;

    color: #203f58;

    font-size: 28px;
    font-weight: 900;
}

.math-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    height: 54px;

    color: #203f58;

    font-size: 31px;
    font-weight: 850;
}

.problem-space {
    display: inline-block;
    width: 12px;
}

.generic-problem {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 4px;
}


/* ============================================================
   TEACHING AREA
   ============================================================ */

.teaching-board {
    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-rows: auto 1fr auto;

    background: #ffffff;

    border: 1px solid #cad7e1;
    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(35,55,75,.08);

    overflow: hidden;
}

.step-top {
    padding: 22px 30px 0;
}

.step-counter {
    display: inline-block;

    padding: 8px 13px;

    border-radius: 999px;

    background: #edf3f8;

    color: #466176;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: .08em;
}

.teaching-content {
    min-height: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 35px 55px;

    text-align: center;
}

.instruction {
    max-width: 900px;

    color: #102f49;

    font-size: clamp(30px, 3.2vw, 52px);
    line-height: 1.18;
    font-weight: 850;
}

.math-work {
    width: 100%;

    margin-top: 38px;
}

.work-area {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;
}

.work-line {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;
}

.work-prompt {
    color: #536c7f;

    font-size: 21px;
    font-weight: 800;
}

.step-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 28px;

    border-top: 1px solid #e0e7ed;
}

.step-button {
    min-width: 145px;

    padding: 15px 22px;

    border: 0;
    border-radius: 12px;

    font: inherit;

    font-size: 16px;
    font-weight: 850;

    cursor: pointer;
}

.step-button.primary {
    background: #174f78;
    color: #ffffff;
}

.step-button.secondary {
    background: #edf3f7;
    color: #29465c;
}

.step-button:disabled {
    opacity: .35;
    cursor: default;
}

.error-card {
    padding: 22px;

    border: 2px solid #daa8a8;
    border-radius: 14px;

    background: #fff5f5;
    color: #842f2f;

    font-size: 18px;
}

.plain-problem {
    font-size: 24px;
    font-weight: 800;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    body {
        overflow: auto;
    }

    #whiteboard {
        height: auto;
        min-height: 100vh;
    }

    .workspace {
        grid-template-columns: 1fr;
    }

    .problem-panel {
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .teaching-board {
        min-height: 650px;
    }

    .teaching-content {
        padding: 30px 22px;
    }
}

/* ============================================================
   PROBLEM TRACKER — FIT FULL PROBLEM WITHOUT SCROLLING
   ============================================================ */

.workspace {
    grid-template-columns: 480px 1fr;
}

.problem-panel {
    min-width: 0;
}

.problem-display {
    width: 100%;
    overflow: hidden;
}

.long-division-problem {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-end;

    transform-origin: left center;
}

.divisor-boxes,
.dividend-boxes {
    flex-shrink: 1;
}

.math-box {
    width: clamp(38px, 3.2vw, 46px);
    height: clamp(46px, 3.8vw, 54px);

    flex: 0 1 clamp(38px, 3.2vw, 46px);

    font-size: clamp(27px, 2.4vw, 32px);
}

.carry-box,
.work-box {
    width: clamp(38px, 3.2vw, 46px);
    height: clamp(46px, 3.8vw, 54px);

    flex-basis: clamp(38px, 3.2vw, 46px);
}

.divisor-boxes,
.dividend-boxes {
    gap: 2px;
}

.math-punctuation {
    width: 8px;
    height: clamp(46px, 3.8vw, 54px);

    font-size: 27px;
}

.division-symbol {
    flex: 0 0 auto;

    margin-left: 3px;
    margin-right: -4px;
}



/* ============================================================
   LONG DIVISION — PERSISTENT COLUMN WORKSPACE
   ============================================================ */

.long-division-workspace {
    width: min(760px, 94%);
    margin: 18px auto 0;
    padding: 22px 24px 28px;
    background: #ffffff;
    border: 1px solid #d9e3ec;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(23, 45, 66, 0.06);
}

.ld-work-title {
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #637487;
}

.ld-row {
    display: grid;
    grid-template-columns:
        112px
        repeat(var(--ld-columns), 54px);
    justify-content: center;
    align-items: center;
    min-height: 54px;
}

.ld-lead {
    min-height: 54px;
}

.ld-cell {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: #102f49;
}

.ld-quotient-row {
    margin-bottom: 0;
}

.ld-quotient-cell {
    font-weight: 900;
}

.ld-problem-row {
    margin-top: -2px;
}

.ld-divisor-wrap {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 34px;
    font-weight: 800;
    color: #102f49;
    padding-right: 3px;
    box-sizing: border-box;
}

.ld-divisor {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 6px;
    border-radius: 8px;
}

.ld-bracket {
    font-size: 44px;
    line-height: 1;
    margin-left: 2px;
    transform: translateY(-1px);
}

.ld-dividend-cell {
    border-top: 4px solid #173d5b;
}

.ld-product-row {
    margin-top: 1px;
}

.ld-product-cell,
.ld-remainder-cell {
    font-size: 31px;
}

.ld-subtract-line-row {
    min-height: 10px;
}

.ld-subtract-line-row .ld-lead,
.ld-subtract-line-row .ld-cell {
    min-height: 10px;
    height: 10px;
}

.ld-subtract-line {
    border-top: 3px solid #173d5b;
}

.ld-remainder-row {
    margin-bottom: 4px;
}

.ld-active {
    background: #fff0a8;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px #e5b825;
}

.ld-dividend-cell.ld-active {
    border-top-color: #173d5b;
}

@media (max-width: 900px) {

    .long-division-workspace {
        padding-left: 10px;
        padding-right: 10px;
        overflow-x: auto;
    }

    .ld-row {
        grid-template-columns:
            90px
            repeat(var(--ld-columns), 46px);
    }

    .ld-cell {
        width: 46px;
        height: 50px;
        font-size: 29px;
    }

    .ld-divisor-wrap {
        height: 50px;
        font-size: 29px;
    }
}


/* ============================================================
   RIGHT TEACHING SCREEN — FOLLOW THE WRITTEN WORK
   ============================================================ */

.teaching-board {
    overflow-y: auto;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

#math-work {
    scroll-margin-top: 120px;
    scroll-margin-bottom: 120px;
}

.ld-problem-row,
.ld-product-row,
.ld-subtract-line-row,
.ld-remainder-row {
    scroll-margin-top: 150px;
    scroll-margin-bottom: 150px;
}