/* ==========================================================================
   School Classroom App: stylesheet
   Brand colours (--brand*, --accent*) are injected at runtime by js/theme.js
   from school.config.js / Settings → Branding. Do not hard-code brand hex here.
   ========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: light;
  /* brand fallbacks (overwritten by theme.js) */
  --brand: #1d4e89; --brand-strong: #163c6a; --brand-soft: #e6edf6; --brand-softer: #f2f6fb;
  --brand-text: #1d4e89; --on-brand: #fff; --brand-side: #1d4e89; --on-side: #fff; --side-muted: rgba(255,255,255,.72);
  --side-hover: rgba(255,255,255,.10); --side-active: rgba(255,255,255,.18);
  --accent: #e8a317; --accent-soft: #fdf3dd; --accent-text: #8a5d00; --on-accent: #1b1300;

  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #eaeef3;
  --border: #e2e7ee;
  --border-strong: #cbd3de;
  --text: #0f172a;
  --text-2: #3f4b5e;
  --text-3: #5f6b7d;
  --grid: #e6e9ee;

  /* status: fixed, never themed. Always paired with an icon or label. */
  --good: #0ca30c; --good-text: #0b6b1e; --good-soft: #e5f5e7;
  --warn: #fab219; --warn-text: #8a5300; --warn-soft: #fff4dc;
  --serious: #ec835a; --serious-text: #a23d12; --serious-soft: #fdeee7;
  --bad: #d03b3b; --bad-text: #b0282a; --bad-soft: #fbe9e9;

  /* categorical (task kinds), fixed order */
  --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #4a3aa7;
  --cat-1-soft: #e6f0fb; --cat-2-soft: #fdeee7; --cat-3-soft: #e4f6ef; --cat-4-soft: #ecebf7;
  --cat-1-text: #1c5cab; --cat-2-text: #a8431a; --cat-3-text: #0e7a53; --cat-4-text: #4a3aa7;

  --radius: 14px; --radius-sm: 10px; --radius-xs: 7px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .06);
  --shadow-lg: 0 10px 40px rgba(15, 23, 42, .18);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --side-w: 264px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c111b; --surface: #141a26; --surface-2: #19202e; --surface-3: #222b3c;
    --border: #262f41; --border-strong: #35405a; --text: #e9edf4; --text-2: #b4bdcc; --text-3: #8f9bb0; --grid: #232c3d;
    --good-text: #4cc764; --good-soft: rgba(12,163,12,.16); --warn-text: #fab219; --warn-soft: rgba(250,178,25,.14);
    --serious-text: #f0936c; --serious-soft: rgba(236,131,90,.16); --bad-text: #ef7070; --bad-soft: rgba(208,59,59,.18);
    --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #9085e9;
    --cat-1-soft: rgba(57,135,229,.16); --cat-2-soft: rgba(217,89,38,.16); --cat-3-soft: rgba(25,158,112,.16); --cat-4-soft: rgba(144,133,233,.16);
    --cat-1-text: #7fb1ef; --cat-2-text: #f08c62; --cat-3-text: #4fcf9f; --cat-4-text: #afa6f0;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.25); --shadow-lg: 0 16px 50px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c111b; --surface: #141a26; --surface-2: #19202e; --surface-3: #222b3c;
  --border: #262f41; --border-strong: #35405a; --text: #e9edf4; --text-2: #b4bdcc; --text-3: #8f9bb0; --grid: #232c3d;
  --good-text: #4cc764; --good-soft: rgba(12,163,12,.16); --warn-text: #fab219; --warn-soft: rgba(250,178,25,.14);
  --serious-text: #f0936c; --serious-soft: rgba(236,131,90,.16); --bad-text: #ef7070; --bad-soft: rgba(208,59,59,.18);
  --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #9085e9;
  --cat-1-soft: rgba(57,135,229,.16); --cat-2-soft: rgba(217,89,38,.16); --cat-3-soft: rgba(25,158,112,.16); --cat-4-soft: rgba(144,133,233,.16);
  --cat-1-text: #7fb1ef; --cat-2-text: #f08c62; --cat-3-text: #4fcf9f; --cat-4-text: #afa6f0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.25); --shadow-lg: 0 16px 50px rgba(0,0,0,.5);
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: var(--brand-text); text-decoration: none; }
@media (hover: hover) { a:hover { text-decoration: underline; } }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.bold { font-weight: 600; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------------------- shell */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar {
  width: var(--side-w); flex: none; background: var(--brand-side); color: var(--on-side);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 20;
  padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left);
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px 16px; }
.side-brand .logo { width: 46px; height: 46px; flex: none; }
.logo img, .logo svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-name { font-weight: 700; font-size: 16px; line-height: 1.2; }
.brand-motto { font-size: 11.5px; color: var(--side-muted); margin-top: 2px; line-height: 1.3; }
.nav { flex: 1; overflow-y: auto; padding: 6px 10px 12px; }
.nav-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--side-muted); padding: 16px 12px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--on-side);
  font-weight: 500; font-size: 14.5px; margin: 2px 0; min-height: 44px; position: relative;
}
@media (hover: hover) { .nav-item:hover { background: var(--side-hover); text-decoration: none; } }
.nav-item.active { background: var(--side-active); }
.nav-item.active::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.nav-item .count { margin-left: auto; background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; }
.nav-item.sub { font-size: 13.5px; padding-left: 16px; min-height: 38px; }
.nav-item .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--side-muted); margin: 0 5px; flex: none; }
.nav-item.active .dot { background: var(--accent); }
.nav-item .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot { padding: 12px; border-top: 1px solid var(--side-hover); }
.me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.me .who { min-width: 0; flex: 1; }
.me .who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .who span { font-size: 12px; color: var(--side-muted); }
.side-btn { background: transparent; border: 0; color: var(--on-side); width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
@media (hover: hover) { .side-btn:hover { background: var(--side-hover); } }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px; padding: 14px 28px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.topbar .titles { min-width: 0; flex: 1; }
/* Back (js/app.js go-back): "← Back" on a wide screen; on a phone the arrow alone, where the logo is on the home page */
.top-back { flex: none; gap: 6px; padding: 7px 12px 7px 9px; font-weight: 600; margin-left: -6px; }
.top-back svg.i { width: 20px; height: 20px; }
.crumbs { font-size: 12.5px; color: var(--text-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--text-3); }
.page-title { font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar { padding-top: max(14px, env(safe-area-inset-top)); padding-right: max(28px, env(safe-area-inset-right)); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.content { padding: 24px 28px 64px; width: 100%; max-width: 1680px; margin: 0 auto; }

/* Full-screen controls (js/screen.js). Every page has all four buttons; these rules
   show only the ones that do something on this device right now. */
.scr-ctl { display: contents; }
.scr-ctl .btn { display: none; }
html.scr-can:not(.scr-full) .scr-ctl .scr-enter,
html.scr-can.scr-full:not(.scr-locked) .scr-ctl .scr-exit,
html.scr-desktop.scr-full:not(.scr-locked) .scr-ctl .scr-min,
html.scr-desktop.scr-full:not(.scr-locked) .scr-ctl .scr-quit { display: inline-flex; }
html.scr-desktop.scr-full:not(.scr-locked) .top-actions .scr-min { margin-left: 6px; }
.scr-float {
  position: fixed; z-index: 40; display: flex; gap: 6px;
  top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right));
}
.scr-float .btn { background: var(--surface); border: 1px solid var(--border); }

/* adding material: three kinds; exam papers in a batch */
.upload-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.upload-choices .role-card span { line-height: 1.45; }
.batch-list { margin-top: 14px; }
.batch-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 170px minmax(0, 1.5fr); gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.batch-row.skipped .batch-file { opacity: .5; }
.batch-file { display: flex; gap: 10px; align-items: center; min-width: 0; }
.batch-file > .i { flex: none; color: var(--brand-text); }
.batch-file .name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select.invalid { border-color: var(--bad); }
.file-drop.over { border-color: var(--brand-text); background: var(--brand-softer); }
.warn-text { color: var(--warn-text); }
.text-bad { color: var(--bad); }
@media (max-width: 720px) {
  .upload-choices { grid-template-columns: 1fr; }
  .batch-row { grid-template-columns: 1fr; gap: 6px; }
}

/* PDF reader (js/pdfview.js): every page, drawn as you scroll */
.pdf-host { height: 100%; min-height: 0; }
.pdf-wrap { height: 100%; display: flex; flex-direction: column; background: var(--surface-2); }
.pdf-bar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.pdf-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; }
.pdf-page { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); flex: none; max-width: none; }
.pdf-page canvas { display: block; }
.pdf-msg { padding: 40px 16px; color: var(--text-3); display: flex; gap: 8px; align-items: center; }

/* sitting a past paper */
.sit-room { height: 100vh; height: 100dvh; min-height: 0; }
.sit-body { flex: 1; min-height: 0; }
.sit-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.sit-mark > .i { color: var(--brand-text); }
.sit-rules { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.sit-rules li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.sit-rules li .i { flex: none; margin-top: 2px; color: var(--text-3); }
.sit-rules li.strong { font-weight: 700; color: var(--warn-text); }
.sit-rules li.strong .i { color: var(--warn-text); }
details.paper-group { margin-bottom: 12px; }
details.paper-group > summary { cursor: pointer; list-style: none; }
details.paper-group > summary::-webkit-details-marker { display: none; }
details.paper-group > summary::after { content: "▸"; margin-left: auto; color: var(--text-3); }
details.paper-group[open] > summary::after { content: "▾"; }

/* past papers with typed answers: the question as printed on one side, the answers on the other */
.qs-room { height: 100vh; height: 100dvh; }
.qs-nav { display: flex; align-items: center; gap: 6px; padding: 8px 16px; overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--border); scrollbar-width: thin; flex: none; }
.qs-nav button { flex: none; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 9px; border: 1.5px solid var(--border-strong); background: var(--surface); font-weight: 700; font-size: 13.5px; color: var(--text-2); cursor: pointer; position: relative; font-variant-numeric: tabular-nums; }
.qs-nav button.ans { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.qs-nav button.cur { outline: 3px solid var(--accent); outline-offset: 1px; }
.qs-nav button.flag::after { content: ""; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 99px; background: var(--serious); border: 2px solid var(--surface); }
.qs-count { flex: none; margin-left: 6px; white-space: nowrap; }
.qs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); }
.qs-view { overflow: auto; -webkit-overflow-scrolling: touch; background: var(--surface-2); padding: 16px; min-height: 0; }
.qs-paper { display: flex; flex-direction: column; align-items: center; gap: 0; }
.qs-paper canvas, .pr-qclips canvas, .pr-msclip canvas { display: block; background: #fff; max-width: 100%; height: auto; }
.qs-paper canvas { box-shadow: 0 1px 4px rgba(0, 0, 0, .16); }
.qs-paper canvas + canvas { margin-top: 10px; }
.qs-panel { overflow: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); background: var(--surface); border-left: 1px solid var(--border); min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.qs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.qs-unit { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.qs-ulabel { display: flex; align-items: baseline; gap: 8px; }
.qs-box { display: grid; gap: 4px; }
.qs-blabel { font-size: 13.5px; color: var(--text-2); }
.qs-field { display: flex; align-items: center; gap: 8px; }
.qs-field .input, .qs-field .textarea { flex: 1; min-width: 0; font-size: 16px; }
.qs-unit-suffix { font-weight: 600; color: var(--text-2); white-space: nowrap; }
.qs-essay { font-size: 16px; line-height: 1.55; min-height: 280px; }
.qs-abcd { grid-template-columns: repeat(4, 1fr); }
.qs-abcd .opt { justify-content: center; min-height: 64px; }
.qs-abcd .opt .letter { width: 40px; height: 40px; font-size: 18px; }
.qs-worknote { display: flex; gap: 8px; align-items: flex-start; }
.qs-work > summary { cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; padding: 8px 0; }
.qs-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.pad { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.pad-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.pad-bar .btn.on { background: var(--brand-soft); border-color: var(--brand-text); color: var(--brand-text); }
.pad-canvas { display: block; touch-action: none; cursor: crosshair; background-image: linear-gradient(var(--grid) 1px, transparent 1px); background-size: 100% 28px; }
.pr-unit { padding: 14px 18px; border-top: 1px solid var(--border); }
.pr-ms { border-left: 3px solid var(--brand-soft); padding-left: 10px; }
.pr-give { margin-top: 10px; gap: 6px; }
.pr-qclips:not(:empty) { padding: 12px 18px; display: grid; gap: 8px; justify-items: center; background: var(--surface-2); }
.pr-msclip:not(:empty) { margin-top: 8px; display: grid; gap: 6px; }
.grade-badge small { font-size: 18px; margin-left: 1px; }
@media (max-width: 900px) {
  .qs-room { height: auto; min-height: 100dvh; }
  .qs-body { grid-template-columns: 1fr; }
  .qs-view { max-height: 62vh; padding: 10px; }
  .qs-panel { border-left: 0; border-top: 1px solid var(--border); overflow: visible; }
  .qs-nav { position: sticky; top: 0; z-index: 9; }
}

/* home edition online: install from the website, the new student ID */
.install-box { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); display: grid; gap: 8px; justify-items: start; }
.install-box p { color: var(--text-3); }
.login-box .big-ico svg { width: 56px; height: 56px; }
.id-big { font: 700 34px/1.15 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; margin-top: 6px; color: var(--brand-text); }
.mobile-brand, .top-actions .mobile-only-signout { display: none; }

.status-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; padding: 6px 11px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; cursor: pointer; }
.status-chip .pip { width: 8px; height: 8px; border-radius: 99px; background: var(--good); }
.status-chip.offline .pip { background: var(--warn); }
.status-chip.error .pip { background: var(--bad); }

.bottom-nav { display: none; }

/* ------------------------------------------------------------------ layout */
.grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.g-auto > .card { display: flex; flex-direction: column; }
.g-auto > .card > .card-body { flex: 1; }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.spread { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; }
.stack-lg > * + * { margin-top: 20px; }
.mt { margin-top: 18px; } .mt-sm { margin-top: 10px; } .mt-lg { margin-top: 28px; } .mb { margin-bottom: 18px; }

/* ------------------------------------------------------------------- cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.card-head h3 { font-size: 15.5px; font-weight: 650; }
.card-head .sub { font-size: 12.5px; color: var(--text-3); }
.card-body { padding: 16px 20px; }
.card-foot { padding: 12px 20px; border-top: 1px solid var(--border); }
.section-title { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.section-title h2 { font-size: 17px; font-weight: 650; }
.section-title .sub { color: var(--text-3); font-size: 13px; }

.hero {
  border-radius: var(--radius); padding: 24px 26px; color: var(--on-brand); position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-strong) 100%);
}
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: var(--accent); opacity: .18; }
.hero h2 { font-size: 24px; font-weight: 700; }
.hero p { opacity: .88; margin-top: 4px; }
.hero .hero-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero .hero-actions .btn { max-width: 100%; white-space: normal; text-align: left; padding-top: 8px; padding-bottom: 8px; }

.stat { padding: 16px 18px; display: flex; gap: 14px; align-items: center; }
.stat .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); flex: none; }
.stat .ico.accent { background: var(--accent-soft); color: var(--accent-text); }
.stat .val { font-size: 24px; font-weight: 700; line-height: 1.1; }
.stat .lbl { font-size: 13px; color: var(--text-3); }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .05s;
}
@media (hover: hover) { .btn:hover { background: var(--surface-2); text-decoration: none; } }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
@media (hover: hover) { .btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); } }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .btn-accent:hover { filter: brightness(.95); background: var(--accent); } }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
@media (hover: hover) { .btn-ghost:hover { background: var(--surface-3); } }
.btn-danger { color: var(--bad-text); border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
@media (hover: hover) { .btn-danger:hover { background: var(--bad-soft); } }
.btn-light { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: inherit; }
@media (hover: hover) { .btn-light:hover { background: rgba(255,255,255,.26); } }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { min-height: 50px; padding: 0 22px; font-size: 15.5px; border-radius: 12px; }
.btn-icon { width: 42px; padding: 0; }
.btn-icon.btn-sm { width: 34px; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------------ badges */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; line-height: 1.4; }
.badge svg.i { width: 13px; height: 13px; }
.badge.brand { background: var(--brand-soft); color: var(--brand-text); }
.badge.accent { background: var(--accent-soft); color: var(--accent-text); }
.badge.good { background: var(--good-soft); color: var(--good-text); }
.badge.warn { background: var(--warn-soft); color: var(--warn-text); }
.badge.serious { background: var(--serious-soft); color: var(--serious-text); }
.badge.bad { background: var(--bad-soft); color: var(--bad-text); }
.badge.k-homework { background: var(--cat-1-soft); color: var(--cat-1-text); }
.badge.k-assignment { background: var(--cat-3-soft); color: var(--cat-3-text); }
.badge.k-test { background: var(--cat-4-soft); color: var(--cat-4-text); }
.badge.k-presentation { background: var(--cat-2-soft); color: var(--cat-2-text); }
.kind-bar { width: 4px; align-self: stretch; border-radius: 4px; flex: none; }
.kind-bar.k-homework { background: var(--cat-1); } .kind-bar.k-assignment { background: var(--cat-3); }
.kind-bar.k-test { background: var(--cat-4); } .kind-bar.k-presentation { background: var(--cat-2); }

/* ------------------------------------------------------------------ avatar */
.avatar { width: 36px; height: 36px; border-radius: 99px; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; color: #fff; letter-spacing: .02em; }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }

/* ------------------------------------------------------------------- forms */
.field { display: block; }
.field + .field { margin-top: 14px; }
.field > span, .label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field .hint { font-size: 12px; color: var(--text-3); margin-top: 5px; font-weight: 400; }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 14.5px; transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.textarea.code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13.5px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.input.sm, .select.sm { min-height: 36px; padding: 6px 10px; font-size: 13.5px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .field + .field { margin-top: 0; }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.color-input { width: 52px; height: 44px; padding: 3px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; }

.seg { display: inline-flex; background: var(--surface-3); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--text-2); cursor: pointer; min-height: 38px; display: inline-flex; align-items: center; gap: 7px; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.pick-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px 10px; }

/* -------------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; font-weight: 600; font-size: 14px; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
@media (hover: hover) { .tabs a:hover { color: var(--text); text-decoration: none; } }
.tabs a.on { color: var(--brand-text); border-bottom-color: var(--brand-text); }
.tabs a .n { background: var(--surface-3); color: var(--text-2); font-size: 11.5px; padding: 1px 7px; border-radius: 99px; }
/* wide tab strips on a computer: arrows at the ends while there is more that way, a thin scrollbar (js/ui.js UI.strips) */
.tabs-wrap { position: relative; margin-bottom: 20px; }
.tabs-wrap > .tabs { margin-bottom: 0; }
.tabs-arrow { display: none; position: absolute; top: 0; bottom: 1px; width: 44px; z-index: 2; align-items: center; border: 0; padding: 0; color: var(--text-2); cursor: pointer; }
.tabs-arrow svg { width: 26px; height: 26px; padding: 4px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
@media (hover: hover) { .tabs-arrow:hover svg { color: var(--brand-text); border-color: var(--brand-text); } }
.tabs-arrow.back { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--bg) 55%, transparent); }
.tabs-arrow.fwd { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--bg) 55%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .tabs-wrap.more-back > .tabs-arrow.back, .tabs-wrap.more-fwd > .tabs-arrow.fwd { display: flex; }
  .tabs-wrap > .tabs { scrollbar-width: thin; scrollbar-color: var(--border-strong, var(--border)) transparent; }
}

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2); }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.click { cursor: pointer; }
@media (hover: hover) { .table tr.click:hover td { background: var(--surface-2); } }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table input.cell { width: 72px; min-height: 34px; text-align: right; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); font-variant-numeric: tabular-nums; }
.table .sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; white-space: nowrap; }

/* ------------------------------------------------------------------- lists */
.list-row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: 0; }
a.list-row, .list-row.click { color: inherit; cursor: pointer; }
@media (hover: hover) { a.list-row:hover, .list-row.click:hover { background: var(--surface-2); text-decoration: none; } }
.list-row .title { font-weight: 600; }
.list-row .meta { font-size: 12.5px; color: var(--text-3); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.list-row .meta .sep::before { content: "·"; }
.empty { text-align: center; padding: 36px 20px; color: var(--text-3); }
.empty .ico { width: 54px; height: 54px; border-radius: 16px; background: var(--surface-3); display: grid; place-items: center; margin: 0 auto 12px; color: var(--text-3); }
.empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }

/* ----------------------------------------------------------- class cards */
.class-card { display: flex; flex-direction: column; color: inherit; overflow: hidden; transition: box-shadow .15s, transform .15s; }
@media (hover: hover) { .class-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); text-decoration: none; } }
.class-card .band { height: 6px; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.class-card .body { padding: 18px 20px; flex: 1; }
.class-card h3 { font-size: 18px; font-weight: 700; }
.class-card .subj { color: var(--text-3); font-size: 13.5px; margin-top: 2px; }
.class-card .foot { display: flex; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.class-card .foot span { display: inline-flex; align-items: center; gap: 6px; }
.faces { display: flex; }
.faces .avatar { border: 2px solid var(--surface); margin-left: -8px; }
.faces .avatar:first-child { margin-left: 0; }
.faces .more { background: var(--surface-3); color: var(--text-2); }

/* ------------------------------------------------------------ progress */
.bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--brand-text); }
.bar.accent > i { background: var(--accent); }
.bar.good > i { background: var(--good); } .bar.warn > i { background: var(--warn); } .bar.bad > i { background: var(--bad); }
.bar.lg { height: 12px; }
.pct-cell { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.pct-cell .bar { flex: 1; }
.pct-cell b { font-size: 13px; width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

.ring-wrap { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring-wrap .ring-label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.1; }
.ring-wrap .ring-label b { font-size: 20px; font-weight: 700; display: block; }
.ring-wrap .ring-label span { font-size: 11px; color: var(--text-3); }

/* ------------------------------------------------------------ charts */
.chart { width: 100%; display: block; overflow: visible; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .axis-label { fill: var(--text-3); font-size: 11px; }
.chart .line { fill: none; stroke: var(--brand-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--brand-text); opacity: .08; }
.chart .pt { fill: var(--brand-text); stroke: var(--surface); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: default; }
.chart .ref { stroke: var(--text-3); stroke-dasharray: 4 4; stroke-width: 1; }
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(110px, 38%) 1fr 48px; gap: 12px; align-items: center; font-size: 13.5px; }
.hbar .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { height: 12px; border-radius: 4px; background: var(--surface-3); position: relative; }
.hbar .track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--brand-text); }
.hbar .track > i.good { background: var(--good); } .hbar .track > i.warn { background: var(--warn); } .hbar .track > i.bad { background: var(--bad); }
.hbar .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.heat { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.heat th { font-weight: 600; color: var(--text-3); padding: 2px 6px; text-align: left; white-space: nowrap; }
.heat th.rot { height: 110px; vertical-align: bottom; padding: 0; }
.heat th.rot > div { transform: rotate(-50deg); transform-origin: 12px 100%; width: 24px; white-space: nowrap; font-size: 11.5px; }
.heat td.cell { width: 26px; height: 26px; border-radius: 6px; text-align: center; font-weight: 700; font-size: 11px; }
.st-done { background: var(--good); color: #fff; }
.st-prog { background: var(--warn); color: #3a2600; }
.st-none { background: var(--surface-3); color: var(--text-3); }
.st-lock { background: transparent; color: var(--text-3); border: 1px dashed var(--border-strong); }

.att { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; font-size: 11.5px; font-weight: 700; }
.att-P { background: var(--good-soft); color: var(--good-text); }
.att-A { background: var(--bad-soft); color: var(--bad-text); }
.att-L { background: var(--warn-soft); color: var(--warn-text); }
.att-E { background: var(--cat-1-soft); color: var(--cat-1-text); }
.att-x { background: var(--surface-3); color: var(--text-3); }
.reg-btns { display: inline-flex; gap: 6px; }
.reg-btns button { width: 44px; height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); font-weight: 700; cursor: pointer; color: var(--text-2); }
.reg-btns button.on.P { background: var(--good); border-color: var(--good); color: #fff; }
.reg-btns button.on.A { background: var(--bad); border-color: var(--bad); color: #fff; }
.reg-btns button.on.L { background: var(--warn); border-color: var(--warn); color: #3a2600; }
.reg-btns button.on.E { background: var(--cat-1); border-color: var(--cat-1); color: #fff; }

/* ---------------------------------------------------------- notes / prose */
.prose { font-size: 16px; line-height: 1.7; color: var(--text); max-width: 760px; }
.prose h1 { font-size: 24px; margin: 8px 0 12px; }
.prose h2 { font-size: 19px; margin: 26px 0 10px; color: var(--brand-text); }
.prose h3 { font-size: 16.5px; margin: 20px 0 8px; }
.prose p { margin: 10px 0; }
.prose ul, .prose ol { padding-left: 22px; margin: 10px 0; }
.prose li { margin: 5px 0; }
.prose code { background: var(--surface-3); padding: 1px 6px; border-radius: 5px; font-size: .92em; }
.prose blockquote { margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; }
.prose table { border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
.prose th, .prose td { border: 1px solid var(--border-strong); padding: 7px 12px; text-align: left; }
.prose th { background: var(--surface-2); }
.formula { display: block; text-align: center; font-size: 17px; padding: 10px; margin: 12px 0; background: var(--surface-2); border-radius: 10px; font-weight: 600; letter-spacing: .01em; }

.example { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.example + .example { margin-top: 14px; }
.example .q { padding: 14px 16px; background: var(--surface-2); font-weight: 500; white-space: pre-wrap; }
.example .a { padding: 14px 16px; white-space: pre-wrap; border-top: 1px solid var(--border); line-height: 1.65; }

/* -------------------------------------------------------------- questions */
.qcard { padding: 22px; }
.qnum { font-size: 12.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.qprompt { font-size: 17px; font-weight: 500; margin: 8px 0 16px; white-space: pre-wrap; line-height: 1.6; }
.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 52px; border: 1.5px solid var(--border-strong); border-radius: 12px; cursor: pointer; background: var(--surface); text-align: left; width: 100%; font-size: 15px; }
@media (hover: hover) { .opt:hover { border-color: var(--brand-text); } }
.opt .letter { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.opt.sel { border-color: var(--brand-text); background: var(--brand-softer); }
.opt.sel .letter { background: var(--brand); color: var(--on-brand); }
.opt.right { border-color: var(--good); background: var(--good-soft); }
.opt.right .letter { background: var(--good); color: #fff; }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.wrong .letter { background: var(--bad); color: #fff; }
.opt:disabled { cursor: default; }
.feedback { margin-top: 14px; padding: 12px 14px; border-radius: 10px; display: flex; gap: 10px; align-items: flex-start; }
.feedback.good { background: var(--good-soft); color: var(--text); }
.feedback.bad { background: var(--bad-soft); color: var(--text); }
.feedback.info { background: var(--surface-2); }
.feedback .i { margin-top: 2px; }
.feedback.good .i { color: var(--good-text); } .feedback.bad .i { color: var(--bad-text); }

/* ------------------------------------------------------------------ exam room */
.exam-room { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.exam-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.exam-top .logo { width: 38px; height: 38px; }
.timer { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 6px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.timer.warn { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn); }
.timer.crit { background: var(--bad-soft); color: var(--bad-text); border-color: var(--bad); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .65; } }
.exam-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; padding: 22px 24px; max-width: 1240px; width: 100%; margin: 0 auto; }
.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.palette button { aspect-ratio: 1; border-radius: 10px; border: 1.5px solid var(--border-strong); background: var(--surface); font-weight: 700; cursor: pointer; position: relative; font-size: 14px; color: var(--text-2); }
.palette button.ans { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.palette button.cur { outline: 3px solid var(--accent); outline-offset: 1px; }
.palette button.flag::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 99px; background: var(--serious); border: 2px solid var(--surface); }
.exam-cover { max-width: 760px; margin: 40px auto; padding: 0 20px; }
.rules li { margin: 8px 0; }

/* result */
.score-hero { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.grade-badge { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; font-size: 38px; font-weight: 800; background: var(--brand); color: var(--on-brand); flex: none; }
.concepts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.concept { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.concept:last-child { border-bottom: 0; }

/* ----------------------------------------------------------------- topic list */
.topic-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border); color: inherit; }
.topic-row:last-child { border-bottom: 0; }
@media (hover: hover) { a.topic-row:hover { background: var(--surface-2); text-decoration: none; } }
.topic-num { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; background: var(--surface-3); color: var(--text-2); }
.topic-num.done { background: var(--good); color: #fff; }
.topic-num.prog { background: var(--warn-soft); color: var(--warn-text); }
.topic-num.lock { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--text-3); }

.toggle { position: relative; width: 46px; height: 26px; flex: none; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle span { position: absolute; inset: 0; background: var(--border-strong); border-radius: 99px; cursor: pointer; transition: background .2s; }
.toggle span::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.toggle input:checked + span { background: var(--brand); }
.toggle input:checked + span::before { transform: translateX(20px); }
.toggle input:focus-visible + span { outline: 2px solid var(--brand-text); outline-offset: 2px; }

/* ------------------------------------------------------------------- login */
.login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; }
.login-brand { background: linear-gradient(150deg, var(--brand) 0%, var(--brand-strong) 100%); color: var(--on-brand); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-brand::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -180px; bottom: -200px; background: var(--accent); opacity: .16; }
.login-brand::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: 120px; bottom: 140px; border: 2px solid currentColor; opacity: .12; }
.login-brand .logo { width: 96px; height: 96px; }
.login-brand h1 { font-size: 38px; font-weight: 800; margin-top: 22px; letter-spacing: -.02em; }
.login-brand .motto { font-size: 17px; opacity: .88; margin-top: 8px; }
.login-brand ul { list-style: none; padding: 0; margin: 28px 0 0; position: relative; z-index: 1; }
.login-brand li { display: flex; gap: 12px; align-items: center; margin: 12px 0; opacity: .95; }
.login-brand li .i { color: var(--accent); }
/* the set-up page (js/setup.js): a page of its own, before any school is on this device */
.setup-page { min-height: 100vh; background: var(--bg); color: var(--text); display: flex; flex-direction: column; }
.setup-top { display: flex; align-items: center; gap: 12px; padding: 18px 28px; border-bottom: 1px solid var(--border); background: var(--surface); }
.setup-top .setup-mark { width: 36px; height: 36px; }
.setup-top b { display: block; font-size: 16px; }
.setup-top span { display: block; font-size: 12px; color: var(--text-3); }
.setup-main { flex: 1; padding: 32px 20px 48px; display: flex; flex-direction: column; align-items: center; }
.setup-card { width: 100%; max-width: 760px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 36px; }
.setup-card h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; }
.setup-card > p.muted, .setup-card form > p.muted { max-width: 640px; }
.setup-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0 0 26px; font-size: 13px; color: var(--text-3); }
.setup-steps li { display: flex; align-items: center; gap: 8px; }
.setup-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3, var(--bg)); font-weight: 700; font-size: 12px; }
.setup-steps li span .i { width: 14px; height: 14px; }
.setup-steps li.on { color: var(--text); font-weight: 600; }
.setup-steps li.on span { background: var(--brand); color: var(--on-brand); }
.setup-steps li.done span { background: var(--good-soft); color: var(--good-text); }
.setup-logo { display: flex; gap: 18px; align-items: center; }
.setup-logo .logo { width: 88px; height: 88px; flex: none; }
.setup-logo .logo img, .setup-logo .logo svg { width: 100%; height: 100%; object-fit: contain; }
.setup-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.setup-actions .btn .i:last-child:not(:first-child) { margin-left: 6px; margin-right: 0; }
.setup-links { margin-top: 18px; font-size: 14px; color: var(--text-2); text-align: center; }
.setup-links .sep { display: inline-block; width: 1px; height: 14px; background: var(--border-strong); margin: 0 12px; vertical-align: middle; }
.setup-links .link, .share-opt .link { background: none; border: 0; padding: 0; color: var(--brand-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.setup-connect { max-width: 520px; text-align: center; }
.setup-connect .logo { width: 104px; height: 104px; margin: 0 auto 14px; }
.setup-connect .logo img { width: 100%; height: 100%; object-fit: contain; }
.setup-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--brand); margin: 16px auto 0; animation: su-spin 1s linear infinite; }
.setup-spin.sm { width: 16px; height: 16px; border-width: 2px; margin: 0; flex: none; } /* inline, beside a progress line (js/backup.js) */
@keyframes su-spin { to { transform: rotate(360deg); } }
.setup-swatch-preview { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px; font-size: 13px; }
.setup-swatch-preview i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.share-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.share-opt { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.share-opt h3 { margin: 0; font-size: 15px; }
.share-opt p { flex: 1; margin: 0; }
.share-opt .btn { align-self: flex-start; }
.share-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-softer); color: var(--brand-text); }
@media (max-width: 640px) { .setup-card { padding: 22px 18px; } .setup-top { padding: 14px 16px; } }
.login-about { margin-top: 24px; max-width: 540px; }
.login-about h3 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .72; margin: 0 0 6px; }
.login-about p { margin: 0; font-size: 15px; line-height: 1.55; opacity: .95; }
.login-about ol { margin: 4px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.login-about li { display: list-item; margin: 4px 0; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--bg); }
.login-box { width: 100%; max-width: 440px; }
.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.role-card { border: 2px solid var(--border); background: var(--surface); border-radius: 16px; padding: 22px 18px; text-align: left; cursor: pointer; transition: border-color .15s, transform .1s; }
@media (hover: hover) { .role-card:hover { border-color: var(--brand-text); transform: translateY(-2px); } }
.role-card .ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); margin-bottom: 14px; }
.role-card .ico .i { width: 26px; height: 26px; }
.role-card b { display: block; font-size: 17px; }
.role-card span { font-size: 13px; color: var(--text-3); }
.who-list { max-height: 330px; overflow-y: auto; margin-top: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.who-list button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; min-height: 56px; }
.who-list button:last-child { border-bottom: 0; }
@media (hover: hover) { .who-list button:hover { background: var(--surface-2); } }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 22px 0; }
.pin-dots i { width: 16px; height: 16px; border-radius: 99px; border: 2px solid var(--border-strong); }
.pin-dots i.on { background: var(--brand); border-color: var(--brand); }
.pin-dots.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 0 auto; }
.keypad button { height: 60px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-size: 22px; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .keypad button:hover { background: var(--surface-2); } }
.keypad button.fn { font-size: 14px; color: var(--text-3); }

/* ------------------------------------------------------------------ modal */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(8, 12, 22, .52); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); border-radius: 18px; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: pop .18s; }
.modal.wide { max-width: 820px; }
.modal.full { max-width: 1200px; height: calc(100vh - 40px); }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 17px; font-weight: 700; }
.modal-head .sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-body.flush { padding: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 18px 18px; flex-wrap: wrap; }
.viewer { width: 100%; height: 100%; border: 0; display: block; background: var(--surface-2); }

/* ------------------------------------------------------------------ toast */
#toast-root { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { background: #111827; color: #fff; padding: 11px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow-lg); animation: pop .2s; max-width: 90vw; }
.toast .i { color: #6ee787; }
.toast.bad .i { color: #ff8a8a; }

#tip { position: fixed; z-index: 300; pointer-events: none; background: #111827; color: #fff; font-size: 12.5px; padding: 7px 10px; border-radius: 8px; max-width: 260px; opacity: 0; transition: opacity .1s; line-height: 1.4; }
#tip.on { opacity: 1; }

/* ------------------------------------------------------------ misc bits */
.pill-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pill-tabs button { border: 1px solid var(--border-strong); background: var(--surface); padding: 7px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--text-2); min-height: 38px; }
.pill-tabs button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.divider { height: 1px; background: var(--border); margin: 18px 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 14px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; font-weight: 500; }
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--brand-softer); border: 1px solid var(--brand-soft); font-size: 14px; }
.callout .i { color: var(--brand-text); margin-top: 1px; }
.callout.warn { background: var(--warn-soft); border-color: transparent; }
.callout.warn .i { color: var(--warn-text); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { border: 2px solid var(--border); border-radius: 12px; padding: 6px; cursor: pointer; background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-2); width: 92px; }
.swatch .pair { display: flex; width: 100%; height: 30px; border-radius: 8px; overflow: hidden; }
.swatch .pair i { flex: 1; }
.swatch.on { border-color: var(--brand-text); }
.preview-box { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.file-drop { border: 2px dashed var(--border-strong); border-radius: 14px; padding: 22px; text-align: center; color: var(--text-3); cursor: pointer; display: block; }
@media (hover: hover) { .file-drop:hover { border-color: var(--brand-text); color: var(--text-2); } }
.file-drop input { display: none; }
.editor-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.editor-split .textarea { min-height: 420px; }
.editor-split .preview { border: 1px solid var(--border); border-radius: 10px; padding: 6px 18px; max-height: 520px; overflow-y: auto; background: var(--surface); }
.q-edit { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--surface-2); }
.q-edit + .q-edit { margin-top: 12px; }


/* ------------------------------------------------------ student picker */
.picker { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.picker-top { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.picker-search { position: relative; flex: 1; min-width: 180px; }
.picker-search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.picker-search .input { padding-left: 36px; min-height: 40px; }
.picker-count { font-size: 13px; font-weight: 600; color: var(--brand-text); white-space: nowrap; }
.picker-levels { display: flex; gap: 6px; padding: 10px 10px 0; flex-wrap: wrap; }
.picker-levels button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-2); min-height: 34px; }
.picker-levels button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.picker-levels .n { opacity: .7; font-weight: 500; }
.picker-panels { max-height: 340px; overflow-y: auto; padding: 10px; display: grid; gap: 10px; }
.picker-panel { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.picker-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.picker-head .check { min-height: 32px; }
.picker-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 4px 12px; }
.picker-list .check { min-height: 42px; }
.picker-none { padding: 0 12px 12px; }
.select-other .input { display: block; }

/* ------------------------------------------------------ bell + alerts */
.bell { position: relative; }
.bell-n { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
#alert-root { position: fixed; top: 76px; right: 18px; z-index: 90; display: grid; gap: 10px; width: min(400px, calc(100vw - 32px)); }
.alert-pop { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--brand); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-lg); animation: slidein .25s; }
.alert-pop.good { border-left-color: var(--good); }
.alert-pop.going { opacity: 0; transform: translateX(24px); transition: opacity .3s, transform .3s; }
.alert-pop.bad { border-left-color: var(--bad); }
.alert-pop.serious { border-left-color: var(--serious); }
.alert-pop b { display: block; font-size: 14.5px; }
.alert-pop p { font-size: 13px; color: var(--text-2); margin-top: 4px; }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
/* more than three at once: one layered stack, the newest in front (js/alerts.js restack) */
.alert-stackbar { display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); font-size: 13px; animation: fade .2s; }
.alert-stackbar b { flex: 1; font-weight: 600; }
#alert-root.stacked:not(.open) { padding-bottom: 20px; }
#alert-root.stacked:not(.open) > .alert-pop { grid-area: 2 / 1; align-self: start; transform-origin: bottom center; transform: translateY(calc(var(--depth, 0) * 10px)) scale(calc(1 - var(--depth, 0) * .05)); transition: transform .25s, opacity .25s; }
#alert-root.stacked:not(.open) > .alert-pop:not(:last-child) { height: var(--front-h); overflow: hidden; pointer-events: none; box-shadow: var(--shadow); }
#alert-root.stacked:not(.open) > .alert-pop:not(:last-child) > * { visibility: hidden; }
#alert-root.stacked:not(.open) > .alert-pop.deep { opacity: 0; }
#alert-root.stacked.open { max-height: calc(100vh - 160px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
#alert-root.stacked.open > .alert-stackbar { position: sticky; top: 0; z-index: 1; }
.alert-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand-text); }
.alert-pop.good .alert-ico, .alert-ico.good { background: var(--good-soft); color: var(--good-text); }
.alert-pop.bad .alert-ico, .alert-ico.bad { background: var(--bad-soft); color: var(--bad-text); }
.alert-pop.serious .alert-ico, .alert-ico.serious { background: var(--serious-soft); color: var(--serious-text); }

/* ------------------------------------------------------------ timetable */
.lt { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap; line-height: 1.5; }
.lt .i { width: 13px; height: 13px; }
.lt-theory { background: var(--cat-1-soft); color: var(--cat-1-text); }
.lt-discussion { background: var(--cat-3-soft); color: var(--cat-3-text); }
.lt-practical { background: var(--cat-2-soft); color: var(--cat-2-text); }
.lt-mock-test { background: var(--cat-4-soft); color: var(--cat-4-text); }
.lt-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.lt-pick .lt { cursor: pointer; background: var(--surface); color: var(--text-3); border-color: var(--border-strong); padding: 5px 10px; min-height: 32px; font-size: 12.5px; }
.lt-pick .lt.on.lt-theory { background: var(--cat-1); color: #fff; border-color: var(--cat-1); }
.lt-pick .lt.on.lt-discussion { background: var(--cat-3); color: #fff; border-color: var(--cat-3); }
.lt-pick .lt.on.lt-practical { background: var(--cat-2); color: #fff; border-color: var(--cat-2); }
.lt-pick .lt.on.lt-mock-test { background: var(--cat-4); color: #fff; border-color: var(--cat-4); }
.lt-pick.big .lt { font-size: 14px; padding: 9px 14px; min-height: 42px; }
.tt-row { display: flex; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.tt-row:last-child { border-bottom: 0; }
.tt-row.past { opacity: .55; }
.tt-row.now { background: var(--accent-soft); }
.tt-time { width: 52px; flex: none; text-align: right; line-height: 1.2; }
.tt-time b { display: block; font-size: 14px; }
.tt-time span { font-size: 12px; color: var(--text-3); }
table.tt { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px; font-size: 13px; }
.tt th { font-size: 12px; color: var(--text-3); font-weight: 600; padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tt thead th span { font-weight: 500; }
.tt thead th.today { color: var(--brand-text); }
.tt tbody th { width: 92px; vertical-align: top; }
.tt tbody th b { display: block; font-size: 13px; color: var(--text); }
.tt tbody th span { display: block; font-weight: 500; }
.tt td { border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); padding: 5px; vertical-align: top; height: 62px; }
.tt td.today { background: var(--brand-softer); }
.tt td.now { box-shadow: inset 0 0 0 2px var(--accent); }
.tt-break th, .tt-break td { background: var(--surface-2); color: var(--text-3); height: auto; padding: 6px 8px; font-size: 12px; text-align: center; }
.tt-break th { text-align: left; }
.tt-lesson { border-radius: 8px; padding: 5px 7px; background: var(--surface); border: 1px solid var(--border); display: grid; gap: 2px; }
.tt-lesson + .tt-lesson { margin-top: 4px; }
.tt-lesson b { font-size: 12.5px; }
.tt-lesson span { font-size: 11.5px; color: var(--text-3); }
.tt-lesson.click { cursor: pointer; }
@media (hover: hover) { .tt-lesson.click:hover { border-color: var(--brand-text); } }
.tt-lesson .lt { justify-self: start; }
.tt-set { font-size: 11px !important; color: var(--brand-text) !important; font-weight: 600; }
.tt td.edit { cursor: pointer; }
@media (hover: hover) { .tt td.edit:hover { background: var(--brand-softer); } }
.tt-empty { display: grid; place-items: center; height: 100%; min-height: 48px; color: var(--text-3); opacity: .5; }

/* ------------------------------------------------------ terms & review */
.term-head { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }
.card-head + .term-head { border-top: 0; }
.review-card { border-left: 4px solid var(--warn); }
.flag-card { border-left: 4px solid var(--serious); }
.topic-row.locked { opacity: .7; }
.limit-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); border-radius: 2px; }
.bar { position: relative; }

/* ------------------------------------------------------ forms & sign-in */
.form-msg { display: flex; gap: 8px; align-items: center; color: var(--bad-text); background: var(--bad-soft); padding: 10px 12px; border-radius: 10px; font-size: 13.5px; margin-top: 12px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 48px; }
.pw-wrap .btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.login-box.shake, .confirm-box.shake { animation: shake .35s; }
.confirm-box { align-items: flex-start; padding: 14px; border: 2px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.confirm-box:has(input:checked) { border-color: var(--good); background: var(--good-soft); }
.confirm-box input { margin-top: 2px; }
.subject-panel .card-head { gap: 12px; }
.subject-dot { width: 10px; height: 36px; border-radius: 6px; background: linear-gradient(var(--brand), var(--accent)); flex: none; }
.style-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.style-card { border: 2px solid var(--border); border-radius: 12px; padding: 12px; cursor: pointer; display: grid; gap: 4px; }
.style-card.on { border-color: var(--brand-text); background: var(--brand-softer); }
.pw-cell { display: inline-flex; align-items: center; gap: 4px; }
code.pw-mask { background: var(--surface-3); padding: 2px 8px; border-radius: 6px; font-size: 13px; }
.bad-text { color: var(--bad-text); }
.media-wrap { height: 100%; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; padding: 16px; background: #000; }
.media-wrap:has(audio) { background: var(--surface-2); }
.big-ico { width: 64px; height: 64px; color: var(--text-3); }
.text-view { margin: 0; padding: 20px; white-space: pre-wrap; font-size: 14px; height: 100%; overflow: auto; }
@media (max-width: 720px) {
  .picker-list { grid-template-columns: 1fr; }
  .hide-sm { display: none !important; }
  #alert-root { top: auto; bottom: 84px; right: 16px; }
  /* phones: smaller pop-ups, two lines of text each (the whole text is in the notifications) */
  .alert-pop { padding: 10px 12px; gap: 10px; }
  .alert-pop p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .alert-ico { width: 32px; height: 32px; }
  #alert-root.stacked.open { max-height: calc(100vh - 220px); }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  :root { --side-w: 84px; }
  .side-brand { justify-content: center; padding: 16px 8px; }
  .side-brand .brand-text, .nav-section, .nav-item .nav-label, .nav-item.sub, .me .who { display: none; }
  .nav-item { justify-content: center; padding: 12px 0; }
  .nav-item .count { position: absolute; top: 3px; right: 6px; margin: 0; padding: 0 6px; font-size: 10.5px; }
  .me { justify-content: center; flex-direction: column; gap: 6px; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main { grid-template-columns: 1fr; }
  .exam-body { grid-template-columns: 1fr; }
  .exam-side { order: -1; }
  .palette { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
}
@media (max-width: 900px) {
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login { grid-template-columns: 1fr; }
  .login-brand { padding: 32px 28px; }
  .login-brand ul { display: none; }
  .login-brand h1 { font-size: 28px; }
  .login-brand .logo { width: 70px; height: 70px; }
  .editor-split { grid-template-columns: 1fr; }
  .concepts { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sidebar { display: none; }
  .mobile-brand { display: block; width: 34px; height: 34px; flex: none; }
  /* typing: 16 px text, or an iPhone zooms the page in when a box is tapped (and leaves it zoomed) */
  .input, .select, .textarea, input, select, textarea { font-size: 16px; }
  /* the top bar keeps the title, the connection and the bell; light/dark, full screen and sign out are under More */
  .top-actions [data-act="toggle-theme"], .top-actions .scr-ctl { display: none !important; }
  body { overflow-x: clip; }
  .list-row { flex-wrap: wrap; padding: 12px 16px; gap: 8px 12px; }
  .list-row > .grow { flex: 1 1 160px; min-width: 0; }
  .badge { white-space: normal; }
  /* a long label (a topic's name on Continue) wraps instead of widening the page */
  .btn { max-width: 100%; white-space: normal; }
  .row > .grow, .head > .grow { min-width: 0; }
  .card-head { flex-wrap: wrap; padding: 14px 16px; }
  .callout { flex-wrap: wrap; }
  .callout > div { flex: 1 1 200px; min-width: 0; }
  /* the dashboard's greeting: smaller, and its actions two to a row, the same size */
  .hero { padding: 18px 18px 16px; }
  .hero h2 { font-size: 21px; }
  .hero .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero .hero-actions .btn { justify-content: center; text-align: center; min-height: 44px; padding: 8px 10px; font-size: 13.5px; }
  /* number tiles two to a row, the icon above the number */
  .grid:has(> .stat) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .stat .ico { width: 34px; height: 34px; border-radius: 10px; }
  .stat .val { font-size: 21px; }
  .stat .lbl { font-size: 12.5px; }
  .topbar { padding: max(12px, env(safe-area-inset-top)) 16px 12px; }
  .page-title { font-size: 17px; }
  .content { padding: 16px 16px 96px; }
  .g-2, .g-3, .g-4, .form-grid { grid-template-columns: 1fr; }
  .status-chip .txt { display: none; }
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: var(--surface);
    border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav a, .bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--text-3); padding: 6px 0; position: relative; background: none; border: 0; cursor: pointer; min-width: 0; }
  .bottom-nav a.active, .bottom-nav button.active { color: var(--brand-text); }
  .bottom-nav .count { position: absolute; top: 0; left: 55%; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 99px; }
  .bottom-nav a:hover { text-decoration: none; }
  .hbar { grid-template-columns: 1fr 44px; }
  .hbar .name { grid-column: 1 / -1; }
  .exam-top { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .exam-body { padding: 14px; }
  .timer { font-size: 18px; }
  .role-cards { grid-template-columns: 1fr; }
  .modal-back { padding: 0; align-items: flex-end; }
  .modal { border-radius: 18px 18px 0 0; max-height: 94vh; }
  .modal.full { height: 94vh; }
}
/* Touch screens behave like an app, not a web page:
   - a strip that scrolls sideways (Settings' sections, tabs, a wide table) scrolls only sideways: its contents
     overhang it by a pixel, which made it slide up and down too, and at its ends it doesn't pull the page along
   - text keeps its size when a phone turns on its side (iPhone enlarges it otherwise)
   - a quick double tap on a button doesn't zoom the page */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.tabs, .qs-nav, .tutor-list { overflow-y: hidden; overscroll-behavior-x: contain; }
.table-wrap { overscroll-behavior-x: contain; }
/* touch screens: the browser moves the page up and down; a table or strip slides sideways by js/ui.js (UI.swipeLock) */
@media (pointer: coarse) { .table-wrap, .tabs, .pill-tabs { touch-action: pan-y; } }
/* a pop-up open: only it scrolls (js/ui.js pins the page behind it) */
html.modal-open { overflow: hidden; }
.modal-back, .modal-body { overscroll-behavior: contain; }
.table-wrap:not(.boxed) { overflow-y: hidden; }
a, button, .btn, input, select, textarea, label, [data-act] { touch-action: manipulation; }
/* phones on their side (a short screen): the sidebar keeps its height for the pages; the person and Sign out
   leave its foot, and Sign out sits in the top bar instead */
@media (max-height: 500px) and (orientation: landscape) {
  .sidebar .side-foot { display: none; }
  .top-actions .mobile-only-signout { display: inline-flex; }
  .side-brand { padding: 8px; }
  .side-brand .logo, .side-brand img, .side-brand svg { width: 34px; height: 34px; }
  .nav { padding-top: 2px; }
  .nav-item { padding-top: 8px; padding-bottom: 8px; min-height: 0; }
}

/* More (phones): every page in a sheet */
.more-me { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.more-links { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.more-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 8px; border-radius: 10px; color: var(--text); font-weight: 600; }
@media (hover: hover) { .more-link:hover { background: var(--surface-2); text-decoration: none; } }
.more-link.active { background: var(--brand-softer); color: var(--brand-text); }
.more-link svg { width: 20px; height: 20px; flex: none; color: var(--text-3); }
.more-link.active svg { color: var(--brand-text); }
.more-link.sub { min-height: 40px; padding-left: 40px; font-size: 14px; font-weight: 500; }
.more-link .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--text-3); flex: none; margin-left: -20px; margin-right: 8px; }
.more-link .count { background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
.more-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.more-acts .btn { flex: 1 1 140px; justify-content: center; }
@media print {
  .sidebar, .topbar, .bottom-nav, .btn { display: none !important; }
  .content { padding: 0; }
}

/* subjects: picking them (registration, Add subjects), their groups, and approvals */
.subj-picker { display: grid; gap: 12px; }
.subj-group { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px 10px; margin: 0; min-width: 0; }
.subj-group legend { font-weight: 700; font-size: 13px; color: var(--text-2); display: inline-flex; gap: 6px; align-items: center; padding: 0 4px; text-transform: uppercase; letter-spacing: .05em; }
.subj-pick { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 8px; cursor: pointer; }
@media (hover: hover) { .subj-pick:hover { background: var(--surface-2); } }
.subj-pick input { width: 18px; height: 18px; flex: none; accent-color: var(--brand); }
.group-title { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.role-cards.one { grid-template-columns: 1fr; }
.steps { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

/* library: kinds of material and tags */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--text-2); border: 1px solid transparent; text-decoration: none; margin-left: 6px; }
.tag.on { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-text); }
@media (hover: hover) { a.tag:hover, .tag-btn:hover { border-color: var(--border-strong); } }
.tag-btn { cursor: pointer; margin: 4px 4px 0 0; }
.tag-ideas { display: flex; flex-wrap: wrap; }
.lib-filters { justify-content: space-between; gap: 10px; margin-top: 4px; }
.lib-tags { gap: 4px; margin: 6px 0 4px -6px; }
.pill-tabs.sm button { font-size: 13px; padding: 5px 11px; }
.section-title h2 > .i { margin-right: 8px; vertical-align: -2px; color: var(--text-3); }

/* My classes: grouped, searchable rows */
details.class-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
details.class-group > summary::-webkit-details-marker { display: none; }
details.class-group > summary::after { content: "▸"; margin-left: auto; color: var(--text-3); }
details.class-group[open] > summary::after { content: "▾"; }
.class-row .class-cov { width: 190px; flex: none; }

/* A subject the student asked to drop: greyed out until its teacher answers (its buttons stay clear) */
.list-row.is-greyed > :not(.btn):not(.badge),
.card.is-greyed .card-body > :not(.grow), .card.is-greyed .card-body > .grow > :not(.badge.warn) { opacity: .55; filter: grayscale(1); }

/* Syllabus library: a panel per exam board, and inside it one per level (IGCSE, AS & A Level…) */
details.syl-board > summary, details.syl-level > summary { cursor: pointer; list-style: none; }
details.syl-board > summary::-webkit-details-marker, details.syl-level > summary::-webkit-details-marker { display: none; }
details.syl-board > summary::after, details.syl-level > summary::after { content: "▸"; margin-left: auto; color: var(--text-3); }
details.syl-board[open] > summary::after, details.syl-level[open] > summary::after { content: "▾"; }
details.syl-board:not([open]) > summary { border-bottom: 0; }
details.syl-board > summary > .i { color: var(--brand); }
.syl-levels { display: grid; gap: 14px; padding: 16px 20px 20px; }
details.syl-level { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
details.syl-level > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
details.syl-level > summary h4 { font-size: 15px; font-weight: 650; }
details.syl-level > summary .sub { font-size: 12.5px; color: var(--text-3); }
details.syl-level > summary > .i { color: var(--text-3); }
details.syl-level > .grid { padding: 0 16px 16px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
@media (max-width: 720px) {
  .syl-levels { padding: 12px; }
  details.syl-level > summary { padding: 10px 12px; }
  details.syl-level > .grid { padding: 0 10px 10px; }
}

/* Learning materials: sections, subject groups and a search */
details.mat-group:not([open]) > summary { border-bottom: 0; }
.mat-session { padding: 10px 20px 4px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; font-size: 11.5px; }
.mat-tabs button { display: inline-flex; align-items: center; gap: 7px; }
.mat-filters { gap: 10px; }
.mat-filters .input { flex: 1 1 280px; max-width: 480px; }
.mat-filters .select { flex: 1 1 200px; max-width: 300px; }
.mat-tabs button .muted { font-weight: 500; }
.mat-tabs button.on .muted { color: inherit; opacity: .75; }

/* the tutor: a topic's path (read, flashcards, quick check, topic test) */
.tutor { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.tutor-steps { position: sticky; top: 12px; padding: 14px; }
.tutor-prog { display: grid; gap: 6px; margin-bottom: 10px; }
.tutor-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 70vh; overflow-y: auto; }
.tutor-step { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 8px; border-radius: 9px; border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--text); }
@media (hover: hover) { .tutor-step:hover { background: var(--surface-2); } }
.tutor-step.on { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.tutor-dot { width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-3); color: var(--text-2); flex: none; }
.tutor-step.done .tutor-dot { background: var(--good); color: #fff; }
.tutor-main { min-height: 320px; }
.tutor-title { font-size: 22px; margin-top: 4px; }
/* a topic's pages of a document, whole, in the PDF viewer */
.tutor-pages { height: min(78vh, 980px); min-height: 360px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.tutor-pages > .pdf-msg { padding: 24px; }
.tutor-points summary { cursor: pointer; display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.tutor-points ul { margin: 6px 0 0 18px; display: grid; gap: 6px; line-height: 1.55; }
.flash { display: grid; gap: 14px; place-items: center; text-align: center; width: 100%; min-height: 220px; padding: 28px 22px; border-radius: 18px; border: 1.5px solid var(--border-strong); background: var(--surface); cursor: pointer; box-shadow: var(--shadow-sm); color: var(--text); }
@media (hover: hover) { .flash:hover { border-color: var(--brand-text); } }
.flash-front { font-size: 22px; font-weight: 700; line-height: 1.35; }
.flash.flipped .flash-front { font-size: 16px; color: var(--text-2); }
.flash-back { font-size: 18px; line-height: 1.5; max-width: 640px; }
.flash-rate { justify-content: center; gap: 10px; }
.tutor-q { padding: 12px 0; border-top: 1px solid var(--border); }

/* what the syllabus says to study in a topic */
.outline { display: grid; gap: 6px; margin-top: 12px; }
.outline-part { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.outline-part > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; font-weight: 600; }
.outline-part > summary::-webkit-details-marker { display: none; }
.outline-n { color: var(--brand-text); min-width: 2.2em; font-weight: 700; }
.outline-part ul { margin: 0; padding: 0 16px 12px 44px; display: grid; gap: 6px; line-height: 1.55; font-size: 14.5px; }
.outline-part li.sup { color: var(--text-2); }
.outline-part li.subpt { margin-left: 20px; list-style: circle; }
.outline-part li.sup .badge { font-size: 11px; padding: 1px 6px; vertical-align: 1px; }

/* Tutor content: every topic of a subject and the pages the tutor shows for it */
.tutor-admin-head { gap: 10px; }
.tutor-admin-head .select { flex: 1 1 260px; max-width: 420px; }
.tutor-topic { align-items: flex-start; }
.tutor-num { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--brand-soft); color: var(--brand-text); }
.tutor-topic .meta { flex-wrap: wrap; row-gap: 6px; }
.chip-doc { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.chip-doc .i { width: 13px; height: 13px; }
.tutor-topic-btns { gap: 6px; flex: none; }
.tutor-outline > summary { cursor: pointer; color: var(--brand-text); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.tp-list { display: grid; gap: 2px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.tp-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 14px; }
.tp-row .input { width: 150px; flex: none; }
.input.invalid { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft, rgba(220, 38, 38, .15)); }
.tp-preview { height: 60vh; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
@media (max-width: 640px) {
  .tutor-topic { flex-wrap: wrap; }
  .tutor-topic-btns { width: 100%; padding-left: 40px; }
  .tp-row .input { width: 110px; }
}
@media (max-width: 900px) {
  .tutor { grid-template-columns: 1fr; }
  .tutor-steps { position: static; }
  .tutor-list { display: flex; overflow-x: auto; max-height: none; }
  .tutor-list li { flex: none; }
}

/* desktop app: a new version has been downloaded (js/updates.js) */
#update-bar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px;
  width: min(720px, calc(100vw - 32px)); padding: 12px 14px 12px 16px; border-radius: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
#update-bar > .i { color: var(--brand-text); flex: none; }
@media (max-width: 560px) { #update-bar { flex-wrap: wrap; } #update-bar .grow { flex-basis: calc(100% - 40px); } }

/* sign-in: whoever used this device last (js/staff.js) */
.last-user { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.last-user-go { flex: 1; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; }
@media (hover: hover) { .last-user-go:hover { border-color: var(--brand-text); } }
.last-user-go .grow { display: grid; gap: 1px; }
.last-user-go b { font-size: 15.5px; }
/* staff sign-up codes */
.code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); }
.code-row .label { width: 80px; margin: 0; }
.staff-code { font-size: 17px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); }

/* Syllabus library → Ready-made syllabuses */
.rm-group { margin-bottom: 16px; }
.rm-group h4 { font-size: 15px; }
.rm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-top: 8px; }
.rm-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.rm-item .grow { display: grid; gap: 2px; min-width: 0; }
.rm-item.have { opacity: .6; cursor: default; }

/* long lists scroll inside their own section (A.boxLists), headings stay on top */
.boxed { max-height: min(68vh, 680px); overflow-y: auto; overscroll-behavior: contain; }
.card.boxed > .card-head, details.boxed > summary { position: sticky; top: 0; z-index: 3; background: var(--surface); }
.table-wrap.boxed thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); }
.subj-picker.boxed { max-height: min(46vh, 440px); padding-right: 6px; }
.grid.g-auto.boxed { max-height: min(70vh, 760px); padding: 2px 6px 2px 2px; }
.who-list.boxed { max-height: min(52vh, 480px); }
/* sign-in: only the right-hand panel scrolls when its content is long (wide screens) */
@media (min-width: 901px) {
  .login { height: 100vh; height: 100dvh; min-height: 0; }
  .login-panel { overflow-y: auto; align-items: flex-start; }
  .login-box { margin: auto 0; }
}

/* topics: which term each is taught in */
.term-pick { width: auto; padding-top: 2px; padding-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--brand-text); background-color: var(--brand-soft); border-color: transparent; }
.term-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.term-col { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; }
.term-col ol { margin: 6px 0 0 18px; padding: 0; font-size: 13.5px; display: grid; gap: 3px; max-height: 50vh; overflow-y: auto; }

/* subject picker: a panel for each level (IGCSE, AS & A Level…), subjects in their groups */
.subj-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; position: sticky; top: 0; z-index: 2; background: var(--surface); padding-bottom: 4px; }
.subj-level { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; min-height: 44px; }
.subj-level .lv { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14.5px; }
.subj-level .ct { font-size: 12.5px; color: var(--text-2); }
.subj-level .ticked { font-weight: 700; color: var(--brand-text); }
@media (hover: hover) { .subj-level:hover { border-color: var(--brand); } }
.subj-level.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.subj-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.subj-group legend .n { color: var(--text-3); font-weight: 600; letter-spacing: 0; }
.subj-pick .grow { min-width: 0; font-weight: 600; }
.subj-pick .code { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.subj-pick:has(input:checked) { background: var(--brand-soft); }
.subj-picker.boxed { max-height: min(60vh, 560px); }
/* "My subjects | All subjects" on staff pages */
.scope-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 14px; }
.scope-bar .pill-tabs { margin: 0; }

/* ===================== School Assist Teacher (js/primary.js) ===================== */
.pquick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pquick-btn { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; min-height: 56px; }
@media (hover: hover) { .pquick-btn:hover { border-color: var(--brand); background: var(--brand-soft); } }
.pquick-btn .i { width: 22px; height: 22px; color: var(--brand); flex: none; }
.pclass-pick { width: auto; min-width: 170px; }
.preg-list .list-row { gap: 10px; }
/* mark entry: one row per pupil, the mark box on the right */
.pas-grid { display: grid; }
.pas-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--border); cursor: text; }
.pas-row:last-child { border-bottom: 0; }
.pas-row:focus-within { background: var(--brand-soft); }
.pas-in { width: 96px; text-align: right; font-size: 17px; }
.pas-in.bad { border-color: var(--bad); background: var(--bad-soft); }
.pas-pct { width: 44px; text-align: right; }
.pmb-grid th, .pmb-grid td { white-space: nowrap; }
.pcomment-bank { gap: 6px; }
.pcomment-bank .btn { white-space: normal; text-align: left; border: 1px dashed var(--border-strong); }
/* schemes of work: an editable table */
.psch td { vertical-align: top; min-width: 140px; }
.psch td:first-child, .psch td:nth-child(6), .psch td:last-child { min-width: 0; }
.psch textarea { width: 100%; min-height: 54px; resize: vertical; font-size: 13.5px; }
/* printing (UI.printSheet): the pages on the screen first, as they will print, until Close; then only they print */
#print-root { display: none; }
#print-root.open { display: block; position: fixed; inset: 0; z-index: 2000; overflow: auto; background: var(--surface-2); }
#print-root .print-bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--surface); border-bottom: 1px solid var(--border); }
#print-root .print-pages { padding: 16px 12px; }
#print-root .print-pages > section, #print-root .print-pages > .tt-print { background: #fff; color: #111; margin: 0 auto 16px; box-shadow: 0 2px 14px rgba(0, 0, 0, .18); }
#print-root .print-pages > .preport { width: 182mm; padding: 8mm; box-sizing: content-box; }
@media print {
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; position: static; overflow: visible; background: none; }
  #print-root .print-bar { display: none !important; }
  #print-root .print-pages { zoom: 1 !important; padding: 0; }
  #print-root .print-pages > section, #print-root .print-pages > .tt-print { box-shadow: none; margin: 0; }
  #print-root .print-pages > .preport { width: auto; padding: 0; }
  @page { size: A4; margin: 14mm; }
}
.preport { color: #111; background: #fff; font-size: 11pt; page-break-after: always; break-after: page; }
.preport:last-child { page-break-after: auto; break-after: auto; }
.preport-head { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid #1d4e89; padding-bottom: 8px; margin-bottom: 10px; }
.preport-head .logo { width: 54px; height: 54px; flex: none; }
.preport-head .logo svg, .preport-head .logo img { width: 100%; height: 100%; object-fit: contain; }
.preport-head h1 { font-size: 18pt; margin: 0; }
.preport-head p { margin: 2px 0 0; color: #444; }
.preport-term { text-align: right; display: grid; }
.preport-sign img { display: block; max-height: 60px; max-width: 260px; margin-top: 6px; }
.psig-show { margin-top: 8px; min-height: 64px; display: flex; align-items: center; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: 10px; background: #fff; max-width: 360px; }
.psig-show img { max-height: 80px; max-width: 100%; }
.badge.chip-btn { cursor: pointer; border: 0; font: inherit; font-size: 12px; }
@media (hover: hover) { .badge.chip-btn:hover { outline: 1px solid var(--brand-text); } }
.preport-term b { font-size: 13pt; }
.preport table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.preport th, .preport td { border: 1px solid #999; padding: 5px 8px; text-align: left; vertical-align: top; }
.preport-who th { background: #eef2f7; width: 18%; }
.preport-marks thead th { background: #eef2f7; }
.preport .num { text-align: right; }
.preport-comment { border: 1px solid #999; padding: 8px 10px; margin: 8px 0; min-height: 70px; }
.preport-comment p { margin: 4px 0 10px; min-height: 2.6em; }
.preport-comment span { color: #444; font-size: 9.5pt; }
.preport-foot { margin-top: 8px; font-size: 9pt; color: #444; }
.pscheme { font-size: 9.5pt; }
/* report cards (js/reportcards.js): the end-of-term columns and bar, and the A4 preview */
.rm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.rm-bar > b { display: inline-flex; align-items: center; gap: 6px; }
.table th.rm-col, .table td.rm-col { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.rm-comment { min-width: 150px; }
.rc-preview { overflow: auto; max-height: 72vh; background: var(--surface-2); padding: 12px; border-radius: 10px; }
.rc-scale-box { width: calc(210mm * var(--rc-s, .7)); height: calc(297mm * var(--rc-s, .7)); margin: 0 auto; }
.rc-scale-box .rc { transform: scale(var(--rc-s, .7)); transform-origin: top left; box-shadow: 0 2px 14px rgba(0, 0, 0, .18); }
@media (pointer: coarse) { .rc-preview { touch-action: pan-y; } } /* zoomed: sideways by UI.swipeLock, one way per swipe */

/* 1.6: the code a device shows while it waits for an admin to let it join the hub */
.join-code { font: 700 30px/1.2 var(--font-mono, ui-monospace, Consolas, monospace); letter-spacing: .12em; margin: 10px 0 6px; color: var(--text); }
.join-code.sm { font-size: 15px; letter-spacing: .08em; margin: 0 6px 0 0; padding: 2px 8px; border-radius: 6px; background: var(--surface-2, rgba(0,0,0,.06)); display: inline-block; }

/* School Assist Teacher: the term's topics, ticked when taught (js/primary.js Schemes & records) */
.psch-topic.done .title { color: var(--text-3); }
.psch-topic .meta { color: var(--text-3); font-size: 12.5px; }
/* vacation mode (js/vacation.js): on every page while it is on */
.vac-bar { align-items: center; background: var(--warn-soft); color: var(--warn-text); }
.vac-bar .btn { flex-shrink: 0; }
@media (max-width: 720px) { .vac-bar { flex-wrap: wrap; } .vac-bar .btn { width: 100%; justify-content: center; } }
/* Settings → Devices: Let it in and Decline side by side, on a phone too */
.join-btns { flex-wrap: nowrap; gap: 8px; }
@media (max-width: 720px) { .join-btns { width: 100%; } .join-btns .btn { flex: 1; justify-content: center; } }
/* another window of the app is the one in use (js/app.js oneWindow) */
.paused-window { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); }
.paused-window .card { max-width: 440px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.paused-window .card > svg.i { width: 34px; height: 34px; color: var(--brand-text); }
/* School Assist Teacher timetable (js/primary.js): the wide grid, or on a phone the same lessons day by day */
.tt-list { display: none; }
@media (max-width: 720px) { .tt-wide { display: none; } .tt-list { display: block; } }
.tt-day h4 { padding: 14px 20px 4px; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.tt-day + .tt-day { border-top: 1px solid var(--border); }
.tt-day .tt-row { padding: 10px 20px; }
.pill-tabs.sub { margin-top: -4px; }
.pill-tabs.sub button .i { width: 14px; height: 14px; }

/* touch screens (js-free): hover colours above are for a mouse only; where a finger presses, a brief pressed colour */
@media (hover: none) {
  .btn:active, .btn-ghost:active { background: var(--surface-3); }
  a.list-row:active, .list-row.click:active, .more-link:active, a.topic-row:active, .who-list button:active, .subj-pick:active, .tutor-step:active, .table tr.click:active td { background: var(--surface-2); }
  .nav-item:active, .side-btn:active { background: var(--side-hover); }
  .pquick-btn:active { border-color: var(--brand); background: var(--brand-soft); }
}
/* phones: Back is the arrow alone, in the logo's place (the logo shows on the home page) */
@media (max-width: 720px) {
  .topbar.has-back .mobile-brand { display: none; }
  .top-back-label { display: none; }
  .top-back { padding: 8px; margin-left: -8px; }
}
/* where you are (2026-10-23): plain to see. The sidebar's page: a stronger band, bold, a thick bar at its edge and
   its icon in the school's accent; the phone's bottom bar: a bar above the page's icon, the icon in a pill, bold */
.nav-item.active { font-weight: 700; box-shadow: inset 0 0 0 1px var(--side-hover); }
.nav-item.active::before { top: 6px; bottom: 6px; width: 6px; }
.nav-item.active svg.i { color: var(--accent); }
.tabs a.on { border-bottom-width: 3px; font-weight: 700; }
.more-link.active { font-weight: 700; box-shadow: inset 4px 0 0 var(--brand); }
@media (max-width: 720px) {
  .bottom-nav a, .bottom-nav button { position: relative; }
  .bottom-nav a.active, .bottom-nav button.active { font-weight: 800; }
  .bottom-nav a.active::before, .bottom-nav button.active::before { content: ""; position: absolute; top: -7px; left: 24%; right: 24%; height: 4px; border-radius: 0 0 4px 4px; background: var(--brand); }
  .bottom-nav a.active svg.i, .bottom-nav button.active svg.i { background: var(--brand-soft); border-radius: 99px; padding: 2px 12px; box-sizing: content-box; }
}

/* School Assist Teacher's timetable (1.6.2), the way the school writes it: the days down the side, the periods across
   (I, II, III… with their times), a break or lunch one column down the week, a lesson that runs on one cell */
.tt-days thead th { text-align: center; vertical-align: bottom; padding: 8px 6px; }
/* every period the same width; the days and the breaks as narrow as they need */
table.tt-days { table-layout: fixed; }
.tt-days thead th.tt-corner { width: 108px; }
.tt-days thead th b { display: block; font-size: 14px; color: var(--text); }
.tt-days thead th span { display: block; font-size: 11.5px; }
.tt-days thead th.tt-corner { text-align: left; white-space: nowrap; }
.tt-days thead th.tt-brk-h { width: 46px; padding: 8px 2px; }
.tt-days tbody th { width: auto; vertical-align: middle; white-space: nowrap; padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--text); }
.tt-days td { height: var(--tt-row); text-align: center; vertical-align: middle; }
.tt-days .tt-lesson { border: 0; background: transparent; padding: 2px 4px; justify-items: center; text-align: center; }
.tt-days td.long { background: var(--surface-2); }
table.tt-days { min-width: 880px; }
/* the boxes keep their size and the words fit them (UI.fitText, 2026-10-26): a row is as tall as the screen allows, a
   little taller on a big screen, and a long subject or name gets smaller instead of stretching the row */
.tt-days { --tt-row: clamp(52px, 1.8vw + 32px, 78px); }
.tt-days .tt-box { height: var(--tt-row); box-sizing: border-box; padding: .25em .3em; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; font-size: 13px; }
.tt-days .tt-box .tt-lesson b { font-size: 1em; }
.tt-days .tt-box .tt-lesson span { font-size: .86em; }
.tt-days .tt-box .tt-empty { min-height: 0; }
/* the spaces around and between lessons shrink with their words, so three lessons in one period still fit */
.tt-days .tt-box .tt-lesson { padding: .12em .3em; gap: 0; }
.tt-days .tt-box .tt-lesson + .tt-lesson { margin-top: .2em; }
.tt-days .tt-box.fit-min { overflow-wrap: anywhere; }
.tt-days td.tt-brk .tt-brk-label { display: block; margin: 0 auto; overflow: hidden; }
.tt-days col.tt-daycol { width: 104px; }
.tt-days td.tt-cell { padding: 0; overflow: hidden; }
.tt-days .tt-when { display: block; font-size: .8em; color: var(--text-3); margin-top: 2px; }
.tt-days td.tt-brk { width: 46px; padding: 0; background: var(--surface-2); text-align: center; vertical-align: middle; border-bottom: 1px solid var(--border); }
.tt-days td.tt-brk span { writing-mode: vertical-lr; text-orientation: upright; letter-spacing: .22em; font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--text-2); }
.tt-days tr.today th { color: var(--brand-text); }
.tt-days tr.today td.tt-cell { background: var(--brand-softer); }
.tt-days td.edit .tt-lesson { background: var(--surface); border: 1px solid var(--border); }

/* the app for every school (1.7): join a school or set one up; the school's invite */
.setup-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; text-align: left; }
.setup-choose h2 { font-size: 17px; gap: 8px; }
.invite-qr { width: 168px; height: 168px; flex: none; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.invite-qr svg { width: 100%; height: 100%; display: block; }

/* My subjects and the syllabus tracker (js/tracker.js) */
a.trk-card { display: block; color: inherit; text-decoration: none; }
@media (hover: hover) { a.trk-card:hover { border-color: var(--brand-text); } }
.trk-card .bar { margin-top: 6px; }
.trk-row { align-items: center; }
.trk-row .trk-tick { min-height: 0; flex: none; }
.trk-row .trk-tick input { width: 22px; height: 22px; }
.trk-row.done .title { color: var(--text-2); }
.trk-row .trk-term { width: auto; flex: none; }
.ov-table td { vertical-align: middle; }
.ov-table .pct-cell { min-width: 120px; }
@media (max-width: 720px) { .trk-row .trk-term { margin-left: 34px; } }

/* Typing on a touch screen (a phone, also turned sideways, or a tablet): 16 px text in every box, the small ones too
   (the end-of-term marks and comments, the term and class lists), or an iPhone or iPad zooms in when one is tapped and
   stays zoomed in. Last in the file, so it wins over .input.sm. */
@media (pointer: coarse), (max-width: 720px) {
  .input, .select, .textarea, input, select, textarea, .input.sm, .select.sm, .table input.cell { font-size: 16px; }
}