/* Calcebra signature layer.

   Loads last, after style.css / studio.css / app-shell.css / mascot.css,
   and only restyles: colors, type, surfaces, spacing and the weight of
   controls. No layout mechanics (sticky, heights, breakpoints, touch
   targets) are changed here; those stay where they are.

   The direction: dark academic, editorial, a little sly. Ink-navy base,
   charcoal-plum panels, warm off-white type, periwinkle-violet for
   whatever you can press, and a muted fox copper kept for the fox's own
   moments (the mark, the tutor's voice in chat, a hint, the thinking
   state). Copper is never a button color.

   Surfaces read in four steps, darkest to lightest:
     page (--paper)            the desk everything sits on
     panel (--surface-panel)   question card, chat column, toolbar tray
     raised (--surface-raised) controls, tutor bubbles
     accent fill               the one action that matters right now

   Button weight reads in three:
     primary    filled violet          Save & Next, Hint, Send
     secondary  raised fill, no ring   Previous, Flag, More, Check
     tertiary   words, no box          Original view, Collapse */

:root {
    --sig-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --sig-sans: 'Karla', "Segoe UI", Roboto, Arial, sans-serif;

    /* Light theme: warm ivory paper under the same violet. */
    --paper: #F5F3EE;
    --board: #FFFFFF;
    --paper-deep: #E4E0D7;
    --ink: #1E1D29;
    --ink-soft: #5D5869;
    --ink-muted: #6F6A7C;
    --pine: #5A4DDB;
    --pine-deep: #5A4DDB;
    --ochre: #5A4DDB;
    --ochre-deep: #4A3EC4;
    --accent-fill: #5A4DDB;
    --accent-fill-hover: #4F43CF;
    --accent-line: #7C6FF2;
    --accent-soft: #ECEAFB;
    --fox: #A65C38;
    --fox-soft: #B8714D;
    --fox-tint: rgba(166, 92, 56, 0.10);

    --surface-page: var(--paper);
    --surface-panel: #FBFAF7;
    --surface-raised: #FFFFFF;
    --surface-sunken: #EFECE5;
    --bubble: #F1EEE8;

    --border-subtle: #ECE8E0;
    --border-standard: #E2DDD3;
    --border-strong: #CBC5B9;
    --hairline: rgba(30, 29, 41, 0.07);

    --board-ink: #1E1D29;
    --grid-minor: #F1EFEA;
    --grid-major: #E7E4DD;

    --success: #4E7A47;
    --success-soft: rgba(78, 122, 71, 0.12);
    /* Holds white text at 4.5:1 or better in both themes. */
    --success-fill: #436B3D;
    --warning: #8C601A;
    --warning-soft: rgba(154, 107, 30, 0.12);
    --error: #A8464C;
    --error-deep: #7E3036;
    --error-soft: rgba(168, 70, 76, 0.10);

    --shadow: 30, 29, 41;
    --elev-1: 0 1px 2px rgba(30, 29, 41, 0.06);
    --elev-2: 0 1px 2px rgba(30, 29, 41, 0.05), 0 8px 24px -12px rgba(30, 29, 41, 0.18);
    --elev-3: 0 2px 6px rgba(30, 29, 41, 0.06), 0 24px 48px -20px rgba(30, 29, 41, 0.28);
    --glow-accent: 0 6px 18px -6px rgba(90, 77, 219, 0.55);
    --glow-pine: var(--glow-accent);
    --glow-ochre: var(--glow-accent);
    --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    --radius-sm: 8px;
    --radius-md: 11px;
    --radius-lg: 16px;
    /* The four-point glint used for Hint and the sign-in list: the fox
       has noticed something. */
    --sig-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.8 6.4 17.6 11.2 24 12C17.6 12.8 12.8 17.6 12 24C11.2 17.6 6.4 12.8 0 12C6.4 11.2 11.2 6.4 12 0Z'/%3E%3C/svg%3E");
}

/* Dark theme: the palette Calcebra is designed around. */
:root[data-theme="dark"] {
    --paper: #11121A;
    --board: #15161F;
    --paper-deep: #2C2B3A;
    --ink: #F3F0EA;
    --ink-soft: #B8B2BE;
    --ink-muted: #948EA0;
    /* --pine is the text-safe violet (5.8:1 on panels); fills use
       --accent-fill, which holds white text at 4.8:1. */
    --pine: #9186FF;
    --pine-deep: #6A5DE8;
    --ochre: #6A5DE8;
    --ochre-deep: #9186FF;
    --accent-fill: #6A5DE8;
    --accent-fill-hover: #6E61EA;
    --accent-line: #7C6FF2;
    --accent-soft: #262344;
    --fox: #B56A45;
    --fox-soft: #C98563;
    --fox-tint: rgba(181, 106, 69, 0.13);

    --surface-page: #11121A;
    --surface-panel: #1A1A24;
    --surface-raised: #232330;
    --surface-sunken: #0D0E14;
    --bubble: #232330;

    --border-subtle: #22222E;
    --border-standard: #2E2D3C;
    --border-strong: #434157;
    --hairline: rgba(243, 240, 234, 0.06);

    --board-ink: #F3F0EA;
    --grid-minor: #1A1B25;
    --grid-major: #20212C;

    --success: #7F9D78;
    --success-soft: rgba(127, 157, 120, 0.14);
    --success-fill: #4A7543;
    --warning: #D3A35D;
    --warning-soft: rgba(211, 163, 93, 0.13);
    --error: #C96E73;
    --error-deep: #E0959A;
    --error-soft: rgba(201, 110, 115, 0.14);

    --shadow: 0, 0, 0;
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --elev-2: 0 1px 0 rgba(255, 255, 255, 0.025) inset, 0 10px 28px -14px rgba(0, 0, 0, 0.7);
    --elev-3: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 28px 60px -24px rgba(0, 0, 0, 0.85);
    --glow-accent: 0 8px 22px -8px rgba(124, 111, 242, 0.75);
    --glow-pine: var(--glow-accent);
    --glow-ochre: var(--glow-accent);
    --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

html,
body {
    background: var(--surface-page);
    color: var(--ink);
    font-family: var(--sig-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* A faint violet dusk in the top corner and a trace of copper at the
   foot: warmth under the dark, too quiet to notice as a gradient. */
:root[data-theme="dark"] body {
    background:
        radial-gradient(1200px 520px at 8% -10%, rgba(124, 111, 242, 0.07), transparent 60%),
        radial-gradient(900px 420px at 100% 115%, rgba(181, 106, 69, 0.045), transparent 60%),
        var(--surface-page);
}

::selection {
    background: rgba(124, 111, 242, 0.32);
    color: inherit;
}

:focus-visible {
    outline-color: var(--accent-line);
}

/* ---- Header ------------------------------------------------------------ */

.studio-header {
    background: color-mix(in srgb, var(--surface-page) 82%, var(--surface-panel));
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 1px 0 var(--hairline);
}

/* The wordmark is the one serif in the chrome. */
.studio-header .brand h1 {
    font-family: var(--sig-serif);
    font-weight: 400;
    font-size: 25px;
    letter-spacing: 0.005em;
    line-height: 1;
    color: var(--ink);
}

@media (min-width: 981px) {
    .studio-header .brand h1 {
        font-size: 24px;
    }
}

/* Where the word is spelled out, the fox is its tail: copper with a cream
   tip, curling up and away to the left off the C. The face mark steps aside. */
.studio-header .brand-mark {
    display: none;
}

.studio-header .brand-text {
    display: flex;
    align-items: flex-end;
}

.studio-header .brand-tail {
    flex: 0 0 auto;
    width: auto;
    height: 1.25em;
    margin-right: -0.1em;
    font-size: 24px;
    /* Drawn trailing right; mirrored so it sweeps left from the C. */
    transform: translateY(-0.04em) scaleX(-1);
}

/* Where studio.css hides the word (tablet, narrow desktop, small phone),
   a tail on its own would read as nothing: the face mark stands in. */
@media (min-width: 761px) and (max-width: 1179px), (max-width: 520px) {
    .studio-header .brand-mark {
        display: grid;
    }

    .studio-header .brand-tail {
        display: none;
    }
}

/* Type / Draw: a recessed track, the chosen side lifts out of it. */
.studio-header .mode-switch {
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(var(--shadow), 0.25);
}

.studio-header .work-mode-btn {
    border-radius: 9px;
    color: var(--ink-muted);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.15s ease, background 0.15s ease;
}

.studio-header .work-mode-btn:hover {
    color: var(--ink);
}

.studio-header .work-mode-btn.active,
:root[data-theme="dark"] .studio-header .work-mode-btn.active {
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--elev-1), var(--sheen);
}

.studio-header .work-mode-btn.active svg {
    color: var(--pine);
}

.studio-header .level-banner {
    border-left-color: var(--border-standard);
    color: var(--ink-muted);
    letter-spacing: 0.01em;
}

.studio-header .level-banner b {
    color: var(--ink);
    font-weight: 700;
}

.studio-header .level-banner button,
:root[data-theme="dark"] .studio-header .level-banner button {
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--pine);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.studio-header .level-banner button:hover {
    border-color: color-mix(in srgb, var(--accent-line) 45%, transparent);
}

.settings-btn {
    background: transparent;
    color: var(--ink-muted);
    border: 1px solid var(--border-subtle);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.settings-btn:hover {
    background: var(--surface-raised);
    border-color: var(--border-standard);
    color: var(--ink);
}

.settings-tuck[open] .settings-btn {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent-line) 40%, transparent);
}

.settings-panel {
    background: var(--surface-panel);
    border-color: var(--border-standard);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-3);
    padding: 8px;
    gap: 2px;
}

.settings-panel .theme-toggle {
    border: 0;
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    text-align: left;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 500;
}

.settings-panel .theme-toggle:hover {
    background: var(--surface-raised);
    color: var(--ink);
}

.settings-panel .voice-choice {
    padding: 8px 10px 4px;
    margin-top: 4px;
    border-top: 1px solid var(--border-subtle);
    font: 600 10.5px/1.3 var(--sig-sans);
    letter-spacing: 0.14em;
    color: var(--ink-muted);
}

.studio-header .user-pill {
    background: var(--surface-raised);
    color: var(--ink-soft);
    border: 1px solid var(--border-subtle);
}

/* ---- Small labels -------------------------------------------------------
   Eyebrows were monospace; they read as a developer tool. Tracked sans
   caps instead, quieter and more deliberate. */

.work-mode-prompt,
.progress-eyebrow,
.study-today-eyebrow,
.homework-side-kicker,
.daily-challenge-eyebrow,
.voice-choice,
.level-select-card .level-group-label {
    font-family: var(--sig-sans);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Desktop and tablet only: phones hide the label (style.css). */
@media (min-width: 721px) {
    .work-mode-prompt {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 10.5px;
        color: var(--ink-muted);
    }

    /* A short rule before "Your work", like a section mark in a notebook. */
    .work-mode-prompt::before {
        content: "";
        width: 14px;
        height: 1px;
        background: var(--ink-muted);
        opacity: 0.6;
    }
}

/* ---- Buttons ------------------------------------------------------------ */

/* Primary: the next real step. Filled violet, a soft glow, a hairline of
   light on top. Only one of these is ever meant to be in view per area. */
.hint-btn,
.homework-btn-primary,
#sidebarChatSendBtn,
.start-go,
#createAccountBtn,
#loginSubmitBtn,
#testingStartBtn,
.daily-challenge-start-btn,
.first-run-got-it {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 88%, #fff), var(--accent-fill));
    background-color: var(--accent-fill);
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--accent-fill) 70%, #000);
    border-bottom-width: 1px;
    box-shadow: var(--sheen), var(--elev-1);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.12s ease;
}

.hint-btn:not(:disabled):hover:not(:active),
.homework-btn-primary:hover:not(:disabled),
#sidebarChatSendBtn:not(:disabled):hover:not(:active),
.start-go:hover,
#createAccountBtn:hover:not(:disabled),
#loginSubmitBtn:hover:not(:disabled),
#testingStartBtn:hover:not(:disabled),
.daily-challenge-start-btn:hover,
.first-run-got-it:hover {
    background-color: var(--accent-fill-hover);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill-hover) 86%, #fff), var(--accent-fill-hover));
    box-shadow: var(--sheen), var(--glow-accent);
}

/* The header's own pair (shown during exams, before work starts). */
.studio-header .hint-btn {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 88%, #fff), var(--accent-fill));
    border-color: color-mix(in srgb, var(--accent-fill) 70%, #000);
    color: #fff;
    box-shadow: var(--sheen), var(--elev-1);
}

.studio-header .check-btn {
    background: var(--surface-raised);
    border-color: var(--border-subtle);
    color: var(--ink);
    box-shadow: var(--elev-1);
}

/* style.css's login button rules carry !important on the primary. */
.login-card .login-primary-btn,
.login-card #createAccountBtn,
.login-card #loginSubmitBtn,
.login-card #testingStartBtn {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 88%, #fff), var(--accent-fill)) !important;
    border: 1px solid color-mix(in srgb, var(--accent-fill) 70%, #000) !important;
    color: #fff !important;
    box-shadow: var(--sheen), var(--elev-1);
}

/* Dialog buttons default to primary (style.css .login-card button); keep
   them on the same violet, and drop the old 3px lip. */
.login-card button {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 88%, #fff), var(--accent-fill));
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--accent-fill) 70%, #000);
    border-bottom-width: 1px;
    box-shadow: var(--sheen), var(--elev-1);
}

/* Row tools in Homework / Exam Prep dialogs are secondary, never loud. */
.login-card .homework-btn:not(.homework-btn-primary):not(.homework-btn-danger),
.homework-card .homework-actions .homework-btn-quiet {
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--elev-1);
}

.login-card .homework-btn:not(.homework-btn-primary):not(.homework-btn-danger):hover:not(:disabled) {
    border-color: var(--border-standard);
    box-shadow: var(--elev-1);
}

.homework-card h2,
.homework-subhead {
    font-family: var(--sig-serif);
    font-weight: 400;
}

.homework-card h2 {
    font-size: 30px;
}

.homework-overlay {
    background: rgba(8, 8, 14, 0.55);
}

/* Secondary: present, solid, never shouting. A raised fill instead of an
   outline, so it reads as a control and not as another pill. */
.check-btn,
.homework-btn,
.homework-btn-quiet,
.homework-more > summary,
.homework-icon-btn,
.start-alt,
.start-example,
.login-card .login-secondary-btn,
.tutor-feedback-btn {
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--elev-1);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.check-btn:not(:disabled):hover:not(:active),
.homework-btn:not(.homework-btn-primary):not(:disabled):hover,
.homework-more > summary:hover,
.homework-icon-btn:not(:disabled):hover,
.start-alt:hover,
.start-example:hover,
.tutor-feedback-btn:hover {
    background: color-mix(in srgb, var(--surface-raised) 82%, var(--ink));
    border-color: var(--border-standard);
    box-shadow: var(--elev-1);
}

:root[data-theme="dark"] .check-btn:not(:disabled):hover:not(:active),
:root[data-theme="dark"] .homework-btn:not(.homework-btn-primary):not(:disabled):hover,
:root[data-theme="dark"] .homework-more > summary:hover,
:root[data-theme="dark"] .homework-icon-btn:not(:disabled):hover {
    background: #2B2A39;
}

.homework-btn:disabled,
.homework-btn[aria-disabled="true"] {
    background: transparent;
    border-color: var(--border-subtle);
    box-shadow: none;
    color: var(--ink-muted);
    opacity: 0.7;
}

.homework-btn-primary {
    color: #fff;
}

/* Tertiary: words, no box until you reach for it. */
.homework-view-controls .homework-icon-btn:not(.homework-chat-toggle) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ink-soft);
}

.homework-view-controls .homework-icon-btn:not(.homework-chat-toggle):hover {
    background: var(--surface-raised);
    border-color: var(--border-subtle);
    color: var(--ink);
}

/* ---- The question card (Homework) -------------------------------------- */

body.homework-solving #homeworkTask {
    margin: 10px 10px 0;
    padding: 10px 16px 8px 18px;
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 6px;
    box-shadow: var(--elev-2), inset 3px 0 0 var(--accent-line);
    width: auto;
}

/* The course and assignment become a quiet line above the question. */
.homework-task-kicker,
body.homework-solving #homeworkTask .homework-task-kicker {
    font-family: var(--sig-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* "Question 3 of 8" carries the card: the serif, at reading size. */
.homework-task-position,
#homeworkTaskCount {
    font-family: var(--sig-serif);
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.15;
    color: var(--ink);
}

.homework-task-statusline {
    gap: 4px 10px;
}

.homework-task-progress,
.homework-task-state {
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.homework-task-save:not(:empty)::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 6px 1px 0;
    border-radius: 50%;
    background: var(--success);
    vertical-align: middle;
}

body.homework-solving #homeworkTaskText {
    color: var(--ink);
}

body.homework-solving #homeworkTaskText p {
    line-height: 1.55;
}

.homework-task-resize {
    opacity: 0.5;
}

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

.homework-task .homework-btn,
.homework-task .homework-more > summary {
    border-radius: 9px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
    color: var(--ink);
    font-weight: 600;
}

.homework-task .homework-btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 88%, #fff), var(--accent-fill));
    border-color: color-mix(in srgb, var(--accent-fill) 70%, #000);
    box-shadow: var(--sheen), var(--elev-1);
    color: #fff;
    font-weight: 700;
}

.homework-task .homework-btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill-hover) 86%, #fff), var(--accent-fill-hover));
    box-shadow: var(--sheen), var(--glow-accent);
}

.homework-task .homework-btn:disabled {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ink-muted);
}

/* Finish: the way out of the set, on the row instead of inside More.
   Green so it cannot be mistaken for Save & Next, and pushed to the end
   of the row. It fills in once the last question is open or all are done.
   Phones keep a copy in More (studio.css) because the row is full there. */
.homework-more-menu .homework-finish-menu {
    display: none;
}

.homework-task .homework-finish-btn {
    margin-left: auto;
    background: color-mix(in srgb, var(--success) 20%, var(--surface-raised));
    border-color: var(--success);
    color: color-mix(in srgb, var(--success) 60%, var(--ink));
    font-weight: 700;
    white-space: nowrap;
}

.homework-task .homework-finish-btn::before {
    content: "\2713";
    margin-right: 6px;
}

#homeworkFinishBtn:not(:disabled):hover {
    background: color-mix(in srgb, var(--success) 32%, var(--surface-raised));
    border-color: var(--success);
}

.homework-task .homework-finish-btn.is-ready {
    background: var(--success-fill);
    border-color: color-mix(in srgb, var(--success-fill) 70%, #000);
    box-shadow: var(--sheen), var(--elev-1);
    color: #fff;
}

#homeworkFinishBtn.is-ready:not(:disabled):hover {
    background: color-mix(in srgb, var(--success-fill) 88%, #000);
    border-color: color-mix(in srgb, var(--success-fill) 70%, #000);
}

.homework-more-menu {
    background: var(--surface-panel);
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-3);
    padding: 6px;
}

.homework-more-menu .homework-btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    text-align: left;
}

/* General practice uses the same card for its problem. */
.given-problem {
    margin: 10px 10px 0;
    padding: 12px 16px 12px 18px;
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 6px;
    box-shadow: var(--elev-2), inset 3px 0 0 var(--accent-line);
}

.given-problem[data-mode="blank"] {
    padding: 10px 12px 10px 18px;
    box-shadow: var(--elev-1);
}

.given-problem-slim {
    align-items: center;
    gap: 14px;
}

.given-problem-empty {
    margin: 0;
    color: var(--ink-soft);
    font-size: 13.5px;
}

.given-problem-add {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 9px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--elev-1);
}

.given-problem-add:hover {
    border-color: color-mix(in srgb, var(--accent-line) 50%, transparent);
}

.given-problem-label {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--ink-muted);
}

/* ---- Hint / Check ------------------------------------------------------
   One instrument, not two loose buttons: a tray that holds Hint (the
   fox's move) with Check beside it. */

.work-mode-bar {
    border-bottom: 0;
}

/* On phones the bar is pinned over the board while it scrolls, so it keeps
   a solid fill and style.css's compact padding there. On wider screens the
   bar is only as tall as the tray needs: the board gets the height, and
   Hint and Check keep their size. */
@media (min-width: 721px) {
    .work-mode-bar {
        background: transparent;
        padding: 5px 18px 4px;
        gap: 6px 16px;
    }

    .work-mode-bar .work-help {
        padding: 3px;
    }
}

@media (max-width: 720px) {
    .work-mode-bar {
        background: var(--surface-page);
        border-bottom: 1px solid var(--border-subtle);
    }

    /* Hint and Check share the pinned bar evenly. */
    .work-help {
        flex: 1 1 auto;
        margin-left: 0;
    }

    .work-help .ai-btn {
        flex: 1 1 0;
    }
}

.work-help {
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--elev-1);
}

.work-help .ai-btn {
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
}

.work-help .hint-btn {
    gap: 7px;
    font-weight: 700;
    box-shadow: var(--sheen), var(--elev-1);
}

.work-help .hint-btn:not(:disabled):hover:not(:active) {
    box-shadow: var(--sheen), var(--glow-accent);
}

/* A mouse gets the compact tray; touch keeps style.css's 44px targets. */
@media (pointer: fine) {
    .work-help .ai-btn {
        min-height: 34px;
    }
}

/* The glint: the fox has noticed something. */
.work-help .hint-btn::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--sig-spark) center / contain no-repeat;
    mask: var(--sig-spark) center / contain no-repeat;
}

.work-help .check-btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ink);
    font-weight: 600;
}

.work-help .check-btn:not(:disabled):hover:not(:active) {
    background: var(--surface-raised);
    border-color: var(--border-subtle);
}

.work-help .ai-btn:not(:disabled):hover:not(:active) {
    transform: none;
}

/* While the tutor reads the work: the button that was pressed carries a
   slow light across it (script.js sets aria-busy); its partner just rests. */
.work-help .ai-btn:disabled,
.studio-header .ai-btn:disabled {
    opacity: 0.55;
    cursor: progress;
}

.ai-btn[aria-busy="true"]:disabled {
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.ai-btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: sig-sweep 1.6s ease-in-out infinite;
    pointer-events: none;
}

.check-btn[aria-busy="true"]::after {
    background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--fox) 22%, transparent) 50%, transparent 80%);
}

@keyframes sig-sweep {
    to {
        transform: translateX(100%);
    }
}

/* The empty board speaks in the serif, like the question card and the
   chat's empty column: one editorial voice instead of a third typeface. */
.work-empty .work-empty-title,
.work-ask-guide .write-empty-title,
.write-empty-guide .write-empty-title {
    margin-bottom: 6px;
    font-family: var(--sig-serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.005em;
    color: var(--ink);
}

.work-empty-hint {
    font-weight: 700;
    text-decoration-color: color-mix(in srgb, var(--accent-line) 55%, transparent);
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.15s ease;
}

.work-empty-hint:hover {
    text-decoration-color: currentColor;
}

/* The nudge on the board: a note laid on the sheet, not a drop zone. */
.work-ask-guide,
.write-empty-guide {
    padding: 16px 20px 14px;
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-panel) 90%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--elev-2);
}

/* A focused step already lifts its row and fills its number. Keyboard
   focus stays visible, as a slimmer line than the app-wide ring. */
html body .work-step .step-input:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent-line) 60%, transparent) !important;
    outline-offset: 3px !important;
    border-radius: 6px;
}

/* ---- The worksheet ------------------------------------------------------
   The board sits in the workspace like a sheet on a desk: a frame, a
   shadow under it, and room around it. Nothing goes on top of it. */

.board-stage,
body.homework-solving .board-stage {
    padding: 4px 10px 0;
}

.board-card {
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-2);
    background: var(--board);
}

body.homework-solving .board-card {
    border-radius: var(--radius-lg);
}

:root[data-theme="dark"] .board-card {
    border-color: #262634;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), var(--elev-2);
}

/* Scrollbars recede until reached for. Only the drawn bar narrows; the
   26px strip that takes the pointer is unchanged. */
.board-scrollbar::before {
    background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.board-scrollbar-thumb {
    opacity: 0.24;
    box-shadow: none;
}

.board-scrollbar-y .board-scrollbar-thumb {
    left: 9px;
    right: 9px;
}

.board-scrollbar-x .board-scrollbar-thumb {
    top: 9px;
    bottom: 9px;
}

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

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

/* ---- Toolbar ------------------------------------------------------------ */

.floating-toolbar {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-panel) 92%, transparent);
    box-shadow: var(--elev-2);
}

:root[data-theme="dark"] .floating-toolbar {
    background: color-mix(in srgb, #1C1C27 94%, transparent);
    border-color: #272735;
}

.toolbar-divider {
    width: 1px;
    height: 22px;
    margin: 0 6px;
    background: var(--border-standard);
}

.tool-btn {
    color: var(--ink-muted);
    border-radius: 10px;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tool-btn:hover {
    background: var(--surface-raised);
    color: var(--ink);
}

/* The tool in hand: lifted, lit, with a violet tick beneath its label. */
.tool-btn.active,
.tool-btn.has-label.active {
    position: relative;
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--elev-1), var(--sheen), inset 0 0 0 1px color-mix(in srgb, var(--accent-line) 38%, transparent);
}

.tool-btn.active svg {
    color: var(--pine);
}

.tool-btn.has-label .tool-label {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: inherit;
}

.tool-btn.has-label.active .tool-label {
    color: var(--ink);
}

.swatch.active::after {
    border-color: var(--ink-soft);
}

/* ---- Math Chat ---------------------------------------------------------- */

.sidebar {
    background: var(--surface-panel);
    border-left: 1px solid var(--border-subtle);
}

:root[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #191923, #171720 70%);
}

.sidebar-chat-header {
    position: relative;
    padding: 16px 40px 10px 18px;
    gap: 2px 10px;
    border-bottom: 1px solid var(--border-subtle);
}

.chat-header-label {
    gap: 10px;
    font-family: var(--sig-serif);
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: var(--ink);
}

.chat-header-label svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--accent-line);
}

.chat-cue {
    display: block;
    flex-basis: 100%;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-muted);
}

.chat-cue button {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1;
}

.chat-cue button:hover {
    background: var(--surface-raised);
}

.chat-cue button:hover {
    color: var(--ink);
}

@media (min-width: 761px) {
    .homework-view-controls {
        flex-wrap: nowrap;
        gap: 2px;
    }
}

.sidebar-chat-messages {
    gap: 10px;
    padding: 14px 18px 10px;
}

.chat-bubble {
    font-size: 14px;
    line-height: 1.6;
    padding: 11px 14px;
    border-radius: 14px;
}

/* Tutor: a raised card with a tight top corner, like a margin note. */
.chat-bubble.assistant,
.chat-bubble.assistant.hint {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-top-left-radius: 4px;
    color: var(--ink);
    box-shadow: var(--elev-1);
}

/* A hint is the fox's clue: a copper rule down its edge. */
.chat-bubble.assistant.hint {
    border-left: 2px solid var(--fox);
    padding-left: 13px;
    background:
        linear-gradient(90deg, var(--fox-tint), transparent 42%),
        var(--surface-raised);
}

/* Student: violet, tight bottom corner, toward the input. */
.chat-bubble.user {
    background: var(--accent-fill);
    color: #fff;
    border: 0;
    border-bottom-right-radius: 4px;
    box-shadow: var(--elev-1);
}

.chat-bubble.user a,
.chat-bubble.user .katex {
    color: #fff;
}

/* How the tutor works, said once: a margin note in the fox's copper,
   above the conversation. The first message takes it away (AIchat.js). */
.chat-guide {
    flex: 0 0 auto;
    margin: 12px 16px 4px 18px;
    padding: 1px 0 1px 12px;
    border-left: 2px solid var(--fox);
    color: var(--ink-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.chat-guide-lead {
    color: var(--ink-soft);
    font-weight: 700;
}

/* The welcome line. Once a conversation starts it steps back to a
   caption; alone, it is the column's empty state. */
.sidebar-chat .chat-bubble[data-welcome="yes"] {
    white-space: normal;
    align-self: stretch;
    padding: 2px 4px 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--ink-muted);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.sidebar-chat .chat-bubble[data-welcome="yes"]:only-child {
    align-self: stretch;
    padding: 16px 18px 14px;
    border: 1px dashed var(--border-standard);
    border-radius: var(--radius-lg);
    background: transparent;
    box-shadow: none;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}


/* Homework clears the chat for each question. The empty column is the
   one place the chat shows the fox: his head over a line, instead of a
   blank (decorative; the input says the rest). His own picture, not the
   tab icon, which is the Cb tile. */
.sidebar-chat-messages:empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
}

.sidebar-chat-messages:empty::before {
    content: "";
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: url("mascot/fox-head.png?v=1") center 46% / 78% no-repeat, var(--fox-tint);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fox) 40%, transparent);
    opacity: 0.9;
}

.sidebar-chat-messages:empty::after {
    content: "Stuck on a step? Ask. I'll point, not tell." / "";
    max-width: 22ch;
    font-family: var(--sig-serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.35;
    text-align: center;
    color: var(--ink-soft);
}

/* Input: one composed field, the tools tucked under it. */
.sidebar-chat-input-wrap {
    margin: 0 12px 12px;
    padding: 8px;
    gap: 6px;
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.sidebar-chat-input-wrap:focus-within {
    border-color: color-mix(in srgb, var(--accent-line) 60%, transparent);
    box-shadow: var(--elev-1), 0 0 0 3px color-mix(in srgb, var(--accent-line) 18%, transparent);
}

#sidebarChatInput {
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 6px 6px;
    color: var(--ink);
    font-size: 14px;
}

/* The field's frame already lights up (focus-within above); a second
   ring inside it doubled the signal. */
#sidebarChatInput:focus,
html body #sidebarChatInput:focus-visible {
    outline: none !important;
    box-shadow: none;
}

#sidebarChatInput::placeholder {
    color: var(--ink-muted);
}

#chatAttachBtn,
.voice-mode-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-muted);
}

#chatAttachBtn:hover,
.voice-mode-btn:hover {
    background: var(--surface-panel);
    border-color: var(--border-subtle);
    color: var(--ink);
}

#sidebarChatSendBtn {
    padding: 6px 16px;
    border-radius: 9px;
    font-size: 13px;
}

#sidebarChatSendBtn:not(:disabled):hover:not(:active) {
    transform: none;
}

/* Under a reply: Yes / Report, small and quiet. */
.tutor-feedback-btn {
    box-shadow: none;
    color: var(--ink-soft);
}

:root[data-theme="dark"] .tutor-feedback-btn {
    background: var(--surface-raised);
    color: var(--ink-soft);
    border-color: var(--border-subtle);
}

/* Homework status under the chat. */
body.homework-solving .homework-side {
    margin: 0 12px 8px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
    border: 1px solid var(--border-subtle);
}

.homework-side-kicker {
    font-size: 10.5px;
    color: var(--ink-muted);
}

.homework-side-count {
    font-family: var(--sig-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
}

.homework-progress-track {
    height: 4px;
    border-radius: 4px;
    background: var(--border-standard);
}

.homework-progress-track span {
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent-line), var(--pine));
}

.homework-side-meta span {
    background: var(--surface-raised);
    color: var(--ink-soft);
}

.homework-side-meta span:first-child {
    color: var(--warning);
}

/* Sidebar cards: one surface, the section color only on the dot. */
.sidebar .progress-card,
.sidebar .impact-card,
.sidebar .study-today-card,
.sidebar .patterns-card,
.sidebar .homework-notes {
    background: color-mix(in srgb, var(--sec) 6%, var(--surface-raised));
    border: 1px solid var(--border-subtle);
}

.sidebar .daily-challenge-card {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-line) 16%, transparent), transparent 70%),
        var(--surface-raised);
    border: 1px solid color-mix(in srgb, var(--accent-line) 35%, var(--border-subtle));
    border-left: 1px solid color-mix(in srgb, var(--accent-line) 35%, var(--border-subtle));
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-2);
}

.daily-challenge-eyebrow,
:root[data-theme="dark"] .daily-challenge-eyebrow {
    font-size: 10.5px;
    color: var(--pine);
}

body.is-signed-out .sidebar .daily-challenge-card {
    background: none;
    border: 0;
    box-shadow: none;
}

/* ---- First screens: sign-in, class, start ------------------------------- */

.login-overlay,
.level-select-overlay {
    background:
        radial-gradient(900px 520px at 50% -10%, rgba(124, 111, 242, 0.10), transparent 65%),
        radial-gradient(700px 400px at 50% 120%, rgba(181, 106, 69, 0.06), transparent 60%),
        var(--surface-page);
}

.login-card,
.level-select-card {
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 22px;
    box-shadow: var(--elev-3);
}

.login-card {
    padding: 30px 30px 26px;
}

/* Headlines in the serif: the editorial voice of the product. */
.login-card h2,
.level-select-card h2,
.start-chooser-card h2,
.first-run-card h2 {
    font-family: var(--sig-serif);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.12;
    color: var(--ink);
}

.login-card h2 {
    font-size: 30px;
    margin: 4px 0 6px;
}

.level-select-card h2 {
    font-size: 30px;
}

.start-chooser-card h2 {
    font-size: 32px;
}

.login-card p,
.level-select-intro {
    color: var(--ink-soft);
}

.login-value-props {
    gap: 6px;
    color: var(--ink-soft);
}

.login-value-props span::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    vertical-align: -1px;
    background: var(--pine);
    -webkit-mask: var(--sig-spark) center / contain no-repeat;
    mask: var(--sig-spark) center / contain no-repeat;
}

.login-card input:not([type="checkbox"]):not([type="radio"]),
.login-card input#testingNameInput {
    background: var(--surface-sunken);
    border: 1px solid var(--border-standard);
    border-radius: 12px;
    color: var(--ink);
}

.login-card input:focus {
    outline: 2px solid color-mix(in srgb, var(--accent-line) 70%, transparent);
    outline-offset: 1px;
    border-color: transparent;
}

.login-card .login-mode-toggle,
.login-card button.login-mode-toggle {
    background: transparent;
    border: 1px solid var(--border-standard);
    color: var(--ink);
    box-shadow: none;
}

.level-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--elev-1);
}

.level-card:hover,
.level-card:focus-visible {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent-line) 55%, transparent);
}

.level-card.is-selected,
.level-card.is-selected:hover,
.level-card.is-selected:focus-visible {
    background: var(--accent-fill);
    border-color: var(--accent-fill);
    color: #fff;
}

.start-chooser-card {
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 22px;
    box-shadow: var(--elev-3);
}

.start-step-num {
    background: var(--accent-soft);
    color: var(--pine);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-line) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .ai-btn[aria-busy="true"]::after {
        animation: none;
        transform: none;
        background: rgba(255, 255, 255, 0.08);
    }
}

/* Phones: the question card shares its row with the view controls. */
@media (max-width: 760px) {
    .homework-task-position,
    #homeworkTaskCount {
        font-size: 18px;
    }

    .homework-task-kicker,
    body.homework-solving #homeworkTask .homework-task-kicker {
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    body.homework-solving #homeworkTask {
        margin: 8px 8px 0;
        padding: 8px 10px 8px 14px;
    }

    .studio-header .brand h1 {
        font-size: 22px;
    }

    .board-stage,
    body.homework-solving .board-stage {
        padding: 4px 8px 0;
    }

    /* The chat header stays one compact row. */
    .sidebar-chat-header {
        padding: 12px 40px 8px 14px;
    }

    .chat-header-label {
        font-size: 19px;
    }

    /* Mid-problem the level only costs a row; it is chosen on the class
       picker (the iPhone app already hides it, app-shell.css). */
    body.work-live .studio-header .level-banner {
        display: none;
    }
}

/* Phone Homework scrolls like a page. Locked to the screen, the question
   card and the Hint/Check bar left the board a strip about 50-80px tall
   with no way to scroll to more. Now the board gets most of a screen and
   the tools stay pinned to the bottom while it is in view. */
@media (max-width: 760px) {
    body.homework-solving {
        overflow: visible;
    }

    body.homework-solving .app-shell {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    body.homework-solving .workspace {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    body.homework-solving .board-stage {
        flex: 0 0 auto;
        overflow: visible;
    }

    body.homework-solving .board-card {
        height: max(360px, calc(100dvh - 210px));
        min-height: 360px;
    }

    body.homework-solving .floating-toolbar {
        position: sticky;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        z-index: 6;
        margin: 6px 8px 8px;
    }

    /* The More menu opens down over two pinned bars: Hint / Check (z-index
       8, style.css) and the toolbar above. The question card that holds it
       is one layer at z-index 6, so the bar covered "Mark done" and a tap
       there ran Check. While More is open the card is above both bars and
       still under the Chat drawer. */
    body.homework-solving .homework-task:has(.homework-more[open]) {
        z-index: 9;
    }

    /* The card keeps the question, its number and the save state. Counts
       and status are in the Chat drawer's Homework panel. */
    body.homework-solving .homework-task-progress,
    body.homework-solving .homework-task-state:not(.homework-task-save) {
        display: none;
    }

    body.homework-solving .homework-task-actions .homework-more > summary {
        display: inline-flex;
        align-items: center;
    }
}