/* Cool Precision: shared surface tokens keep both studio themes consistent. */
:root {
 --paper:#f7f8fd; --board:#fdfdff; --paper-deep:#dfe2ef; --ink:#252737; --ink-soft:#71758e;
 --pine:#665cf0; --pine-deep:#5146d8; --ochre:#665cf0; --ochre-deep:#5146d8;
 --border-subtle:#eceef6; --border-standard:#dfe2ef; --border-strong:#babed2;
 --surface-page:var(--paper); --surface-panel:#f7f8fd; --surface-raised:#fff;
 --accent-soft:#ecebfd; --board-ink:#242532; --grid-minor:#f0f1f9; --grid-major:#e7e9f4;
 --shadow:35,37,60; --radius-xl:12px; --bubble:#edeff7; color-scheme:light;
}
:root[data-theme="dark"] {
 --paper:#12131b; --board:#11121a; --paper-deep:#2a2c3e; --ink:#e8e8f2; --ink-soft:#a0a1b8;
 --pine:#8176ff; --pine-deep:#665cf0; --ochre:#665cf0; --ochre-deep:#8176ff;
 --border-subtle:#202230; --border-standard:#2b2d40; --border-strong:#555971;
 --surface-panel:#151620; --surface-raised:#1e1f2c; --accent-soft:#2b2649;
 --board-ink:#ededf6; --grid-minor:#1b1d2a; --grid-major:#222433; --bubble:#1e1f2d;
 --success:#80b697; --success-soft:#1c3029; --warning:#d8aa63; --warning-soft:#332b20;
 --error:#e18478; --error-soft:#352329; --error-deep:#eea296; color-scheme:dark;
}
html,body { background:var(--paper); }
button { color:inherit; }
.studio-header { min-height:68px; height:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 22px; border-bottom:1px solid var(--border-standard); background:var(--surface-panel); }
.studio-header .sidebar-header { display:flex; flex-direction:row; align-items:center; gap:22px; padding:0; border:0; flex:1; min-width:0; }
.studio-header .brand { gap:12px; flex-shrink:0; }
.studio-header .brand-mark { width:34px; height:34px; border:0; border-radius:8px; background:linear-gradient(135deg,#8279ff,#6257e9); color:white; display:grid; place-items:center; font-weight:800; font-size:14px; box-shadow:none; animation:none; }
.studio-header .brand h1 { font-family:'Karla',sans-serif; font-size:22px; letter-spacing:-.6px; margin:0; }
.studio-header .level-banner { order:1; margin:0; padding:0 0 0 20px; border:0; border-left:1px solid var(--border-standard); border-radius:0; background:none; width:auto; font-size:13px; display:flex; gap:12px; }
.studio-header .user-pill { order:2; margin-left:auto; background:var(--bubble); border:0; box-shadow:none; }
.studio-header .sidebar-actions { display:flex; flex-wrap:wrap; gap:10px; margin:0; align-items:center; }
.studio-header .board-mode-toggle { margin-right:4px; }
.studio-header .ai-btn { min-width:85px; padding:10px 18px; border-radius:7px; font-size:15px; box-shadow:none; border:1px solid var(--border-standard); }
.studio-header .hint-btn { background:#665cf0; color:white; border-color:#776cf9; }
.studio-header .check-btn { background:transparent; color:var(--ink); border-color:var(--border-strong); }
.theme-toggle { padding:8px 12px; border:1px solid var(--border-standard); border-radius:7px; color:var(--ink-soft); font-size:12px; }
/* Sidebar widths scale with the viewport. A 200%-scaled laptop is ~1440 CSS
   px wide, where a fixed 300-320px column took over a fifth of the width.
   This is the only source for the column: style.css loads first, so its
   old max-width breakpoints never applied over a fixed width here. */
:root { --sidebar-width: clamp(264px, 17vw, 320px); --homework-sidebar-default: clamp(240px, 15vw, 300px); }
.app-shell { padding:0; gap:0; min-height:calc(100dvh - 68px); grid-template-columns:minmax(0,1fr) var(--sidebar-width); }
.workspace { gap:0; min-height:0; }
.given-problem {
    margin:0;
    border:0;
    border-radius:0;
    border-bottom:1px solid var(--border-standard);
    padding:8px 12px;
    background:var(--surface-panel);
}
/* Board sizing (height/min-height) and the toolbar's row layout are left
   to style.css's own .board-card / .floating-toolbar rules - this skin
   only restyles colors/borders. A previous version of this file gave
   .board-stage `flex:1` and hardcoded .board-card's height, which fought
   style.css's `height:auto;min-height:820px` desktop rule (see style.css)
   and left dead space below the board; and it turned .floating-toolbar
   into a fixed 62px-wide left column, which is what was cutting most of
   the toolbar off below the fold instead of showing two full rows. */
.board-stage { padding:0; }
.board-card { width:100%; max-width:none; border:0; border-radius:0; box-shadow:none; }
/* Translucent + blurred (not the solid --surface-panel used elsewhere in
   this skin) because .floating-toolbar goes `position: sticky` at
   min-width: 981px (style.css) and can sit on top of the board while the
   page scrolls past a board taller than the viewport - a solid panel
   there would blank out whatever is underneath it while it's stuck. */
.floating-toolbar { padding:8px 16px; border:1px solid var(--border-standard); border-radius:16px; background:color-mix(in srgb, var(--surface-panel) 85%, transparent); backdrop-filter:blur(16px); box-shadow:none; }
.tool-btn { width:40px; height:36px; border:0; border-radius:8px; }
.tool-btn.active { color:var(--pine); background:var(--accent-soft); border:0; }
.tool-btn:hover { background:var(--bubble); }
.swatch { width:19px; height:19px; min-height:19px; box-shadow:none; }
.swatch.active::after { inset:-3px; border:1px solid var(--ink-soft); }
.swatch[data-color="#2B2A24"] { background:var(--board-ink)!important; }
.sidebar { border:0; border-left:1px solid var(--border-standard); border-radius:0; padding:0; gap:0; background:var(--surface-panel); box-shadow:none; }
.sidebar-chat-header,.progress-eyebrow { font:12px ui-monospace,Consolas,monospace; letter-spacing:.07em; color:var(--ink-soft); text-transform:uppercase; }
.voice-choice { display:block; color:var(--ink-soft); font:10px ui-monospace,Consolas,monospace; text-transform:uppercase; letter-spacing:.05em; }
.voice-choice select { display:block; width:100%; margin-top:5px; padding:8px 9px; border:1px solid var(--border-standard); border-radius:7px; background:var(--surface-raised); color:var(--ink); font:12px Karla,Arial,sans-serif; text-transform:none; letter-spacing:0; }
/* After .user-pill (order:2, margin-left:auto) so the gear sits on the far
   right of the brand row instead of before Calcebra / the level banner. */
.studio-header .settings-tuck { order:3; }
.settings-tuck { position:relative; }
.settings-tuck summary { list-style:none; cursor:pointer; }
.settings-tuck summary::-webkit-details-marker { display:none; }
.settings-btn { width:34px; height:34px; border-radius:999px; display:grid; place-items:center; color:var(--ink-soft); background:var(--bubble); }
.settings-btn svg { width:18px; height:18px; }
.settings-btn:hover { color:var(--ink); }
.settings-tuck[open] .settings-btn { background:var(--accent-soft); color:var(--pine); }
.settings-panel { position:absolute; top:calc(100% + 10px); right:0; width:200px; background:var(--board); border-radius:14px; box-shadow:var(--shadow-md); border:1px solid var(--border-standard); padding:12px; display:flex; flex-direction:column; gap:10px; z-index:20; }
.settings-panel .theme-toggle { width:100%; }
.sidebar-chat { border:0; border-radius:0; background:none; box-shadow:none; flex:0 0 auto; height:auto; min-height:0; margin:0; }
.sidebar-chat-header { padding:12px 16px 4px; background:none; border:0; }
.sidebar-chat-messages { padding:6px 16px 8px; min-height:0; max-height:min(50vh, 440px); flex:0 1 auto; }
/* The list is a capped flex column: let it scroll rather than squash each bubble to a clipped line. */
.sidebar-chat-messages > * { flex-shrink:0; }
.chat-bubble { font-size:14px; line-height:1.6; border-radius:12px; padding:12px 14px; box-shadow:none; }
.chat-bubble.assistant,.chat-bubble.assistant.hint { background:var(--bubble); color:var(--ink); border:0; }
.chat-bubble.user { background:#665cf0; color:white; border:0; }
.tutor-feedback { border-top-color:var(--border-standard); }
.tutor-feedback-btn { background:var(--surface-raised); color:var(--ink); border-color:var(--border-strong); }
:root[data-theme="dark"] .tutor-feedback-btn { background:var(--paper-deep); color:var(--ink); border-color:var(--border-strong); }
.sidebar-chat-input-wrap { padding:8px 14px 12px; border-top:0; background:none; gap:6px; }
#sidebarChatInput { background:var(--surface-panel); color:var(--ink); border:1px solid var(--border-standard); border-radius:8px; }
#sidebarChatInput::placeholder { color:var(--ink-soft); }
#sidebarChatSendBtn { background:#665cf0; color:white; border:0; border-radius:7px; box-shadow:none; }
.progress-card,.daily-challenge-card,.patterns-card,.study-today-card { margin:0; padding:8px 16px; border:0; border-radius:0; box-shadow:none; background:none; }
.progress-stat { border:0; border-radius:0; background:none; }
.progress-stat:nth-child(1) .progress-stat-number { color:var(--success); }
.progress-stat:nth-child(2) .progress-stat-number { color:var(--warning); }
.progress-stat:nth-child(3) .progress-stat-number { color:var(--error); }
.login-overlay,.level-select-overlay { background:var(--paper); }
.login-card,.level-select-card,.dev-tools-panel { background:var(--surface-raised); color:var(--ink); border-color:var(--border-standard); }
.login-card input,.level-card { background:var(--surface-panel); color:var(--ink); border-color:var(--border-standard); }
@media(max-width:760px) {
 .app-shell { grid-template-columns:minmax(0,1fr); }
 .board-card { height:65dvh; min-height:440px; }
 .sidebar { border-left:0; border-top:1px solid var(--border-standard); }
 .sidebar-chat-messages { max-height:400px; }
}
.studio-header .sidebar-header { flex-wrap:nowrap; }
.studio-header .sidebar-header .brand { flex:0 0 auto; }
.sidebar-chat { padding:0; }
#chatAttachBtn { background:var(--bubble); color:var(--ink-soft); border:1px solid var(--border-standard); box-shadow:none; }
#chatAttachBtn svg { width:19px; height:19px; }
/* Class (not #voiceModeBtn) so this stays below style.css's
   .voice-mode-btn.listening/.busy colors. */
.voice-mode-btn { background:var(--bubble); color:var(--ink-soft); border:1px solid var(--border-standard); box-shadow:none; }
.voice-mode-btn svg { width:19px; height:19px; }
/* Below 981 the desktop single row doesn't fit: .sidebar-header (flex:1,
   min-width:0, nowrap) collapsed to ~140px and its buttons spilled under
   the action cluster - and 21px past the right edge at 768. Tablet gets two
   full-width rows instead: brand/account on top, problem mode + Hint/Check
   below. A long name truncates (the account pill first) rather than
   pushing the row wider. */
@media(max-width:980px) {
 .studio-header { flex-wrap:wrap; padding:10px 16px; gap:8px 12px; }
 .studio-header .sidebar-header { flex:1 1 100%; gap:12px; }
 .studio-header .level-banner { flex:0 1 auto; min-width:0; padding-left:12px; }
 .studio-header .level-banner > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
 .studio-header .user-pill { flex:0 4 auto; min-width:0; max-width:220px; }
 .studio-header .sidebar-actions { flex:1 1 100%; justify-content:flex-end; }
}
/* Phone: stacking each group on its own lines made the header ~290px tall.
   Flatten both groups into the header's one wrapping row set; the header's
   ::before/::after are zero-height line breaks, giving three short rows:
   brand + Homework Session + account/settings, problem mode + Homework,
   level + Hint/Check. (display:contents leaves .sidebar-actions without a
   box of its own - tutorial.js frames its children for the tour.) */
@media(max-width:760px) {
 .studio-header { padding:8px 12px; gap:4px 8px; }
 .studio-header .sidebar-header,.studio-header .sidebar-actions { display:contents; }
 .studio-header::before,.studio-header::after { content:""; flex:0 0 100%; height:0; }
 .studio-header .brand { order:1; }
 .studio-header .homework-header-btn { order:2; padding:6px 10px; }
 .studio-header .user-pill { order:3; margin-left:auto; min-width:0; max-width:104px; padding:6px 12px; gap:6px; }
 .studio-header #headerTourBtn { order:4; }
 .studio-header .settings-tuck { order:5; }
 .studio-header::before { order:6; }
 .studio-header .board-mode-toggle { order:7; margin-right:0; }
 .studio-header .board-mode-btn { padding:7px 10px; }
 .studio-header .homework-entry-btn { order:8; padding:6px 14px; font-size:14px; }
 .studio-header::after { order:9; }
 .studio-header .level-banner { order:10; flex:1 1 0; width:auto; min-width:0; padding:0; border:0; font-size:11px; gap:8px; }
 .studio-header .hint-btn { order:11; }
 .studio-header .check-btn { order:12; }
 .studio-header .ai-btn { min-width:64px; padding:7px 14px; font-size:14px; }
}
/* Small phone: the tour stays reachable from Settings > Board tour, and the
   wordmark stays for screen readers, which frees row one for Homework
   Session and the account pill. */
@media(max-width:520px) {
 .studio-header #headerTourBtn { display:none; }
 .studio-header .user-pill { max-width:96px; }
 .studio-header .brand { gap:0; }
 .studio-header .brand h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
}

#guestDemoBtn,#loginSubmitBtn,.daily-challenge-start-btn { color:#fff; background:#665cf0; }

/* Keyboard symbol box (typedSymbols.js): \ opens it next to the line being written. */
.typed-symbol-box {
    position: fixed;
    z-index: 90;
    width: 210px;
    background: var(--surface-raised, #fff);
    color: var(--board-ink, #242532);
    border: 1px solid var(--border-standard, #dfe2ef);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(var(--shadow, 35, 37, 60), 0.22);
    padding: 8px;
}

.typed-symbol-box[hidden] {
    display: none;
}

.typed-symbol-box input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--border-standard, #dfe2ef);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    outline: none;
}

.typed-symbol-box input:focus {
    border-color: var(--border-strong, #babed2);
}

.typed-symbol-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.typed-symbol-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

.typed-symbol-item.selected,
.typed-symbol-item:hover {
    background: var(--accent-soft, #ecebfd);
}

.typed-symbol-glyph {
    width: 26px;
    text-align: center;
    font-size: 18px;
}

.typed-symbol-name {
    opacity: 0.65;
}

.studio-header .homework-header-btn {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    color: var(--ink);
    font-size: 13px;
    white-space: nowrap;
}

.homework-task {
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    box-shadow: none;
}

body.homework-solving .app-shell {
    height: calc(100dvh - var(--studio-header-height, 68px));
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) var(--homework-sidebar-width, var(--homework-sidebar-default));
}

body.homework-solving .workspace {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

body.homework-solving #givenProblem,
body.homework-solving #dailyChallengePanel,
body.homework-solving #dailyChallengeCard,
body.homework-solving #progressCard,
body.homework-solving #impactCard,
body.homework-solving #studyTodayCard,
body.homework-solving #patternsCard {
    display: none !important;
}

body.homework-solving .board-stage {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

body.homework-solving .board-card {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    border-radius: 0;
}

body.homework-solving .sidebar {
    position: relative;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.homework-solving .homework-sidebar-resize {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 5;
    touch-action: none;
}

body.homework-solving .homework-sidebar-resize:hover,
body.homework-solving .homework-sidebar-resize:focus-visible {
    background: color-mix(in srgb, #665cf0 35%, transparent);
}

body.homework-solving .homework-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 14px 12px;
    border-top: 1px solid var(--border-standard);
}

body.homework-solving .floating-toolbar {
    position: static;
    flex: 0 0 auto;
    width: auto;
    margin: 8px 10px 10px;
    bottom: auto;
}

body.homework-solving .sidebar-chat {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.homework-solving .sidebar-chat-messages {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow: auto;
}

body.homework-solving .homework-notes textarea {
    background: var(--surface-raised);
}

body.homework-solving .homework-side {
    overflow: auto;
    min-height: 0;
    max-height: 46%;
}

/* Sidebar hierarchy: the Daily Challenge is the one emphasized card, Math
   Chat is second, and progress / Next Up / Patterns are quiet supporting
   rows with small labels and no dividers between them. */
#sidebarChatInput { min-height:38px; padding:8px 11px; }
#chatAttachBtn,.voice-mode-btn { width:32px; height:32px; border-radius:8px; }
#chatAttachBtn svg,.voice-mode-btn svg { width:17px; height:17px; }
#sidebarChatSendBtn { padding:7px 14px; }
.sidebar-chat-messages:empty { display:none; }

/* Desktop proportions. On a 200%-scaled laptop (~1440x690 CSS px) the old
   68px header, a three-line question heading plus a separate button row,
   and a 70px toolbar left the board under half the height. Same text sizes,
   less chrome: a 52px header, the question buttons on the heading row, and
   a slimmer toolbar. Phones and tablets keep their own layout below 981px. */
@media (min-width: 981px) {
    /* If one row can't hold both groups, Hint/Check drop to a second row
       instead of sliding under Sign in / change level: .sidebar-header used
       to be flex:1 with min-width:0, which squeezed it below its content. */
    .studio-header {
        min-height: 52px;
        flex-wrap: wrap;
        gap: 6px 16px;
        padding: 8px 16px;
    }

    .studio-header .sidebar-header {
        flex: 1 0 auto;
        gap: 16px;
    }

    .studio-header .brand {
        gap: 10px;
    }

    .studio-header .brand-mark {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

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

    .studio-header .level-banner {
        padding-left: 16px;
    }

    .studio-header .user-pill {
        max-width: 200px;
        padding: 6px 12px;
    }

    .studio-header .settings-btn {
        width: 32px;
        height: 32px;
    }

    .studio-header .sidebar-actions {
        margin-left: auto;
        gap: 8px;
    }

    .studio-header .board-mode-toggle {
        padding: 2px;
        border-radius: 10px;
    }

    .studio-header .board-mode-btn {
        padding: 6px 11px;
        border-radius: 8px;
    }

    .studio-header .ai-btn {
        min-width: 72px;
        padding: 7px 14px;
        font-size: 14px;
    }

    .studio-header .homework-header-btn {
        padding: 6px 11px;
    }

    .studio-header .homework-entry-btn {
        padding: 6px 13px;
        font-size: 14px;
    }

    /* One-row textarea: an ellipsis instead of a half-cut second line. */
    #sidebarChatInput::placeholder {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.homework-solving .homework-task {
        --homework-source-height: clamp(84px, 16vh, 140px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 4px;
        padding: 6px 12px;
    }

    body.homework-solving .homework-task > * {
        grid-column: 1 / -1;
        min-width: 0;
    }

    /* nowrap: the heading text wraps inside itself, Collapse stays put. */
    body.homework-solving .homework-task-top {
        grid-column: 1;
        grid-row: 1;
        flex-wrap: nowrap;
    }

    body.homework-solving .homework-task-actions {
        grid-column: 2;
        grid-row: 1;
        flex-wrap: nowrap;
        gap: 6px;
    }

    body.homework-solving .homework-task-heading {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 12px;
    }

    body.homework-solving .homework-task .homework-btn {
        padding: 5px 12px;
        font-size: 0.86rem;
        line-height: 1.2;
    }

    body.homework-solving .homework-task-top .homework-icon-btn,
    body.homework-solving .homework-task-actions .homework-btn {
        white-space: nowrap;
    }

    body.homework-solving .homework-task-resize {
        height: 8px;
    }

    /* More now sits at the right edge of the workspace, which clips
       overflow; open the menu leftward so every item stays visible. */
    body.homework-solving .homework-task-actions .homework-more-menu {
        left: auto;
        right: 0;
    }

    body.homework-solving .floating-toolbar {
        margin: 6px 10px 8px;
        padding: 3px 12px;
    }

    body.homework-solving .toolbar-row {
        min-height: 38px;
        gap: 6px;
        scrollbar-width: thin;
    }
}

/* Narrow desktops (iPad landscape, 150-175% scaled laptops) need ~1260px
   for the full header row. Tighten it so it stays one 52px row down to
   ~1060px; below that the wrap above takes over. The tour stays in
   Settings > Board tour, the level name keeps its change button, and the
   wordmark stays for screen readers. */
@media (min-width: 981px) and (max-width: 1279px) {
    .studio-header {
        column-gap: 12px;
    }

    .studio-header .sidebar-header {
        gap: 12px;
    }

    .studio-header .sidebar-actions {
        gap: 6px;
    }

    .studio-header .level-banner {
        padding-left: 12px;
    }

    .studio-header #headerTourBtn {
        display: none;
    }

    .level-banner-label {
        display: none;
    }
}

@media (min-width: 981px) and (max-width: 1179px) {
    .studio-header .brand {
        gap: 0;
    }

    .studio-header .brand h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* iPad landscape is short. The question stays readable in a small dock and
   the tools stay on screen, but the pencil gets the rest of the height. */
@media (max-height: 900px) and (max-width: 1366px) {
    body.homework-solving .homework-task {
        --homework-source-height: 120px;
        padding: 4px 10px 2px;
        gap: 2px;
    }

    body.homework-solving .homework-task-resize {
        height: 8px;
    }

    body.homework-solving .floating-toolbar {
        margin: 4px 8px 6px;
        padding: 4px 8px;
        gap: 2px;
    }

    body.homework-solving .toolbar-row {
        min-height: 36px;
        gap: 6px;
    }

    body.homework-solving .tool-btn {
        width: 36px;
        height: 36px;
    }
}

/* The tools need ~1130px at full spacing. Below 1440px, tighten spacing
   and the slider/readouts so the row fits down to ~1280px instead of
   scrolling; narrower than that it still scrolls sideways by itself. */
@media (min-width: 981px) and (max-width: 1439px) {
    .floating-toolbar .toolbar-row,
    body.homework-solving .toolbar-row {
        gap: 4px;
    }

    .floating-toolbar .width-control input[type="range"] {
        width: 80px;
    }

    .floating-toolbar #lineWidthValue {
        min-width: 36px;
    }

    .floating-toolbar .zoom-readout {
        min-width: 48px;
    }
}

/* iPad portrait: a side column turns the board into a narrow strip, and the
   toolbar wraps into a third row. Chat opens over the board instead. */
.homework-chat-toggle,
.homework-chat-scrim {
    display: none;
}

@media (max-width: 980px) {
    body.homework-solving .app-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    body.homework-solving .homework-chat-toggle {
        display: inline-flex;
        align-items: center;
    }

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

    body.homework-solving .sidebar {
        position: fixed;
        top: var(--studio-header-height, 68px);
        right: 0;
        bottom: 0;
        width: min(320px, 88vw);
        z-index: 30;
        transform: translateX(105%);
        transition: transform 0.18s ease;
        box-shadow: -12px 0 32px rgba(10, 10, 30, 0.28);
    }

    body.homework-solving.homework-chat-open .sidebar {
        transform: none;
    }

    body.homework-solving.homework-chat-open .homework-chat-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 25;
        border: 0;
        padding: 0;
        background: rgba(8, 8, 20, 0.45);
    }
}

/* Phone homework dock: after the header, this was the other big bite out of
   the board (~200-300px). Title on one line, the Collapse/Chat controls
   beside the heading, a shorter problem window (still drag-resizable), and
   the Previous / Save & Next / Flag / More row on one line. */
@media (max-width: 760px) {
    body.homework-solving .homework-task {
        --homework-source-height: 84px;
        padding: 4px 10px 6px;
    }

    body.homework-solving .homework-task-top {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    body.homework-solving .homework-task-heading {
        flex: 1 1 auto;
        min-width: 0;
        align-items: stretch;
    }

    body.homework-solving .homework-task-titleline {
        flex-wrap: nowrap;
    }

    body.homework-solving .homework-task-kicker {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.homework-solving .homework-view-controls {
        flex: 0 0 auto;
        margin-left: auto;
    }

    body.homework-solving .homework-task-statusline {
        font-size: 0.78rem;
    }

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

    body.homework-solving .homework-task .homework-btn {
        padding: 6px 10px;
        font-size: 0.85rem;
    }

    /* More now ends the row near the right edge; open its menu leftward. */
    body.homework-solving .homework-more-menu {
        left: auto;
        right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.homework-solving .sidebar {
        transition: none;
    }
}
.voice-status-line:empty { display:none; }
.sidebar-chat .chat-bubble:only-child { padding:8px 12px; font-size:13px; line-height:1.45; color:var(--ink-soft); }

.daily-challenge-card {
    position:sticky; top:12px; z-index:3;
    margin:6px 12px 8px; padding:12px 14px;
    background:linear-gradient(0deg, rgba(102,92,240,.10), rgba(102,92,240,.10)), var(--surface-panel);
    border:1px solid color-mix(in srgb, #665cf0 55%, transparent);
    border-left:3px solid #665cf0;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(10,10,30,.28);
}
.daily-challenge-header { margin-bottom:6px; }
.daily-challenge-eyebrow { font:700 11px ui-monospace,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; color:#5146d8; }
.daily-challenge-eyebrow::before { background:currentColor; }
:root[data-theme="dark"] .daily-challenge-eyebrow { color:#a39cff; }
.daily-challenge-meta { font-size:10.5px; margin-bottom:4px; }
.daily-challenge-preview { font-size:0.98rem; font-weight:600; margin-bottom:10px; color:var(--ink); }
.daily-challenge-start-btn { padding:8px 10px; border-radius:9px; font-size:0.85rem; border-bottom:0; }
.daily-challenge-signin-note { font-size:0.82rem; }

.progress-eyebrow,.study-today-eyebrow,.patterns-card-summary {
    display:block; margin:0 0 4px;
    font:600 10.5px ui-monospace,Consolas,monospace; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-soft);
}
.progress-eyebrow::before,.study-today-eyebrow::before { display:none; }
.progress-card { padding-top:10px; }
.progress-guest-note { font-size:0.8rem; }
.progress-stats { gap:4px 12px; margin-bottom:2px; }
.progress-stat { flex-direction:row; align-items:baseline; gap:4px; padding:0; }
.progress-stat-number { font-size:0.95rem; }
.progress-stat-label { font-size:10.5px; letter-spacing:.02em; }
.progress-insight { font-size:0.8rem; color:var(--ink); }
.progress-stats + .progress-insight,.progress-guest-note + .progress-insight { margin-top:6px; }

.study-today-header { margin-bottom:2px; }
.study-today-eyebrow { margin:0; }
.study-today-edit { font-size:11px; }
.study-today-focus { font-size:0.82rem; margin:0; }
.study-today-list li { display:flex; justify-content:space-between; gap:10px; padding:2px 0; border:0; font-size:0.82rem; color:var(--ink); }
.study-today-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.study-today-due { flex:0 0 auto; color:var(--ink-soft); font-size:0.76rem; }

.patterns-card { padding-bottom:12px; }
.patterns-card-summary { cursor:pointer; list-style:none; margin:0; display:flex; align-items:center; gap:6px; }
.patterns-card-summary::-webkit-details-marker { display:none; }
.patterns-card-summary::after { content:"\25B8"; font-size:10px; transition:transform .15s ease; }
.patterns-card[open] .patterns-card-summary::after { transform:rotate(90deg); }
.patterns-card-summary:hover,.patterns-card-summary:focus-visible { color:var(--ink); }
.patterns-card-note { margin:6px 0 8px; font-size:0.78rem; }
.patterns-card-btn { padding:5px 11px; font-size:0.78rem; }

@media(max-width:760px) {
 .daily-challenge-card { position:static; margin:6px 12px 8px; }
}