/* The shared progress gate in training.css is limited to the exercise card. */
body:not(.long-division-ready) .progress-ring-value,
body:not(.long-division-ready) .smartscore_progress_fill { transition: none !important; }
.main_wrapper { min-height: 700px; }
.long_division[hidden], .long_division [hidden] { display: none !important; }
.long_division {
    --ld-cell: 46px;
    --ld-row: 50px;
    min-height: 700px; padding: 28px; justify-content: flex-start;
}
.ld_body { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 740px; margin: 0 auto; }
.ld_board_wrap { width: 100%; display: flex; justify-content: center; padding: 0 0 8px; }
.ld_diagram {
    display: grid; grid-template-columns: auto auto; gap: 12px; align-items: start; width: max-content;
    color: var(--main);
    font-variant-numeric: tabular-nums; font-size: 40px; font-weight: var(--main_bold_weight); line-height: 1;
    -webkit-user-select: none; user-select: none;
}
.ld_work { display: grid; grid-template-columns: repeat(calc(var(--ld-digits) + 1), var(--ld-cell)); grid-auto-rows: var(--ld-row); align-items: center; grid-column: 1; grid-row: 1; }
.ld_right { grid-column: 2; grid-row: 1; border-left: 3px solid var(--lightgray); padding-left: 6px; }
.ld_dividend { color: var(--blue3); }
.ld_divisor { display: flex; align-items: center; height: var(--ld-row); border-bottom: 3px solid var(--lightgray); padding-left: 10px; color: var(--orange3); }
.ld_quotient { display: flex; align-items: center; min-height: var(--ld-row); }
.ld_quotient > span, .ld_digit { width: var(--ld-cell); text-align: center; flex: 0 0 var(--ld-cell); }
.ld_number { display: flex; justify-content: end; }
.ld_minus { color: var(--lightgray); text-align: center; }
.ld_pending { color: var(--lightgray); }
.ld_line { border-bottom: 3px solid var(--lightgray); align-self: end; width: 100%; transform: translateY(1.5px); pointer-events: none; }
/* An inset frame keeps every digit slot exactly one column wide. */
.ld_cell {
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: flex-end;
    width: 100%; height: calc(var(--ld-row) - 8px); min-width: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px var(--lightgray);
    background: var(--secondary_background);
    font: inherit; line-height: 1; text-align: center;
    cursor: pointer;
}
.ld_cell:empty { justify-content: center; }
.ld_quotient .ld_cell { width: var(--ld-cell); justify-content: center; }
.ld_cell.is_wrong { box-shadow: inset 0 0 0 2px var(--red); background: var(--transp_red); }
.ld_cell.is_wrong .ld_digit { color: var(--red); }
/* Match the active-cell highlight used by the column-addition trainer. */
.ld_cell.is_active { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.long_division[data-phase="correct"] .ld_quotient > span,
.long_division[data-phase="correct"] .ld_work .ld_number:not(.ld_dividend) { color: var(--green); }
.ld_note { min-height: 44px; margin: 0; text-align: center; max-width: 520px; font-size: 15px; line-height: 1.5; }
.ld_note.is_wrong { color: var(--red); }
.ld_note.is_correct { color: var(--green); }
.ld_body .ld_next { box-sizing: border-box; width: 100%; max-width: 480px; min-height: 52px; margin: 0; }
.ld_footer {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    align-items: center; gap: 12px;
    width: auto; max-width: none;
    min-height: 0;
    margin: 24px -28px -28px; padding: 16px 28px;
}
/* Keep the exercise near the top even when the keypad is closed. */
body:not(.mobile_mode) .ld_body { flex: 1 1 auto; justify-content: flex-start; }
body:not(.mobile_mode) .ld_footer { margin-top: auto; }
body.mobile_mode .main_wrapper, body.mobile_mode .long_division { min-height: 0; }
.ld_footer .footer_stat { grid-column: 1; justify-self: start; min-width: 0; }
.ld_footer .use_clav { grid-column: 2; justify-self: stretch; margin: 0; text-align: center; }
.ld_footer .ld_skip { grid-column: 3; align-self: center; justify-self: end; margin: 0; padding: 8px 14px; white-space: nowrap; }
.long_division button:focus, .long_division button:focus-visible { outline: none !important; box-shadow: none; }
.training_fullscreen .long_division { overflow-y: auto; min-height: 0; }
@media (max-width: 767px) {
    .long_division { --ld-cell: 36px; --ld-row: 46px; padding: 20px 12px; }
    .ld_diagram { gap: 6px; font-size: 32px; }
    .ld_footer { margin: 20px -12px -20px; padding: 14px 12px; }
}
@media (max-width: 359px) {
    .long_division { --ld-cell: 31px; --ld-row: 44px; }
    .ld_diagram { gap: 4px; font-size: 29px; }
}