:root {
    /* Studio retheme (2026-09, v3) - replaces the earlier "pastel coastal"
       pass. That pass (see git history) was explicitly a soft, dusty
       sky-blue + dusty blush-pink system - a real product review judged it
       unprofessional/childish for a college-age audience, most pointedly
       on --ochre, which sat on the primary tutoring action as a
       candy-pink. This pass keeps the warm
       paper/ink identity (that part reads as distinctive, not the
       problem) but: deepens the secondary accent from dusty rose to a
       confident burnt-sienna/terracotta, adds a real semantic layer
       (success/warning/error/info) instead of reusing brand colors or
       three uncoordinated hardcoded reds for "something's wrong", and
       adds boundary-strength tokens so surfaces stop relying on
       translucent-white-on-cream to read as separate. --board (card/
       canvas surface) is intentionally left alone - it needs to stay a
       neutral, ink-legible writing surface. As before, the literal
       rgba(...) tints scattered through this file that mirror --ochre
       were updated alongside it, since they don't resolve through the
       variable. */
    --paper: #FAF3EA;
    --board: #FEFCF9;
    --paper-deep: #E3D3BE;
    --ink: #33445A;
    /* Darkened from #74889F (3.31:1 on --paper, fails WCAG AA's 4.5:1 for
       normal text) - this token runs under most of the app's secondary/
       caption copy, so the contrast gap wasn't confined to one spot. */
    --ink-soft: #5D6D7F;
    --pine: #5C86AC;
    --pine-deep: #3C6288;
    /* Was #D98A96/#B36572 (dusty rose) - the one color change here that
       actually moves the needle on "childish", since it's the fill for
       Check/guest-demo/daily-challenge/challenge-panel CTAs. Solid-ochre
       buttons switch to light (--board) text below - #A85221 only clears
       WCAG AA against light text, not the --ink text those buttons used
       to carry (checked directly: ink-on-old-ochre was already under
       4.5:1 for normal-size text, a pre-existing gap this fixes too). */
    --ochre: #A85221;
    --ochre-deep: #7E3D18;
    --red-pen: #C93F24;
    --shadow: 51, 68, 90;

    /* Semantic - deliberately separate from the two brand colors above,
       so "something succeeded/needs a heads-up/failed" never depends on
       overloading --pine or --ochre. Replaces: .login-success previously
       reusing --pine-deep for a success message, and three uncoordinated
       hardcoded reds (#B4402A, rgba(214,90,60,*), and an unused
       --red-pen) that all meant roughly "error" without agreeing on a
       color. */
    --success: #3F7D52;
    --success-soft: rgba(63, 125, 82, 0.12);
    --warning: #B8862E;
    --warning-soft: rgba(184, 134, 46, 0.12);
    --error: #B3401F;
    --error-deep: #7A2C15;
    --error-soft: rgba(179, 64, 31, 0.12);
    --info: var(--pine-deep);

    /* Boundary + surface levels - named by how much visual separation
       they should read as, not by a specific color, so a "strong"
       boundary stays strong even where the surface behind it changes. */
    --border-subtle: rgba(51, 68, 90, 0.08);
    --border-standard: var(--paper-deep);
    --border-strong: #B9A98F;
    --border-focus: var(--pine);
    --surface-page: var(--paper);
    --surface-panel: var(--board);
    --surface-raised: #FFFFFF;

    /* Aliases - every rule below that predates this retheme still
       references these names, now resolving to the current palette
       instead of the old blue/purple one. Keeps this a safe single-pass
       retheme rather than needing to touch every usage site. */
    --bg-gradient-a: var(--paper);
    --bg-gradient-b: var(--paper-deep);
    --panel-solid: var(--board);
    --line-mid: var(--paper-deep);
    --text-main: var(--ink);
    --text-soft: var(--ink-soft);
    --accent: var(--pine);
    --accent-soft: rgba(92, 134, 172, 0.12);
    --shadow-lg: 0 18px 50px rgba(var(--shadow), 0.16);
    --shadow-md: 0 10px 30px rgba(var(--shadow), 0.14);
    --shadow-sm: 0 4px 12px rgba(var(--shadow), 0.12);
    /* Hover-lift depth, one step past --shadow-lg - and tinted glows for
       the two primary-action colors, used so a hovered CTA reads as "lit
       up" rather than just "moved". */
    --shadow-xl: 0 22px 48px rgba(var(--shadow), 0.22);
    --glow-pine: 0 10px 26px rgba(92, 134, 172, 0.32);
    --glow-ochre: 0 10px 26px rgba(168, 82, 33, 0.35);
    --radius-xl: 28px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: 'Karla', "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(92, 134, 172, 0.06), transparent 28%),
        radial-gradient(circle at bottom right, rgba(168, 82, 33, 0.07), transparent 25%),
        var(--paper);
}

body {
    min-height: 100vh;
}

button,
textarea,
input {
    font: inherit;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

/* Chunky-tactile press feedback used throughout the toolbar/sidebar/level
   picker - a solid fill plus a darker "lip" along the bottom edge that
   the button sinks into on press, rather than a flat opacity/shadow tweak. */
.pressable {
    transition: transform 0.12s ease;
}

.pressable:active {
    transform: translateY(2px);
}

.pressable:focus-visible {
    outline: 2px solid var(--pine);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pressable {
        transition: none;
    }
    .pressable:active {
        transform: none;
    }
}

/* Shared entrance for the two full-screen overlay cards (login, level
   select) - the first thing a new visitor sees, so it should feel like it
   arrived rather than just appeared. */
@keyframes card-rise-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* A slow, gentle bob on the login screen's mascot badge - the one place in
   the app the creature sits still with nothing to react to yet. */
@keyframes mark-bob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-card,
    .level-select-card {
        animation: none;
    }
    .brand-mark {
        animation: none;
    }
}

.app-shell {
    min-height: 100vh;
    display: grid;
    /* Board (workspace) is the hero and sits first/left; the one unified
       sidebar - identity/level/account, progress, Check+Hint, Math Chat,
       Today's Challenge, Patterns - is a fixed-width right column. This
       replaces the earlier two-sidebar (chat left, progress right) shell:
       a single column reads as one coherent instrument panel instead of
       splitting related controls across both sides of the board. */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    padding: 20px;
}

.sidebar {
    /* Was a translucent white-on-cream frosted-glass panel (0.5 opacity
       white + a near-invisible white-on-white border) - against the
       similarly pale --paper page background that read as "melting
       together" rather than a defined panel. A real, solid panel surface
       + standard-weight border reads as a distinct object at a glance,
       matching the boundary treatment .sidebar-chat/.progress-card/
       .daily-challenge-card already use one level in. */
    background: var(--surface-panel);
    border: 1px solid var(--border-standard);
    box-shadow: var(--shadow-md);
    border-radius: 30px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    /* No internal scroll here by design - the board (.board-card) is
       deliberately taller than this column's own content needs, so the
       grid row's height is driven by the board and .sidebar just stretches
       to match (default align-items: stretch on .app-shell); the PAGE
       scrolls as one unit past that shared height, the sidebar never
       scrolls on its own. */
}

.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: rgba(51, 68, 90, 0.4);
    backdrop-filter: blur(6px);
    /* The signup form grew (Terms + data-consent checkboxes) and can now be
       taller than a phone viewport - without this, the card was centered
       with its bottom (submit button included) cut off and no way to
       reach it. overflow-y here, not on .login-card, so the whole overlay
       scrolls as one unit. */
    overflow-y: auto;
    padding: 24px 0;
}

/* !important is deliberate here, not a shortcut - .hidden is a utility
   meant to reliably hide ANY element regardless of that element's own
   display rule or where it's declared in this file. Without it, this lost
   to .level-select-overlay's own "display: grid" purely because that rule
   happens to be declared later in the file - same specificity, so source
   order silently decided it, and the level picker never actually closed. */
.hidden {
    display: none !important;
}

.login-card {
    width: min(410px, 92vw);
    background: var(--board);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 24px 26px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    animation: card-rise-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-value-props {
    width: 100%;
    display: grid;
    gap: 3px;
    margin: 0 0 14px;
    padding-left: 6px;
    text-align: left;
    color: var(--ink);
    font-size: 0.84rem;
}

.login-value-props span::before {
    content: "✓";
    color: var(--pine);
    font-weight: 800;
    margin-right: 8px;
}

.guest-demo-btn {
    background: var(--ochre) !important;
    border-bottom-color: var(--ochre-deep) !important;
    color: var(--board) !important;
}

.guest-demo-btn {
    padding: 14px !important;
    font-size: 1rem;
}

.guest-demo-note {
    margin: 4px 0 0 !important;
    font-size: 0.78rem !important;
}

.login-card .login-legal-line {
    margin: 2px 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

.login-legal-line a,
.signup-consent-fields a {
    color: var(--pine-deep);
    font-weight: 600;
}

.login-card .login-reveal-btn {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--border-strong, var(--paper-deep));
    border-bottom-width: 1.5px;
    box-shadow: none;
    font-weight: 700;
}

.login-card .login-reveal-btn:hover:not(:active) {
    transform: none;
    border-color: var(--pine);
    box-shadow: none;
}

#loginNormalFields {
    width: 100%;
    margin-top: 12px;
}

.signup-consent-fields {
    width: 100%;
    text-align: left;
}

.login-divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    color: var(--ink-soft);
    font-size: 0.76rem;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--paper-deep);
}

.login-mark {
    margin-bottom: 6px;
}

.login-card h2 {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--ink);
}

.login-card p {
    margin: 0 0 12px;
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.login-card input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid var(--paper-deep);
    background: var(--paper);
    color: var(--ink);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.login-card input:focus {
    outline: 2px solid var(--pine);
    outline-offset: 1px;
}

.login-card button {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--pine);
    border-bottom: 3px solid var(--pine-deep);
    color: var(--board);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.login-card button:hover:not(:active) {
    transform: translateY(-2px);
    box-shadow: var(--glow-pine);
}

.guest-demo-btn:hover:not(:active) {
    box-shadow: var(--glow-ochre) !important;
}

.login-error {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--error-soft);
    color: var(--error);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.login-success {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--success-soft);
    color: var(--success);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

#loginTermsRow {
    text-align: left;
    align-items: flex-start;
}

#loginTermsRow a {
    /* --pine text at this size is 3.49:1 on --paper, under WCAG AA's 4.5:1
       for normal text - --pine-deep (already used elsewhere for this same
       reason, see .login-success above) clears 5.79:1. */
    color: var(--pine-deep);
    font-weight: 600;
}

.login-signup-fields {
    width: 100%;
}

.login-age-note {
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin: 0 0 10px !important;
    text-align: left;
}

.login-parent-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--ink);
    margin-bottom: 10px;
    cursor: pointer;
}

.login-data-consent {
    align-items: flex-start;
    text-align: left;
    background: var(--accent-soft);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.35;
}

.login-data-consent input[type="checkbox"] {
    margin-top: 2px;
}

.login-card input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.legal-footer-links {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 6px;
}

.legal-footer-links a {
    color: var(--ink-soft);
    text-decoration: underline;
}

.account-danger-link {
    color: var(--error) !important;
}

.account-delete-warning {
    font-size: 0.82rem;
    color: var(--error);
    background: var(--error-soft);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 4px 0 12px;
    text-align: left;
}

.account-danger-btn {
    background: var(--error) !important;
    border-bottom-color: var(--error-deep) !important;
}

.login-mode-toggle {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--ink-soft) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    padding: 4px !important;
    text-decoration: underline;
}

#resendVerificationBtn:disabled {
    opacity: 0.6;
    cursor: default;
    text-decoration: none;
}

/* Level select - same overlay pattern as login, shown once per student
   right after they sign in (see javascript/levelSelect.js). Purely a UI
   front door: the backend has no per-level recognition scoping. */
.level-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: rgba(51, 68, 90, 0.4);
    backdrop-filter: blur(6px);
    padding: 24px;
}

.level-select-card {
    width: min(720px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    background: var(--board);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 30px;
    animation: card-rise-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.level-select-intro {
    margin: 0 0 18px;
    color: var(--ink-soft);
    font-size: 0.9rem;
    max-width: 46ch;
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Previously each of the 12 buttons carried its own inline background/
   border/text color - a different pastel hue per subject with no
   underlying logic beyond "make them distinguishable," which read as a
   rainbow tile-picker (the same register as a language-learning app's
   skill tree) rather than a college course selector. One restrained
   treatment for all of them - differentiated by label and icon, not
   color - reads as a considered list of options instead of a candy grid.
   The single pine accent on the icon and hover state ties this screen
   back to the rest of the app's actual brand color instead of inventing
   a separate palette just for this grid. */
.level-card {
    height: 78px;
    border-radius: 16px;
    background: var(--board);
    border: 1px solid rgba(227, 211, 190, 0.7);
    border-bottom: 3px solid var(--paper-deep);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 700;
    font-size: 0.82rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.level-card svg {
    width: 20px;
    height: 20px;
    color: var(--pine);
}

.level-card:hover:not(:active) {
    transform: translateY(-3px);
    background: var(--paper);
    border-bottom-color: var(--pine);
    box-shadow: 0 12px 22px rgba(var(--shadow), 0.16);
}

@media (prefers-reduced-motion: reduce) {
    .level-card:hover:not(:active) {
        transform: none;
    }
}

/* Top-of-sidebar identity strip: brand + account on one row, level info
   on the next - replaces the level indicator that used to float centered
   above the toolbar and the account pill that used to anchor the bottom
   of a separate sidebar. Grouping all three here means "who am I / what
   level / whose session" reads as one header instead of three scattered
   controls. */
.sidebar-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-standard);
}

.sidebar-header .brand {
    /* flex-basis: 100% forces this onto its own first line (brand always
       had flex-grow: 1 before, which greedily filled the whole row and
       left zero width for the account pill or level info to share it -
       every subsequent item wrapped onto its own line as a result, not
       just the level line this was originally meant to isolate). Account
       + level now share the second line instead - see .user-pill/
       .level-banner below. */
    flex: 1 0 100%;
    min-width: 0;
}

.sidebar-header .user-pill {
    width: auto;
    flex: 0 0 auto;
}

.level-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 0.8rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.level-banner b {
    color: var(--ink);
}

.level-banner button {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    /* Same contrast fix as #loginTermsRow a above - 12.48px bold text
       doesn't meet WCAG's large-text exemption, so it needs the full
       4.5:1 normal-text ratio, which --pine-deep clears and --pine doesn't. */
    color: var(--pine-deep);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--ink);
    font-size: 0.85rem;
    width: 100%;
}

.user-pill:hover {
    background: rgba(92, 134, 172, 0.2);
}

.user-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--pine);
    color: var(--board);
    box-shadow: 0 12px 24px rgba(60, 98, 136, 0.28);
    font-size: 1.2rem;
    flex-shrink: 0;
    overflow: hidden;
}

/* Bobs only on the login screen (.login-mark) - it's a brief, first-
   impression moment there. The same badge sits in the in-app header for
   the entire study session, where continuous ambient motion would compete
   with a student trying to concentrate, so it stays still there. */
.login-mark {
    animation: mark-bob 3.2s ease-in-out infinite;
}

.brand-mark svg {
    width: 40px;
    height: 40px;
}

.brand-text h1 {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.brand-text p {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

/* Check/Hint - the app's two primary tutoring actions - promoted out of
   the toolbar into their own full-width row directly under Progress, so
   they read as the sidebar's main call to action rather than two among
   a dozen small icon buttons. Reuses .ai-btn/.hint-btn/.check-btn as-is
   (same classes the toolbar used) so the colors/press-feedback/disabled
   states stay identical - only the layout wrapper is new. */
.sidebar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.board-mode-toggle {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    background: var(--board);
    border: 1px solid var(--border-standard);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}

.board-mode-btn {
    border: none;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
}

.board-mode-btn.active {
    background: var(--ink);
    color: var(--board);
}

.sidebar-actions .ai-btn {
    flex: 0 0 auto;
    padding: 12px 10px;
    text-align: center;
    font-size: 0.95rem;
}

.sidebar-chat {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(227, 211, 190, 0.85);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* A genuinely fixed height, not flex: 1 1 auto filling whatever space
       .sidebar happens to have - that was flex-computed against .sidebar's
       OWN height, which (since .sidebar now stretches to match the board
       rather than being capped to the viewport) turned out to still let
       content influence the size indirectly through the grid's intrinsic-
       sizing pass: measured growing from ~420px to ~2915px over four
       chat turns, reproducing exactly the "Math Chat must never grow"
       regression this app has already fixed once before. A literal,
       constant height has no such indirect path - .sidebar-chat-messages
       below still scrolls its own overflow internally exactly as before. */
    height: 400px;
    flex: 0 0 auto;
    overflow: hidden;
}

.sidebar-chat-header {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Bottom-of-sidebar card wrapping the same #viewPatternsBtn action that
   used to live as a small pill in the chat header - it still just posts
   a request into Math Chat (see requestPatternsSummary in boardCheck.js),
   this only gives it its own labeled, bottom-of-sidebar home matching
   "Noticed patterns while solving" as a distinct section. */
.patterns-card {
    background: var(--board);
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(227, 211, 190, 0.7);
    flex: 0 0 auto;
}

.patterns-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pine);
    color: var(--board);
    font-size: 0.8rem;
    font-weight: 700;
}

.patterns-card-btn svg {
    width: 15px;
    height: 15px;
}

.patterns-card-btn:hover {
    background: var(--pine-deep);
}

.patterns-card-note {
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.35;
}

.sidebar-chat-messages {
    min-height: 120px;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--paper-deep) transparent;
}

.sidebar-chat-messages::-webkit-scrollbar {
    width: 8px;
}

.sidebar-chat-messages::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    border-radius: 999px;
}

.sidebar-chat-messages::-webkit-scrollbar-thumb {
    background: var(--paper-deep);
    border-radius: 999px;
}

.sidebar-chat-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

#sidebarChatInput {
    width: 100%;
    resize: none;
    border: 1.5px solid var(--paper-deep);
    border-radius: 14px;
    padding: 9px 12px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.85);
    outline: none;
    font-family: 'Karla', sans-serif;
    font-size: 0.88rem;
}

#sidebarChatInput:focus {
    border-color: var(--pine);
    box-shadow: 0 0 0 3px rgba(92, 134, 172, 0.12);
}

#sidebarChatInput:disabled {
    opacity: 0.6;
}

.sidebar-chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-attach-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--ink-soft);
    border: 1.5px solid var(--paper-deep);
    background: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.chat-attach-btn svg {
    width: 18px;
    height: 18px;
}

.chat-attach-btn:hover {
    background: rgba(92, 134, 172, 0.1);
    color: var(--ink);
}

.chat-attach-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Same footprint/idle look as .chat-attach-btn (deliberately - one visual
   language for both composer input methods, now that this sits next to
   it in .sidebar-chat-input-row). Three states beyond idle: .listening
   (mic capturing - solid, static fill, no pulsing/glow) and .busy
   (thinking or speaking - a distinct color so "recording" and "Calcebra
   is doing something" never look the same). Color plus .voice-status-
   line's text are the two channels that carry state, not animation - see
   voiceMode.js. */
.voice-mode-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--ink-soft);
    border: 1.5px solid var(--paper-deep);
    background: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.voice-mode-btn svg {
    width: 18px;
    height: 18px;
}

.voice-mode-btn:hover {
    background: rgba(92, 134, 172, 0.1);
    color: var(--ink);
}

.voice-mode-btn.listening {
    background: var(--error);
    border-color: var(--error);
    color: var(--board);
}

.voice-mode-btn.listening:hover {
    background: var(--error-deep);
    border-color: var(--error-deep);
}

.voice-mode-btn.busy {
    background: var(--pine);
    border-color: var(--pine);
    color: var(--board);
}

.voice-mode-btn.busy:hover {
    background: var(--pine-deep);
    border-color: var(--pine-deep);
}

.voice-mode-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Keep quiet states compact, but never truncate recovery instructions. */
.voice-status-line {
    min-height: 16px;
    line-height: 16px;
    font-size: 0.72rem;
    color: var(--ink-soft);
    white-space: normal;
}

#voiceInterruptBtn {
    border: 1.5px solid var(--paper-deep);
    border-radius: 12px;
    padding: 8px;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.6);
    font: inherit;
    font-size: 0.75rem;
}

.chat-image-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px solid var(--paper-deep);
    border-radius: 12px;
    padding: 6px 8px;
}

.chat-image-preview img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.chat-image-remove {
    margin-left: auto;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(51, 68, 90, 0.08);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.chat-image-remove:hover {
    background: var(--error-soft);
    color: var(--error);
}

#sidebarChatSendBtn {
    margin-left: auto;
    padding: 8px 18px;
    border-radius: 12px;
    background: var(--pine);
    border-bottom: 3px solid var(--pine-deep);
    color: var(--board);
    font-weight: 700;
    font-size: 0.85rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#sidebarChatSendBtn:disabled {
    opacity: 0.6;
    cursor: wait;
}

#sidebarChatSendBtn:disabled:active {
    transform: none;
}

#sidebarChatSendBtn:not(:disabled):hover:not(:active) {
    transform: translateY(-2px);
    box-shadow: var(--glow-pine);
}

@media (prefers-reduced-motion: reduce) {
    #sidebarChatSendBtn:not(:disabled):hover:not(:active) {
        transform: none;
    }
}

.chat-bubble {
    max-width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.35;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-bubble.assistant {
    background: var(--paper);
    color: var(--ink);
    align-self: flex-start;
}

/* Hint nudges get a distinct accent instead of looking identical to a
   Check verdict - same real palette tokens as everywhere else (the blue
   accent-soft tint + pine border already used for e.g. .user-pill/focus
   rings), not a new invented color. See AIchat.js's handleAICheckResponse
   for where .hint gets added, gated on the real payload.mode. */
.chat-bubble.assistant.hint {
    background: var(--accent-soft);
    border-left: 3px solid var(--pine);
    border-top-left-radius: 4px;
    padding-left: 10px;
}

.chat-bubble.user {
    background: rgba(51, 68, 90, 0.08);
    color: var(--ink);
    align-self: flex-end;
}

.chat-bubble img {
    display: block;
    max-width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 6px;
}

.tutor-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    max-width: 100%;
    margin-top: 0;
    padding-top: 2px;
    border-top: 0;
    white-space: normal;
}

.tutor-feedback-prompt,
.tutor-feedback-status {
    color: var(--ink-soft);
    font-size: 0.75rem;
}

/* Fill stays a light raised surface in the original theme, with ink text.
   Do not hardcode a white pill: studio's dark theme flips --ink to a light
   color, and light text on a white pill is unreadable. */
.tutor-feedback-btn {
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--surface-raised);
    color: var(--ink);
    font: 700 0.72rem 'Karla', sans-serif;
    cursor: pointer;
}

.tutor-feedback-btn:hover,
.tutor-feedback-btn:focus-visible {
    border-color: var(--pine);
    outline: none;
}

.tutor-feedback-btn:disabled {
    cursor: wait;
    opacity: 0.6;
}

.tutor-feedback-reason {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.tutor-feedback-reason.hidden {
    display: none;
}

.tutor-feedback-reason label {
    color: var(--ink-soft);
    font-size: 0.75rem;
}

.tutor-feedback-reason textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-standard);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--ink);
    font: 0.8rem 'Karla', sans-serif;
    padding: 6px 8px;
    resize: vertical;
}

.guess-uncertain {
    font-style: italic;
    opacity: 0.6;
}

.workspace {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Defense-in-depth alongside the preventDefault() fix in script.js -
       a drag gesture across the toolbar/board should pan or draw, never
       kick off the browser's native text-selection drag (which renders as
       a floating ghost of whatever got selected, following the cursor). */
    user-select: none;
}

/* The problem strip above the board. givenProblem.js sets data-mode:
   paste (a focused box), card (the problem plus "Solve it below"), or
   blank (just a way to add the problem later). While the start chooser is
   up, or a Daily Challenge supplies the problem, the strip is hidden. */
.given-problem {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    margin: 8px 10px 0;
    background: var(--surface-panel);
    border: 1px solid var(--border-standard);
    border-radius: 16px;
    box-shadow: var(--shadow-sm, none);
    user-select: text;
    -webkit-user-select: text;
}

.given-problem-entry,
.given-problem-card,
.given-problem-slim {
    display: none;
}

.given-problem[data-mode="paste"] .given-problem-entry,
.given-problem[data-mode="card"] .given-problem-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* A long question, or a question plus its picture, stays in this card.
   The board underneath has to remain on screen. */
.given-problem[data-mode="card"] {
    max-height: min(42vh, 420px);
    overflow: auto;
}

.given-problem[data-mode="blank"] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.given-problem[data-mode="blank"] .given-problem-slim {
    display: flex;
}

.given-problem-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

#givenProblemText {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 76px;
    padding: 10px 12px;
    border: 1.5px solid var(--pine);
    border-radius: 12px;
    background: var(--surface-raised);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
}

#givenProblemText::placeholder {
    color: var(--ink-soft);
}

#givenProblemText:focus {
    outline: 3px solid var(--accent-soft);
    outline-offset: 1px;
}

#givenProblemText.needs-problem {
    border-color: var(--error);
    animation: given-problem-nudge 0.28s ease-in-out;
}

@keyframes given-problem-nudge {
    0%, 100% { transform: translateX(0); }
    33% { transform: translateX(-4px); }
    66% { transform: translateX(4px); }
}

.given-problem-entry-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.given-problem-spacer {
    flex: 1 1 auto;
}

.given-problem-upload,
.given-problem-cancel,
.given-problem-edit,
.given-problem-add {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-standard);
    background: var(--surface-raised);
    color: var(--ink);
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}

.given-problem-cancel {
    border-color: transparent;
    background: transparent;
    color: var(--ink-soft);
}

.given-problem-submit {
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid #776cf9;
    background: #665cf0;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.given-problem-preview {
    position: relative;
    width: 72px;
    height: 52px;
}

.given-problem-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-standard);
    display: block;
}

.given-problem-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-raised);
    border: 1px solid var(--border-standard);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1;
    display: grid;
    place-items: center;
}

.given-problem-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.given-problem-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.given-problem-reopen {
    display: none;
    padding: 4px 10px;
    font-size: 0.8rem;
}

.given-problem-edit {
    padding: 4px 10px;
    font-size: 0.8rem;
}

.given-problem-card-text {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: auto;
}

.given-problem-card-image {
    display: block;
    max-width: min(100%, 520px);
    max-height: 240px;
    object-fit: contain;
    object-position: left top;
    border-radius: 10px;
    border: 1px solid var(--border-standard);
}

.solve-below-cue {
    margin: 0;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--pine);
}

.solve-below-cue span {
    display: inline-block;
    animation: solve-below-bob 1.6s ease-in-out 3;
}

@keyframes solve-below-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

.challenge-solve-below {
    margin: -6px 0 12px;
}

/* "What are you working on?" covers the empty board until a start is
   chosen, so the first click is never a guess. */
#board:focus {
    outline: none;
}

.start-chooser {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 56px 20px 20px;
    background: color-mix(in srgb, var(--board) 82%, transparent);
    backdrop-filter: blur(2px);
}

.start-chooser-card {
    width: min(760px, 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.start-chooser-card h2 {
    margin: 0;
    text-align: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--ink);
}

/* One obvious action: type or paste the problem, then Start. Upload and
   "write it on the board" are quieter alternatives below. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.start-problem-field {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 8px;
    border: 1.5px solid var(--pine);
    border-radius: 18px;
    background: var(--surface-raised);
    box-shadow: 0 6px 24px rgba(var(--shadow), 0.08);
}

.start-problem-field:focus-within {
    box-shadow: 0 0 0 4px var(--accent-soft), 0 6px 24px rgba(var(--shadow), 0.08);
}

#startProblemInput {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    resize: none;
    min-height: 64px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 1.2rem;
    line-height: 1.45;
}

#startProblemInput:focus,
#startProblemInput:focus-visible {
    outline: none;
}

.start-go {
    flex: 0 0 auto;
    align-self: flex-end;
    min-height: 48px;
    padding: 10px 22px;
    border: 0;
    border-radius: 12px;
    background: var(--pine);
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
}

.start-go:hover {
    background: var(--pine-deep);
}

.start-go:focus-visible {
    outline: 2px solid var(--pine);
    outline-offset: 3px;
}

.start-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
}

.start-secondary-or {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.start-alt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--border-standard);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.start-alt svg {
    width: 18px;
    height: 18px;
    color: var(--ink-soft);
}

.start-alt:hover {
    border-color: var(--border-strong);
}

.start-alt:focus-visible {
    outline: 2px solid var(--pine);
    outline-offset: 2px;
}

.start-chooser-error {
    margin: 0;
    text-align: center;
    color: var(--error);
    font-size: 0.9rem;
}

/* First-use tips that point at Hint, then Check (coachMarks.js). */
.coach-mark {
    position: fixed;
    z-index: 125;
    max-width: 260px;
    padding: 10px 36px 10px 14px;
    border-radius: 12px;
    background: #665cf0;
    color: #fff;
    font-family: 'Karla', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: var(--shadow-lg);
}

.coach-mark::before {
    content: "";
    position: absolute;
    top: -7px;
    left: calc(var(--coach-arrow-left, 50%) - 7px);
    border: 7px solid transparent;
    border-top: 0;
    border-bottom-color: #665cf0;
}

.coach-mark-close {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: transparent;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.coach-mark-close:hover,
.coach-mark-close:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

@media (max-width: 680px) {
    .start-chooser {
        padding-top: 20px;
    }

    .start-chooser-card h2 {
        font-size: 1.35rem;
    }

    .start-problem-field {
        flex-direction: column;
    }

    .start-go {
        align-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solve-below-cue span,
    #givenProblemText.needs-problem {
        animation: none;
    }
}

/* Bottom instrument bar under the board (was a floating pill above it) -
   pens/colors/undo-redo/zoom/save-open live here; Hint/Check moved to
   .sidebar-actions since they're tutoring actions, not drawing tools. A
   full-width bar reads as "the board's toolbar" the way a real drawing
   app's tool shelf does, rather than a control competing with the board
   for the same vertical space above it.

   One row. If the window is narrower than the tools, the row scrolls
   sideways instead of wrapping onto a second line. */
.floating-toolbar {
    flex: 0 0 auto;
    /* position: sticky is added back in at min-width: 981px below, not
       here - on the stacked mobile layout the board is already short
       enough that a sticky bottom bar just overlaps it instead of adding
       real reach, so mobile keeps its original in-flow toolbar. */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-md);
    border-radius: 22px;
    padding: 8px 16px;
    display: flex;
    min-width: 0;
    max-width: 100%;
    z-index: 5;
}

.toolbar-row {
    display: flex;
    align-items: center;
    justify-content: safe center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    overflow-x: auto;
}

.tool-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Each .toolbar-row's own flex-wrap needs to wrap individual BUTTONS, not
   whole .tool-group divs - without this, each group (some holding 4-5
   items) wraps as one atomic block instead of buttons flowing together.
   display: contents dissolves the group's own box so its children join
   the row's flex-wrap directly, while still keeping the HTML grouped for
   readability. */
.floating-toolbar .tool-group {
    display: contents;
}

.toolbar-divider {
    width: 1px;
    height: 30px;
    background: var(--paper-deep);
}

.tool-btn {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--ink-soft);
    border-bottom: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
    display: grid;
    place-items: center;
}

.tool-btn svg,
.user-pill svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.tool-btn:hover {
    background: rgba(92, 134, 172, 0.1);
    color: var(--ink);
}

.tool-btn.active {
    background: var(--pine);
    color: var(--board);
    border-bottom-color: var(--pine-deep);
}

.swatches {
    gap: 12px;
}

.swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(var(--shadow), 0.2);
}

.swatch:hover {
    transform: scale(1.08);
}

.swatch.active::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--ink);
}

.width-control input[type="range"] {
    width: 120px;
    accent-color: var(--pine);
}

#lineWidthValue {
    min-width: 44px;
    font-size: 0.92rem;
    color: var(--ink-soft);
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.zoom-readout {
    min-width: 68px;
    text-align: center;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.board-stage {
    position: relative;
    /* flex: 0 0 auto (hug .board-card's own height), not flex: 1 (fill
       whatever's left in .workspace) - the latter created a runaway
       feedback loop with .app-shell's grid stretch: .board-stage would
       grow to fill .workspace, which grows to match .sidebar's stretched
       height, which is itself stretched to match .board-stage - each
       pass inflating the last, and the measured result was ~1150px+ of
       board height from an 820px min-height. Hugging .board-card's actual
       height (via its explicit min-height, see the min-width: 981px rule
       below) breaks that loop; .board-card's min-height is then the one
       real lever for how tall the board (and by extension the whole
       shell) ends up. */
    flex: 0 0 auto;
    display: grid;
    /* justify-items centers .board-card horizontally once its max-width
       caps it on wide screens; align-items:stretch (not center) lets it
       fill whatever vertical space .board-stage itself resolves to. */
    justify-items: center;
    align-items: stretch;
    padding: 6px 10px 22px;
}

.board-card {
    /* 100% of the actual container, not 100vw - vw includes the vertical
       scrollbar's width in most browsers, so a vw-based calc reliably
       overflows the real visible viewport by the scrollbar's width
       whenever one is present, producing a horizontal scrollbar on the
       whole page. The grid/flex chain up through .board-stage and
       .workspace already sizes this container to the real available
       space at every breakpoint, so 100% needs no viewport math at all. */
    width: 100%;
    max-width: 1300px;
    height: calc(100vh - 150px);
    min-height: 600px;
    background: var(--board);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(227, 211, 190, 0.8);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
}

#board {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--board);
    /* Without this, touch/pen drags get taken by the browser for page
       scrolling/pinch-zoom instead of reaching the drawing handlers. */
    touch-action: none;
}

/* Custom camera scrollbars. The board is an infinite canvas (offset/zoom),
   not a native overflow box, so these overlays pan state.offsetX/Y rather
   than scrolling the DOM. pointer-events stay off the overlay shell so ink
   still hits the canvas; only the tracks/thumbs capture input. Sit inside
   .board-card so they cannot cover the left tool rail or Math Chat. */
.board-scrollbars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.board-scrollbar {
    position: absolute;
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
}

.board-scrollbar:focus {
    outline: none;
}

.board-scrollbar-y {
    top: 0;
    right: 0;
    bottom: 26px;
    width: 26px;
    cursor: ns-resize;
}

.board-scrollbar-x {
    left: 0;
    right: 26px;
    bottom: 0;
    height: 26px;
    cursor: ew-resize;
}

.board-scrollbar-corner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 26px;
    height: 26px;
    pointer-events: none;
}

.board-scrollbar::before {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 12%, transparent);
    pointer-events: none;
}

.board-scrollbar-y::before {
    top: 0;
    bottom: 0;
    left: 11px;
    width: 4px;
}

.board-scrollbar-x::before {
    left: 0;
    right: 0;
    top: 11px;
    height: 4px;
}

.board-scrollbar-thumb {
    position: absolute;
    border-radius: 999px;
    background: var(--ink);
    opacity: 0.36;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--board) 55%, transparent);
    transition: opacity 0.15s ease;
}

.board-scrollbar-y .board-scrollbar-thumb {
    left: 7px;
    right: 7px;
    width: auto;
    top: 0;
}

.board-scrollbar-x .board-scrollbar-thumb {
    top: 7px;
    bottom: 7px;
    height: auto;
    left: 0;
}

.board-scrollbar:hover .board-scrollbar-thumb,
.board-scrollbar:focus-visible .board-scrollbar-thumb {
    opacity: 0.4;
}

.board-scrollbar.is-dragging .board-scrollbar-thumb {
    opacity: 0.55;
}

.board-scrollbar:focus-visible .board-scrollbar-thumb {
    box-shadow: 0 0 0 2px var(--border-focus);
}

/* "Your progress" - replaces the old Today's Climb (otter/path/shells
   illustration) and the separate "Calcebra noticed" card with one quiet,
   typographic panel. A student-progress-tracker built as a mobile-game
   level-progression metaphor (collect items along a path to a reward) is
   exactly the wrong register for a college calculus/CS/physics tool, and
   splitting "progress" and "what Calcebra noticed" into two differently-
   colored floating cards fought the sibling .daily-challenge-card below
   for attention. This panel shows only real data: a guest sees a local,
   today-only correct-check count (the only signal that works without an
   account); a signed-in student sees real check/correct/hint counts from
   GET /students/{username}/today (see app/students.py's
   get_todays_check_summary) plus the existing misconception-pattern
   insight folded in, instead of living in its own card. Deliberately
   session-level, not concept-level - the schema doesn't tag check_events
   by topic, so a per-concept "hint dependency" trend would be fabricated
   precision. Same flat surface treatment as .daily-challenge-card below
   (background/radius/shadow/border all match) so the column reads as one
   considered system rather than a set of mismatched widgets. */
.progress-card {
    background: var(--board);
    border-radius: 18px;
    padding: 14px 16px 13px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(227, 211, 190, 0.7);
    color: var(--ink);
}

.progress-eyebrow {
    display: block;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--ink);
    margin-bottom: 9px;
}

.progress-eyebrow::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pine);
    margin-right: 7px;
    vertical-align: middle;
}

.progress-guest-note {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ink-soft);
    margin: 0;
}

.progress-guest-note #progressGuestCount,
.progress-guest-note #progressGuestCountLabel {
    color: var(--ink);
    font-weight: 700;
}

.progress-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
}

.progress-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.progress-stat-number {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.progress-stat-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}

/* The one "satisfying confirmation" moment this panel keeps - a brief
   scale/color pulse on the stat that just changed, deliberately modest
   (a number nudging, not a mascot bouncing down a hill) - see
   progressPanel.js's _pulseStat. */
@keyframes progress-stat-pulse {
    0% { transform: scale(1); color: var(--ink); }
    40% { transform: scale(1.18); color: var(--pine); }
    100% { transform: scale(1); color: var(--ink); }
}

.progress-stat-pulse {
    display: inline-block;
    animation: progress-stat-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    .progress-stat-pulse {
        animation: none;
    }
}

.progress-insight {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--ink);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    cursor: pointer;
}

.progress-insight.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.progress-stats + .progress-insight,
.progress-guest-note + .progress-insight {
    margin-top: 10px;
}

.impact-card {
    background: var(--board);
    border-radius: 18px;
    padding: 14px 16px 13px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(227, 211, 190, 0.7);
    color: var(--ink);
}

.impact-summary {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--ink);
}

.impact-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.impact-form label,
.testing-outcome label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
}

.impact-form textarea,
.testing-outcome textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--paper-deep);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    padding: 6px 8px;
    resize: vertical;
}

.impact-save {
    align-self: flex-start;
    border: 0;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
}

.impact-status {
    margin: 0;
    min-height: 1.1em;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.testing-outcome {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.testing-outcome.hidden {
    display: none;
}

/* Stays in view while the page scrolls. The preview is clamped so a long
   generated problem cannot grow the pinned card over the rest of the
   column; Start Challenge shows the full text above the board. */
.daily-challenge-card {
    position: sticky;
    top: 12px;
    z-index: 3;
    background: var(--board);
    border-radius: 18px;
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(227, 211, 190, 0.7);
    color: var(--ink);
    overflow: hidden;
    min-width: 0;
}

.daily-challenge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
    position: relative;
    gap: 8px;
    flex-wrap: wrap;
}

.daily-challenge-eyebrow {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    min-width: 0;
}

.daily-challenge-eyebrow::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ochre);
    margin-right: 7px;
    vertical-align: middle;
}

.daily-challenge-streak {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ochre-deep);
    background: rgba(168, 82, 33, 0.16);
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.daily-challenge-signin-note {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0;
    position: relative;
}

.daily-challenge-meta {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    margin: 0 0 6px;
    position: relative;
}

.daily-challenge-preview {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--ink);
    margin: 0 0 12px;
    position: relative;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.daily-challenge-start-btn {
    width: 100%;
    padding: 11px 10px;
    border-radius: 14px;
    background: var(--ochre);
    border: none;
    border-bottom: 3px solid var(--ochre-deep);
    color: var(--board);
    font-weight: 800;
    font-size: 0.9rem;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.daily-challenge-start-btn:hover:not(:active) {
    transform: translateY(-2px);
    box-shadow: var(--glow-ochre);
}

.daily-challenge-retry-btn {
    padding: 8px 16px;
    border-radius: 12px;
    background: rgba(168, 82, 33, 0.14);
    border: none;
    color: var(--ochre-deep);
    font-weight: 700;
    font-size: 0.82rem;
    margin-top: 8px;
    transition: background 0.15s ease;
}

.daily-challenge-retry-btn:hover {
    background: rgba(168, 82, 33, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .daily-challenge-start-btn:hover:not(:active) {
        transform: none;
    }
}

.daily-challenge-error {
    position: relative;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.daily-challenge-error p {
    margin: 0;
}

.daily-challenge-completed {
    position: relative;
    text-align: center;
    padding: 4px 0 2px;
}

.daily-challenge-check-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: rgba(168, 82, 33, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ochre-deep);
    animation: challenge-check-pop 0.4s ease;
}

.daily-challenge-completed-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--ink);
    margin: 0 0 4px;
}

.daily-challenge-completed-sub {
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.4;
}

/* Skeleton loader - a shimmer sweep, not a static gray block, so it reads
   as "loading" rather than "broken". Shared by both sidebar cards, now
   both light, so the shimmer tints dark (ink) instead of light (white). */
.daily-challenge-skeleton {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-line,
.skeleton-btn {
    border-radius: 8px;
    background: linear-gradient(
        100deg,
        rgba(51, 68, 90, 0.05) 30%,
        rgba(51, 68, 90, 0.14) 50%,
        rgba(51, 68, 90, 0.05) 70%
    );
    background-size: 200% 100%;
    animation: challenge-shimmer 1.4s ease-in-out infinite;
}

.skeleton-line-sm { height: 10px; width: 40%; }
.skeleton-line-lg { height: 16px; width: 90%; }
.skeleton-line-md { height: 16px; width: 65%; margin-bottom: 4px; }
.skeleton-btn { height: 38px; width: 100%; border-radius: 14px; margin-top: 4px; }

@keyframes challenge-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes challenge-check-pop {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

/* The active-challenge card floats over the top of the board while a
   challenge is open (see dailyChallenge.js and challengeDock.js). It can
   be moved, resized within limits, collapsed to one line, or hidden for
   later, so the board stays the main workspace.
   It keeps a light, purple-edged card in both themes, so its own palette
   is pinned here instead of following the theme's --ink (which is light
   gray in dark mode and was unreadable on this card). Text colors meet
   WCAG AA on the card background: ink 15.6:1, soft ink 7.4:1,
   label 5.8:1, Hint 6.5:1, Check 8.9:1. */
.challenge-panel {
    --cp-ink: #17182A;
    --cp-ink-soft: #4A4D63;
    --cp-accent: #5146D8;
    --cp-accent-deep: #3D33B8;
    --ink: var(--cp-ink);
    --ink-soft: var(--cp-ink-soft);
    --board: #FFFFFF;
    --paper-deep: #D9D6F5;
    --pine: var(--cp-accent);
    --pine-deep: var(--cp-accent-deep);
    --ochre: var(--cp-accent);
    --ochre-deep: var(--cp-accent-deep);
    background: linear-gradient(165deg, #FFFDF9 0%, #F3F0FF 100%);
    border: 1.5px solid rgba(102, 92, 240, 0.55);
    border-bottom: 3px solid var(--cp-accent);
    border-radius: 14px;
    padding: 8px 12px 10px;
    box-shadow:
        0 0 0 3px rgba(102, 92, 240, 0.18),
        0 12px 32px rgba(10, 10, 30, 0.35);
    color: var(--cp-ink);
    position: absolute;
    z-index: 25;
    top: 14px;
    right: 14px;
    width: 340px;
    max-width: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    user-select: text;
}

.challenge-panel.is-moving,
.challenge-panel.is-resizing {
    user-select: none;
    transition: none;
}

.challenge-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -2px -4px 4px 0;
    gap: 8px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.challenge-panel.is-moving .challenge-panel-header {
    cursor: grabbing;
}

.challenge-panel-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.challenge-panel-collapse,
.challenge-panel-expand {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(81, 70, 216, 0.35);
    background: #FFFFFF;
    color: var(--cp-accent-deep);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.challenge-panel-collapsed-row {
    display: none;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.challenge-panel-preview {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--cp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.challenge-panel-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.challenge-panel.is-collapsed .challenge-panel-body,
.challenge-panel.is-collapsed .challenge-panel-resize,
.challenge-panel.is-collapsed .challenge-panel-collapse,
.challenge-panel.is-collapsed .challenge-panel-attempt {
    display: none;
}

.challenge-panel.is-collapsed .challenge-panel-collapsed-row {
    display: flex;
}

.challenge-panel.is-collapsed .challenge-panel-header {
    margin-bottom: 2px;
}

.challenge-panel-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    touch-action: none;
    background:
        linear-gradient(135deg, transparent 0 55%, rgba(81, 70, 216, 0.55) 55% 62%, transparent 62% 72%, rgba(81, 70, 216, 0.55) 72% 79%, transparent 79%);
    border-bottom-right-radius: 12px;
}

.challenge-panel-title-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.challenge-panel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cp-accent);
    white-space: nowrap;
}

.challenge-panel-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cp-accent);
    box-shadow: 0 0 0 3px rgba(102, 92, 240, 0.22);
}

.challenge-panel-attempt {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--cp-ink-soft);
}

.challenge-panel-exit {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 999px;
    background: rgba(81, 70, 216, 0.10);
    border: none;
    color: var(--cp-accent-deep);
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
}

.challenge-panel-problem {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.38;
    color: var(--cp-ink);
    margin: 0 0 8px;
    max-width: 100%;
    max-height: 6.9em;
    overflow-y: auto;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: pre-wrap;
}

/* After a manual resize the problem text takes whatever height is left and
   scrolls, instead of the default five-line cap. */
.challenge-panel.is-sized .challenge-panel-problem {
    flex: 1 1 auto;
    max-height: none;
    min-height: 2.8em;
}

.challenge-panel-note {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--cp-ink-soft);
    margin: -4px 0 8px;
}

.challenge-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.challenge-panel-actions button {
    border: none;
    border-radius: 10px;
    padding: 6px 12px;
    font: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    white-space: nowrap;
}

.challenge-panel-actions button:focus-visible,
.challenge-panel-exit:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px;
}

.challenge-panel-actions button:active {
    transform: translateY(2px);
}

.challenge-panel-actions button:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Primary: the only filled button, white on deep purple. */
.challenge-panel-hint-btn {
    background: var(--ochre);
    color: #FFFFFF;
    font-weight: 800;
    border-bottom-color: var(--ochre-deep);
    box-shadow: 0 4px 14px rgba(81, 70, 216, 0.35);
}

.challenge-panel-hint-btn:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(81, 70, 216, 0.45);
}

/* Secondary: outlined purple, clear but lighter than Hint. */
.challenge-panel-check-btn {
    margin-left: auto;
    background: var(--board);
    color: var(--cp-accent-deep);
    border: 1.5px solid var(--cp-accent);
    border-bottom: 3px solid var(--cp-accent);
}

/* Tertiary: text-weight action with no fill or border. */
.challenge-panel-explain-btn {
    background: transparent;
    color: var(--cp-ink-soft);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-inline: 8px;
}

.challenge-panel-explain-btn:hover:not(:disabled) {
    color: var(--cp-ink);
}

.challenge-panel-complete {
    text-align: center;
    padding: 6px 0 2px;
}

.challenge-complete-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: rgba(168, 82, 33, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ochre-deep);
    animation: challenge-check-pop 0.4s ease;
}

.challenge-complete-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ink);
    margin: 0 0 4px;
}

.challenge-complete-sub {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin: 0 0 2px;
}

.challenge-complete-note {
    font-size: 0.78rem;
    color: var(--ink-soft);
    margin: 0 0 14px;
}

.challenge-panel-complete button {
    padding: 9px 20px;
    border-radius: 14px;
    background: var(--pine);
    border: none;
    border-bottom: 3px solid var(--pine-deep);
    color: var(--board);
    font-weight: 800;
    font-size: 0.85rem;
}

/* Desktop board sizing. Below this width the layout already collapses to
   a single stacked column that scrolls normally (see max-width: 980px
   below) - that's the right behavior there and is left alone. At and
   above it: the board is deliberately given a generous explicit
   min-height (rather than fitting exactly the viewport, or exactly the
   sidebar) so it's both taller than a comfortable single-viewport board
   and reaches past wherever the sidebar's own content happens to end.
   .app-shell's default align-items: stretch (a plain CSS Grid default,
   not overridden here) is what actually makes .sidebar stretch to match
   the board's height, not the other way around - raising this number is
   the one lever that grows both columns together. The page then scrolls
   as a whole past that shared height (see .sidebar above for why it no
   longer scrolls on its own, and .floating-toolbar for how the toolbar
   stays reachable while doing so). */
@media (min-width: 981px) {
    .board-card {
        height: auto;
        min-height: 820px;
    }

    /* The page scrolls as a whole here (see .sidebar above) and the board
       can be taller than the viewport, so the toolbar needs to stay
       reachable rather than scrolling away below the board - sticky (not
       fixed) keeps it pinned to the bottom of the viewport while any part
       of .workspace is in view, and lets it settle back into normal flow
       once the actual end of the page scrolls into view, instead of
       floating over content that isn't there. Requires no ancestor
       between this and the page's own scrolling element (html/body) to
       set overflow - true here since the old viewport-lock's
       overflow:hidden was removed together with this. */
    .floating-toolbar {
        position: sticky;
        bottom: 16px;
    }
}

/* The desktop sidebar width is a clamp() in studio.css (--sidebar-width). */
@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .sidebar {
        border-radius: 24px;
    }

    .board-card {
        height: calc(100vh - 220px);
        min-height: 480px;
    }

    .floating-toolbar {
        width: 100%;
        border-radius: 24px;
        padding: 12px;
        gap: 10px;
    }

    .toolbar-row {
        justify-content: safe center;
    }

    .level-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .given-problem {
        flex-direction: column;
        margin: 6px 8px 0;
        padding: 10px 12px;
    }

    .challenge-panel {
        padding: 8px 10px 10px;
    }

    .challenge-panel-problem {
        font-size: 0.96rem;
    }

    .challenge-panel-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .challenge-panel-actions button {
        width: 100%;
        min-width: 0;
        padding-inline: 6px;
    }

    .challenge-panel-check-btn {
        margin-left: 0;
    }

    .brand-text h1 {
        font-size: 1rem;
    }

    .brand-text p {
        font-size: 0.85rem;
    }

    .sidebar-chat {
        height: 260px;
    }

    .board-card {
        height: calc(100vh - 240px);
        min-height: 420px;
    }

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

.ai-btn {
    border: none;
    border-radius: 14px;
    padding: 10px 18px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.ai-btn:active {
    transform: translateY(2px);
}

.ai-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.ai-btn:disabled:active {
    transform: none;
}

.ai-btn:not(:disabled):hover:not(:active) {
    transform: translateY(-2px);
}

/* Hint is the primary tutoring action. Check stays available, quieter. */
.hint-btn {
    background: var(--ochre);
    color: var(--board);
    border-bottom-color: var(--ochre-deep);
}

.hint-btn:not(:disabled):hover:not(:active) {
    box-shadow: var(--glow-ochre);
}

.check-btn {
    background: var(--board);
    color: var(--ink);
    border-bottom-color: var(--paper-deep);
}

.check-btn:not(:disabled):hover:not(:active) {
    box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
    .ai-btn:not(:disabled):hover:not(:active) {
        transform: none;
    }
}

/* Real, functional (used for capturing real handwriting samples to
   retrain the symbol model - see the data-licensing plan), just tucked out
   of the primary student-facing toolbar so it doesn't clutter it. */
.dev-tools-tuck {
    position: relative;
}

.dev-tools-tuck summary {
    list-style: none;
    cursor: pointer;
}

.dev-tools-tuck summary::-webkit-details-marker {
    display: none;
}

.dev-tools-tuck[open] summary {
    background: var(--accent-soft);
    color: var(--pine);
}

.dev-tools-panel {
    position: absolute;
    bottom: calc(100% + 10px);
    /* The flask is the last tool on the single row, so the panel grows
       left from that button and stays over the toolbar. */
    right: 0;
    width: 220px;
    background: var(--board);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(227, 211, 190, 0.8);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.dev-tools-hint {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.dev-tools-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.training-label-input {
  width: 86px;
  height: 42px;
  border: 1.5px solid var(--paper-deep);
  border-radius: 14px;
  padding: 0 12px;
  font-size: 15px;
  font-family: 'Karla', sans-serif;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  outline: none;
}

.training-label-input:focus {
  border-color: var(--pine);
  box-shadow: 0 0 0 4px rgba(92, 134, 172, 0.12);
}

.training-save-btn {
  background: rgba(92, 134, 172, 0.12);
}

.training-export-btn {
  background: rgba(168, 82, 33, 0.16);
}

.student-testing-entry {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 8px;
}

.testing-disclosure {
    margin: 4px 0 6px !important;
    text-align: left;
    font-size: 0.86rem !important;
    line-height: 1.45;
}

.testing-consent {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 2px;
}

.testing-accept-all {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.25;
}

.testing-accept-all input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    accent-color: var(--pine);
}

.testing-consent-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-soft);
    line-height: 1.35;
    padding-left: 2px;
}

.testing-consent-item input[type="checkbox"] {
    width: 0.78rem;
    height: 0.78rem;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--pine);
}

.testing-consent-item a {
    color: var(--pine-deep);
    font-weight: 700;
}

.testing-name-label {
    display: block;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

/* Prolific participants skip the name field; their study id ties the
   session together. */
html.prolific-study #testingNameLabel,
html.prolific-study #testingNameInput {
    display: none;
}

.prolific-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--paper-deep);
}

.prolific-lead {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
}

.prolific-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.84rem;
    color: var(--ink-soft);
}

.prolific-steps li {
    padding: 1px 0;
}

.prolific-steps li.is-done {
    color: var(--success);
    font-weight: 700;
}

.prolific-complete-btn {
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    padding: 8px 10px;
    background: var(--success);
    border-bottom: 3px solid #2C5A3B;
    color: #fff;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

.prolific-complete-btn:disabled {
    opacity: 0.7;
    cursor: progress;
}

.prolific-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ink);
}

html.student-testing-link #loginLegalLine,
html.student-testing-link #loginRevealBtn,
html.student-testing-link #guestDemoBtn,
html.student-testing-link #guestDemoNote,
html.student-testing-link #loginValueProps,
html.student-testing-link #loginNormalFields,
html.student-testing-link #forgotPasswordFields,
html.student-testing-link #resetPasswordFields,
html.student-testing-link #userPill,
body.student-testing-live #dailyChallengeCard,
body.student-testing-live #progressCard,
body.student-testing-live .patterns-card {
    display: none !important;
}

html.student-testing-link #studentTestingEntry {
    display: flex !important;
}

.student-testing-dock {
    position: fixed;
    z-index: 80;
    right: 12px;
    bottom: 12px;
    width: min(280px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    overflow: auto;
    background: var(--board);
    border: 1px solid var(--paper-deep);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.student-testing-dock.is-questionnaire-open,
.student-testing-dock.is-reason-open {
    width: min(340px, calc(100vw - 16px));
    max-height: min(88vh, 760px);
}

.student-testing-dock.is-shrunk {
    width: min(280px, calc(100vw - 16px));
    max-height: min(72vh, 560px);
    overflow: auto;
    padding: 6px 8px;
}

.student-testing-dock.is-shrunk .testing-dock-body {
    display: none;
}

.testing-dock-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.testing-dock-bar.is-dragging {
    cursor: grabbing;
}

.testing-shrink-btn {
    margin-left: auto;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 3px 9px;
    background: var(--surface-raised);
    color: var(--ink);
    font-family: 'Karla', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.testing-dock-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.testing-save-note {
    margin: 0;
    color: var(--error);
    font-size: 0.82rem;
}

.student-testing-dock textarea,
.student-testing-dock select {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--paper-deep);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    padding: 6px 8px;
}

.student-testing-dock textarea {
    resize: vertical;
    min-height: 64px;
}

.testing-judgment-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.testing-mistake-btn,
.testing-correct-btn {
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    padding: 6px 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
}

.testing-mistake-btn {
    background: var(--error);
    border-bottom: 3px solid var(--error-deep);
}

.testing-correct-btn {
    background: var(--success);
    border-bottom: 3px solid #2C5A3B;
}

.testing-mistake-btn.is-selected,
.testing-correct-btn.is-selected {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.testing-reason {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.testing-reason label {
    display: block;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
}

.testing-questionnaire-btn {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--ochre);
    border-bottom: 3px solid var(--ochre-deep);
    color: var(--board);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.testing-questionnaire-kicker {
    display: block;
    margin-bottom: 2px;
    font-family: 'Karla', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.testing-questionnaire {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 8px;
    border: 1.5px solid var(--ochre);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ochre) 8%, var(--board));
}

.testing-q {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.testing-q legend {
    padding: 0;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ink);
}

.testing-questionnaire textarea {
    min-height: 52px;
}

.testing-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.testing-choice-btn {
    border: 1.5px solid var(--border-strong);
    border-radius: 999px;
    padding: 4px 12px;
    background: var(--surface-raised);
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.testing-choice-btn.is-selected {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--board);
}

.testing-questionnaire-status {
    margin: 0;
    min-height: 1.1em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--success);
}

@media (max-width: 680px) {
    .student-testing-dock {
        right: 8px;
        bottom: 8px;
        width: min(280px, calc(100vw - 16px));
    }
}

/* First-visit board tour. Optional: every step can be skipped, and it
   stays dismissed on this browser after Not now, Skip, or Done. */
.tutorial-layer {
    position: fixed;
    inset: 0;
    z-index: 140;
    pointer-events: none;
}

.tutorial-blocker {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: auto;
}

.tutorial-spotlight {
    position: fixed;
    z-index: 2;
    pointer-events: none;
    border-radius: 14px;
    transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}

.tutorial-spotlight.is-dim {
    background: rgba(37, 39, 55, 0.48);
    box-shadow: none;
    border-radius: 0;
}

.tutorial-spotlight.is-hole {
    background: transparent;
    box-shadow:
        0 0 0 9999px rgba(37, 39, 55, 0.48),
        0 0 0 3px var(--pine);
}

.tutorial-card {
    position: fixed;
    z-index: 3;
    width: min(360px, calc(100vw - 32px));
    background: var(--surface-raised, var(--board));
    color: var(--ink);
    border: 1px solid var(--border-standard);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 20px 20px 16px;
    pointer-events: auto;
    text-align: left;
}

.tutorial-card-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tutorial-kicker {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pine);
}

.tutorial-card h2 {
    margin: 0 0 8px;
    font-family: "Karla", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.tutorial-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.45;
}

.tutorial-progress {
    margin-top: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tutorial-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.tutorial-actions-spacer {
    flex: 1;
}

.tutorial-actions button {
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
}

.tutorial-skip,
.tutorial-back {
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--border-standard);
}

.tutorial-next {
    background: var(--pine);
    color: #fff;
    border: 1px solid var(--pine-deep);
}

@media (prefers-reduced-motion: reduce) {
    .tutorial-spotlight {
        transition: none;
    }
}

.shortcuts-overlay {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    place-items: center;
    background: rgba(37, 39, 55, 0.48);
    padding: 24px 16px;
}

.shortcuts-card {
    width: min(520px, 100%);
    max-height: min(78vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--surface-raised, var(--board));
    color: var(--ink);
    border: 1px solid var(--border-standard);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 20px 20px 16px;
}

.shortcuts-card h2 {
    margin: 0;
    font-family: "Karla", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.shortcuts-note {
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.shortcuts-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shortcuts-group {
    margin: 10px 0 2px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pine);
}

.shortcuts-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-standard);
}

.shortcuts-label {
    font-size: 0.92rem;
    color: var(--ink);
}

.shortcuts-trigger {
    font: 12px ui-monospace, Consolas, monospace;
    color: var(--ink);
    background: var(--bubble);
    border-radius: 7px;
    padding: 4px 8px;
    min-width: 88px;
    text-align: center;
}

.shortcuts-change,
.shortcuts-reset,
.shortcuts-close {
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
}

.shortcuts-change,
.shortcuts-reset {
    background: var(--surface-panel);
    color: var(--ink);
    border: 1px solid var(--border-standard);
}

.shortcuts-change.is-listening {
    background: var(--accent-soft);
    color: var(--pine);
    border-color: var(--pine);
}

.shortcuts-close {
    background: var(--pine);
    color: #fff;
    border: 1px solid var(--pine-deep);
}

.shortcuts-error {
    margin: 8px 0 0;
    color: var(--error, #c93f24);
    font-size: 0.85rem;
}

.shortcuts-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.shortcuts-reset {
    margin-right: auto;
}

@media (max-width: 560px) {
    .shortcuts-row {
        grid-template-columns: 1fr auto;
    }

    .shortcuts-label {
        grid-column: 1 / -1;
    }
}

#studyPlanOverlay {
    z-index: 160;
}

.study-plan-card {
    text-align: left;
    align-items: stretch;
    width: min(460px, 92vw);
}

.study-plan-card h2,
.study-plan-card p,
.study-plan-kicker {
    width: 100%;
    text-align: left;
}

.study-plan-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.study-plan-stage,
.study-plan-actions {
    width: 100%;
}

.study-label {
    display: block;
    width: 100%;
    margin: 8px 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
}

.study-note {
    margin: 0 0 8px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

.study-textarea {
    width: 100%;
    min-height: 140px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid var(--paper-deep);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    resize: vertical;
}

.study-days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.study-day {
    font-size: 0.85rem;
    color: var(--ink);
}

.study-matches {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.study-plan-card .study-match {
    background: var(--paper);
    color: var(--ink);
    border: 1.5px solid var(--paper-deep);
    border-bottom-width: 1.5px;
    box-shadow: none;
}

.study-file {
    display: block;
    margin: 8px 0 12px;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.study-candidate {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 10px;
    text-align: left;
}

.study-candidate span {
    flex: 1;
    min-width: 0;
}

.study-candidate small {
    display: block;
    color: var(--ink-soft);
    font-size: 0.75rem;
}

.study-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    width: 100%;
}

.study-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid rgba(227, 211, 190, 0.7);
    font-size: 0.86rem;
}

.study-today-card {
    background: var(--board);
    border-radius: 18px;
    padding: 14px 16px 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(227, 211, 190, 0.7);
    color: var(--ink);
}

.study-today-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.study-today-eyebrow {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
}

.study-today-eyebrow::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pine);
    margin-right: 7px;
    vertical-align: middle;
}

.study-today-edit {
    background: none;
    border: none;
    color: var(--ink-soft);
    font-size: 0.78rem;
    text-decoration: underline;
    padding: 0;
}

.study-today-focus {
    margin: 0 0 8px;
    font-size: 0.88rem;
    line-height: 1.4;
}

.study-today-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.study-today-list li {
    font-size: 0.82rem;
    color: var(--ink-soft);
    padding: 3px 0;
}

.study-today-missing {
    background: none;
    border: none;
    color: var(--error);
    font-size: 0.78rem;
    text-decoration: underline;
    padding: 0;
    margin-top: 4px;
    cursor: pointer;
}

.study-today-missing[hidden] {
    display: none;
}

.exam-prep-name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.exam-prep-meta {
    margin: 2px 0 8px;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.exam-prep-facts {
    display: grid;
    gap: 4px;
    margin: 0 0 8px;
}

.exam-prep-facts div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.82rem;
}

.exam-prep-facts dt {
    color: var(--ink-soft);
    white-space: nowrap;
}

.exam-prep-facts dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
}

.exam-prep-actions {
    display: flex;
    gap: 14px;
    margin-bottom: 4px;
}

.exam-prep-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--pine);
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}

.exam-prep-dialog {
    max-height: 90vh;
    overflow-y: auto;
}

.exam-prep-dialog select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1.5px solid var(--paper-deep);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    margin-bottom: 12px;
}

.exam-prep-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.exam-prep-dialog .exam-prep-topics,
.exam-prep-dialog .exam-prep-notes {
    min-height: 88px;
    margin-bottom: 12px;
}

.exam-prep-reasons {
    width: 100%;
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 0.84rem;
    color: var(--ink);
}

.exam-prep-slots {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    font-size: 0.82rem;
}

.exam-prep-slots th,
.exam-prep-slots td {
    padding: 4px 6px;
    text-align: left;
    border-top: 1px solid var(--paper-deep);
}

.exam-prep-slots th {
    color: var(--ink-soft);
    font-weight: 700;
}

.exam-prep-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--error);
}

.exam-task-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    white-space: pre-wrap;
    color: var(--ink);
}

.exam-task-meta,
.exam-task-rules {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.exam-task-meta:empty,
.exam-task-rules:empty {
    display: none;
}

.exam-timer {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ink);
}

.exam-timer.is-low {
    color: var(--error);
}

.exam-submit-btn {
    margin-left: auto;
}

.exam-prep-check {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    margin: 4px 0 12px;
    font-size: 0.85rem;
    color: var(--ink);
}

.exam-prep-check input {
    width: auto;
    margin: 0;
}

.exam-review-work {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    margin: 4px 0 8px;
    border-radius: 10px;
    border: 1px solid var(--paper-deep);
    background: #ffffff;
}

.exam-review-lines {
    width: 100%;
    margin: 0 0 8px;
    padding-left: 22px;
    font-size: 0.86rem;
    color: var(--ink);
}

.exam-review-lines li.is-wrong {
    color: var(--error);
    font-weight: 700;
}

.exam-review-facts dd {
    max-width: 65%;
}

/* Mock exam: no tutoring controls, and nothing that leaves the exam. */
body.exam-mock #hintBtn,
body.exam-mock #checkBtn,
body.exam-mock .sidebar-chat,
body.exam-mock .daily-challenge-card,
body.exam-mock #dailyChallengePanel,
body.exam-mock .patterns-card,
body.exam-mock #voiceModeBtn {
    display: none !important;
}

body.exam-running #changeLevelBtn,
body.exam-running #homeworkSessionBtn,
body.exam-running #homeworkHeaderBtn,
body.exam-running #startChooser,
body.exam-running #givenProblem,
body.exam-running #examPrepCard {
    display: none !important;
}

body.exam-mock .exam-task {
    border-color: var(--error);
}

@media (max-width: 720px) {
    .study-plan-card {
        padding: 24px 18px;
    }

    .study-list li {
        flex-direction: column;
        align-items: flex-start;
    }
}

.homework-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--surface-raised);
}

.homework-entry p,
.homework-note,
.homework-progress,
.homework-lead {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.45;
}

.homework-lead {
    color: var(--ink);
    font-size: 1.05rem;
}

.homework-entry-btn,
.homework-header-btn,
.homework-btn {
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    color: var(--ink);
    border-radius: 10px;
    padding: 8px 12px;
    font: inherit;
    font-size: 0.92rem;
}

.homework-btn-primary,
.homework-entry-btn {
    background: var(--pine-deep);
    border-color: var(--pine-deep);
    color: #fff;
}

.homework-btn-danger {
    background: var(--error-soft);
    border-color: var(--error);
    color: var(--error-deep);
}

.homework-task {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 10px 0;
    padding: 12px 14px;
    border: 2px solid var(--pine-deep);
    border-radius: 16px;
    background: var(--surface-panel);
    box-shadow: 0 8px 24px rgba(var(--shadow), 0.12);
}

.homework-task-top,
.homework-task-actions,
.homework-review-actions,
.homework-actions,
.homework-file-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.homework-task-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pine-deep);
}

.homework-task-body p,
.homework-statement {
    margin: 0;
    color: var(--ink);
    font-size: 0.84rem;
    line-height: 1.3;
    white-space: pre-wrap;
}

.homework-task-image,
.homework-thumb,
.homework-preview-image {
    display: block;
    max-width: min(420px, 100%);
    max-height: 180px;
    object-fit: contain;
    border: 1px solid var(--border-standard);
    border-radius: 10px;
    background: #fff;
}

.homework-overlay {
    position: fixed;
    inset: 0;
    z-index: 155;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(51, 68, 90, 0.4);
    backdrop-filter: blur(6px);
}

.homework-card {
    width: min(760px, 96vw);
    max-height: 88vh;
    overflow: auto;
    padding: 24px;
    border-radius: var(--radius-xl, 18px);
    background: var(--board);
    color: var(--ink);
    box-shadow: var(--shadow-lg, 0 18px 50px rgba(51, 68, 90, 0.2));
}

.homework-card h2,
.homework-subhead {
    font-family: "Bricolage Grotesque", sans-serif;
    margin: 0 0 10px;
}

.homework-input,
.homework-textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid var(--border-standard);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--ink);
    font: inherit;
}

.homework-textarea {
    min-height: 72px;
    resize: vertical;
}

.homework-review-list,
.homework-library,
.homework-file-list {
    list-style: none;
    margin: 8px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.homework-review-item,
.homework-library-item,
.homework-preview-block {
    padding: 10px;
    border: 1px solid var(--border-standard);
    border-radius: 12px;
    background: var(--surface-raised);
}

.homework-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    color: var(--ink);
}

.homework-error {
    color: var(--error-deep);
    margin: 8px 0 0;
}

.homework-actions {
    margin-top: 14px;
}

.homework-rename {
    max-width: 220px;
    margin: 0;
}

@media (max-width: 680px) {
    .homework-entry,
    .homework-task-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .homework-task {
        margin: 6px 8px 0;
    }
}

/* One-line tutor reaction (personality.js) shown just above the tutor's
   reply to a Check. Smaller and quieter than the reply itself. */
.tutor-reaction {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 2px 0 -2px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    background: color-mix(in srgb, #665cf0 14%, transparent);
    border: 1px solid color-mix(in srgb, #665cf0 35%, transparent);
}

.tutor-reaction-positive {
    background: color-mix(in srgb, var(--success) 16%, transparent);
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

.tutor-reaction-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tutor-reaction-dismiss {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.tutor-reaction-dismiss:hover,
.tutor-reaction-dismiss:focus-visible {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    outline: none;
}

#homeworkOverlay {
    z-index: 170;
}

.homework-card {
    width: min(440px, 92vw);
    text-align: left;
    align-items: stretch;
}

.homework-card h2,
.homework-card p {
    text-align: left;
}

.homework-card .testing-consent-item {
    margin: 10px 0;
}

.homework-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.homework-choice-row button,
#homeworkContinueBtn,
#homeworkSignInBtn {
    width: auto;
}

.homework-level-btn {
    display: block;
    margin: 0 auto 18px;
    border: 1px solid var(--line, rgba(60, 50, 30, 0.18));
    background: transparent;
    color: var(--ink);
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit;
    cursor: pointer;
}

.homework-entry-btn {
    border: 1px solid var(--line, rgba(60, 50, 30, 0.18));
    background: transparent;
    color: var(--ink);
    border-radius: 999px;
    padding: 8px 14px;
    font: inherit;
    cursor: pointer;
}

.homework-taskbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 12px 0;
    padding: 8px 12px;
    border: 1px solid var(--line, rgba(60, 50, 30, 0.16));
    border-radius: 12px;
    background: var(--board, #fff);
}

.homework-task-label {
    margin: 0;
    font-size: 0.92rem;
}

.homework-task-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.homework-task-actions button {
    border: 1px solid var(--line, rgba(60, 50, 30, 0.18));
    background: transparent;
    color: var(--ink);
    border-radius: 999px;
    padding: 6px 12px;
    font: inherit;
    cursor: pointer;
}

.homework-task-actions button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* One homework card serves the review list and the consent step. */
.homework-card {
    width: min(760px, 96vw);
    max-height: 88vh;
}

.homework-entry .homework-entry-btn {
    background: var(--pine-deep);
    border-color: var(--pine-deep);
    color: #fff;
}

.homework-task .homework-task-actions {
    gap: 8px;
}

.homework-task .homework-btn {
    border-radius: 10px;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    color: var(--ink);
}

.homework-task .homework-btn-primary {
    background: var(--pine-deep);
    border-color: var(--pine-deep);
    color: #fff;
}

.homework-btn-quiet {
    background: transparent;
    color: var(--ink-soft);
}

body.homework-solving {
    overflow: hidden;
}

body.homework-solving .homework-task {
    position: relative;
    z-index: 3;
    margin: 0;
    padding: 6px 12px 8px;
    gap: 4px;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
}

.homework-task-body {
    max-height: 9.5rem;
    overflow: auto;
}

.homework-task-body.is-expanded {
    max-height: 16rem;
}

.homework-task-body p,
.homework-image-note {
    margin: 0 0 2px;
    font-size: 0.84rem;
    line-height: 1.35;
    white-space: pre-wrap;
}

.homework-solve-cue {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.homework-expand {
    align-self: flex-start;
    border: 0;
    background: none;
    color: var(--pine-deep);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
}

.homework-problem-table {
    width: max-content;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin: 2px 0 4px;
}

.homework-problem-table th,
.homework-problem-table td {
    border: 1px solid var(--border-standard);
    padding: 1px 6px;
    text-align: left;
    white-space: nowrap;
}

.homework-problem-table th {
    background: color-mix(in srgb, #665cf0 16%, transparent);
    font-weight: 700;
}

.homework-question-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: 220px;
    overflow: auto;
    margin-top: 6px;
}

.homework-qnav-item {
    border: 0;
    background: transparent;
    color: var(--ink);
    border-radius: 6px;
    padding: 3px 8px;
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.homework-qnav-item.is-current {
    border-color: #665cf0;
    background: color-mix(in srgb, #665cf0 18%, transparent);
}

.homework-more {
    position: relative;
}

.homework-more > summary {
    list-style: none;
}

.homework-more > summary::-webkit-details-marker {
    display: none;
}

.homework-more-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    padding: 8px;
    background: var(--surface-raised);
    border: 1px solid var(--border-standard);
    border-radius: 12px;
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
}

.homework-task-status[data-status="done"] { color: var(--success, #2f7d57); }
.homework-task-status[data-status="flagged"] { color: #665cf0; }
.homework-task-status[data-status="skipped"] { color: var(--ink-soft); }

#homeworkTaskCount {
    font-size: 0.92rem;
    font-weight: 700;
}

#homeworkTaskStatus {
    font-size: 0.82rem;
    font-weight: 700;
}

body.homework-solving #startChooser {
    display: none !important;
}

body.homework-solving #studentTestingDock.homework-comments.is-questionnaire-open,
body.homework-solving #studentTestingDock.homework-comments.is-reason-open {
    max-height: min(70vh, 640px);
}

body.homework-solving #studentTestingDock.homework-comments {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto;
    max-width: 100%;
    max-height: 18rem;
    flex: 0 0 auto;
    overflow: auto;
    z-index: auto;
    box-shadow: none;
    border: 0;
    border-top: 1px solid var(--border-standard);
    border-radius: 0;
    background: transparent;
    padding: 8px 14px 10px;
    margin: 0;
}


/* Homework Session: the question is a crop of the uploaded PDF, shown in a
   compact panel above the board. The board stays the main workspace, so the
   crop area has a capped, student-resizable height and can collapse. */
.homework-card.homework-card-wide {
    width: min(1040px, 96vw);
}

.homework-task {
    --homework-source-height: 128px;
    gap: 4px;
    padding: 6px 12px 4px;
}

.homework-task .homework-task-top {
    gap: 6px 10px;
    font-size: 0.9rem;
}

.homework-task-count {
    font-weight: 700;
}

.homework-task-state {
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.homework-view-controls {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

.homework-icon-btn {
    min-width: 32px;
    padding: 4px 9px;
    border: 1px solid var(--border-standard);
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.homework-icon-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.homework-task .homework-task-body {
    max-height: var(--homework-source-height);
    overflow: auto;
    overscroll-behavior: contain;
}

.homework-task.is-collapsed .homework-task-body,
.homework-task.is-collapsed .homework-task-resize,
.homework-task.is-collapsed #homeworkViewToggleBtn,
.homework-task.is-collapsed #homeworkZoomOutBtn,
.homework-task.is-collapsed #homeworkZoomInBtn {
    display: none;
}

.homework-task-resize {
    height: 10px;
    margin: -2px 0;
    cursor: ns-resize;
    touch-action: none;
    border-radius: 6px;
    background: linear-gradient(var(--border-strong), var(--border-strong)) center / 44px 3px no-repeat;
}

.homework-task-resize:hover,
.homework-task-resize:focus-visible {
    background-color: var(--paper-deep);
}

/* The crop is paper from the original assignment, so it stays black on
   white in dark mode too. */
.homework-source-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: 100%;
}

.homework-source-region {
    background: #fff;
    line-height: 0;
}

.homework-source-region canvas {
    display: block;
}

.homework-source-divider {
    align-self: stretch;
    height: 0;
    margin: 4px 0;
    border-top: 1px dashed #b9b9b9;
}

.homework-task-source {
    border: 1px solid var(--border-standard);
    border-radius: 8px;
    background: #fff;
    overflow: auto;
}

.homework-task-notice {
    margin: 0 0 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--paper-deep);
    color: var(--ink);
    font-size: 0.88rem;
}

.homework-link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--pine-deep);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}


@media (max-width: 680px) {
    .homework-view-controls {
        margin-left: 0;
    }
}

.homework-viewer {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    background: rgba(20, 24, 30, 0.92);
}

.homework-viewer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--board);
    color: var(--ink);
}

.homework-viewer-bar strong {
    margin-right: auto;
}

.homework-viewer-stage {
    flex: 1;
    overflow: auto;
    padding: 16px;
    cursor: grab;
}

.homework-viewer-stage.is-panning {
    cursor: grabbing;
}

.homework-viewer-stage .homework-source-stack {
    margin: 0 auto;
    min-width: 0;
    padding: 8px;
    background: #fff;
}

.homework-parse-banner {
    margin: 8px 0;
    padding: 8px 12px;
    border: 1px solid var(--border-standard);
    border-radius: 10px;
    background: var(--paper-deep);
    font-size: 0.9rem;
}

.homework-parse-banner p,
.homework-parse-banner ul {
    margin: 0;
}

.homework-parse-banner ul {
    margin-top: 4px;
    padding-left: 18px;
}

.homework-parse-low {
    border-color: var(--ochre-deep);
}

.homework-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.homework-label-input {
    width: 7.5em;
    margin: 0;
    font-weight: 700;
}

.homework-review-thumb {
    margin: 6px 0;
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--border-standard);
    border-radius: 8px;
    background: #fff;
    color: #333;
}

.homework-review-thumb.is-loading {
    padding: 10px;
    font-size: 0.85rem;
}

.homework-review-context {
    border-style: dashed;
    background: var(--paper-deep);
}

.homework-context-select {
    width: auto;
    max-width: 240px;
    margin: 0;
}

.homework-text-copy summary,
.homework-review-preamble summary {
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.homework-review-preamble {
    margin: 8px 0;
}

.homework-busy {
    font-style: italic;
}

.homework-split-stage {
    overflow: auto;
    border: 1px solid var(--border-standard);
    border-radius: 8px;
    background: #fff;
    cursor: crosshair;
}

.homework-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}

.homework-editor-page {
    padding: 0 4px;
    font-weight: 700;
}

.homework-editor-stage {
    position: relative;
    width: max-content;
    max-width: 100%;
    border: 1px solid var(--border-standard);
    background: #fff;
    touch-action: none;
}

.homework-editor-stage canvas {
    display: block;
}

.homework-editor-layer {
    position: absolute;
    inset: 0;
}

.homework-editor-mode-draw,
.homework-editor-mode-add {
    cursor: crosshair;
}

.homework-editor-box {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid rgba(31, 107, 90, 0.85);
    background: rgba(31, 107, 90, 0.08);
    cursor: pointer;
}

.homework-editor-mode-draw .homework-editor-box,
.homework-editor-mode-add .homework-editor-box {
    pointer-events: none;
}

.homework-editor-box.is-context {
    border-style: dashed;
    border-color: rgba(166, 110, 20, 0.9);
    background: rgba(166, 110, 20, 0.06);
}

.homework-editor-box.is-selected {
    border-width: 3px;
    background: rgba(31, 107, 90, 0.16);
    cursor: move;
}

.homework-editor-box.is-drawing {
    border-style: dotted;
}

/* Labels sit in the page margin, left of each box, so they never cover
   the question text above. */
.homework-editor-chip {
    position: absolute;
    top: -2px;
    left: -2px;
    transform: translateX(-100%);
    padding: 1px 6px;
    border-radius: 6px 0 0 6px;
    background: rgba(31, 107, 90, 0.95);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.homework-editor-box.is-context .homework-editor-chip {
    background: rgba(166, 110, 20, 0.95);
}

.homework-editor-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgb(31, 107, 90);
}

.homework-editor-handle-n { top: 0; left: 50%; cursor: ns-resize; }
.homework-editor-handle-s { top: 100%; left: 50%; cursor: ns-resize; }
.homework-editor-handle-w { top: 50%; left: 0; cursor: ew-resize; }
.homework-editor-handle-e { top: 50%; left: 100%; cursor: ew-resize; }

/* .login-card button/input make every control full width; review rows and
   the page editor need compact controls side by side. */
.homework-card .homework-review-actions .homework-btn,
.homework-card .homework-editor-toolbar .homework-btn,
.homework-card .homework-file-row .homework-btn {
    width: auto;
    margin: 0;
    padding: 6px 11px;
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    color: var(--ink);
    border-radius: 10px;
    font-size: 0.86rem;
    box-shadow: none;
}

.homework-card .homework-editor-toolbar .homework-btn-primary {
    border-color: var(--pine-deep);
    background: var(--pine-deep);
    color: #fff;
}

.homework-card .homework-label-input,
.homework-card .homework-context-select {
    width: auto;
    margin: 0;
}

.homework-card .homework-label-input {
    width: 7.5em;
}

/* "Show full problem" (for pasted text) still opens the panel further. */
.homework-task .homework-task-body.is-expanded {
    max-height: min(70vh, 40rem);
}

@media (max-width: 680px) {
    .homework-task .homework-task-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* The More menu drops over the board; keep it above the board's floating
   toolbar (z-index 5) so every item can be tapped. */
body.homework-solving .homework-task {
    z-index: 6;
}

.homework-task-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
}

.homework-task-titleline,
.homework-task-statusline {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.homework-task-kicker,
#homeworkTaskCount {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.homework-task-save:empty {
    display: none;
}

.homework-side {
    display: none;
}

.homework-side-kicker {
    margin: 0;
    font: 600 10.5px ui-monospace, Consolas, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.homework-side-count {
    margin: 2px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.homework-side-meta {
    display: flex;
    gap: 12px;
    margin: 0 0 6px;
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.homework-side .homework-btn {
    align-self: flex-start;
}

.homework-sidebar-resize {
    display: none;
}

.homework-task-position,
.homework-task-progress {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 650;
}

.homework-task-progress {
    color: var(--ink-soft);
    font-weight: 600;
}

.homework-pattern {
    margin: 0 0 4px;
    padding: 6px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, #665cf0 12%, var(--paper));
    color: var(--ink);
    font-size: 0.84rem;
}

.homework-progress-track {
    height: 4px;
    margin: 4px 0 2px;
    border-radius: 99px;
    background: var(--paper-deep);
    overflow: hidden;
}

.homework-progress-track span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--pine-deep, #5146d8);
}

.homework-notes {
    margin-top: 8px;
}

.homework-notes summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.homework-notes textarea {
    width: 100%;
    margin-top: 6px;
    box-sizing: border-box;
    resize: vertical;
    min-height: 64px;
    max-height: 140px;
    border: 1px solid var(--border-standard);
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
    padding: 6px 8px;
}

.homework-review-jump {
    margin-left: auto;
}

.homework-sheet {
    width: min(100%, 420px);
    margin: 12px 0;
    padding: 18px 16px 14px;
    background: #fff;
    color: #222;
    border: 1px solid #c8c8c8;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    aspect-ratio: 612 / 792;
    overflow: hidden;
}

.homework-sheet header,
.homework-sheet footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.72rem;
    color: #555;
}

.homework-sheet h3 {
    margin: 8px 0 4px;
    font-size: 0.95rem;
    color: #222;
}

.homework-sheet p {
    margin: 0 0 4px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #222;
}

.homework-sheet-ink {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed #bbb;
    font-size: 0.72rem;
    color: #444;
}

.homework-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

/* ---------------------------------------------------------------------
   Tutor text rendered by javascript/mathRender.js: typeset math, a few
   labeled callouts, and receding supporting text. Only the callout label,
   the equation, and the next action carry emphasis - the rest is plain.
   --------------------------------------------------------------------- */
.tutor-rich {
    white-space: normal;
    overflow-wrap: anywhere;
}

.chat-bubble.tutor-rich {
    line-height: 1.45;
}

.tutor-rich .tutor-p {
    margin: 0 0 6px;
}

.tutor-rich > :last-child,
.tutor-rich .tutor-callout-body > :last-child {
    margin-bottom: 0;
}

.tutor-math .katex {
    font-size: 1.08em;
}

/* Inline math flows with the sentence and breaks after operators like
   text does; a single unbreakable piece scrolls inside the bubble rather
   than widening the page. */
.tutor-math:not(.tutor-math--display) {
    display: inline;
}

.chat-bubble.tutor-rich,
.tutor-rich .tutor-callout-body {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.tutor-math-block {
    margin: 6px 0 8px;
    padding: 6px 10px;
    background: var(--surface-raised, var(--board));
    border: 1px solid var(--border-standard);
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.tutor-math-block .katex-display {
    margin: 0;
    text-align: center;
}

.tutor-math-block .katex {
    font-size: 1.18em;
}

.tutor-math--fallback {
    font-family: 'Karla', sans-serif;
    font-style: italic;
    border-bottom: 1px dotted var(--ink-soft);
}

.tutor-callout {
    margin: 0 0 8px;
    padding: 6px 10px 7px;
    border-left: 3px solid var(--border-strong, var(--paper-deep));
    border-radius: 4px 10px 10px 4px;
    background: color-mix(in srgb, var(--board) 70%, transparent);
}

.tutor-callout-label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.tutor-callout--mistake {
    border-left-color: var(--error);
    background: var(--error-soft);
}
.tutor-callout--mistake .tutor-callout-label { color: var(--error); }

.tutor-callout--hint {
    border-left-color: var(--pine);
    background: var(--accent-soft);
}
.tutor-callout--hint .tutor-callout-label { color: var(--pine-deep); }

.tutor-callout--try {
    border-left-color: var(--pine-deep);
    background: var(--surface-raised, var(--board));
    font-weight: 600;
}
.tutor-callout--try .tutor-callout-label { color: var(--pine-deep); }

.tutor-callout--why,
.tutor-callout--reading {
    border-left-color: var(--border-standard);
    background: transparent;
    color: var(--ink-soft);
}

.tutor-callout--important {
    border-left-color: var(--warning);
    background: var(--warning-soft);
}
.tutor-callout--important .tutor-callout-label { color: var(--warning); }

.tutor-callout--check {
    border-left-color: var(--ink-soft);
    background: var(--surface-raised);
}
.tutor-callout--check .tutor-callout-label { color: var(--ink); }

.tutor-callout--answer {
    border-left-color: var(--success);
    background: var(--success-soft);
}
.tutor-callout--answer .tutor-callout-label { color: var(--success); }

.tutor-list {
    margin: 0 0 6px;
    padding-left: 1.3em;
}

.tutor-list li + li {
    margin-top: 2px;
}

.tutor-table-wrap,
.homework-task-body .homework-problem-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.homework-task-body .homework-problem-table {
    display: block;
}

.tutor-table {
    border-collapse: collapse;
    margin: 4px 0 8px;
    font-size: 0.85rem;
}

.tutor-table th,
.tutor-table td {
    border: 1px solid var(--border-standard);
    padding: 2px 8px;
    text-align: center;
    white-space: nowrap;
}

.tutor-table th {
    background: var(--accent-soft);
}

/* A reading Calcebra is not sure about: highlighted, never hidden. */
.tutor-math .uncertain-symbol,
.guess-uncertain {
    text-decoration: underline wavy var(--warning);
    text-underline-offset: 3px;
}

:root[data-theme="dark"] .tutor-callout {
    background: color-mix(in srgb, var(--surface-raised) 80%, transparent);
}
:root[data-theme="dark"] .tutor-callout--mistake { background: var(--error-soft); }
:root[data-theme="dark"] .tutor-callout--hint { background: var(--accent-soft); }
:root[data-theme="dark"] .tutor-callout--important { background: var(--warning-soft); }
:root[data-theme="dark"] .tutor-callout--answer { background: var(--success-soft); }

/* Follow-up options under the latest tutor reply (AIchat.js). */
.tutor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -2px 0 4px;
    align-self: flex-start;
}

.tutor-action-btn {
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.2;
    padding: 5px 10px;
    min-height: 30px;
    border-radius: 999px;
    border: 1px solid var(--border-standard);
    background: var(--surface-raised, var(--board));
    color: var(--pine-deep);
    cursor: pointer;
}

.tutor-action-btn:hover,
.tutor-action-btn:focus-visible {
    border-color: var(--pine);
    background: var(--accent-soft);
}

.tutor-action-btn--quiet {
    color: var(--ink-soft);
    border-style: dashed;
}

:root[data-theme="dark"] .tutor-action-btn {
    color: var(--ink);
}

/* "I read this as ... - Fix it" (readingCheck.js). */
.reading-fix {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border-standard);
    border-radius: 12px;
    background: var(--surface-raised, var(--board));
}

.reading-fix-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.reading-fix-input {
    font: inherit;
    font-size: 16px; /* no iOS zoom on focus */
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid var(--border-strong, var(--paper-deep));
    background: var(--board);
    color: var(--ink);
    min-width: 0;
}

.reading-fix-preview:empty {
    display: none;
}

.reading-fix-preview .tutor-math-block {
    margin: 0;
}

.chat-bubble.reconsidered {
    border-left: 3px solid var(--success);
}

.misunderstood-menu {
    flex-basis: 100%;
    margin-top: 4px;
}

/* Homework transcription fidelity (homeworkSession.js / homeworkFidelity.js). */
.homework-fidelity {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-standard);
    background: var(--surface-raised, var(--board));
    font-size: 0.8rem;
}

.homework-fidelity p {
    margin: 0 0 4px;
}

.homework-fidelity-note {
    color: var(--ink-soft);
}

.homework-fidelity--confirm {
    border-color: var(--warning);
    border-left: 3px solid var(--warning);
    background: var(--warning-soft);
}

.homework-fidelity-title {
    font-weight: 700;
    color: var(--ink);
}

.homework-fidelity-reasons {
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.homework-fidelity-ask {
    font-weight: 600;
}

.homework-fidelity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.homework-fidelity-editor {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 16px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-strong, var(--paper-deep));
    background: var(--board);
    color: var(--ink);
}

.homework-fidelity-preview {
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--board);
    border: 1px dashed var(--border-standard);
}

.homework-fidelity-preview p {
    margin: 0 0 4px;
}

.homework-fidelity--pulse {
    animation: homework-fidelity-pulse 0.9s ease-out 2;
}

@keyframes homework-fidelity-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 55%, transparent); }
    100% { box-shadow: 0 0 0 8px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .homework-fidelity--pulse { animation: none; }
}

/* The original shown alongside the text copy. */
.homework-task-source--companion {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border-standard);
}

.homework-task-source canvas {
    max-width: 100%;
    height: auto !important;
}

.homework-fidelity-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    background: var(--accent-soft);
    color: var(--pine-deep);
}

.homework-fidelity-badge--warn {
    background: var(--warning-soft);
    color: var(--warning);
    font-weight: 700;
}

/* Room for "does this match?", the original, and the copy together. */
.homework-task .homework-task-body.homework-task-body--confirm {
    max-height: min(70vh, 34rem);
}

.homework-task .homework-task-body.homework-task-body--figure {
    max-height: max(var(--homework-source-height, 9.5rem), min(45vh, 24rem));
}

/* Type / Write workspace.
   PROBLEM is source material: a tinted strip with a colored edge.
   YOUR WORK is the student's sheet: a white header row (title, Type/Write,
   Hint/Check) joined to the notebook or the board underneath it.
   Hint stays the stronger tutoring control. */
#givenProblem[data-mode="card"] {
    position: relative;
    padding: 12px 16px 14px 20px;
    background: var(--surface-panel);
    box-shadow: inset 4px 0 0 var(--pine);
    border-bottom: 1px solid var(--border-standard);
}

#givenProblem[data-mode="card"] .given-problem-label {
    color: var(--pine);
    font-weight: 800;
    letter-spacing: 0.08em;
}

#givenProblem[data-mode="card"] .given-problem-card-text {
    font-size: 1.3rem;
}

#givenProblem[data-mode="card"] .given-problem-card-text .katex {
    font-size: 1.15em;
}

/* A Homework question is the same PROBLEM: colored edge, tinted strip,
   readable text. */
body.homework-solving #homeworkTask {
    background: var(--surface-panel);
    box-shadow: inset 4px 0 0 var(--pine);
    padding-left: 16px;
}

body.homework-solving #homeworkTask .homework-task-kicker {
    color: var(--pine);
}

body.homework-solving #homeworkTaskText p {
    font-size: 0.98rem;
    line-height: 1.45;
}

/* Phones: once work has started the problem folds to one line; the
   student can open it again (workNotebook.js syncProblemFold). */
.given-problem-peek {
    display: none;
}

.work-mode-bar {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin: 0;
    padding: 10px 16px;
    background: var(--board);
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
}

.work-mode-prompt {
    margin: 0;
    font-family: 'Karla', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
}

.work-mode-toggle,
.work-help {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* A segmented control: one choice, visibly selected. */
.work-mode-toggle {
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface-panel);
    border: 1px solid var(--border-standard);
}

.work-mode-btn,
.symbol-palette-btn,
.add-work-step,
.work-chat-link,
.symbol-btn,
.first-run-got-it,
.work-empty-hint {
    font: inherit;
    cursor: pointer;
}

.work-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    min-width: 84px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-weight: 700;
}

.work-mode-btn svg {
    width: 16px;
    height: 16px;
}

.work-mode-btn.active {
    background: var(--surface-raised);
    color: var(--pine-deep);
    box-shadow: 0 1px 3px rgba(var(--shadow), 0.16);
}

:root[data-theme="dark"] .work-mode-btn.active {
    color: var(--ink);
}

.work-mode-btn:focus-visible,
.symbol-palette-btn:focus-visible,
.add-work-step:focus-visible,
.work-chat-link:focus-visible,
.symbol-btn:focus-visible,
.first-run-got-it:focus-visible,
.work-empty-hint:focus-visible,
.given-problem-peek:focus-visible {
    outline: 2px solid var(--pine);
    outline-offset: 2px;
}

.work-help {
    margin-left: auto;
}

.work-help .ai-btn {
    min-height: 40px;
}

.work-help .hint-btn {
    min-width: 96px;
    font-weight: 800;
}

.work-help .check-btn {
    min-width: 88px;
}

.work-chat-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-weight: 600;
}

.work-chat-link svg {
    width: 16px;
    height: 16px;
}

.work-chat-link:hover {
    color: var(--ink);
    background: var(--surface-panel);
}

/* The header's own Hint/Check duplicate the pair next to the work, and
   before there is a problem they have nothing to act on. Exams keep the
   header pair: the work bar is hidden there. */
body.work-live:not(.exam-running) .studio-header #hintBtn,
body.work-live:not(.exam-running) .studio-header #checkBtn,
body.work-choosing:not(.exam-running) .studio-header #hintBtn,
body.work-choosing:not(.exam-running) .studio-header #checkBtn {
    display: none;
}

/* The first screen is the start and nothing else: the drawing toolbar and
   the board's scrollbars wait until there is a board to use. */
body.work-choosing:not(.exam-running):not(.homework-solving) .floating-toolbar {
    display: none;
}

body.work-choosing:not(.exam-running):not(.homework-solving) .board-scrollbars {
    visibility: hidden;
}

/* Phones: the guest comment box would sit on top of the start. It comes
   back once a problem is entered; a testing session keeps it throughout. */
@media (max-width: 720px) {
    body.work-choosing:not(.student-testing-live):not(.exam-running):not(.homework-solving) .student-testing-dock {
        display: none !important;
    }
}

/* Typed steps stay in view above the board in Write mode. */
.typed-work-strip {
    margin: 0;
    padding: 8px 16px 10px;
    background: var(--board);
    border-bottom: 1px dashed var(--border-standard);
    max-height: 140px;
    overflow: auto;
}

.typed-work-strip-label {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.typed-work-strip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}

.typed-work-strip-row .work-step-index {
    padding-top: 0;
}

/* The notebook: numbered lines on paper, not a form. */
.work-notebook {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 28px 28px;
    overflow: auto;
    background: var(--board);
    color: var(--ink);
}

/* A line of math reads best at notebook width, even on a wide screen. */
.work-notebook > * {
    width: 100%;
    max-width: 980px;
    box-sizing: border-box;
}

.work-notebook > .add-work-step {
    width: auto;
}

.work-notebook-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 36px;
}

.work-notebook-head .work-ink-note {
    margin-right: auto;
}

.symbol-palette-wrap {
    position: relative;
}

.symbol-palette-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-standard);
    background: var(--surface-raised);
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.symbol-palette-btn[aria-expanded="true"] {
    color: var(--ink);
    border-color: var(--pine);
}

.symbol-palette {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(7, 40px);
    gap: 4px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--border-standard);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
}

/* display:grid above would otherwise override the hidden attribute. */
.symbol-palette[hidden] {
    display: none;
}

.symbol-btn {
    height: 36px;
    padding: 0;
    border-radius: 9px;
    border: 1px solid var(--border-subtle);
    background: var(--board);
    color: var(--ink);
    font-size: 1rem;
}

.symbol-btn:hover {
    border-color: var(--pine);
}

.work-ink-note {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

/* Nothing typed yet: a small nudge, not a wall of instructions. */
.work-empty {
    padding: 4px 4px 10px 50px;
    color: var(--ink-soft);
    line-height: 1.45;
}

.work-empty p {
    margin: 0;
}

.work-empty-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
}

.work-empty-stuck {
    margin-top: 6px !important;
    font-size: 0.92rem;
}

.work-empty-hint {
    padding: 0;
    border: 0;
    background: none;
    color: var(--pine-deep);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.work-notebook.has-work .work-empty {
    display: none;
}

.work-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.work-step {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.work-step.is-active {
    background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
    border-bottom-color: transparent;
}

.work-step-index {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-top: 8px;
    border-radius: 999px;
    border: 1.5px solid var(--border-strong);
    font-family: 'Karla', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.work-step.is-active .work-step-index {
    border-color: var(--pine);
    background: var(--pine);
    color: #fff;
}

.work-step-body {
    position: relative;
    min-width: 0;
}

.step-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 1.25rem 'Karla', sans-serif;
    caret-color: var(--pine);
}

.step-input:focus,
.step-input:focus-visible {
    outline: none;
}

.step-input::placeholder {
    color: var(--ink-soft);
    opacity: 0.75;
}

.work-step.is-committed:not(.is-editing) .step-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.work-step-live,
.work-step-preview {
    min-height: 1.4em;
    padding: 2px 4px 4px;
    overflow-x: auto;
    overflow-y: hidden;
}

.work-step-preview {
    padding-top: 8px;
    padding-bottom: 6px;
}

/* While a line is being typed, the typeset version sits under it. */
.work-step.is-editing .work-step-live {
    color: var(--ink-soft);
}

.work-step.is-editing .work-step-live:empty,
.work-step.is-editing .work-step-live.is-plain {
    display: none;
}

.work-step.is-committed:not(.is-editing) .work-step-live {
    display: none;
}

.work-step.is-editing .work-step-render {
    display: none;
}

.work-step-render {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: text;
}

.work-step-render:focus-visible {
    outline: 2px solid var(--pine);
    outline-offset: 2px;
    border-radius: 8px;
}

.work-step .katex {
    font-size: 1.25rem;
}

.work-step-preview .katex {
    font-size: 1.35rem;
}

.add-work-step {
    align-self: flex-start;
    margin: 6px 0 0 44px;
    min-height: 36px;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pine-deep);
    font-weight: 700;
}

.add-work-step:hover {
    background: var(--accent-soft);
}

.work-keys-tip {
    margin: 10px 0 0;
    padding-left: 54px;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.work-notebook.is-practiced .work-keys-tip {
    display: none;
}

.work-keys-tip kbd,
.work-keys-tip code {
    padding: 1px 5px;
    border-radius: 5px;
    border: 1px solid var(--border-standard);
    background: var(--surface-panel);
    font-family: inherit;
    font-size: 0.78rem;
}

.work-ask-guide,
.write-empty-guide {
    position: absolute;
    left: 50%;
    top: 56px;
    transform: translateX(-50%);
    z-index: 2;
    width: min(400px, calc(100% - 32px));
    padding: 14px 18px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-panel) 92%, transparent);
    border: 1px dashed var(--border-strong);
    color: var(--ink-soft);
    text-align: left;
    pointer-events: none;
}

.work-ask-guide p,
.write-empty-guide p {
    margin: 0 0 4px;
}

.write-empty-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    color: var(--ink);
}

.workspace[data-work-mode="type"] .floating-toolbar {
    display: none;
}

.board-card[data-work-mode="type"] #board,
.board-card[data-work-mode="type"] .board-scrollbars {
    visibility: hidden;
}

/* Mock and practice exams are graded from the board, so the typed
   notebook stays out of the exam (examSession.js sets these classes). */
body.exam-running #workModeBar,
body.exam-running #typedWorkStrip,
body.exam-running #workNotebook,
body.exam-running #workAskGuide,
body.exam-running #writeEmptyGuide {
    display: none !important;
}

body.exam-running .board-card[data-work-mode="type"] #board,
body.exam-running .board-card[data-work-mode="type"] .board-scrollbars {
    visibility: visible;
}

body.exam-running .workspace[data-work-mode="type"] .floating-toolbar {
    display: flex;
}

body.exam-mock #workHintBtn,
body.exam-mock #workCheckBtn,
body.exam-mock #openChatBtn {
    display: none;
}

.first-run {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: end center;
    padding: 24px;
    background: rgba(51, 68, 90, 0.18);
}

.first-run-card {
    width: min(460px, 100%);
    margin-bottom: 8vh;
    padding: 18px 20px 16px;
    border-radius: 18px;
    background: var(--board);
    border: 1px solid var(--border-standard);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
}

.first-run-card h2 {
    margin: 0 0 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.2rem;
}

.first-run-steps {
    margin: 0 0 14px;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.4;
}

.first-run-got-it {
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ochre);
    color: #fff;
    font-weight: 800;
}

/* Math Chat: named, with an icon, secondary to Hint and Check. */
.sidebar-chat-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.chat-header-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Karla', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.chat-header-label svg {
    width: 16px;
    height: 16px;
    color: var(--pine);
}

.chat-cue {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: 'Karla', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
}

.chat-cue button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
}

/* A superseded reading stays as history but clearly isn't current. */
.chat-bubble.reading-superseded {
    opacity: 0.6;
}

.chat-bubble.reading-corrected .reading-was {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.chat-bubble.reading-corrected .reading-was .katex {
    text-decoration: line-through;
}

.reading-status-tag {
    display: inline-block;
    margin-bottom: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--success-soft, #e6f4ec);
    color: var(--success, #2f7a52);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Tablets: one row. The chat link drops to its icon (it keeps its label
   for screen readers) so Hint and Check stay beside Type and Write. */
@media (min-width: 721px) and (max-width: 1100px) {
    .work-mode-bar {
        gap: 8px 10px;
        padding: 10px 12px;
    }

    .work-mode-btn {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 40px;
    }

    .work-mode-toggle {
        flex: 0 0 auto;
    }

    .work-help .hint-btn,
    .work-help .check-btn {
        min-width: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    .work-chat-link .work-chat-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Phones: while a step is being typed the keyboard owns half the screen;
   the floating comment box steps aside until typing stops. */
@media (max-width: 720px) {
    body.notebook-typing .student-testing-dock {
        display: none !important;
    }
}

@media (max-width: 720px) {
    /* Type/Write and Hint/Check stay pinned while the keyboard is up. */
    .work-mode-bar {
        position: sticky;
        top: 0;
        z-index: 8;
        padding: 8px 12px;
        gap: 8px;
        box-shadow: 0 4px 12px rgba(var(--shadow), 0.06);
    }

    .work-mode-prompt {
        display: none;
    }

    .work-mode-toggle {
        flex: 0 0 auto;
    }

    .work-mode-btn {
        min-width: 0;
        padding: 6px 12px;
    }

    .work-help {
        margin-left: auto;
        width: auto;
        gap: 6px;
    }

    .work-help .hint-btn,
    .work-help .check-btn {
        min-width: 0;
        padding-left: 14px;
        padding-right: 14px;
    }

    .work-chat-link {
        display: none;
    }

    .work-help .hint-btn,
    .work-help .check-btn,
    .work-mode-btn,
    .step-input,
    .add-work-step {
        min-height: 44px;
    }

    .board-card {
        height: auto;
        min-height: 68vh;
    }

    .work-notebook {
        padding: 10px 12px 20px;
    }

    .work-step {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 8px;
        padding: 6px 6px;
    }

    .work-step-index {
        width: 24px;
        height: 24px;
        margin-top: 10px;
        font-size: 0.78rem;
    }

    .work-empty {
        padding-left: 40px;
    }

    .add-work-step {
        margin-left: 36px;
    }

    .work-keys-tip {
        display: none;
    }

    .symbol-palette {
        grid-template-columns: repeat(7, 38px);
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    /* Work has started: the problem folds to one line. */
    #givenProblem[data-mode="card"].is-folded {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    #givenProblem[data-mode="card"].is-folded .given-problem-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 10px;
    }

    #givenProblem[data-mode="card"].is-folded .given-problem-card-head {
        grid-column: 1 / -1;
    }

    #givenProblem[data-mode="card"].is-folded .given-problem-card-text {
        max-height: 1.6em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 1.05rem;
    }

    #givenProblem[data-mode="card"].is-folded .given-problem-card-image {
        display: none;
    }

    #givenProblem[data-mode="card"].is-folded.has-overflow .given-problem-peek,
    #givenProblem[data-mode="card"].is-folded.is-peeking .given-problem-peek {
        display: inline-flex;
    }

    #givenProblem[data-mode="card"].is-folded.is-peeking .given-problem-card-text {
        max-height: none;
        white-space: pre-wrap;
    }

    #givenProblem[data-mode="card"].is-folded.is-peeking .given-problem-card-image {
        display: block;
    }

    .given-problem-peek {
        align-items: center;
        padding: 4px 10px;
        border: 1px solid var(--border-standard);
        border-radius: 999px;
        background: var(--surface-raised);
        color: var(--ink);
        font: inherit;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
    }

    /* The on-screen keyboard's height (workNotebook.js) so the last line
       of work can scroll above it. */
    .board-stage {
        padding-bottom: var(--keyboard-inset, 0px);
    }

    .homework-task-body {
        max-height: 8.5rem;
        overflow: auto;
    }
}

.history-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.history-label {
    margin: 8px 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.history-list {
    margin: 0;
    padding-left: 1.1rem;
}

.history-pattern p {
    margin: 0 0 6px;
}

.history-practice-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.history-practice,
.history-practice-problem {
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
}

.history-practice-problem {
    background: var(--surface-raised, transparent);
    border: 1px solid var(--border-standard);
    border-radius: 10px;
    padding: 8px 10px;
}

/* Phone: once work has started, the problem card collapses so the board
   and Hint/Check stay in reach. Desktop keeps the full card.
   Board height stays with the Type/Write phone rules above so the
   keyboard inset is not overwritten. */
@media (max-width: 680px) {
    .given-problem[data-mode="card"] .given-problem-reopen:not([hidden]) {
        display: inline-flex;
    }

    .given-problem[data-mode="card"][data-collapsed="true"] {
        max-height: none;
        overflow: visible;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .given-problem[data-mode="card"][data-collapsed="true"] .given-problem-card-text,
    .given-problem[data-mode="card"][data-collapsed="true"] .given-problem-card-image,
    .given-problem[data-mode="card"][data-collapsed="true"] .solve-below-cue {
        display: none;
    }
}