/* Axiom Labs Base Styles */

/* Ensure smooth scrolling for the mission results breakdown */
html {
    scroll-behavior: smooth;
}

/* Custom indicator for HTMX requests */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator {
    opacity: 1;
}

/* Drawing Canvas touch action management */
#canvas-container canvas {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Multi-canvas styling */
.canvas-row {
    position: relative;
    background-color: #f8fafc;
    transition: background-color 0.2s;
}

.canvas-row:hover {
    background-color: #f1f5f9;
}

.canvas-row:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #e2e8f0;
    pointer-events: none;
}

/* Mission progress bar animation */
.bg-blue-600 {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom monospaced font stack for equations */
.font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

/* Hover effects for dashboard tables */
.hover\:bg-gray-50:hover {
    background-color: rgba(249, 250, 251, 1);
}

/* ===== Bus Stop (long division worked example) ===== */
.bus-stop {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.bus-stop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.bus-stop-title {
    color: #fde047;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.bus-stop-chip {
    background: #fde047;
    color: #713f12;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.9rem;
    border-radius: 9999px;
    box-shadow: 0 0 12px rgba(253, 224, 71, 0.35);
    transition: transform 0.15s ease;
}

.bus-stop-chip.bs-chip-pulse {
    animation: bsChipPulse 0.4s ease-out;
}

/* The tableau's next-step chip is the main prompt, so make it stand out. */
.mult-tableau .bus-stop-chip {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    padding: 0.4rem 1.15rem;
    background: #facc15;
    color: #422006;
    border: 2px solid #fef08a;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25), 0 0 22px rgba(250, 204, 21, 0.6);
}

.mult-tableau .bus-stop-chip.bs-chip-pulse {
    animation: bsChipPulse 0.4s ease-out;
}

/* ---- The tableau: a grid of gutter + one column per dividend digit ---- */
.bs-stage {
    --bs-cell: 2.7rem;
    --bs-gutter: 3.4rem;
    position: relative;
    width: fit-content;
    margin: 0 auto;
    padding: 0 0 0.5rem;
}

/* The bus-stop bracket: an L rotated once clockwise (corner top-left).
   The divisor sits outside to the left of the wall; the dividend sits
   inside under the roof. Wall descends only beside the dividend. */
.bs-stage::before {
    content: '';
    position: absolute;
    top: 2.9rem;
    left: var(--bs-gutter);
    width: calc(var(--bs-cols, 1) * var(--bs-cell) + 0.45rem);
    height: 2.9rem;
    border-top: 3px solid #e2e8f0;
    border-left: 3px solid #e2e8f0;
    border-top-left-radius: 0.4rem;
    pointer-events: none;
}

.bs-row {
    display: grid;
    grid-template-columns: var(--bs-gutter) repeat(var(--bs-cols, 1), var(--bs-cell));
    align-items: center;
}

.bs-row-q {
    min-height: 2.9rem;
}

.bs-row-dividend {
    min-height: 2.9rem;
}

.bs-row-caret {
    min-height: 1.35rem;
}

.bs-gutter {
    display: block;
}

.bs-divslot {
    position: relative;
    text-align: right;
    padding-right: 0.65rem;
}

.bs-divisor {
    color: #f8fafc;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 700;
}

.bs-cell,
.bs-qcell,
.bs-dcell,
.bs-caretcell,
.bs-prodcell,
.bs-workcell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--bs-cell);
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.bs-qcell {
    color: transparent;
    line-height: 1;
}

.bs-qcell.bs-q-revealed {
    color: #fde047;
    text-shadow: 0 0 14px rgba(253, 224, 71, 0.45);
}

.bs-qcell.bs-just {
    animation: bsQuotientDrop 0.32s cubic-bezier(0.2, 0.8, 0.3, 1.15);
}

.bs-dcell {
    color: #f8fafc;
}

.bs-dcell.bs-active {
    color: #fef9c3;
    animation: bsDcellGlow 0.3s ease-out;
}

.bs-caretcell {
    color: transparent;
    height: 1.35rem;
    font-size: 1.1rem;
    font-weight: 900;
}

.bs-caretcell.bs-caret-show {
    color: #fbbf24;
}

.bs-caretcell.bs-just {
    animation: bsCaretTap 0.28s ease-out;
}

.bs-prodcell {
    color: #7dd3fc;
    height: 2.2rem;
}

.bs-workcell {
    color: #e2e8f0;
    height: 2.2rem;
}

.bs-prodcell.bs-just,
.bs-workcell.bs-just {
    animation: bsDigitIn 0.28s ease-out;
}

/* Working rows: products and running remainders share the digit columns */
.bs-row-product,
.bs-row-work {
    min-height: 2.2rem;
}

.bs-row-rule {
    grid-template-columns: var(--bs-gutter) repeat(var(--bs-cols, 1), var(--bs-cell));
    height: 0.9rem;
}

.bs-rule {
    grid-column: 2 / -1;
    border-top: 3px solid #94a3b8;
    transform-origin: left center;
}

.bs-rule.bs-just {
    animation: bsRuleDraw 0.35s ease-out;
}

.bus-stop-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
}

.bus-stop-controls button {
    background: #fde047;
    color: #713f12;
    border: none;
    border-radius: 0.6rem;
    width: 2.6rem;
    height: 2.4rem;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform 0.1s ease, opacity 0.15s ease;
}

.bus-stop-controls button:hover:not(:disabled) {
    transform: scale(1.08);
}

.bus-stop-controls button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.bs-step {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ---- Calm animations ---- */

@keyframes bsQuotientDrop {
    0% { transform: translateY(-0.4rem); opacity: 0; }
    60% { transform: translateY(0.06rem); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes bsDigitIn {
    0% { opacity: 0; transform: translateY(0.12rem); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes bsCaretTap {
    0% { opacity: 0; transform: translateY(-0.2rem); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes bsRuleDraw {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

@keyframes bsDcellGlow {
    0% { background: rgba(253, 224, 71, 0); }
    40% { background: rgba(253, 224, 71, 0.22); border-radius: 0.4rem; }
    100% { background: rgba(253, 224, 71, 0); }
}

@keyframes bsChipPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* Highlight the synced prose row while stepping through the tableau */
[data-bs-step].bs-row-active {
    background: rgba(253, 224, 71, 0.14) !important;
    border-color: rgba(253, 224, 71, 0.65) !important;
    box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.35) !important;
}

/* ---- Merged entry: the input row lives inside the tableau ---- */
.bs-solo .bus-stop {
    background: rgba(15, 23, 42, 0.85);
    width: fit-content;
    margin: 0 auto;
    min-width: min(92vw, 30rem);
    --bs-cell: 2.7rem;
    --bs-gutter: 3.4rem;
}

.bs-input-slot {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.25);
}

.bs-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bs-input-field {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(253, 224, 71, 0.5);
    border-radius: 0;
    color: #fde047;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.35rem 0.5rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bs-input-field:focus {
    border-bottom-color: #fde047;
    box-shadow: 0 8px 16px -10px rgba(253, 224, 71, 0.5);
}

.bs-feedback {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.9rem;
    font-size: 0.95rem;
    line-height: 1.35;
}

.bs-feedback-mark {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-weight: 900;
    font-size: 1rem;
    color: #fff;
}

.bs-feedback-step {
    background: rgba(255, 255, 255, 0.85);
    padding: 0.1rem 0.5rem;
    border-radius: 0.4rem;
    font-weight: 700;
}

.bs-feedback-note {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 0.4rem;
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    font-size: 0.85rem;
    font-weight: 800;
}

.bs-feedback-good {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #065f46;
}

.bs-feedback-good .bs-feedback-mark {
    background: #10b981;
}

.bs-feedback-bad {
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.35);
    color: #7c2d12;
}

.bs-feedback-bad .bs-feedback-mark {
    background: #f97316;
}

.bs-feedback-info {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #1e40af;
}

.bs-feedback-info .bs-feedback-mark {
    background: #3b82f6;
}

/* ---- Rich accumulating working lines (arithmetic-family reveal) ---- */
.bs-working-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.bs-working-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.9rem;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.bs-working-index {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 900;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.bs-working-body {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    min-width: 0;
}

.bs-working-expr {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

.bs-working-highlight {
    background: #fde68a;
    color: #78350f;
    border-radius: 0.4rem;
    padding: 0.05rem 0.3rem;
}

.bs-working-miss {
    flex-basis: 100%;
    font-size: 0.85rem;
    color: #7c2d12;
}

.bs-working-mark {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-weight: 900;
    font-size: 1rem;
    color: #fff;
    background: #3b82f6;
}

.bs-working-good {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.bs-working-good .bs-working-mark {
    background: #10b981;
}

.bs-working-bad {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.3);
}

.bs-working-bad .bs-working-mark {
    background: #f97316;
}

.bs-complete {
    padding-top: 0.5rem;
}

/* ---- Pencil write cell inside the tableau ---- */
.bs-write-cell {
    position: absolute;
    top: calc((2.9rem - var(--bs-cell, 2.7rem)) / 2);
    left: calc(var(--bs-gutter, 3.4rem) + var(--bs-write-col, 0) * var(--bs-cell, 2.7rem));
    width: calc(var(--bs-write-span, 1) * var(--bs-cell, 2.7rem));
    height: var(--bs-cell, 2.7rem);
    z-index: 2;
    border: 2px dashed rgba(253, 224, 71, 0.65);
    border-radius: 0.4rem;
    background: rgba(248, 250, 252, 0.06);
    box-shadow: 0 0 14px rgba(253, 224, 71, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-write-cell::before {
    content: '✎';
    position: absolute;
    top: -0.25rem;
    right: -0.35rem;
    font-size: 0.8rem;
    color: rgba(251, 191, 36, 0.9);
    pointer-events: none;
}

.bs-write-cell.bs-write-working {
    top: auto;
    left: auto;
    height: 2.2rem;
    border-style: dashed;
}

.bs-write-cell.bs-write-working::before {
    top: -0.35rem;
    right: -0.4rem;
}

.bs-write-cell canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ---- Generic pencil working area (no bus stop) ---- */
.prc-pencil-card canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ===== Multiplication tableau (grid + column worked example) ===== */
.mt-stage {
    width: fit-content;
    margin: 0 auto;
    position: relative;
}

.mt-problem-line {
    text-align: center;
    color: #f8fafc;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.mt-body {
    display: flex;
    justify-content: center;
}

.mt-grid {
    border-collapse: collapse;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

.mt-grid th,
.mt-grid td {
    border: 1px solid rgba(148, 163, 184, 0.35);
    min-width: 4.2rem;
    height: 3rem;
    text-align: center;
    vertical-align: middle;
    font-size: 1.35rem;
    font-weight: 700;
}

.mt-head-corner,
.mt-head,
.mt-row-head {
    color: #fde047;
    background: rgba(253, 224, 71, 0.08);
}

.mt-cell {
    color: transparent;
    transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.mt-cell.mt-cell-on {
    color: #f8fafc;
}

.mt-cell.mt-cell-active {
    color: #fef9c3;
    animation: mtCellGlow 0.3s ease-out;
}

.mt-cell.mt-just {
    animation: bsDigitIn 0.28s ease-out;
}

.mt-cell-active.mt-just {
    animation: mtCellGlow 0.3s ease-out, bsDigitIn 0.28s ease-out;
}

.mt-add-label {
    color: #94a3b8;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mt-total {
    color: #fde047;
    text-align: left !important;
    padding: 0 0.9rem;
    font-size: 1.15rem;
}

.mt-col-table {
    border-collapse: collapse;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    /* One digit column. Every column is this wide so the top number, the
       carries and the product rows all line up. The typing boxes size
       themselves from it too. */
    --mt-col-w: 2.8rem;
}

.mt-col-table td {
    width: var(--mt-col-w);
    padding: 0;
    margin: 0;
    text-align: right;
    vertical-align: middle;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: pre;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.mt-col-top td,
.mt-col-xb td {
    color: #f8fafc;
}

.mt-col-prod td {
    color: #7dd3fc;
}

.mt-col-sum td {
    color: #fde047;
}

.mt-col-rule td {
    height: 0.45rem;
    border-bottom: 2px solid #94a3b8;
}

/* The small carried digit sits above the column it belongs to. The row keeps a
   fixed height so the carry lane stays open even when its digit is blanked for
   the student to write. */
.mt-col-table td.mt-carry {
    position: relative;
    height: 1.5rem;
    overflow: visible;
    color: #fca5a5;
    font-size: 0.9rem;
    font-weight: 700;
    vertical-align: bottom;
}

.mt-col-table td.mt-carry .mt-cell-input {
    position: absolute;
    left: 50%;
    bottom: 0.15rem;
    transform: translateX(-50%);
    width: 1.3rem;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    line-height: 1;
    text-align: center;
    font-size: 1rem;
    z-index: 3;
}

.mt-col-row.mt-just,
.mt-answer.mt-just {
    animation: bsDigitIn 0.28s ease-out;
}

.mt-answer {
    margin-top: 0.6rem;
    text-align: center;
    color: #fde047;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: 800;
    text-shadow: 0 0 14px rgba(253, 224, 71, 0.45);
}

@keyframes mtCellGlow {
    0% { background: rgba(253, 224, 71, 0); }
    40% { background: rgba(253, 224, 71, 0.25); }
    100% { background: rgba(253, 224, 71, 0); }
}

/* ---- Typing box placed on the tableau itself ---- */
.mt-cell-input {
    box-sizing: border-box;
    width: calc(100% - 0.4rem);
    background: rgba(253, 224, 71, 0.08);
    border: 2px dashed rgba(253, 224, 71, 0.6);
    border-radius: 0.4rem;
    color: #fde047;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    padding: 0.15rem 0.3rem;
    outline: none;
    box-shadow: 0 0 12px rgba(253, 224, 71, 0.18);
}

.mt-total .mt-cell-input {
    text-align: left;
}

/* The answer box for a column row is anchored to the units cell and spans as
   many digit columns as the expected value, so a one-digit answer is one digit
   wide and lines up under the number. A fixed row height keeps the box full
   sized on a blank row (otherwise the empty row collapses around it). */
.mt-col-table td.mt-write-anchor {
    position: relative;
    height: 2.25rem;
    overflow: visible;
}

.mt-col-prod .mt-cell-input,
.mt-col-sum .mt-cell-input {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    text-align: right;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
    width: 1.4rem;
    min-width: 1.4rem;
    z-index: 2;
}

.mt-answer .mt-cell-input {
    width: 12rem;
    margin: 0 auto;
}

/* ---- Handwriting cell placed on the tableau (pencil mode) ---- */
.mt-write-cell {
    position: absolute;
    z-index: 3;
    border: 2px dashed rgba(253, 224, 71, 0.7);
    border-radius: 0.4rem;
    background: rgba(248, 250, 252, 0.06);
    box-shadow: 0 0 14px rgba(253, 224, 71, 0.18);
}

/* The carried ten gets its own smaller handwriting box above the answer. */
.mt-carry-write-cell {
    z-index: 4;
    border-width: 1.5px;
    box-shadow: 0 0 8px rgba(253, 224, 71, 0.22);
}

.mt-write-cell.mt-carry-write-cell::before {
    content: none;
}

.mt-write-cell::before {
    content: '✎';
    position: absolute;
    top: -0.25rem;
    right: -0.35rem;
    font-size: 0.8rem;
    color: rgba(251, 191, 36, 0.9);
    pointer-events: none;
}

.mt-write-cell canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ---- "Found a glitch?" feedback widget ---- */
.glitch-bug {
    font-size: 1.05rem;
    line-height: 1;
    vertical-align: -0.1em;
    margin-right: 0.15rem;
}

.glitch-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    background: #f59e0b;
    color: #111827;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.85rem;
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
    opacity: 0.9;
    transition: background 0.15s, opacity 0.15s, bottom 0.15s;
}

.glitch-fab:hover {
    background: #d97706;
    opacity: 1;
}

/* Lifted above the pencil mission's sticky undo bar */
.glitch-fab.glitch-fab-raised {
    bottom: 5.5rem;
}

.glitch-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.glitch-modal[hidden] {
    display: none;
}

.glitch-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
}

.glitch-card {
    position: relative;
    width: 100%;
    max-width: 26rem;
    background: #fff;
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}

/* ===== Development test panel (TEST_PANEL=1) ===== */
/* Bottom-left so it never collides with the glitch button, and lifted with it
   above the pencil mission's sticky undo bar. */
.test-fab {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 40;
    background: #334155;
    color: #f8fafc;
    border: none;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.5rem 0.85rem;
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.45);
    opacity: 0.9;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s, bottom 0.15s;
}

.test-fab:hover {
    background: #1e293b;
    opacity: 1;
}

.test-fab.test-fab-raised {
    bottom: 5.5rem;
}

.test-panel {
    position: fixed;
    left: 1rem;
    bottom: 3.75rem;
    z-index: 55;
    width: min(22rem, calc(100vw - 2rem));
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 1rem;
    padding: 0.85rem;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.test-panel[hidden] {
    display: none;
}

.test-readout {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.test-readout strong {
    color: #f8fafc;
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
}

.test-btns {
    display: flex;
    gap: 0.4rem;
}

.test-btn {
    flex: 1;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 0.5rem;
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.test-btn:hover {
    background: rgba(148, 163, 184, 0.25);
    color: #f8fafc;
}

.test-btn.is-on {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.test-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.test-chip {
    min-width: 2.4rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 9999px;
    background: transparent;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.test-chip:hover {
    background: rgba(148, 163, 184, 0.2);
}

.test-chip.is-on {
    background: #fde047;
    border-color: #fde047;
    color: #0f172a;
}

.test-chip:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
}

.test-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.test-links form {
    flex: 1;
    display: flex;
}

/* ===== Mission drill scaffold (method-aware working surface) ===== */
.mission-workspace {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.mission-workspace .bus-stop {
    margin: 0 auto;
}

/* The drill renders its own prompt and controls, so drop the shared tableau
   chrome (title, icon and the "Split"/"Start" chip). */
.mission-workspace .bus-stop-header {
    display: none;
}

/* The Direct column already sits inside a framed panel, so the repeated
   "a × b" line is redundant; the Grid keeps it as its only place-value key. */
.mission-workspace[data-method="Direct"] .mt-problem-line {
    display: none;
}

.mission-workspace .mt-stage,
.mission-workspace .bs-stage {
    position: relative;
    /* A little slack below the shape so the drawing surface does not stop hard
       against the last row. */
    padding-bottom: 1.5rem;
}

/* The drill gives the tableau room to breathe: larger cells and centred digits
   so a student can write their workings inside the shape. */
.mission-workspace .mt-col-table {
    --mt-col-w: 3.6rem;
}

.mission-workspace .mt-col-table td {
    font-size: 1.9rem;
    line-height: 1.6;
    text-align: center;
}

.mission-workspace .mt-col-table td.mt-carry {
    height: 1.9rem;
    font-size: 1.1rem;
}

.mission-workspace .mt-grid th,
.mission-workspace .mt-grid td {
    min-width: 5rem;
    height: 3.8rem;
    font-size: 1.7rem;
}

/* Fill-in-the-blanks typing drill: each scaffold cell holds a numeric input
   that blends into the tableau until focused. */
.mission-workspace .tableau-input {
    width: 100%;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    padding: 0;
    outline: none;
}

/* Fill-mode cells sit on a dark panel and use light ink, so the focus fill
   must stay dark too; a light one would hide the text while it is typed. */
.mission-workspace .tableau-input:focus {
    background: rgba(15, 23, 42, 0.75);
    border-radius: 0.35rem;
    box-shadow: inset 0 0 0 2px #3b82f6;
}

/* Fill mode, Direct tableau: the printed shape has no cell borders, so the
   input draws the cell itself. A dashed blue box in the same blue as the
   answer row, solid on focus, so it is obvious where to type. The box sits
   inside the row's existing height, so typing and pencil stay lined up. */
.mission-workspace .mt-col-table .tableau-input {
    height: 2.1rem;
    background: rgba(59, 130, 246, 0.14);
    border: 1.5px dashed rgba(96, 165, 250, 0.65);
    border-radius: 0.4rem;
    color: #f8fafc;
    font-size: 1.5rem;
    line-height: 1;
}

.mission-workspace .mt-col-table .tableau-input:focus {
    background: rgba(15, 23, 42, 0.75);
    border: 1.5px solid #3b82f6;
    box-shadow: inset 0 0 0 1px #3b82f6;
}

/* Pencil drill, Direct: the digits are hand-written, so each writable position
   is a box like typing's field, drawn on the cell itself. The height matches
   the printed operand rows (font-size x line-height), so the working keeps the
   same rhythm typing has. */
.mission-workspace .mt-col-table td.mt-slot {
    box-sizing: border-box;
    height: calc(1.9rem * 1.6);
    background: rgba(59, 130, 246, 0.14);
    border: 1.5px dashed rgba(96, 165, 250, 0.65);
    border-radius: 0.4rem;
    color: #f8fafc;
}

/* Pencil drill, Grid: the hint text typing sets as a field placeholder,
   printed in the empty Add and answer boxes the student writes over. */
.mt-input-hint {
    display: block;
    text-align: center;
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.55);
    user-select: none;
}

/* The Grid's single totals box: the cell is already a bordered box, so the
   field inside only needs a quiet hint. The hint is set below the row's own
   font size because a full-size placeholder would not fit the cell. */
.mission-workspace .tableau-answer {
    width: 100%;
    background: rgba(59, 130, 246, 0.16);
    border: 2px solid rgba(96, 165, 250, 0.85);
    border-radius: 0.5rem;
    box-shadow: none;
    text-align: center;
    padding: 0 0.6rem;
}

.mission-workspace .tableau-answer::placeholder {
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.55);
    opacity: 1;
}

.mission-workspace .mt-grid .tableau-answer {
    text-align: center;
}

.mission-workspace .mt-grid .mt-grid-answer {
    height: 4.2rem;
    padding: 0.35rem 0.6rem;
    border: 2px solid rgba(96, 165, 250, 0.55);
    background: rgba(59, 130, 246, 0.1);
}

/* Fill mode: the cell inputs would otherwise inherit the transparent colour
   that blanks the printed digits, so give them a visible ink of their own. */
.mission-workspace .mt-grid td.mt-cell .tableau-input {
    color: #f8fafc;
}

/* Fill mode: the place-value split is typed rather than printed, so the
   header boxes need a full-width field of their own. They keep the printed
   header's yellow ink. */
.mission-workspace .mt-grid .mt-head .tableau-input,
.mission-workspace .mt-grid .mt-row-head .tableau-input {
    width: 100%;
    color: #fde047;
}

.mission-draw-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
}

.mission-draw-hint {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.mission-draw-buttons {
    display: flex;
    gap: 0.5rem;
}

.mission-draw-button {
    padding: 0.4rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1e40af;
    background: #eff6ff;
    border: 2px solid #bfdbfe;
    border-radius: 9999px;
    transition: background 0.15s, border-color 0.15s;
}

.mission-draw-button:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.mission-answer-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.mission-answer-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.mission-answer-card {
    width: 18rem;
    max-width: 100%;
    height: 6rem;
    background: #ffffff;
    border: 2px solid #bfdbfe;
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(30, 64, 175, 0.12);
}

.mission-answer-card canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}