/* Page shell, after the owner's "Calcebra fox" design: a painted rail on the
   left and a slim painted band on top (scenery.css), a frosted card of tabs
   over the rail, a quiet top bar, and an ivory study surface with white
   cards, hairline borders, forest-green actions and serif headlines.
   Day is a soft paper (never glaring white); night is a moonlit slate. The Whiteboard page is the existing
   workspace, restyled only through colours and spacing. */

:root {
    --scene-left: 168px;
    --scene-top: 38px;
    --scene-right: 0px;
    --scene-bottom: 0px;
    --bar-h: 38px;
    --nav-w: 0px;
    --frame-left: var(--scene-left);
    --frame-top: calc(var(--scene-top) + var(--bar-h));

    --serif: 'Lora', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --c-ivory: #efebe1;
    --c-card: #faf8f2;
    --c-line: #e0dbcf;
    --c-line-strong: #d3cec1;
    --c-ink: #22272a;
    --c-soft: #6b706a;
    --c-faint: #9a9e96;
    --c-accent: #2f5b47;
    --c-accent-hover: #264b3a;
    --c-accent-ink: #ffffff;
    --c-accent-soft: #e6ece4;
    --c-chip: #ebefe7;
    --c-field: #f2f0e8;
    --c-late: #b0533b;
    --c-soon: #9b6b22;
    --c-bar: #2f5b47;
    --c-chart-1: #6e85a5;
    --c-chart-2: #7c9a83;
    --c-chart-3: #c3b083;
    --c-chart-4: #a3809b;
    --c-chart-5: #86a5a7;
    --c-chart-grey: #d0d2cb;
    --c-thumb-1: #e3ebe2;
    --c-thumb-2: #e2e9f0;
    --c-thumb-3: #ece8df;
    --c-focus: #1f6fd1;
}

/* Whole pixels only: a side column of 13vw lands between pixels (187.2px),
   which puts the whiteboard canvas on a fractional size and position, and
   the browser then resamples the ink, softening it. round() keeps the
   same responsive width on whole pixels; older browsers keep 168px. */
@supports (width: round(down, 13vw, 1px)) {
    :root { --scene-left: round(down, clamp(150px, 13vw, 188px), 1px); }
}

html[data-theme="dark"] {
    --c-ivory: #161a20;
    --c-card: #1e232b;
    --c-line: #2e3540;
    --c-line-strong: #434c59;
    --c-ink: #e8ebef;
    --c-soft: #a9b0ba;
    --c-faint: #7c8591;
    --c-accent: #4e7c64;
    --c-accent-hover: #5b8a71;
    --c-accent-ink: #ffffff;
    --c-accent-soft: #26303b;
    --c-chip: #262d37;
    --c-field: #222831;
    --c-late: #e3917a;
    --c-soon: #d8b06c;
    --c-bar: #9cbda7;
    --c-chart-grey: #3a424d;
    --c-thumb-1: #232b33;
    --c-thumb-2: #222a35;
    --c-thumb-3: #2a2d33;
    --c-focus: #8ab8ff;
}

/* ---------- the existing app, in the same colours ---------- */

html.has-pages {
    --paper: var(--c-ivory);
    --board: #fbf9f4;
    --paper-deep: var(--c-line);
    --ink: var(--c-ink);
    --ink-soft: var(--c-soft);
    --pine: var(--c-accent);
    --pine-deep: var(--c-accent-hover);
    --ochre: var(--c-accent);
    --ochre-deep: var(--c-accent-hover);
    --border-subtle: #eeebe2;
    --border-standard: var(--c-line);
    --border-strong: var(--c-line-strong);
    --surface-page: var(--c-ivory);
    --surface-panel: #faf8f3;
    --surface-raised: var(--c-card);
    --accent-soft: var(--c-accent-soft);
    --bubble: #f0eee6;
    --grid-minor: #f0ede5;
    --grid-major: #e6e2d8;
    --accent: var(--c-accent);
}

html.has-pages[data-theme="dark"] {
    --board: #1b2027;
    --border-subtle: #262d36;
    --surface-panel: #1a1f26;
    --bubble: #252c35;
    --grid-minor: #222830;
    --grid-major: #2a313a;
}

html.has-pages body {
    padding: var(--frame-top) var(--scene-right) var(--scene-bottom) var(--frame-left);
    box-sizing: border-box;
    background: var(--c-ivory);
    font-family: var(--sans);
}

/* Until the shell has drawn its first page (pageShellBoot.js lifts this when
   the document is ready), only the sign-in card shows: the workspace under
   it would otherwise flash first and then be swapped for Home. */
html.pages-booting body > :not(#loginOverlay) {
    visibility: hidden;
}

/* The old purple, where it was written out by hand. */
html.has-pages :is(.studio-header .hint-btn, .chat-bubble.user, #sidebarChatSendBtn, #createAccountBtn, #loginSubmitBtn,
    .daily-challenge-start-btn, .given-problem-submit, .homework-qnav-item.is-current, #startPasteBtn,
    [data-learning-save], #accountSignOutBtn) {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-accent-ink);
}
html.has-pages :is(.onboarding-cue, .coach-mark) { background: var(--c-accent); }
html.has-pages .ai-btn.hint-btn,
html.has-pages #workHintBtn {
    background: var(--c-accent);
    background-image: none;
    border-color: var(--c-accent);
    color: var(--c-accent-ink);
    box-shadow: none;
}
html.has-pages .work-help .video-example-btn {
    background: var(--c-card);
    background-image: none;
    border-color: var(--c-line-strong);
    color: var(--c-ink);
}
html.has-pages .work-help .video-example-btn[aria-expanded="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); }
html.has-pages .coach-mark::before { border-bottom-color: var(--c-accent); }

/* The window's own scrollbar would sit on the painting. */
html.has-pages { scrollbar-width: none; }
html.has-pages::-webkit-scrollbar { width: 0; height: 0; }

.frame-probe {
    position: fixed;
    top: var(--scene-top);
    left: var(--scene-left);
    right: var(--scene-right);
    bottom: var(--scene-bottom);
    visibility: hidden;
    pointer-events: none;
}

html.has-pages .student-testing-dock { left: calc(var(--frame-left) + 12px); }

/* ---------- tabs: a frosted card over the painting ---------- */

.app-nav {
    position: fixed;
    z-index: 46;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--scene-left);
    pointer-events: none;
}

.app-nav[hidden] { display: none; }

.nav-card {
    position: absolute;
    left: 12px;
    right: 12px;
    pointer-events: auto;
    box-sizing: border-box;
    padding: 10px 8px;
    border-radius: 10px;
    background: rgba(250, 248, 243, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 24px rgba(28, 30, 20, 0.14);
}

html[data-theme="dark"] .nav-card {
    background: rgba(26, 30, 37, 0.86);
    border-color: rgba(255, 255, 255, 0.08);
}

.nav-main { top: 14px; display: flex; flex-direction: column; gap: 2px; }
/* Settings: only as wide as its own label, so the fox on the trail behind it
   stays in view. */
.nav-foot { bottom: 14px; padding: 4px; right: auto; }
.nav-foot .app-nav-btn { padding-right: 14px; }

.nav-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 12px;
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 500;
    color: var(--c-ink);
    letter-spacing: -0.2px;
}

.nav-brand svg { width: 18px; height: 18px; color: var(--c-accent); flex: none; }

.app-nav-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    font: 500 15px/1.2 var(--sans);
    color: var(--c-ink);
    text-align: left;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.app-nav-btn svg { width: 19px; height: 19px; flex: none; color: var(--c-soft); }
.app-nav-btn:hover { background: rgba(47, 91, 71, 0.07); }
.app-nav-btn[aria-current="page"] { background: var(--c-accent-soft); font-weight: 650; }
.app-nav-btn[aria-current="page"] svg { color: var(--c-accent); }

:is(.app-nav-btn, .app-page button, .app-page a, .app-page input, .app-page select, .app-page summary, .surface-bar button):focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
}

/* ---------- the quiet top bar ---------- */

.surface-bar {
    position: fixed;
    z-index: 44;
    top: var(--scene-top);
    left: var(--frame-left);
    right: var(--scene-right);
    height: var(--bar-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px 0 28px;
    background: var(--c-ivory);
    border-bottom: 1px solid var(--c-line);
    color: var(--c-soft);
    font: 400 13px var(--sans);
}

.surface-bar[hidden] { display: none; }
.surface-crumb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.surface-sky { white-space: nowrap; }

.surface-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--c-ink);
    cursor: pointer;
}

.surface-icon:hover { background: var(--c-chip); }
.surface-icon svg { width: 17px; height: 17px; }

.surface-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    background: var(--c-card);
    color: var(--c-ink);
    font: 600 12.5px var(--sans);
    cursor: pointer;
}

/* ---------- pages ---------- */

.app-page {
    position: fixed;
    z-index: 20;
    top: var(--frame-top);
    left: var(--frame-left);
    right: var(--scene-right);
    bottom: var(--scene-bottom);
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--c-ivory);
    color: var(--c-ink);
    font: 400 15px/1.5 var(--sans);
}

.app-page[hidden] { display: none; }

html.page-open body { overflow: hidden; }
html.page-open .studio-header,
html.page-open .app-shell,
html.page-open #practiceStrip { visibility: hidden; }
/* The testers' survey bar stays on every tab (owner, 2026-10-15), above the
   pages and below pop-ups. */
html.has-pages .student-testing-dock:not(.hidden) { visibility: visible; z-index: 60; }

.page-inner {
    max-width: 1240px;
    padding: 30px 32px 56px;
    box-sizing: border-box;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
    margin-bottom: 26px;
}

.eyebrow {
    margin: 0 0 8px;
    font: 600 12px var(--sans);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--c-soft);
}

.page-title {
    margin: 0;
    font: 400 clamp(30px, 2.7vw, 40px)/1.15 var(--serif);
    letter-spacing: -0.3px;
    color: var(--c-ink);
}

.page-sub { margin: 10px 0 0; color: var(--c-soft); font-size: 15px; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: start; }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.card {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: 10px;
    padding: 22px 24px;
    min-width: 0;
    box-sizing: border-box;
}

.card-title { margin: 0; font: 400 21px/1.25 var(--serif); color: var(--c-ink); }
.card-sub { margin: 4px 0 0; font-size: 13px; color: var(--c-soft); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.muted { color: var(--c-soft); }
.small { font-size: 13px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 5px;
    background: var(--c-chip);
    color: var(--c-ink);
    font: 600 11.5px var(--sans);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    width: fit-content;
}

.chip.plain { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 7px;
    border: 1px solid var(--c-line-strong);
    background: var(--c-card);
    color: var(--c-ink);
    font: 600 14px var(--sans);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover { background: var(--c-field); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn.primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.btn.primary:hover { background: var(--c-accent-hover); }
.btn.big { min-height: 54px; padding: 0 28px; font-size: 17px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.link-btn {
    border: 0;
    background: none;
    padding: 6px 2px;
    min-height: 36px;
    color: var(--c-ink);
    font: 500 14px var(--sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.link-btn:hover { text-decoration: underline; }
.link-btn svg { width: 14px; height: 14px; flex: none; }
.card > svg { width: 20px; height: 20px; color: var(--c-accent); }
.link-btn.late { color: var(--c-late); }

/* Segmented tabs and filter chips */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.seg button {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--c-soft);
    font: 500 14px var(--sans);
    cursor: pointer;
}

.seg button:hover { color: var(--c-ink); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--c-chip); color: var(--c-ink); font-weight: 600; }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field > span { font: 600 13px var(--sans); color: var(--c-ink); }

.input, .select {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--c-line);
    background: var(--c-field);
    color: var(--c-ink);
    font: 400 14px var(--sans);
    width: 100%;
    box-sizing: border-box;
}

.toggle {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    border: 0;
    background: var(--c-chart-grey);
    cursor: pointer;
    flex: none;
    padding: 0;
}

.toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.toggle[aria-checked="true"] { background: var(--c-accent); }
.toggle[aria-checked="true"]::after { transform: translateX(16px); }

.row-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
}

.row-setting b { display: block; font: 600 14px var(--sans); }
.row-setting span { display: block; font-size: 13px; color: var(--c-soft); margin-top: 2px; }
.hr { border: 0; border-top: 1px solid var(--c-line); margin: 14px 0; }

.check-line { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; cursor: pointer; }
.check-line input { width: 17px; height: 17px; accent-color: var(--c-accent); }

.meter { height: 4px; border-radius: 999px; background: var(--c-chart-grey); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--c-bar); border-radius: inherit; }

.note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: var(--c-card);
    font-size: 13px;
    color: var(--c-soft);
    margin-top: 18px;
}

.note svg { width: 18px; height: 18px; flex: none; color: var(--c-accent); }
.status-line { margin: 8px 0 0; font-size: 13px; font-weight: 500; min-height: 1em; }
.status-line.ok { color: var(--c-accent); }
.status-line.bad { color: var(--c-late); }

/* ---------- Home ---------- */

/* The welcome banner: greeting, a line from the fox, and the fox's
   painting for this time of day. */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
    margin-bottom: 22px;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    overflow: hidden;
    min-height: 250px;
}

.hero-text { padding: 30px 32px 28px; display: flex; flex-direction: column; justify-content: center; }
.hero-text .page-title { font-size: clamp(32px, 3vw, 44px); }
.hero-lead { margin: 10px 0 0; font: 400 19px/1.4 var(--serif); color: var(--c-ink); }
.hero-fox { margin: 12px 0 0; font: italic 400 15px/1.5 var(--serif); color: var(--c-soft); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-actions svg { width: 17px; height: 17px; }
.hero-picture { position: relative; min-height: 220px; }
.hero-picture::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--c-card) 0%, transparent 18%);
    pointer-events: none;
}
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

.stat-card { display: flex; align-items: center; gap: 14px; }
.stat-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; }
.stat-icon svg { width: 21px; height: 21px; }
.stat-icon.flame { background: #fbe7d9; color: #c8602c; }
.stat-icon.check { background: #e0eee3; color: #2f7a4f; }
.stat-icon.star { background: #f7eccb; color: #a77a12; }
.stat-icon.clock { background: #e1e9f3; color: #3f6693; }
html[data-theme="dark"] .stat-icon.flame { background: #4a3226; color: #f0a070; }
html[data-theme="dark"] .stat-icon.check { background: #27402f; color: #8fd0a4; }
html[data-theme="dark"] .stat-icon.star { background: #45401f; color: #e8c766; }
html[data-theme="dark"] .stat-icon.clock { background: #273648; color: #92b6e0; }

.challenge-card { position: relative; overflow: hidden; }
.challenge-fox { position: absolute; right: 16px; top: 14px; height: 104px; width: auto; opacity: 0.95; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18)); }
.challenge-card > :not(.challenge-fox) { position: relative; z-index: 1; }
.challenge-card .challenge-math, .challenge-card .challenge-meta, .challenge-card .card-title, .challenge-card > p { padding-right: 96px; }

/* The fox's journey along the trail. */
.journey { padding-bottom: 18px; }
.trail { position: relative; height: 92px; margin: 10px 4px 0; }
.trail-line { position: absolute; left: 10%; right: 10%; top: 58px; height: 4px; border-radius: 999px; background: var(--c-chart-grey); overflow: hidden; }
.trail-line i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-chart-2), var(--c-accent)); border-radius: inherit; }
.trail-stop { position: absolute; top: 52px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.trail-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--c-card); border: 3px solid var(--c-chart-grey); box-sizing: border-box; }
.trail-stop.passed .trail-dot { background: var(--c-accent); border-color: var(--c-accent); }
.trail-stop.here .trail-dot { border-color: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-soft); }
.trail-name { font-size: 12.5px; color: var(--c-soft); white-space: nowrap; }
.trail-stop.here .trail-name { color: var(--c-ink); font-weight: 600; }
.trail-fox { position: absolute; top: 0; height: 54px; width: auto; transform: translateX(-50%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); transition: left 0.8s ease; }
/* The fox's week: seven day-stops (Mon-Sun), a tick on each practised day. */
.trail-week { list-style: none; padding: 0; height: 112px; }
.trail-week .trail-line { left: calc(100% / 14); right: calc(100% / 14); }
.trail-week .trail-stop { gap: 4px; }
.trail-week .trail-dot { width: 22px; height: 22px; display: grid; place-items: center; font: 700 12px var(--sans); color: var(--c-accent-ink); }
.trail-week .is-done .trail-dot,
.trail-week .is-today-done .trail-dot { background: var(--c-accent); border-color: var(--c-accent); }
.trail-week .is-today .trail-dot,
.trail-week .is-today-done .trail-dot { box-shadow: 0 0 0 5px var(--c-accent-soft); }
.trail-week .is-missed .trail-dot { border-style: dashed; border-color: var(--c-line-strong); background: transparent; }
.trail-week .is-ahead .trail-dot { opacity: 0.7; }
.trail-week .trail-name { font-weight: 600; color: var(--c-ink); font-size: 13px; }
.trail-week .is-ahead .trail-name,
.trail-week .is-missed .trail-name { color: var(--c-soft); font-weight: 500; }
.trail-place { font-size: 11.5px; color: var(--c-faint); white-space: nowrap; }
@media (max-width: 760px) { .trail-place { display: none; } }

@media (max-width: 900px) {
    .hero { grid-template-columns: minmax(0, 1fr); }
    .hero-picture { min-height: 180px; order: -1; }
    .hero-picture::before { background: linear-gradient(0deg, var(--c-card) 0%, transparent 25%); }
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card { padding: 18px 22px; }
.stat-card .num { display: flex; align-items: center; gap: 8px; font: 600 24px/1.2 var(--sans); color: var(--c-ink); }
.stat-card .num svg { width: 18px; height: 18px; color: var(--c-accent); }
.stat-card .lbl { margin-top: 10px; font-size: 13px; color: var(--c-soft); }

.quick-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin: -4px 0 16px; }

.class-card { border: 1px solid var(--c-line); border-radius: 8px; padding: 16px 16px 8px; margin-bottom: 14px; background: var(--c-card); }
.class-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.class-name { font: 600 15px var(--sans); }
.class-code { font-size: 12.5px; color: var(--c-soft); margin-top: 2px; }

.expand-btn {
    border: 0;
    border-radius: 5px;
    background: var(--c-chip);
    color: var(--c-ink);
    font: 600 12px var(--sans);
    padding: 5px 9px;
    cursor: pointer;
    min-height: 30px;
}

.expand-btn.closed { background: transparent; font-size: 15px; color: var(--c-soft); }

.assign-rows { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.assign-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; }
.assign-title { font: 500 14px var(--sans); }
.assign-when { font-size: 12.5px; color: var(--c-soft); margin-top: 2px; }
.assign-when.late { color: var(--c-late); }
.assign-when.soon { color: var(--c-soon); }
.later-label { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--c-line); font: 600 11.5px var(--sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--c-soft); }
.empty-line { padding: 10px 0; font-size: 13.5px; color: var(--c-soft); }

.challenge-math { margin: 18px 0; font: 400 22px/1.35 var(--serif); color: var(--c-ink); overflow-wrap: anywhere; }
.challenge-meta { font-size: 13.5px; color: var(--c-soft); margin-top: 12px; line-height: 1.6; }

.next-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--c-line); }
.next-row:first-of-type { border-top: 0; }

.perspective { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: end; }
.persp-label { font: 600 11.5px var(--sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--c-soft); margin-bottom: 14px; }
.pie-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pie { width: 132px; height: 132px; flex: none; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.legend li { display: flex; align-items: center; gap: 9px; }
.legend-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }

.bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bar { width: 100%; max-width: 30px; background: var(--c-bar); border-radius: 2px; min-height: 2px; }
.bar.zero { background: var(--c-chart-grey); }
.bar-val { font-size: 11px; color: var(--c-soft); min-height: 14px; white-space: nowrap; }
.bar-lbl { font-size: 11.5px; color: var(--c-soft); white-space: nowrap; }

.first-class { text-align: center; }
.first-class .well { background: var(--c-accent-soft); border-radius: 8px; padding: 30px 20px; margin: 20px 0 16px; }
.steps-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--c-soft); text-align: left; }
.dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.dash-stats b { display: block; font: 600 20px var(--sans); color: var(--c-faint); }

/* ---------- Whiteboard start ---------- */

.intent-card { display: flex; flex-direction: column; }
.intent-card > svg { width: 22px; height: 22px; color: var(--c-ink); margin-bottom: 14px; }
.intent-card .card-title { margin: 14px 0 10px; font-size: 24px; }
.intent-card p.desc { margin: 0 0 16px; font-size: 13.5px; color: var(--c-soft); min-height: 42px; }
.intent-card .hr { margin: 0 0 18px; }
.intent-card .btn { align-self: flex-start; margin-top: 4px; }

/* ---------- Patterns ---------- */

.filter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.filter-note { font-size: 13px; color: var(--c-soft); margin: 0 0 22px; }
.pattern-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.col-head { margin-bottom: 14px; }
.col-head h2 { margin: 0; font: 400 22px var(--serif); }
.col-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--c-soft); }
.pattern-card { margin-bottom: 16px; padding: 18px; }
.pattern-card.picked { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent) inset; }
.pattern-topic { font: 600 11px var(--sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--c-chart-1); }
.pattern-title { margin: 8px 0 10px; font: 400 18px/1.3 var(--serif); }
.pattern-desc { font-size: 13px; color: var(--c-soft); margin: 0 0 14px; }
.qual { display: flex; justify-content: space-between; font-size: 12px; color: var(--c-soft); margin-bottom: 6px; }
.qual b { color: var(--c-ink); font-weight: 600; }
.pattern-card .btn { margin-top: 16px; min-height: 38px; font-size: 13.5px; }
.pick-head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--c-line); font-size: 13px; color: var(--c-soft); cursor: pointer; }
.pick-head input { width: 17px; height: 17px; accent-color: var(--c-accent); margin: 0; }
.pick-head.on { color: var(--c-accent); font-weight: 600; }
.mix-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; margin-bottom: 26px; background: var(--c-accent-soft); border: 1px solid var(--c-line); border-radius: 10px; }
.mix-bar b { font-weight: 600; }
.completed-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 4px; flex-wrap: wrap; }
.explain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 10px; }
.explain-grid b { display: block; font: 600 14px var(--sans); margin-bottom: 6px; }
.explain-grid p { margin: 0; font-size: 13px; color: var(--c-soft); }

/* Practice streak strip on the Whiteboard */
.practice-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 14px 24px 0;
    padding: 10px 16px;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: 10px;
    font: 500 13.5px var(--sans);
    color: var(--c-ink);
}

.practice-strip[hidden] { display: none; }
.practice-strip > b { font: 600 11.5px var(--sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--c-soft); }
.practice-strip .strip-item { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 6px; background: var(--c-chip); }
.practice-strip .meter { width: 70px; }
.practice-strip button { border: 1px solid var(--c-line-strong); background: var(--c-card); border-radius: 6px; min-height: 34px; padding: 0 12px; font: 600 13px var(--sans); color: var(--c-ink); cursor: pointer; }

/* ---------- Videos ---------- */

.search-row { display: flex; gap: 10px; margin: 18px 0 16px; }

.search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--c-line);
    border-radius: 7px;
    background: var(--c-card);
}

.search-box svg { width: 17px; height: 17px; color: var(--c-soft); flex: none; }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--c-ink); font: 400 14px var(--sans); }
.sort-select { min-height: 44px; border: 1px solid var(--c-line); border-radius: 7px; background: var(--c-card); color: var(--c-ink); font: 600 13.5px var(--sans); padding: 0 12px; }
.count-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--c-soft); margin: 14px 0 16px; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.video-card { border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: var(--c-card); display: flex; flex-direction: column; }

.video-thumb {
    position: relative;
    display: block;
    width: 100%;
    min-height: 124px;
    padding: 18px 16px 44px;
    border: 0;
    text-align: left;
    cursor: pointer;
    background: var(--c-thumb-1);
    color: var(--c-ink);
    box-sizing: border-box;
}

.video-card:nth-child(3n+2) .video-thumb { background: var(--c-thumb-2); }
.video-card:nth-child(3n) .video-thumb { background: var(--c-thumb-3); }
.thumb-kicker { font: 600 10.5px var(--sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--c-chart-1); }
.thumb-math { display: block; margin-top: 14px; font: 400 21px/1.3 var(--serif); overflow-wrap: anywhere; }
.thumb-play { position: absolute; left: 14px; bottom: 12px; width: 22px; height: 22px; color: var(--c-ink); }
.thumb-steps { position: absolute; right: 14px; bottom: 12px; font: 600 11.5px var(--sans); background: rgba(255, 255, 255, 0.7); padding: 2px 7px; border-radius: 4px; color: #2b2f31; }
.video-info { padding: 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.video-title { font: 600 14.5px/1.35 var(--sans); }
.video-desc { font-size: 12.5px; color: var(--c-soft); }
.video-meta { font-size: 11.5px; color: var(--c-soft); }
.video-actions { margin-top: auto; padding-top: 6px; }

.video-player {
    position: fixed;
    z-index: 70;
    top: var(--frame-top);
    left: var(--frame-left);
    right: var(--scene-right);
    bottom: var(--scene-bottom);
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(20, 26, 22, 0.42);
    overflow: auto;
}

.video-player-card { width: min(980px, 100%); max-height: 100%; overflow: auto; background: var(--c-card); border-radius: 12px; padding: 20px 22px; box-sizing: border-box; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.video-player-card .walkthrough-card { max-width: none; width: 100%; margin: 0; }
.empty-state { padding: 40px 10px; text-align: center; color: var(--c-soft); }
.empty-state .btn { margin-top: 14px; }

/* ---------- Settings ---------- */

.preview-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 12px; }
.preview { margin: 0; }
.preview img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 6px; display: block; }
.preview figcaption { margin-top: 7px; font: 600 12.5px var(--sans); }
.weather-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.weather-grid img { aspect-ratio: 16 / 9; }
.moon-box { display: flex; gap: 16px; align-items: flex-start; }
.moon-tile { width: 62px; height: 62px; border-radius: 6px; background: #22324a; display: grid; place-items: center; flex: none; }
.moon-tile svg { width: 34px; height: 34px; }
.kbd-rows .row-setting { padding: 8px 0; }
kbd.key { font: 600 12px var(--sans); padding: 3px 7px; border-radius: 4px; background: var(--c-chip); color: var(--c-ink); }

/* ---------- the class / three-choice picker inside the frame ---------- */

html.has-pages .level-select-overlay {
    top: var(--frame-top);
    left: var(--frame-left);
    right: var(--scene-right);
    bottom: var(--scene-bottom);
    background: color-mix(in srgb, var(--c-ivory) 82%, transparent);
}

/* ---------- the Whiteboard, in the design's rhythm ---------- */

@media (min-width: 761px) {
    html.has-pages .studio-header {
        margin: 14px 24px 0;
        min-height: 54px;
        padding: 6px 14px;
        background: var(--c-card);
        border: 1px solid var(--c-line);
        border-radius: 10px;
        box-shadow: none;
    }

    html.has-pages .studio-header .brand,
    html.has-pages .studio-header #userPill { display: none; }

    html.has-pages .app-shell { min-height: calc(100dvh - var(--frame-top) - var(--studio-header-height, 68px) - 14px); }
    html.has-pages .sidebar-chat {
        height: calc(100dvh - var(--frame-top) - var(--studio-header-height, 68px) - 14px);
        max-height: calc(100dvh - var(--frame-top) - var(--studio-header-height, 68px) - 14px);
    }
}

/* Weekly practice goal slider (Settings): a big, easy thumb and a filled track. */
.goal-slider { display: flex; align-items: center; gap: 14px; }
.goal-value { min-width: 9.5em; font: 600 15px var(--sans); color: var(--c-ink); }
.goal-ends { display: flex; justify-content: space-between; max-width: calc(100% - 9.5em - 14px); font-size: 12px; color: var(--c-faint); }
.goal-range {
    --fill: 14%;
    flex: 1;
    height: 28px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.goal-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--c-accent) var(--fill), var(--c-line-strong) var(--fill));
}
.goal-range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--c-line-strong); }
.goal-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--c-accent); }
.goal-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    margin-top: -9px;
    border-radius: 50%;
    border: 3px solid var(--c-card);
    background: var(--c-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.goal-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--c-card);
    background: var(--c-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.goal-range:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 4px; border-radius: 6px; }

/* No problem yet: the way to add one is a clear, full button, not a quiet
   link the student can miss. */
html.has-pages .given-problem[data-mode="blank"] .given-problem-add {
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid var(--c-accent);
    border-radius: 10px;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font: 600 15px var(--sans);
    cursor: pointer;
}
html.has-pages .given-problem[data-mode="blank"] .given-problem-add:hover { background: var(--c-accent-hover); }
html.has-pages #changeLevelBtn {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    border-color: transparent;
}
html.has-pages[data-theme="dark"] #changeLevelBtn { color: var(--c-ink); }

/* The "Your work" row: one slim line, so the board gets the height. */
html.has-pages .work-mode-bar { padding: 2px 18px 1px; }
html.has-pages .work-mode-bar .work-help { padding: 2px; }
html.has-pages .work-mode-bar :is(.ai-btn, .video-example-btn) {
    min-height: 30px;
    padding: 3px 14px;
}
/* A finger needs the full 44 px target. */
html.has-pages.native-app .work-mode-bar :is(.ai-btn, .video-example-btn) { min-height: 44px; }
@media (pointer: coarse) {
    html.has-pages .work-mode-bar :is(.ai-btn, .video-example-btn) { min-height: 44px; }
}

/* The Whiteboard page scrolls like a page: only the top bar stays put. The
   board gets the full window height below the top bar, so it is never cut
   off, and scrolling brings the problem, the work bar, the board and Math
   Chat along together. */
@media (min-width: 981px) {
    html.has-pages body {
        --board-h: calc(100dvh - var(--frame-top) - 28px);
    }
    html.has-pages body .app-shell {
        height: auto;
        min-height: 0;
        margin-bottom: 14px;
    }
    html.has-pages body .workspace { height: auto; min-height: 0; }
    html.has-pages body .board-stage { flex: 0 0 auto; min-height: 0; }
    html.has-pages body .board-card { height: var(--board-h); min-height: 420px; }
    /* Homework scrolls too: the classic screen fit one window with no page
       scroll, which the tab frame and top bar leave too short. */
    html.has-pages body.homework-solving { overflow: visible; }
    /* Math Chat is one window tall (not the page's height), so its typing
       box shows with the page scrolled all the way up; it still scrolls
       along with the page. */
    html.has-pages body .sidebar {
        position: static;
        height: calc(100dvh - var(--frame-top) - var(--studio-header-height, 68px) - 28px);
        max-height: none;
        min-height: 360px;
        align-self: start;
        overflow: visible;
        overscroll-behavior: auto;
    }
    /* Math Chat fills the column; the folded History line sits under it. */
    html.has-pages body .sidebar-chat {
        flex: 1 1 auto;
        height: auto;
        max-height: none;
        min-height: 0;
    }
}

/* Daily challenge, results, Next Up, Exam Prep and Patterns live on Home and
   the Patterns tab now, so the Whiteboard's side column is Math Chat alone.
   (Classic layout, calcebraClassicLayout=1, still shows them.) */
html.has-pages :is(#dailyChallengeCard, #progressCard, #impactCard, #studyTodayCard, #examPrepCard, #patternsCard) {
    display: none !important;
}

/* ---------- smaller screens ---------- */

@media (max-width: 1180px) {
    .col-8, .col-7, .col-6, .col-5, .col-4, .col-3 { grid-column: span 12; }
    .pattern-cols, .explain-grid { grid-template-columns: minmax(0, 1fr); }
    .perspective { grid-template-columns: minmax(0, 1fr); }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .preview-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-nav-btn { font-size: 13.5px; gap: 8px; padding: 0 8px; }
    .nav-brand { font-size: 18px; padding: 6px 6px 10px; }
}

@media (max-width: 760px) {
    :root {
        --scene-left: 0px;
        --scene-top: 16px;
        --nav-h: 56px;
        --bar-h: 40px;
        --frame-top: calc(var(--scene-top) + var(--nav-h) + var(--bar-h));
    }

    .app-nav { display: flex; top: var(--scene-top); bottom: auto; right: 0; width: auto; height: var(--nav-h); }
    .nav-card { position: static; border-radius: 0; box-shadow: none; padding: 3px 4px; background: var(--c-card); border: 0; border-bottom: 1px solid var(--c-line); }
    .nav-main { flex: 1; flex-direction: row; gap: 0; }
    .nav-foot { padding: 3px 4px; }
    .nav-brand { display: none; }
    .app-nav-btn { flex-direction: column; justify-content: center; gap: 2px; padding: 2px; min-height: 48px; font-size: 11.5px; text-align: center; }
    .app-nav-btn svg { width: 20px; height: 20px; }
    .surface-bar { top: calc(var(--scene-top) + var(--nav-h)); padding: 0 14px; font-size: 13px; }
    .surface-sky { display: none; }
    .page-inner { padding: 20px 16px 40px; }
    .stats, .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weather-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-links { justify-content: flex-start; }
}

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

/* ---------- the sky along the top ----------
   sceneryPainted.js paints the strip from the rail's own painting, so it is
   one picture with the rail; it fades in once painted. */
html.has-pages #scenery .scp-band {
    background-size: 100% 100%;
    background-position: 0 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}
html.has-pages #scenery .scp-band.scp-sky-ready { opacity: 1; }
html.has-pages #scenery.sc-still .scp-band { transition: none; }

/* ---------- Classes tab (pagesClasses.js) and Home's week line ----------
   Appended by the Classes-tab change; the colour tokens above are untouched. */

/* Home: one quiet line pointing to the Classes tab. */
.week-line { display: flex; align-items: center; gap: 14px; padding: 16px 20px; flex-wrap: wrap; }
.week-line-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--c-accent-soft); color: var(--c-accent); }
.week-line-icon svg { width: 20px; height: 20px; }
.week-line-text { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 2px; }
.week-line-text b { font: 600 14.5px var(--sans); color: var(--c-ink); }
.week-line-text span { font-size: 13.5px; color: var(--c-soft); }
.week-line-text span.late { color: var(--c-late); }

/* Classes: a short, plain "how this page works" note. */
.classes-tip b { font: 600 14.5px var(--sans); }
.classes-tip ul { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--c-soft); }
.classes-tip ul b { font-size: inherit; color: var(--c-ink); }

/* Six tabs across the top of a phone: a little narrower, never cut off. */
@media (max-width: 760px) {
    .nav-main .app-nav-btn, .nav-foot .app-nav-btn { min-width: 0; letter-spacing: -0.1px; }
    .nav-foot { flex: 0 0 auto; }
}
@media (max-width: 430px) {
    .app-nav-btn { font-size: 10.5px; }
    .nav-card, .nav-foot { padding-left: 2px; padding-right: 2px; }
}

/* ---------- a brighter, friendlier light over the scenery ----------
   No colour cast: the paintings are lifted (clearer, a little more colour,
   softer contrast) and a warm sun glow sits in the top-left corner. */
html.has-pages #scenery .sc-frame {
    filter: brightness(1.07) saturate(1.18) contrast(0.94);
}
html.has-pages[data-theme="dark"] #scenery .sc-frame {
    filter: brightness(1.12) saturate(1.1) contrast(0.95);
}
html.has-pages #scenery::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(90% 55% at 12% 6%, rgba(255, 236, 196, 0.38), rgba(255, 236, 196, 0) 70%);
    mix-blend-mode: screen;
}
html.has-pages[data-theme="dark"] #scenery::after {
    background: radial-gradient(70% 45% at 75% 0%, rgba(210, 222, 255, 0.16), rgba(210, 222, 255, 0) 70%);
}

/* ---------- pop-ups: a card over the blurred page, never a new screen ----------
   (dialogDismiss.js closes them on Esc, a click outside, or Cancel.) */
html.has-pages :is(#accountOverlay, #learningOverlay, #examPrepOverlay, #studyPlanOverlay, #homeworkOverlay, #shortcutsOverlay) {
    background: rgba(28, 30, 34, 0.34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: default;
}
html.has-pages :is(#accountOverlay, #learningOverlay, #examPrepOverlay, #studyPlanOverlay, #homeworkOverlay) > .login-card {
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

/* ---------- sign-up permissions: Accept all on top, the two choices below ---------- */
.login-accept-all {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border: 1px solid var(--c-line, #e0dbcf);
    border-radius: 8px;
    background: var(--c-accent-soft, #e6ece4);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}
.login-accept-all input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-accent, #2f5b47); }
.login-consent-options { margin: 6px 0 0 4px; font-size: 0.76rem; }
.login-consent-options .login-parent-check { font-size: 0.76rem; line-height: 1.35; padding: 4px 6px; margin: 2px 0; }
.login-consent-options .login-parent-check input { width: 13px; height: 13px; }
.login-consent-note { display: block; margin-top: 2px; font-size: 0.68rem; line-height: 1.3; opacity: 0.85; }
.login-required { color: var(--c-late, #b0533b); font-weight: 700; }
.login-required-note { margin: 3px 0 0; font-size: 0.68rem; color: var(--c-soft, #6b706a); }

/* Check always has a visible outline, light or dark. */
html.has-pages #workCheckBtn,
html.has-pages .work-mode-bar .ai-btn.check-btn {
    border: 1.5px solid var(--c-accent);
    color: var(--c-ink);
    background: var(--c-card);
}
html.has-pages #workCheckBtn:hover { background: var(--c-accent-soft); }

/* The fox and his speech bubble stay in view while the Whiteboard scrolls
   (appPages.js pinBoardFox sets the two variables). */
html.has-pages:not(.page-open) body:not(.homework-solving) #mascotHelper {
    position: fixed;
    right: calc(var(--fox-pin-right, 275px) + 6px);
    bottom: calc(var(--fox-pin-bottom, 0px) + 6px);
    z-index: 45;
}
html.has-pages:not(.page-open) body:not(.homework-solving) #foxReaction {
    position: fixed;
    right: calc(var(--fox-pin-right, 275px) + 100px);
    bottom: calc(var(--fox-pin-bottom, 0px) + 18px);
    z-index: 45;
}

/* Clear board: a red trash can that keeps its dark outline. */
html.has-pages #clearBoardBtn svg { color: #2b1d16; }
html.has-pages #clearBoardBtn svg :is(path, rect, polyline, line) { stroke: #2b1d16; }
html.has-pages #clearBoardBtn svg :is(path, rect):first-of-type { fill: #d64a3a; }
html.has-pages #clearBoardBtn:hover svg :is(path, rect):first-of-type { fill: #e35a49; }
html.has-pages[data-theme="dark"] #clearBoardBtn svg :is(path, rect, polyline, line) { stroke: #120c09; }

/* The Whiteboard page scrolls: show a real scrollbar and a small cue at the
   bottom while there is more below (appPages.js toggles .board-has-more). */
html.has-pages:not(.page-open) { scrollbar-width: auto; scrollbar-color: var(--c-accent) var(--c-line); }
html.has-pages:not(.page-open)::-webkit-scrollbar { width: 12px; }
html.has-pages:not(.page-open)::-webkit-scrollbar-track { background: var(--c-line); }
html.has-pages:not(.page-open)::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: 8px; border: 3px solid var(--c-line); }
.board-scroll-cue {
    position: fixed;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 44;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--c-line-strong);
    background: var(--c-card);
    color: var(--c-ink);
    font: 600 13px var(--sans);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    cursor: pointer;
}
html.has-pages.board-has-more:not(.page-open) .board-scroll-cue { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
    .board-scroll-cue span { animation: board-cue-bob 1.6s ease-in-out infinite; }
}
@keyframes board-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }