/* ==========================================================================
   ClassPuente style.css
   Direction A "Paper & Ink" (approved 2026-11-01). Sections:
   1 Fonts  2 Tokens  3 Base  4 Marketing  5 Teacher app  6 Components (forms, alerts, auth, tables)
   No inline styles anywhere: every page uses these classes.
   ========================================================================== */

/* 1. Fonts */
/* Self-hosted variable fonts. Spanish (á é í ó ú ü ñ ¿ ¡) is covered by the latin file. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/lexend-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/lexend-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/fraunces-latin-ext-full-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens and Direction A signatures */
/* ==========================================================================
   Direction A: "Paper & Ink"
   Editorial and warm. A well-made school book: cream paper, deep teal ink,
   marigold highlights, a soft serif for headlines, hairline rules, arches.
   ========================================================================== */
:root {
  /* Surfaces */
  --c-bg: #FBF8F2;
  --c-bg-2: #F3EDE2;
  --c-surface: #FFFFFF;
  --c-surface-2: #FCFAF5;
  --c-line: #EAE2D3;
  --c-line-strong: #D8CCB6;

  /* Text */
  --c-ink: #17201F;
  --c-ink-2: #4B4A44;
  --c-muted: #77705F;
  --c-heading: #0C302E;

  /* Brand */
  --c-primary: #0F6B66;
  --c-primary-strong: #0A4F4B;
  --c-primary-ink: #0C3B38;
  --c-primary-soft: #D9EDE8;
  --c-primary-softer: #EDF6F3;
  --c-on-primary: #FFFFFF;
  --c-accent: #F2A51A;
  --c-accent-hover: #E39410;
  --c-accent-strong: #9A5900;
  --c-accent-soft: #FBE8C0;
  --c-accent-softer: #FDF5E3;
  --c-on-accent: #2A1A00;
  --c-wordmark-accent: #E0920C;

  /* Deep sections */
  --c-deep: #0B2D2B;
  --c-deep-2: #113A37;
  --c-on-deep: #F4EFE4;
  --c-on-deep-2: #A8C3BE;

  /* Focus */
  --c-focus: #E39410;
  --c-ring-soft: rgba(15, 107, 102, .16);

  /* Status */
  --c-done: #1D7A4C;       --c-done-soft: #DEF1E5;
  --c-late: #9C5D00;       --c-late-soft: #FCEDCF;
  --c-missing: #B02A21;    --c-missing-soft: #FAE2DE;
  --c-progress: #1C6798;   --c-progress-soft: #DFEDF7;
  --c-idle: #77705F;       --c-idle-soft: #EFEAE0;
  --c-returned: #62479F;   --c-returned-soft: #EBE5F6;

  /* Student avatars */
  --c-av-teal-bg: #D9EDE8;  --c-av-teal-fg: #0A4F4B;
  --c-av-gold-bg: #FBE8C0;  --c-av-gold-fg: #8A4F00;
  --c-av-coral-bg: #FBE0D6; --c-av-coral-fg: #9C3A1A;
  --c-av-sky-bg: #DCEAF7;   --c-av-sky-fg: #1C5585;
  --c-av-lilac-bg: #EAE3F6; --c-av-lilac-fg: #573D93;
  --c-av-leaf-bg: #DFEFD8;  --c-av-leaf-fg: #2F6A22;

  /* Icons */
  --c-duo-fill: #F2A51A;
  --duo-opacity: .55;

  /* Type */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-student: "Lexend", "Inter", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 540;
  --display-tracking: -0.022em;
  --display-variation: "SOFT" 70, "WONK" 0;
  --f-wordmark: "Fraunces", Georgia, serif;
  --wordmark-weight: 620;
  --wordmark-tracking: -0.02em;

  /* Shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;
  --r-btn: 999px;

  /* Elevation: warm, soft */
  --shadow-1: 0 1px 2px rgba(60, 44, 14, .05);
  --shadow-2: 0 10px 28px -12px rgba(60, 44, 14, .18), 0 2px 6px rgba(60, 44, 14, .05);
  --shadow-3: 0 40px 80px -30px rgba(12, 48, 46, .35), 0 16px 32px -16px rgba(12, 48, 46, .16);
  --btn-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -8px rgba(12, 48, 46, .45);
}

/* ---------- Direction A signatures ---------- */

/* Italic emphasis with a hand-drawn marigold underline */
.a-em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--c-primary);
  background: url("../img/swash.svg") no-repeat 50% 96% / 100% .32em;
  padding-bottom: .06em;
}

/* Eyebrow: small caps label with a short marigold rule */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--f-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-primary);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--c-accent); }

/* Serif numerals for steps */
.step-num {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 3rem; line-height: 1; color: var(--c-accent);
}

/* 3. Base */
/* ==========================================================================
   ClassPuente prototype: shared base
   Every color, font, radius and shadow comes from a theme file (theme-a.css
   or theme-b.css). Components here only reference tokens.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:where([hidden]) { display: none !important; }

/* ---------- Document ---------- */
body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--c-accent-soft); color: var(--c-ink); }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--c-ink); color: var(--c-surface);
  padding: .6rem 1rem; border-radius: var(--r-sm); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */
.display, h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-variation-settings: var(--display-variation);
  color: var(--c-heading);
  line-height: 1.08;
  text-wrap: balance;
}
h3 { line-height: 1.25; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.075rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--c-ink-2); }
.muted { color: var(--c-muted); }
.small { font-size: .875rem; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
@media (min-width: 768px) { .container { width: min(100% - 4rem, 1200px); } }
.stack > * + * { margin-top: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, .75rem); align-items: center; }

/* ---------- Icons (Phosphor) ---------- */
.ph, .ph-duotone, .ph-fill { display: inline-block; line-height: 1; flex: none; }
/* Two-tone brand icons: outline in the icon color, fill layer in marigold */
.ph-duotone::before { color: var(--c-duo-fill); opacity: var(--duo-opacity) !important; }
.duo-teal::before { color: var(--c-primary) !important; opacity: .22 !important; }
.duo-soft::before { opacity: .28 !important; }
.ic-tile {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-md);
  background: var(--c-primary-softer); color: var(--c-primary);
  font-size: 1.5rem;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--btn-h); padding: 0 1.15rem;
  border-radius: var(--r-btn); border: 1px solid transparent;
  font-family: var(--f-body); font-weight: 600; font-size: .95rem; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn .ph, .btn .ph-duotone, .btn .ph-fill { font-size: 1.15em; }
.btn:active { transform: translateY(1px); }
.btn-lg { --btn-h: 3.25rem; padding: 0 1.5rem; font-size: 1rem; }
.btn-sm { --btn-h: 2.25rem; padding: 0 .85rem; font-size: .875rem; }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--btn-shadow); }
.btn-primary:hover { background: var(--c-primary-strong); }
.btn-accent { background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--btn-shadow); }
.btn-accent:hover { background: var(--c-accent-hover); }
.btn-outline { background: var(--c-surface); border-color: var(--c-line-strong); color: var(--c-ink); }
.btn-outline:hover { border-color: var(--c-ink-2); }
.btn-ghost { color: var(--c-ink); }
.btn-ghost:hover { background: var(--c-bg-2); }
.btn-on-deep { background: rgba(255,255,255,.08); color: var(--c-on-deep); border-color: rgba(255,255,255,.18); }
.btn-on-deep:hover { background: rgba(255,255,255,.14); }
.btn-block { width: 100%; }

/* ---------- Status chips (never color alone: icon + label) ---------- */
.status {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem .2rem .45rem; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.status .ph, .status .ph-fill { font-size: 1rem; }
.status-done     { background: var(--c-done-soft);     color: var(--c-done); }
.status-late     { background: var(--c-late-soft);     color: var(--c-late); }
.status-missing  { background: var(--c-missing-soft);  color: var(--c-missing); }
.status-progress { background: var(--c-progress-soft); color: var(--c-progress); }
.status-idle     { background: var(--c-idle-soft);     color: var(--c-idle); }
.status-returned { background: var(--c-returned-soft); color: var(--c-returned); }

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .5rem; border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 700; letter-spacing: .01em;
  background: var(--c-accent-soft); color: var(--c-accent-strong);
}
.badge-teal { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.count {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent);
  font-size: .72rem; font-weight: 800; line-height: 1;
}

/* ---------- Cards ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

/* ---------- Avatars (student icons) ---------- */
.avatar {
  --av: 2.25rem;
  display: inline-grid; place-items: center; flex: none;
  width: var(--av); height: var(--av); border-radius: 50%;
  font-size: calc(var(--av) * .56);
  background: var(--av-bg, var(--c-primary-soft)); color: var(--av-fg, var(--c-primary-strong));
}
.av-teal   { --av-bg: var(--c-av-teal-bg);   --av-fg: var(--c-av-teal-fg); }
.av-gold   { --av-bg: var(--c-av-gold-bg);   --av-fg: var(--c-av-gold-fg); }
.av-coral  { --av-bg: var(--c-av-coral-bg);  --av-fg: var(--c-av-coral-fg); }
.av-sky    { --av-bg: var(--c-av-sky-bg);    --av-fg: var(--c-av-sky-fg); }
.av-lilac  { --av-bg: var(--c-av-lilac-bg);  --av-fg: var(--c-av-lilac-fg); }
.av-leaf   { --av-bg: var(--c-av-leaf-bg);   --av-fg: var(--c-av-leaf-fg); }
.avatar .ph-duotone::before { color: currentColor; opacity: .25 !important; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-mark { width: 2.1rem; height: 2.1rem; flex: none; }
.wordmark {
  font-family: var(--f-wordmark); font-weight: var(--wordmark-weight);
  font-size: 1.32rem; letter-spacing: var(--wordmark-tracking); line-height: 1;
  font-variation-settings: var(--display-variation);
}
.wm-class { color: var(--c-primary-ink); }
.wm-puente { color: var(--c-wordmark-accent); }
.on-deep .wm-class { color: var(--c-on-deep); }
.on-deep .wm-puente { color: var(--c-accent); }

/* ---------- Forms ---------- */
.field { display: grid; gap: .4rem; align-content: start; }
.label { font-weight: 600; font-size: .9rem; color: var(--c-ink); }
.input {
  min-height: 2.875rem; padding: .6rem .85rem; width: 100%;
  background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-ring-soft); }

/* ---------- Progress bars & rings ---------- */
.bar { height: .5rem; border-radius: var(--r-pill); background: var(--c-bg-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--c-primary); }
.bar.gold > span { background: var(--c-accent); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Headings receive focus after in-page navigation for screen readers; no visible ring needed */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }

/* 4. Marketing */
/* ==========================================================================
   Marketing pages: nav, heroes, product mockups, sections, pricing, footer
   ========================================================================== */

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--c-bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.nav.is-scrolled { border-bottom-color: var(--c-line); }
.nav-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.nav-links { display: none; gap: .25rem; margin-left: 1rem; }
.nav-links a {
  padding: .5rem .75rem; border-radius: var(--r-sm);
  font-size: .925rem; font-weight: 550; color: var(--c-ink-2); text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.nav-links a:hover { color: var(--c-ink); background: var(--c-bg-2); }
.nav-actions { display: none; align-items: center; gap: .5rem; margin-left: auto; }
.nav-join {
  display: inline-flex; align-items: center; gap: .4rem; margin-right: .5rem;
  font-size: .9rem; font-weight: 600; color: var(--c-primary); text-decoration: none;
  padding: .45rem .75rem; border-radius: var(--r-pill); border: 1px dashed var(--c-line-strong);
}
.nav-join:hover { border-style: solid; border-color: var(--c-primary); }
.nav-join .ph-duotone { font-size: 1.2rem; }
.nav-toggle {
  margin-left: auto; display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); font-size: 1.5rem;
}
.nav-toggle:hover { background: var(--c-bg-2); }
.mnav { border-top: 1px solid var(--c-line); background: var(--c-surface); padding: .75rem 1rem 1.25rem; }
.mnav a:not(.btn) { display: flex; align-items: center; justify-content: space-between; padding: .9rem .25rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--c-line); }
.mnav .btn { margin-top: .75rem; }
@media (min-width: 1040px) {
  .nav-links, .nav-actions { display: flex; }
  .nav-toggle, .mnav { display: none !important; }
}

/* Deep (dark) nav variant, Direction B */
.nav.on-deep { background: color-mix(in srgb, var(--c-deep) 88%, transparent); }
.nav.on-deep.is-scrolled { border-bottom-color: rgba(255,255,255,.08); }
.nav.on-deep .nav-links a { color: var(--c-on-deep-2); }
.nav.on-deep .nav-links a:hover { color: var(--c-on-deep); background: rgba(255,255,255,.06); }
.nav.on-deep .nav-join { color: var(--c-accent); border-color: rgba(255,255,255,.2); }
.nav.on-deep .btn-ghost { color: var(--c-on-deep); }
.nav.on-deep .btn-ghost:hover { background: rgba(255,255,255,.08); }
.nav.on-deep .nav-toggle { color: var(--c-on-deep); }
.nav.on-deep .nav-toggle:hover { background: rgba(255,255,255,.08); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(4rem, 3rem + 5vw, 7.5rem); }
.section-tight { padding-block: clamp(3rem, 2.5rem + 3vw, 5rem); }
.section-head { max-width: 46rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); margin-top: .9rem; }
.section-head .lead { margin-top: 1.1rem; }
.deep { background: var(--c-deep); color: var(--c-on-deep); }
.deep h2, .deep h3 { color: var(--c-on-deep); }
.deep .lead, .deep .muted { color: var(--c-on-deep-2); }
.paper-2 { background: var(--c-bg-2); }

/* ---------- Product mockups ---------- */
.mock-window {
  container-type: inline-size;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  font-family: var(--f-body);
}
.mw-bar {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 1rem; background: var(--c-surface-2); border-bottom: 1px solid var(--c-line);
}
.mw-dots { display: flex; gap: .35rem; }
.mw-dots span { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c-line-strong); }
.mw-title { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 650; color: var(--c-ink); }
.mw-title .swatch { width: .6rem; height: .6rem; border-radius: 3px; background: var(--c-primary); }
.mw-tabs { margin-left: auto; display: flex; gap: .15rem; padding: .2rem; border-radius: var(--r-sm); background: var(--c-bg-2); }
.mw-tabs span { padding: .25rem .6rem; border-radius: calc(var(--r-sm) - 3px); font-size: .72rem; font-weight: 600; color: var(--c-muted); }
.mw-tabs span.on { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-1); }

.pgrid { display: grid; grid-template-columns: minmax(8.5rem, 1.5fr) repeat(4, minmax(0, 1fr)); font-size: .8rem; }
.pg-h { padding: .65rem .5rem; font-size: .7rem; font-weight: 650; color: var(--c-muted); text-align: center; border-bottom: 1px solid var(--c-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-h:first-child { text-align: left; padding-left: 1rem; }
.pg-name { display: flex; align-items: center; gap: .55rem; padding: .5rem .5rem .5rem 1rem; font-weight: 600; color: var(--c-ink); border-top: 1px solid var(--c-line); white-space: nowrap; }
.pg-name .avatar { --av: 1.75rem; }
.pg-c { display: flex; align-items: center; justify-content: center; padding: .4rem .3rem; border-top: 1px solid var(--c-line); }
.pg-row-first { border-top: 0; }
.cell {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  min-width: 3.5rem; padding: .25rem .4rem; border-radius: var(--r-xs);
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3;
}
.cell .ph-fill, .cell .ph { font-size: .9rem; }
.c-done { background: var(--c-done-soft); color: var(--c-done); }
.c-late { background: var(--c-late-soft); color: var(--c-late); }
.c-missing { background: var(--c-missing-soft); color: var(--c-missing); }
.c-progress { background: var(--c-progress-soft); color: var(--c-progress); }
.c-idle { background: transparent; color: var(--c-idle); border: 1px dashed var(--c-line-strong); }
.c-returned { background: var(--c-returned-soft); color: var(--c-returned); }
@container (max-width: 520px) {
  .pgrid { grid-template-columns: minmax(7.25rem, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .pg-hide-sm { display: none; }
  .mw-tabs span:not(.on) { display: none; }
}

/* Phone */
.mock-phone {
  width: 15rem; padding: .5rem; border-radius: 2.35rem;
  background: #111A19;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, var(--shadow-3);
}
.phone-screen {
  position: relative; overflow: hidden;
  border-radius: 1.9rem; background: var(--c-bg);
  padding: 2rem .85rem 1rem; font-family: var(--f-student);
}
.phone-screen::before {
  content: ""; position: absolute; top: .55rem; left: 50%; transform: translateX(-50%);
  width: 4.6rem; height: 1.15rem; border-radius: 1rem; background: #111A19;
}
.ps-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .66rem; color: var(--c-muted); font-weight: 500; }
.ps-lang { display: inline-flex; border: 1px solid var(--c-line); border-radius: var(--r-pill); overflow: hidden; }
.ps-lang span { padding: .1rem .4rem; font-weight: 600; }
.ps-lang .on { background: var(--c-primary); color: var(--c-on-primary); }
.ps-title { margin: .8rem 0 .7rem; font-size: 1.05rem; font-weight: 600; color: var(--c-heading); letter-spacing: -.01em; }
.ps-names { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.ps-name {
  display: flex; align-items: center; gap: .4rem; padding: .45rem .5rem;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm);
  font-size: .72rem; font-weight: 600; color: var(--c-ink);
}
.ps-name .avatar { --av: 1.6rem; }
.ps-name.is-picked { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-ring-soft); }

/* Floating chips around hero mockups */
.float-chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .9rem; border-radius: var(--r-md);
  background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-2);
  font-size: .8rem; line-height: 1.3;
}
.float-chip strong { display: block; font-size: .82rem; color: var(--c-ink); }
.float-chip span { color: var(--c-muted); }
.mini-pics { display: flex; gap: .3rem; }
.mini-pics i {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-xs);
  font-size: 1.2rem; background: var(--c-accent-softer); color: var(--c-primary);
  border: 1px solid var(--c-accent-soft);
}
.chip-ok { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c-done-soft); color: var(--c-done); font-size: 1.15rem; }

/* ---------- Hero A: Paper & Ink ---------- */
.hero-a { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3.5rem, 2rem + 5vw, 7rem); overflow: hidden; }
.hero-a-grid { display: grid; gap: 3.5rem; align-items: center; }
.hero-title { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.6rem); margin-top: 1.25rem; line-height: 1.02; }
.hero-a .lead { margin-top: 1.4rem; max-width: 34rem; }
.hero-ctas { margin-top: 2rem; --gap: .75rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.5rem; padding: 0; list-style: none; font-size: .875rem; color: var(--c-ink-2); }
.hero-proof li { display: inline-flex; align-items: center; gap: .4rem; }
.hero-proof .ph-fill { color: var(--c-primary); font-size: 1.1rem; }

.hero-a-stage { position: relative; padding: 2.5rem 0 3rem; }
.hero-a-stage::before {
  content: ""; position: absolute; z-index: 0; inset: 0 8% 0 8%;
  background: url("../img/arch-paper.svg") center / 100% 100% no-repeat;
}
.hero-a-stage .mock-window { position: relative; z-index: 1; margin-right: 18%; transform: rotate(-1deg); }
.hero-a-stage .mock-phone { position: absolute; z-index: 2; right: 0; bottom: 0; width: 12.5rem; transform: rotate(2.5deg); }
.hero-a-stage .chip-pics { left: -.5rem; bottom: 1.5rem; }
.hero-a-stage .chip-saved { right: 13rem; top: .5rem; }
@media (max-width: 640px) {
  .hero-a-stage { padding-bottom: 9rem; }
  .hero-a-stage .mock-window { margin-right: 0; transform: none; }
  .hero-a-stage .mock-phone { width: 11rem; right: -.25rem; }
  .hero-a-stage .chip-pics { left: 0; bottom: 1rem; }
  .hero-a-stage .chip-saved { display: none; }
}
@media (min-width: 1000px) {
  .hero-a-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 3rem; }
  .hero-a-stage { padding: 4rem 0 4rem; }
}

/* ---------- Hero B: Bridge Geometry ---------- */
.hero-b {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
  color: var(--c-on-deep); text-align: center;
  background: linear-gradient(to bottom, var(--c-deep) 0, var(--c-deep) calc(100% - 10rem), var(--c-bg) calc(100% - 10rem));
}
.hero-b::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 10rem;
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(24, 150, 138, .38), transparent 70%),
    url("../img/arches-deep.svg") center bottom / 1440px auto no-repeat;
}
.hero-b h1 { color: var(--c-on-deep); font-size: clamp(2.75rem, 1.4rem + 5.6vw, 5.75rem); line-height: .98; margin-top: 1.4rem; }
.hero-b .lead { color: var(--c-on-deep-2); max-width: 40rem; margin: 1.5rem auto 0; }
.hero-b .hero-ctas { justify-content: center; }
.hero-b .hero-proof { justify-content: center; color: var(--c-on-deep-2); }
.hero-b .hero-proof .ph-fill { color: var(--c-accent); }
.hero-b-visual { position: relative; max-width: 1080px; margin: 3.5rem auto 0; padding: 0 1rem 3rem; text-align: left; }
.hero-b-visual .mock-window { border-color: rgba(255,255,255,.1); }
.hero-b-visual .mock-phone { position: absolute; right: -1rem; bottom: 0; width: 13rem; }
.hero-b-visual .chip-saved { left: -1.5rem; top: 30%; }
@media (max-width: 760px) {
  .hero-b-visual { padding-bottom: 9rem; }
  .hero-b-visual .mock-phone { width: 11rem; right: 0; }
  .hero-b-visual .chip-saved { left: 0; top: auto; bottom: 1.5rem; }
}

/* App-like mock (sidebar + grid) for hero B */
.app-mock { display: grid; grid-template-columns: 12.5rem 1fr; min-height: 22rem; }
.am-side { padding: 1rem .75rem; border-right: 1px solid var(--c-line); background: var(--c-surface-2); display: grid; align-content: start; gap: .2rem; }
.am-side .brand { padding: .25rem .5rem .9rem; }
.am-side .brand-mark { width: 1.6rem; height: 1.6rem; }
.am-side .wordmark { font-size: 1.05rem; }
.am-link { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--r-sm); font-size: .8rem; font-weight: 600; color: var(--c-ink-2); }
.am-link .ph { font-size: 1.1rem; }
.am-link.on { background: var(--c-primary-softer); color: var(--c-primary-strong); }
.am-link .count { margin-left: auto; }
.am-main { padding: 1.1rem 1.25rem; min-width: 0; }
.am-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.am-head h4 { margin: 0; font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--c-heading); }
.am-head p { font-size: .75rem; color: var(--c-muted); }
.am-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.am-stat { padding: .7rem .8rem; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.am-stat b { display: block; font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -.02em; color: var(--c-heading); }
.am-stat span { font-size: .7rem; color: var(--c-muted); font-weight: 600; }
.am-main .pgrid { border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
@container (max-width: 700px) {
  .app-mock { grid-template-columns: 1fr; }
  .am-side { display: none; }
}
@container (max-width: 420px) {
  .am-stats { grid-template-columns: repeat(2, 1fr); }
  .am-stats > :last-child { display: none; }
}

/* ---------- Sign-in steps ---------- */
.steps { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: 1.5rem; display: grid; align-content: start; gap: 1rem; }
.step h3 { font-size: 1.3rem; }
.step p { color: var(--c-ink-2); font-size: .95rem; }
.step-visual {
  display: grid; place-items: center; min-height: 10.5rem; padding: 1rem;
  border-radius: var(--r-md); background: var(--c-bg); border: 1px solid var(--c-line);
  font-family: var(--f-student);
}
.code-boxes { display: flex; gap: .35rem; }
.code-boxes span {
  display: grid; place-items: center; width: 2.35rem; height: 2.85rem;
  background: var(--c-surface); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-sm);
  font-weight: 600; font-size: 1.2rem; color: var(--c-heading);
}
.code-boxes span.filled { border-color: var(--c-primary); }
.code-boxes span.caret { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-ring-soft); }
.code-url { margin-top: .75rem; font-size: .75rem; color: var(--c-muted); text-align: center; }
.pic-mini { display: grid; grid-template-columns: repeat(4, 2.6rem); gap: .4rem; }
.pic-mini span {
  position: relative; display: grid; place-items: center; height: 2.6rem; border-radius: var(--r-sm);
  background: var(--c-surface); border: 1px solid var(--c-line); font-size: 1.4rem; color: var(--c-primary);
}
.pic-mini span.sel { border-color: var(--c-primary); background: var(--c-primary-softer); }
.pic-mini span b {
  position: absolute; top: -.4rem; right: -.4rem; display: grid; place-items: center;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent);
  font-size: .62rem; font-family: var(--f-body);
}
.word-code { margin-top: .75rem; padding: .35rem .7rem; border-radius: var(--r-pill); background: var(--c-surface); border: 1px dashed var(--c-line-strong); font-size: .8rem; font-weight: 500; color: var(--c-ink-2); }

/* ---------- Feature rows (A) ---------- */
.frow { display: grid; gap: 2.5rem; align-items: center; padding-block: 2.5rem; }
.frow + .frow { border-top: 1px solid var(--c-line); }
.frow h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); margin-top: .75rem; }
.frow p { margin-top: 1rem; color: var(--c-ink-2); max-width: 32rem; }
.ticks { display: grid; gap: .6rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; color: var(--c-ink); font-size: .95rem; }
.ticks .ph-fill { color: var(--c-primary); font-size: 1.2rem; margin-top: .12rem; }
@media (min-width: 960px) {
  .frow { grid-template-columns: 1fr 1.1fr; gap: 4.5rem; padding-block: 4rem; }
  .frow.flip > :first-child { order: 2; }
}

/* Feature mini grid */
.fgrid { display: grid; gap: 1px; margin-top: 3rem; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 640px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fgrid { grid-template-columns: repeat(3, 1fr); } }
.fcell { background: var(--c-surface); padding: 1.75rem; }
.fcell h3 { font-size: 1.2rem; margin-top: 1rem; }
.fcell p { margin-top: .5rem; color: var(--c-ink-2); font-size: .94rem; }

/* Question type chips */
.qtypes { display: flex; flex-wrap: wrap; gap: .5rem; }
.qtype {
  display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-pill);
  font-size: .85rem; font-weight: 600; color: var(--c-ink); box-shadow: var(--shadow-1);
}
.qtype .ph-duotone { font-size: 1.15rem; color: var(--c-primary); }

/* Accent grading card */
.grade-card { padding: 1.25rem; font-family: var(--f-body); }
.gc-q { font-family: var(--f-student); font-size: 1.15rem; color: var(--c-heading); font-weight: 500; }
.gc-q u { text-decoration: none; border-bottom: 2px solid var(--c-line-strong); padding: 0 .4rem; }
.gc-rows { display: grid; gap: .6rem; margin-top: 1rem; }
.gc-row { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface-2); font-size: .88rem; }
.gc-row .ans { font-family: var(--f-student); font-weight: 600; font-size: 1rem; }
.gc-row .status { margin-left: auto; }
.gc-hint { display: flex; gap: .5rem; align-items: center; margin-top: .9rem; padding: .65rem .85rem; border-radius: var(--r-md); background: var(--c-accent-softer); color: var(--c-accent-strong); font-size: .85rem; font-weight: 600; font-family: var(--f-student); }
.gc-hint .ph-duotone { font-size: 1.25rem; }
.mode-pills { display: flex; gap: .35rem; margin-top: 1rem; font-size: .75rem; }
.mode-pills span { padding: .3rem .65rem; border-radius: var(--r-pill); border: 1px solid var(--c-line); color: var(--c-muted); font-weight: 600; }
.mode-pills span.on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }

/* Integrity replay card */
.replay { padding: 1.25rem; }
.replay-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.replay-head b { font-size: .9rem; }
.replay-text { margin-top: .9rem; padding: .9rem 1rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); font-family: var(--f-student); font-size: .92rem; line-height: 1.55; color: var(--c-ink); }
.replay-text mark { background: var(--c-accent-soft); color: inherit; border-radius: 3px; padding: 0 .15rem; }
.replay-track { position: relative; height: .45rem; margin-top: 1rem; border-radius: var(--r-pill); background: var(--c-bg-2); }
.replay-track .fill { position: absolute; inset: 0 38% 0 0; border-radius: inherit; background: var(--c-primary); }
.replay-track .paste { position: absolute; top: -.25rem; width: .5rem; height: .95rem; border-radius: 3px; background: var(--c-accent); }
.replay-track .knob { position: absolute; top: 50%; left: 62%; width: 1rem; height: 1rem; border-radius: 50%; transform: translate(-50%, -50%); background: var(--c-surface); border: 3px solid var(--c-primary); box-shadow: var(--shadow-1); }
.replay-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; }
.replay-stats div { padding: .6rem .7rem; border-radius: var(--r-sm); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.replay-stats b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.replay-stats span { font-size: .72rem; color: var(--c-muted); font-weight: 600; }
.disclose { display: flex; gap: .5rem; align-items: center; margin-top: .9rem; font-size: .78rem; color: var(--c-muted); }

/* Sub code ticket */
.ticket { padding: 1.25rem; display: grid; gap: .9rem; }
.ticket-code { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1rem; border-radius: var(--r-md); border: 1.5px dashed var(--c-primary); background: var(--c-primary-softer); }
.ticket-code b { font-family: var(--f-student); font-size: 1.3rem; letter-spacing: .08em; color: var(--c-primary-strong); }
.ticket-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8rem; color: var(--c-muted); }
.ticket-meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* ---------- Bento (B) ---------- */
.bento { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento .t-wide { grid-column: span 4; }
  .bento .t-narrow { grid-column: span 2; }
  .bento .t-half { grid-column: span 3; }
  .bento .t-third { grid-column: span 2; }
}
.tile { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); overflow: hidden; }
.tile h3 { font-size: 1.3rem; }
.tile p { color: var(--c-ink-2); font-size: .94rem; margin-top: .4rem; }
.tile-visual { margin-top: auto; }
.tile.tile-deep { background: var(--c-deep); border-color: var(--c-deep); color: var(--c-on-deep); }
.tile.tile-deep h3 { color: var(--c-on-deep); }
.tile.tile-deep p { color: var(--c-on-deep-2); }
.tile.tile-gold { background: var(--c-accent-softer); border-color: var(--c-accent-soft); }

/* ---------- Spanish & TWI ---------- */
.es-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .es-grid { grid-template-columns: 1.05fr 1fr; gap: 5rem; } }
.course-list { display: grid; gap: .75rem; margin-top: 2rem; }
.course {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem;
  border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-line);
}
.course .ic-tile { width: 2.6rem; height: 2.6rem; font-size: 1.35rem; }
.course b { display: block; font-size: 1rem; }
.course span { font-size: .85rem; color: var(--c-muted); }
.course .badge { margin-left: auto; }
.deep .course { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.deep .course b { color: var(--c-on-deep); }
.deep .course span { color: var(--c-on-deep-2); }
.deep .course .ic-tile { background: rgba(246,177,42,.12); color: var(--c-accent); }
.puente-note {
  margin-top: 2rem; padding: 1.25rem 1.4rem; border-left: 3px solid var(--c-accent);
  background: var(--c-surface); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: .95rem; color: var(--c-ink-2);
}
.puente-note i { font-family: var(--f-display); font-size: 1.1rem; color: var(--c-heading); }
.deep .puente-note { background: rgba(255,255,255,.04); color: var(--c-on-deep-2); }
.deep .puente-note i { color: var(--c-on-deep); }

/* Bilingual toggle visual */
.bi-cards { position: relative; display: grid; gap: 1rem; }
.bi-card { padding: 1.25rem 1.35rem; font-family: var(--f-student); }
.bi-card .bi-lang { display: inline-flex; gap: .35rem; align-items: center; font-family: var(--f-body); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.bi-card h4 { margin: .5rem 0 .35rem; font-family: var(--f-student); font-size: 1.2rem; font-weight: 600; color: var(--c-heading); }
.bi-card p { font-size: .9rem; color: var(--c-ink-2); }
.bi-card .bi-row { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.accent-keys { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 1rem; }
.accent-keys span { display: grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .4rem; border-radius: var(--r-xs); background: var(--c-surface); border: 1px solid var(--c-line-strong); box-shadow: 0 2px 0 var(--c-line); font-size: 1rem; font-weight: 500; color: var(--c-ink); }

/* ---------- Privacy ---------- */
.promises { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 700px) { .promises { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .promises { grid-template-columns: repeat(3, 1fr); } }
.promise { display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem; border-radius: var(--r-lg); }
.promise .ic-tile { flex: none; }
.promise h3 { font-size: 1.1rem; }
.promise p { margin-top: .35rem; font-size: .92rem; color: var(--c-ink-2); }
.deep .promise { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.deep .promise h3 { color: var(--c-on-deep); }
.deep .promise p { color: var(--c-on-deep-2); }
.deep .promise .ic-tile { background: rgba(246,177,42,.12); color: var(--c-accent); }
.light-promise { background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); }

/* ---------- Pricing ---------- */
.plans { display: grid; gap: 1.25rem; margin-top: 3rem; align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; padding: 1.75rem; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); }
.plan h3 { font-size: 1.35rem; }
.plan .who { margin-top: .35rem; font-size: .9rem; color: var(--c-muted); }
.price { display: flex; align-items: baseline; gap: .35rem; margin-top: 1.25rem; }
.price b { font-family: var(--f-display); font-size: 2.75rem; letter-spacing: -.03em; font-weight: var(--display-weight); color: var(--c-heading); line-height: 1; font-variation-settings: var(--display-variation); }
.price span { color: var(--c-muted); font-size: .9rem; }
.price-alt { margin-top: .35rem; font-size: .85rem; color: var(--c-ink-2); }
.plan .ticks { margin-block: 1.5rem 1.75rem; }
.plan .btn { margin-top: auto; }
.plan.featured { border: 2px solid var(--c-primary); box-shadow: var(--shadow-2); }
.plan.featured .ribbon { position: absolute; top: -.8rem; left: 1.75rem; }

/* ---------- CTA ---------- */
.cta-a {
  position: relative; text-align: center; padding: clamp(3rem, 2rem + 4vw, 5.5rem) 1.5rem;
  background: var(--c-accent-softer); border: 1px solid var(--c-accent-soft);
  border-radius: 999px 999px var(--r-xl) var(--r-xl);
}
@media (max-width: 640px) { .cta-a { border-radius: 12rem 12rem var(--r-xl) var(--r-xl); padding-top: 4.5rem; } }
.cta-a h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); max-width: 40rem; margin: .75rem auto 0; }
.cta-a .lead { max-width: 34rem; margin: 1rem auto 0; }
.cta-a .hero-ctas { justify-content: center; }
.cta-b {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(3rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--r-xl); background: var(--c-deep); color: var(--c-on-deep);
}
.cta-b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/arches-deep.svg") right bottom / 900px auto no-repeat; opacity: .9; }
.cta-b h2 { color: var(--c-on-deep); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); max-width: 36rem; }
.cta-b .lead { color: var(--c-on-deep-2); max-width: 32rem; margin-top: 1rem; }

/* ---------- Footer ---------- */
.footer { padding-block: 4rem 2.5rem; border-top: 1px solid var(--c-line); margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.footer h4 { font-family: var(--f-body); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 1rem; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer a { text-decoration: none; color: var(--c-ink-2); font-size: .93rem; }
.footer a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.footer-tag { margin-top: 1rem; max-width: 22rem; color: var(--c-ink-2); font-size: .93rem; }
.footer-tag i { display: block; margin-top: .5rem; font-family: var(--f-display); color: var(--c-primary); }
.footer-base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); font-size: .85rem; color: var(--c-muted); }

/* ---------- Review fixes ---------- */
/* Phone mock: keep names on one line inside small screens */
.ps-top > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ps-name { white-space: nowrap; overflow: hidden; min-width: 0; font-size: .7rem; gap: .35rem; padding: .4rem .45rem; }
.ps-name .avatar { --av: 1.45rem; }
.hero-a-stage .mock-phone { width: 13.75rem; }
/* Duotone icons must stay inline so both glyph layers overlap */
.mini-pics i { display: inline-flex; align-items: center; justify-content: center; }
.chip-ok .ph { -webkit-text-stroke: 1px currentColor; }
/* Wordmark inside light mockups placed on dark sections */
.mock-window .wm-class { color: var(--c-primary-ink); }
.mock-window .wm-puente { color: var(--c-wordmark-accent); }
.hero-b-visual .chip-saved { left: 8%; top: -1.6rem; }
@media (max-width: 760px) { .hero-b-visual .chip-saved { left: 1rem; top: auto; bottom: 1.5rem; } }
.deep .badge-teal { background: rgba(255,255,255,.1); color: var(--c-on-deep); }

/* Question types as a tidy two-column card (A) */
.qgrid { display: grid; grid-template-columns: 1fr; gap: .5rem; padding: 1.25rem; }
@media (min-width: 520px) { .qgrid { grid-template-columns: 1fr 1fr; } }
.qgrid .qtype { border-radius: var(--r-md); box-shadow: none; background: var(--c-surface-2); padding: .65rem .85rem; }
.qgrid-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; font-size: .8rem; font-weight: 650; color: var(--c-muted); }

/* Mini login card (bento) */
.login-card-mini { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; padding: .9rem 1rem; border-radius: var(--r-md); border: 1.5px dashed var(--c-line-strong); background: var(--c-surface-2); font-family: var(--f-student); }
.login-card-mini .lc-name { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--c-heading); }
.login-card-mini .lc-name .avatar { --av: 1.75rem; }
.login-card-mini .lc-code { font-size: .8rem; color: var(--c-ink-2); }
.login-card-mini .lc-code b { letter-spacing: .06em; color: var(--c-primary-strong); }
.login-card-mini .lc-qr { grid-row: 1 / span 2; grid-column: 2; font-size: 2.75rem; color: var(--c-ink); }
/* Staff roles (bento) */
.staff-mini { display: grid; gap: .5rem; }
.staff-mini div { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); font-size: .85rem; font-weight: 600; }
.staff-mini .me-av { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: .66rem; font-weight: 700; color: #fff; background: var(--c-primary); }
.staff-mini .badge { margin-left: auto; }
@media (max-width: 760px) {
  .mock-phone .ps-names { grid-template-columns: 1fr; }
  .mock-phone .ps-name:nth-child(n+5) { display: none; }
  .hero-b-visual .mock-phone { right: .5rem; }
}

/* ==========================================================================
   Front door: four doors, students largest
   ========================================================================== */
.nav { top: env(safe-area-inset-top, 0px); }
.doors { padding-block: clamp(2rem, 1.25rem + 3vw, 4rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.doors-head { text-align: center; max-width: 44rem; margin-inline: auto; }
.doors-title { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem); line-height: 1.05; }
.doors-head .lead { margin-top: .9rem; }
.doors-grid { display: grid; gap: 1.25rem; margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
@media (min-width: 900px) { .doors-grid { grid-template-columns: 1.1fr 1fr; align-items: stretch; } }

.door { background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); min-width: 0; }
.door-name { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.6rem); line-height: 1.15; }
.door-sub { margin-top: .35rem; color: var(--c-ink-2); font-size: .98rem; }

/* Student door: the big arched one */
.door-student {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.25rem clamp(1.25rem, 1rem + 2vw, 2.5rem) 1.75rem;
  background: var(--c-accent-softer); border-color: var(--c-accent-soft);
  border-radius: 14rem 14rem var(--r-xl) var(--r-xl) / 9rem 9rem var(--r-xl) var(--r-xl);
  box-shadow: var(--shadow-2);
}
.door-student .door-name { font-family: var(--f-student); font-weight: 600; letter-spacing: -.02em; font-variation-settings: normal; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); margin-top: 1.25rem; }
.door-student .door-sub { font-family: var(--f-student); font-size: 1.05rem; max-width: 26rem; }
.door-student .door-sub span { display: block; color: var(--c-muted); font-size: .95rem; }
.door-art { position: relative; width: 10rem; height: 9rem; }
.door-arch {
  position: absolute; inset: 0 1.25rem; display: grid; place-items: center;
  border-radius: 999px 999px var(--r-md) var(--r-md);
  background: var(--c-primary-soft); color: var(--c-primary); font-size: 4rem;
  box-shadow: inset 0 -.55rem 0 var(--c-accent);
}
.door-spark {
  position: absolute; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-2);
  color: var(--c-primary); font-size: 1.25rem; animation: bob 4s ease-in-out infinite;
}
.door-spark.s1 { top: 0; left: -.75rem; }
.door-spark.s2 { top: 2.25rem; right: -1.1rem; animation-delay: -1.3s; }
.door-spark.s3 { bottom: .25rem; left: -1.25rem; animation-delay: -2.6s; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.door-code { display: flex; gap: .6rem; width: 100%; max-width: 26rem; margin-top: 1.5rem; }
.door-input {
  flex: 1; min-width: 0; min-height: 3.5rem; padding: 0 1rem;
  font-family: var(--f-student); font-size: 1.4rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-align: center;
  color: var(--c-heading); background: var(--c-surface); border: 2px solid var(--c-line-strong); border-radius: var(--r-md);
}
.door-input::placeholder { letter-spacing: .02em; font-weight: 500; font-size: 1.05rem; color: var(--c-muted); text-transform: none; }
.door-input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-ring-soft); }
.door-code .btn-lg { --btn-h: 3.5rem; border-radius: var(--r-md); font-family: var(--f-student); }
.door-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin-top: 1rem; font-family: var(--f-student); font-size: .9rem; color: var(--c-ink-2); }
.door-foot .ph-duotone { font-size: 1.3rem; color: var(--c-primary); }
.door-foot b { letter-spacing: .06em; color: var(--c-ink); }

/* Teacher, school, sub doors */
.door-stack { display: grid; gap: 1rem; min-width: 0; }
.door-row { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.35rem 1.4rem; border-radius: var(--r-lg); }
.door-tile {
  display: grid; place-items: center; flex: none; width: 4.25rem; height: 4.75rem;
  border-radius: 999px 999px var(--r-sm) var(--r-sm);
  background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); color: var(--c-primary);
  font-size: 2.3rem; box-shadow: inset 0 -.3rem 0 var(--c-accent);
}
.door-body { flex: 1; min-width: 0; }
.door-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.door-subcode .input { flex: 1 1 10rem; min-width: 0; min-height: 2.25rem; padding: .35rem .75rem; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; }
.door-subcode .input::placeholder { text-transform: none; }
@media (max-width: 420px) { .door-tile { width: 3.5rem; height: 4rem; font-size: 1.9rem; } .door-row { padding: 1.1rem; } }

/* The teacher hero now follows the doors */
.hero-a { border-top: 1px solid var(--c-line); }

/* ==========================================================================
   Pricing: one plan + school billing
   ========================================================================== */
.price-grid { display: grid; gap: 1.25rem; margin-top: 3rem; align-items: start; }
@media (min-width: 900px) { .price-grid { grid-template-columns: 1.55fr 1fr; } }
.plan-main { padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.plan-main .price b { font-size: clamp(2.75rem, 2.2rem + 2vw, 3.5rem); }
.ticks-2 { display: grid; gap: .6rem 1.5rem; }
@media (min-width: 600px) { .ticks-2 { grid-template-columns: 1fr 1fr; } }
.plan-note { margin-top: .75rem; text-align: center; font-size: .86rem; color: var(--c-muted); }
.plan-school .ic-tile { margin-bottom: 1rem; }
.price-foot { display: flex; gap: .6rem; align-items: center; justify-content: center; max-width: 44rem; margin: 1.75rem auto 0; text-align: center; font-size: .92rem; color: var(--c-ink-2); }
.price-foot .ph-duotone { font-size: 1.5rem; color: var(--c-primary); flex: none; }

/* 5. Teacher app */
/* ==========================================================================
   Teacher app shell and dashboard. Regular-weight icons, Inter UI,
   display font only for the page title.
   ========================================================================== */
.app { background: var(--c-bg); font-size: .9375rem; }
.app-shell { min-height: 100vh; }

/* Colors for class bands */
.c-teal  { --cls: var(--c-primary); }
.c-gold  { --cls: var(--c-accent); }
.c-coral { --cls: var(--c-av-coral-fg); }
.c-lilac { --cls: var(--c-av-lilac-fg); }

/* ---------- Sidebar ---------- */
.sidebar { display: none; }
@media (min-width: 1024px) {
  .app-shell { display: grid; grid-template-columns: 16rem 1fr; }
  .sidebar {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.25rem;
    padding: 1.25rem .9rem 1rem; background: var(--c-surface); border-right: 1px solid var(--c-line);
  }
  .sidebar > .brand { padding: .25rem .6rem .5rem; }
}
.side-nav { display: grid; gap: .15rem; }
.side-link {
  display: flex; align-items: center; gap: .75rem; min-height: 2.6rem; padding: 0 .7rem;
  border-radius: var(--r-sm); text-decoration: none; font-weight: 550; color: var(--c-ink-2);
  transition: background-color .15s ease, color .15s ease;
}
.side-link .ph { font-size: 1.25rem; }
.side-link:hover { background: var(--c-bg); color: var(--c-ink); }
.side-link.on { background: var(--c-primary-softer); color: var(--c-primary-strong); font-weight: 650; }
.side-link.on .ph::before { font-weight: 700; }
.side-link .count { margin-left: auto; }
.side-foot { margin-top: auto; display: grid; gap: .15rem; }
.trial-card { margin-bottom: .75rem; padding: 1rem; border-radius: var(--r-md); background: var(--c-accent-softer); border: 1px solid var(--c-accent-soft); }
.trial-top { display: flex; align-items: center; gap: .45rem; color: var(--c-ink); }
.trial-top .ph-duotone { font-size: 1.25rem; color: var(--c-accent-strong); }
.trial-card p { margin: .35rem 0 .7rem; font-size: .82rem; color: var(--c-ink-2); line-height: 1.45; }
.trial-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .7rem; font-size: .85rem; font-weight: 650; color: var(--c-accent-strong); text-decoration: none; }
.trial-link:hover { text-decoration: underline; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem; min-height: 4rem; padding: 0 1rem;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 768px) { .topbar { padding: 0 2rem; } }
.topbar-brand .brand-mark { width: 1.75rem; height: 1.75rem; }
.topbar-brand .wordmark { font-size: 1.1rem; }
@media (min-width: 1024px) { .topbar-brand { display: none; } }
.search {
  display: none; align-items: center; gap: .55rem; flex: 1; max-width: 28rem; min-height: 2.6rem; padding: 0 .8rem;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm); color: var(--c-muted);
}
.search:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-ring-soft); }
.search input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; color: var(--c-ink); }
.search kbd { font-family: var(--f-body); font-size: .72rem; padding: .1rem .4rem; border-radius: 5px; border: 1px solid var(--c-line); color: var(--c-muted); }
@media (min-width: 768px) { .search { display: flex; } }
.topbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.icon-btn { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--r-sm); font-size: 1.3rem; color: var(--c-ink-2); }
.icon-btn:hover { background: var(--c-bg-2); color: var(--c-ink); }
.icon-btn .dot { position: absolute; top: .55rem; right: .6rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 2px var(--c-bg); }
.me { display: flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: 0 .4rem; border-radius: var(--r-pill); color: var(--c-ink-2); }
.me:hover { background: var(--c-bg-2); }
.me-av { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.me-name { display: none; font-weight: 600; font-size: .88rem; color: var(--c-ink); }
@media (min-width: 1200px) { .me-name { display: inline; } }
@media (max-width: 560px) { .new-btn span { display: none; } .new-btn { padding: 0 .7rem; } .me .ph { display: none; } }

/* ---------- Dashboard ---------- */
.dash { padding: 1.5rem 1rem 6.5rem; max-width: 84rem; }
@media (min-width: 768px) { .dash { padding: 2rem 2rem 3rem; } }
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.dash-date { font-size: .85rem; font-weight: 600; color: var(--c-muted); }
.dash-head h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.35rem); margin-top: .2rem; }
.quick { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
.quick::-webkit-scrollbar { display: none; }
.quick-btn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: 0 .9rem; white-space: nowrap;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-pill);
  font-size: .86rem; font-weight: 600; color: var(--c-ink); text-decoration: none; box-shadow: var(--shadow-1);
}
.quick-btn .ph { font-size: 1.1rem; color: var(--c-primary); }
.quick-btn:hover { border-color: var(--c-line-strong); }

.alerts { display: grid; gap: .6rem; margin-top: 1.5rem; }
.alert {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .8rem 1rem;
  border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface);
}
.alert-ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--r-sm); font-size: 1.25rem; flex: none; }
.alert-warn { border-color: color-mix(in srgb, var(--c-late) 25%, var(--c-line)); background: color-mix(in srgb, var(--c-late-soft) 45%, var(--c-surface)); }
.alert-warn .alert-ic { background: var(--c-late-soft); color: var(--c-late); }
.alert-info .alert-ic { background: var(--c-primary-softer); color: var(--c-primary); }
.alert-body { flex: 1; min-width: 14rem; display: grid; }
.alert-body b { font-weight: 650; color: var(--c-ink); }
.alert-body span { font-size: .86rem; color: var(--c-ink-2); }

.dash-grid { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.dash-col { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
@media (min-width: 1180px) { .dash-grid { grid-template-columns: minmax(0, 1fr) 21rem; } }

.panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--shadow-1); }
.panel-flat { background: transparent; border: 0; box-shadow: none; padding: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-head h2 { font-family: var(--f-body); font-size: 1rem; font-weight: 650; letter-spacing: -.005em; color: var(--c-ink); font-variation-settings: normal; }
.panel-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--c-primary); text-decoration: none; white-space: nowrap; }
.panel-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Due list */
.due-list { display: grid; }
.due { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--c-line); }
.due:first-child { border-top: 0; padding-top: 0; }
.due-color { width: .3rem; align-self: stretch; border-radius: var(--r-pill); background: var(--cls); }
.due-title { font-weight: 650; color: var(--c-ink); }
.due-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .2rem; font-size: .84rem; color: var(--c-muted); }
.due-meta .sep { color: var(--c-line-strong); }
.due-prog { grid-column: 2; display: grid; gap: .35rem; font-size: .8rem; color: var(--c-muted); }
.due-prog b { color: var(--c-ink); }
@media (min-width: 640px) {
  .due { grid-template-columns: auto 1fr 11rem; }
  .due-prog { grid-column: auto; text-align: right; }
}

/* Class cards */
.class-cards { display: grid; gap: .9rem; }
.class-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.class-card {
  position: relative; overflow: hidden; display: grid; gap: 1rem; padding: 1.15rem 1.15rem 1rem 1.4rem;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit; box-shadow: var(--shadow-1);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.class-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--c-line-strong); }
.cc-band { position: absolute; left: 0; top: 0; bottom: 0; width: .35rem; background: var(--cls); }
.cc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.cc-name { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 1.2rem; letter-spacing: var(--display-tracking); font-variation-settings: var(--display-variation); color: var(--c-heading); line-height: 1.2; }
.cc-sec { font-size: .84rem; color: var(--c-muted); margin-top: .1rem; }
.ring {
  --p: 0; flex: none; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c-surface) 76%, transparent 78% 100%), conic-gradient(var(--c-primary) calc(var(--p) * 1%), var(--c-bg-2) 0);
}
.ring b { font-size: .72rem; font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.cc-stats { display: flex; align-items: center; gap: .9rem; font-size: .82rem; color: var(--c-ink-2); }
.cc-stats span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.cc-stats .ph { font-size: 1rem; color: var(--c-muted); }
.cc-code { margin-left: auto; padding: .1rem .45rem; border-radius: var(--r-xs); background: var(--c-bg); border: 1px solid var(--c-line); font-family: var(--f-student); font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--c-ink-2); }

/* Feed */
.feed { display: grid; }
.feed li { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--c-line); }
.feed li:first-child { border-top: 0; padding-top: 0; }
.feed p { flex: 1; min-width: 0; font-size: .9rem; color: var(--c-ink-2); line-height: 1.4; }
.feed p b { color: var(--c-ink); font-weight: 600; }
.feed-meta { display: block; font-size: .78rem; color: var(--c-muted); margin-top: .1rem; }

/* Grading panel */
.grade-panel { background: var(--c-deep); border-color: var(--c-deep); color: var(--c-on-deep); }
.grade-panel .panel-head h2 { color: var(--c-on-deep); }
.grade-big { display: flex; align-items: center; gap: 1rem; }
.grade-big b { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 3.5rem; line-height: 1; letter-spacing: -.03em; color: var(--c-accent); font-variation-settings: var(--display-variation); }
.grade-big span { font-size: .88rem; color: var(--c-on-deep-2); line-height: 1.4; }
.grade-break { display: grid; gap: .1rem; margin: 1.1rem 0 1.25rem; }
.grade-break li { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .87rem; color: var(--c-on-deep); }
.grade-break .ph { font-size: 1.1rem; color: var(--c-on-deep-2); }
.grade-break span { margin-left: auto; font-weight: 700; }
.grade-panel .btn-primary { background: var(--c-accent); color: var(--c-on-accent); }
.grade-panel .btn-primary:hover { background: var(--c-accent-hover); }

/* Missing */
.miss-list { display: grid; }
.miss-list li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--c-line); }
.miss-list li:first-child { border-top: 0; padding-top: 0; }
.miss-list div { flex: 1; display: grid; line-height: 1.3; }
.miss-list b { font-weight: 600; font-size: .9rem; }
.miss-list div span { font-size: .78rem; color: var(--c-muted); }

/* Checklist */
.checklist { display: grid; gap: .1rem; }
.checklist li { display: flex; align-items: center; gap: .6rem; min-height: 2.6rem; font-size: .9rem; color: var(--c-ink); }
.checklist li .ph-fill { font-size: 1.25rem; color: var(--c-done); }
.checklist li .ph { font-size: 1.25rem; color: var(--c-muted); }
.checklist li.ok { color: var(--c-muted); text-decoration: line-through; text-decoration-color: var(--c-line-strong); }
.checklist li .btn { margin-left: auto; }

/* ---------- Bottom nav (phones) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--c-surface) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-line);
}
.bottom-nav a { display: grid; justify-items: center; gap: .15rem; min-height: 3.1rem; padding-top: .35rem; font-size: .7rem; font-weight: 600; color: var(--c-muted); text-decoration: none; border-radius: var(--r-sm); }
.bottom-nav a .ph, .bottom-nav a .ph-fill { font-size: 1.45rem; }
.bottom-nav a.on { color: var(--c-primary); }
.bn-ic { position: relative; }
.bn-ic .count { position: absolute; top: -.35rem; right: -.85rem; min-width: 1.1rem; height: 1.1rem; font-size: .62rem; }
@media (min-width: 1024px) { .bottom-nav { display: none; } }

/* ==========================================================================
   6. Components
   ========================================================================== */

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.label .opt { font-weight: 500; color: var(--c-muted); font-size: .85em; }
.help { font-size: .85rem; color: var(--c-muted); }
select.input { appearance: none; padding-right: 2.5rem; background-image: url("../img/chevron-down.svg"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 1rem; }
textarea.input { min-height: 7rem; resize: vertical; line-height: 1.5; }
.input[aria-invalid="true"] { border-color: var(--c-missing); }
.field-error { display: flex; gap: .4rem; align-items: center; font-size: .86rem; font-weight: 500; color: var(--c-missing); }
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; color: var(--c-ink-2); cursor: pointer; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--c-primary); flex: none; }
.check a { color: var(--c-primary); font-weight: 600; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 3rem; }
.pw-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--r-sm); color: var(--c-ink-2); font-size: 1.2rem; }
.pw-toggle:hover { background: var(--c-bg-2); }
.code-field { font-family: var(--f-student); font-size: 1.75rem; font-weight: 600; letter-spacing: .45em; text-align: center; padding-left: .9rem; }
.cf-turnstile { min-height: 65px; }

/* ---------- Alerts and flash messages ---------- */
.alert-box { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); font-size: .93rem; line-height: 1.5; }
.alert-box .ph-fill, .alert-box .ph { font-size: 1.25rem; flex: none; margin-top: .05rem; }
.alert-box.success { background: var(--c-done-soft); border-color: color-mix(in srgb, var(--c-done) 25%, transparent); color: var(--c-done); }
.alert-box.error { background: var(--c-missing-soft); border-color: color-mix(in srgb, var(--c-missing) 25%, transparent); color: var(--c-missing); }
.alert-box.info { background: var(--c-primary-softer); border-color: var(--c-primary-soft); color: var(--c-primary-strong); }
.alert-box.warning { background: var(--c-late-soft); border-color: color-mix(in srgb, var(--c-late) 25%, transparent); color: var(--c-ink); }
.alert-box.warning > .ph-fill { color: var(--c-late); }
.alert-box.warn { background: var(--c-late-soft); border-color: color-mix(in srgb, var(--c-late) 25%, transparent); color: var(--c-late); }
.alert-box a { color: inherit; font-weight: 650; }
.flashes { display: grid; gap: .6rem; margin-bottom: 1.25rem; }

/* ---------- Auth pages ---------- */
.auth-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--c-bg); }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100% - 2rem, 1120px); margin-inline: auto; min-height: 4.25rem; }
.auth-top-link { font-size: .92rem; color: var(--c-ink-2); }
.auth-top-link a { color: var(--c-primary); font-weight: 650; text-decoration: none; }
.auth-main { display: grid; place-items: start center; padding: clamp(1rem, 4vw, 3rem) 1rem 3rem; }
.auth-card { position: relative; width: min(100%, 30rem); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.auth-card.wide { width: min(100%, 36rem); }
.auth-mark { display: grid; place-items: center; width: 4rem; height: 4.5rem; margin-bottom: 1.25rem; border-radius: 999px 999px var(--r-sm) var(--r-sm); background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); color: var(--c-primary); font-size: 2.2rem; box-shadow: inset 0 -.3rem 0 var(--c-accent); }
.auth-card h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.2rem); }
.auth-card .auth-lead { margin-top: .5rem; color: var(--c-ink-2); }
.auth-card .form { margin-top: 1.5rem; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; font-size: .9rem; }
.auth-links a, .text-link { color: var(--c-primary); font-weight: 600; text-decoration: none; }
.auth-links a:hover, .text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
button.text-link { font-size: inherit; padding: 0; }
.auth-divider { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line); font-size: .9rem; color: var(--c-ink-2); text-align: center; }
.auth-note { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1.25rem; font-size: .85rem; color: var(--c-muted); }
.auth-note .ph { font-size: 1.1rem; color: var(--c-primary); margin-top: .1rem; }
.auth-foot { padding: 1.5rem 1rem 2rem; text-align: center; font-size: .85rem; color: var(--c-muted); }
.auth-foot a { color: var(--c-muted); }
.trial-note { display: flex; gap: .5rem; align-items: center; padding: .7rem .9rem; border-radius: var(--r-md); background: var(--c-accent-softer); border: 1px solid var(--c-accent-soft); font-size: .88rem; color: var(--c-ink); }
.trial-note .ph-duotone { font-size: 1.3rem; color: var(--c-accent-strong); flex: none; }

/* Billing: summer pause */
.pause-panel { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.25rem; }
.pause-body { flex: 1; min-width: 0; }
.pause-body > p { margin-top: .4rem; color: var(--c-ink-2); max-width: 46rem; }
.pause-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; margin-top: 1rem; }
.pause-form { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; }
.pause-form .field { margin: 0; }
.pause-form .help { flex-basis: 100%; margin: 0; }
@media (max-width: 599px) { .pause-panel > .ic-tile { display: none; } .pause-form, .pause-form .field, .pause-form .btn { width: 100%; } }

/* Sign-up page: the trial and key features beside the form (above it on phones) */
.auth-split { display: grid; gap: 1.25rem; width: min(100%, 36rem); }
.auth-split .auth-card { width: 100%; }
.signup-side { padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); border-radius: var(--r-xl); background: var(--c-deep); color: var(--c-on-deep); }
.signup-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-size: .82rem; font-weight: 700; }
.signup-badge .ph-duotone { font-size: 1.05rem; }
.signup-side h2 { margin-top: 1rem; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); color: var(--c-on-deep); }
.signup-price { margin-top: .75rem; color: var(--c-on-deep-2); font-size: .95rem; }
.signup-summer { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1rem; padding: .7rem .85rem; border-radius: var(--r-md); background: var(--c-deep-2); color: var(--c-on-deep); font-size: .9rem; }
.signup-summer .ph-duotone { flex: none; margin-top: .1rem; font-size: 1.25rem; color: var(--c-accent); }
.signup-ticks { gap: .8rem; margin-top: 1.4rem; }
.signup-ticks li { color: var(--c-on-deep-2); font-size: .93rem; }
.signup-ticks b { color: var(--c-on-deep); font-weight: 650; }
.signup-ticks .ph-fill { color: var(--c-accent); }
.signup-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.4rem; color: var(--c-accent); font-weight: 650; }
@media (max-width: 899px) { .signup-ticks li:nth-child(n+4) { display: none; } }
@media (min-width: 900px) {
  .auth-split { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); width: min(100%, 68rem); gap: 2rem; align-items: start; }
  .signup-side { position: sticky; top: 1.5rem; }
}

/* Features page (/features.php) */
.feat-intro { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.feat-intro h1 { margin-top: .9rem; font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.9rem); }
.feat-ctas { justify-content: center; margin-top: 1.75rem; }
.feat-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2.25rem; }
.feat-jump a { padding: .45rem 1rem; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-surface); color: var(--c-ink); font-size: .9rem; font-weight: 600; text-decoration: none; }
.feat-jump a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.feat-rows { padding-top: 1rem; }
.feat-rows .frow, #all, #pricing { scroll-margin-top: 5rem; }
.feat-groups { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 700px) { .feat-groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .feat-groups { grid-template-columns: repeat(3, 1fr); } }
.feat-group { padding: 1.6rem; }
.feat-group h3 { margin-top: 1rem; font-size: 1.2rem; }
.feat-group .ticks { margin-top: 1rem; }
.feat-more { margin-top: 2.25rem; text-align: center; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font-size: .74rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); padding: .75rem 1rem; border-bottom: 1px solid var(--c-line); background: var(--c-surface-2); white-space: nowrap; }
.table td { padding: .75rem 1rem; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table a { color: var(--c-primary); font-weight: 600; text-decoration: none; }
.table a:hover { text-decoration: underline; }
.cell-sub { display: block; font-size: .8rem; color: var(--c-muted); }

/* ---------- Page header, tabs, empty states, pagination ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.page-head p { color: var(--c-ink-2); margin-top: .25rem; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--c-line); margin-bottom: 1.25rem; overflow-x: auto; }
.tabs a { padding: .7rem .9rem; font-size: .9rem; font-weight: 600; color: var(--c-ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--c-primary-strong); border-bottom-color: var(--c-primary); }
.empty { display: grid; justify-items: center; gap: .6rem; padding: 2.5rem 1.5rem; text-align: center; border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-surface-2); }
.empty .ic-tile { width: 3.5rem; height: 3.5rem; font-size: 1.8rem; }
.empty h2, .empty h3 { font-size: 1.25rem; }
.empty p { color: var(--c-ink-2); max-width: 30rem; }
.pager { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 1.25rem; }
.pager a, .pager span { min-width: 2.4rem; height: 2.4rem; display: inline-grid; place-items: center; padding: 0 .6rem; border-radius: var(--r-sm); border: 1px solid var(--c-line); background: var(--c-surface); font-size: .88rem; font-weight: 600; color: var(--c-ink-2); text-decoration: none; }
.pager [aria-current="page"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.filters .input { width: auto; min-width: 12rem; flex: 1 1 14rem; min-height: 2.5rem; }
.filters select.input { flex: 0 1 11rem; min-width: 9rem; }

/* ---------- Teacher app additions ---------- */
.trial-banner { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding: .9rem 1.1rem; border-radius: var(--r-lg); background: var(--c-accent-softer); border: 1px solid var(--c-accent-soft); }
.trial-banner p { display: flex; gap: .55rem; align-items: center; font-size: .93rem; color: var(--c-ink); }
.trial-banner .ph-duotone { font-size: 1.4rem; color: var(--c-accent-strong); flex: none; }
.welcome-card { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); }
@media (min-width: 900px) { .welcome-card { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.welcome-card h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.welcome-card p { color: var(--c-ink-2); margin-top: .5rem; }
.side-link .soon { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.side-link.is-soon { opacity: .7; }
.me-menu { position: relative; }
.me-menu-list { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; min-width: 14rem; padding: .4rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.me-menu-list a, .me-menu-list button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .7rem; border-radius: var(--r-sm); font-size: .9rem; font-weight: 550; color: var(--c-ink); text-decoration: none; text-align: left; }
.me-menu-list a:hover, .me-menu-list button:hover { background: var(--c-bg); }
.me-menu-list .ph { font-size: 1.15rem; color: var(--c-ink-2); }
.me-menu-head { padding: .5rem .7rem .6rem; border-bottom: 1px solid var(--c-line); margin-bottom: .3rem; font-size: .82rem; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-menu-head b { display: block; font-size: .92rem; color: var(--c-ink); }
.settings-grid { display: grid; gap: 1.25rem; max-width: 52rem; }
.panel h2.section-title { font-family: var(--f-body); font-size: 1.05rem; font-weight: 650; color: var(--c-ink); font-variation-settings: normal; letter-spacing: -.005em; margin-bottom: .35rem; }
.panel .section-lead { color: var(--c-ink-2); font-size: .92rem; margin-bottom: 1rem; }
.device-list { display: grid; }
.device { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--c-line); }
.device:first-child { border-top: 0; padding-top: 0; }
.device .ic-tile { width: 2.5rem; height: 2.5rem; font-size: 1.3rem; }
.device-info { flex: 1; min-width: 12rem; display: grid; }
.device-info b { font-weight: 600; }
.device-info span { font-size: .82rem; color: var(--c-muted); }
.inline-form { display: inline; }

/* ---------- Error pages ---------- */
.error-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; background: var(--c-bg); }
.error-main { display: grid; place-items: center; padding: 2rem 1rem 4rem; text-align: center; }
.error-code { font-family: var(--f-display); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: clamp(4rem, 3rem + 6vw, 7rem); line-height: 1; color: var(--c-accent); }
.error-icon { display: inline-grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-strong); font-size: 2.75rem; }
.error-main h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); margin-top: .75rem; }
.error-main p { max-width: 38rem; margin: .6rem auto 0; color: var(--c-ink-2); }
.error-main .cluster { justify-content: center; margin-top: 1.75rem; }

/* ---------- Utilities ---------- */
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.bottom-nav .bn-soon { display: grid; justify-items: center; gap: .15rem; min-height: 3.1rem; padding-top: .35rem; font-size: .7rem; font-weight: 600; color: var(--c-muted); opacity: .45; }
.bottom-nav .bn-soon .ph { font-size: 1.45rem; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c-primary); }
.bar.gold .bar-fill { background: var(--c-accent); }
.eyebrow-gold { color: var(--c-accent); }
.section-h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); margin-top: .9rem; }
.lead-gap { margin-top: 1.1rem; }
.cta-mark { margin: 0 auto; }

/* ==========================================================================
   7. Student area (from the approved Direction A prototype)
   ========================================================================== */
.kid { font-family: var(--f-student); background: var(--c-bg); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.kid .btn { font-family: var(--f-student); font-weight: 600; }
.kid .btn-lg { --btn-h: 3.5rem; font-size: 1.05rem; border-radius: var(--r-md); }
.kid .status { font-size: .82rem; }

/* ---------- Top bar ---------- */
.kid-bar { border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.kid-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .75rem; padding: 1.5rem 1rem 2rem; font-size: .9rem; color: var(--c-muted); }
.kid-foot a { color: var(--c-muted); font-weight: 600; }
.kid-foot a:hover { color: var(--c-primary); }
.kid-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100% - 2rem, 1080px); margin-inline: auto; min-height: 4rem; }
.kid-bar .brand-mark { width: 1.85rem; height: 1.85rem; }
.kid-bar .wordmark { font-size: 1.15rem; }
.kid-bar-right { display: flex; align-items: center; gap: .6rem; }
.lang-switch { display: inline-flex; padding: .2rem; border-radius: var(--r-pill); background: var(--c-bg-2); }
.lang-switch button { min-height: 2.5rem; padding: 0 .9rem; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; color: var(--c-ink-2); }
.lang-switch button[aria-pressed="true"] { background: var(--c-surface); color: var(--c-primary-strong); box-shadow: var(--shadow-1); }
.kid-done { --btn-h: 2.75rem; }
[data-step]:not([data-step="home"]) [data-only="home"] { display: none; }
@media (max-width: 520px) {
  .kid-bar .wordmark { display: none; }
  .lang-switch button { padding: 0 .7rem; font-size: .85rem; }
}

.kid-main { flex: 1; padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem) 4rem; }
.kid-container { width: min(100% - 2rem, 1080px); margin-inline: auto; }
.kid-container.narrow { width: min(100% - 2rem, 34rem); }
.kid-step { animation: kid-in .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes kid-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kid-h1 {
  font-family: var(--f-student); font-weight: 600; letter-spacing: -.02em; font-variation-settings: normal;
  font-size: clamp(1.85rem, 1.4rem + 1.8vw, 2.5rem); color: var(--c-heading); text-align: center; line-height: 1.15;
}
.kid-h1.left, .kid-sub.left { text-align: left; }
.kid-sub { margin-top: .5rem; font-size: 1.1rem; color: var(--c-ink-2); text-align: center; }
.kid-help { margin-top: .75rem; font-size: .95rem; color: var(--c-muted); }
.kid-help.center, .center { text-align: center; }
.kid-error { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; padding: .75rem 1rem; border-radius: var(--r-md); background: var(--c-missing-soft); color: var(--c-missing); font-weight: 500; }
.kid-error.center { justify-content: center; }
.kid-error .ph-fill { font-size: 1.3rem; flex: none; }
.proto-hint { margin-top: 1.25rem; font-family: var(--f-body); font-size: .8rem; color: var(--c-muted); display: flex; align-items: center; gap: .35rem; justify-content: center; }
.proto-hint b { color: var(--c-ink); letter-spacing: .05em; }

/* ---------- Join ---------- */
.join-wrap { width: min(100% - 2rem, 28rem); margin-inline: auto; text-align: center; }
.join-art { position: relative; width: 11rem; height: 10rem; margin: 0 auto 1.75rem; }
.ja-arch {
  position: absolute; inset: 0 1.25rem 0; display: grid; place-items: center;
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
  background: var(--c-primary-soft); color: var(--c-primary);
  font-size: 4.25rem;
  box-shadow: inset 0 -.6rem 0 var(--c-accent);
}
.ja-bubble {
  position: absolute; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-2); color: var(--c-primary); font-size: 1.4rem;
  animation: bob 4s ease-in-out infinite;
}
.ja-1 { top: .25rem; left: -.5rem; }
.ja-2 { top: 2.5rem; right: -1rem; animation-delay: -1.3s; }
.ja-3 { bottom: .25rem; left: -1.25rem; animation-delay: -2.6s; }
@keyframes bob { 50% { transform: translateY(-6px); } }

.join-form { margin-top: 2rem; text-align: left; }
.code-entry { position: relative; }
.code-entry input {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  opacity: 0; cursor: text; font-size: 16px; /* avoids iOS zoom */
}
.code-boxes.big { justify-content: center; gap: clamp(.35rem, 1.5vw, .6rem); }
.code-boxes.big span {
  width: clamp(2.75rem, 12vw, 3.6rem); height: clamp(3.4rem, 15vw, 4.25rem);
  font-size: clamp(1.5rem, 5vw, 2rem); border-width: 2px; border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.code-boxes.big span.filled { transform: translateY(-1px); background: var(--c-primary-softer); }
.code-entry:focus-within .code-boxes span.caret { border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-ring-soft); }
.code-entry:focus-within .code-boxes span.caret::after { content: ""; width: 2px; height: 1.6rem; background: var(--c-primary); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.code-entry.is-wrong .code-boxes { animation: shake .4s ease; }
.code-entry.is-wrong .code-boxes span { border-color: var(--c-missing); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.kid-help#code-help { text-align: center; }
.kid-go { margin-top: 1.5rem; }
.kid-go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.join-links { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); }
.join-links a { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1rem; font-weight: 600; color: var(--c-primary); text-decoration: none; border-radius: var(--r-pill); }
.join-links a:hover { background: var(--c-primary-softer); }
.join-links .ph-duotone { font-size: 1.5rem; }

/* ---------- Names ---------- */
.class-banner {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; margin-bottom: 1.75rem;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.cb-color { width: .5rem; align-self: stretch; border-radius: var(--r-pill); background: var(--c-primary); }
.cb-teacher { font-weight: 600; font-size: 1.1rem; color: var(--c-heading); }
.cb-class { font-size: .95rem; color: var(--c-muted); }
.cb-change { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 .9rem; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; color: var(--c-primary); }
.cb-change:hover { background: var(--c-primary-softer); }
@media (max-width: 420px) { .cb-change span { display: none; } }

.name-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin: 1.25rem 0 1.5rem; }
@media (min-width: 640px) { .name-grid { grid-template-columns: repeat(3, 1fr); gap: .85rem; } }
@media (min-width: 960px) { .name-grid { grid-template-columns: repeat(4, 1fr); } }
.name-btn {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 4.5rem; padding: .7rem .9rem;
  background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: var(--r-lg);
  font-size: 1.08rem; font-weight: 600; color: var(--c-ink); text-align: left;
  box-shadow: var(--shadow-1);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.name-btn .avatar { --av: 2.85rem; }
.name-btn:hover { border-color: var(--c-primary); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.name-btn:active { transform: translateY(0) scale(.98); }
@media (max-width: 380px) { .name-btn { font-size: .98rem; gap: .55rem; padding: .6rem; } .name-btn .avatar { --av: 2.4rem; } }

/* ---------- Picture password ---------- */
.kid-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 .85rem 0 .6rem; margin-left: -.6rem; border-radius: var(--r-pill); font-weight: 600; color: var(--c-primary); }
.kid-back:hover { background: var(--c-primary-softer); }
.who { text-align: center; margin-top: .5rem; }
.who-av { --av: 4.5rem; margin: 0 auto .9rem; box-shadow: 0 0 0 6px var(--c-surface), 0 0 0 7px var(--c-line); }
.pic-slots { display: flex; justify-content: center; gap: .75rem; margin: 1.75rem 0 1.5rem; }
.slot {
  position: relative; display: grid; place-items: center; width: 4.25rem; height: 4.25rem;
  border-radius: var(--r-lg); border: 2px dashed var(--c-line-strong); background: var(--c-surface-2);
  font-size: 2.25rem; color: var(--c-primary);
}
.slot b { font-size: 1rem; color: var(--c-muted); font-weight: 600; }
.slot.filled { border-style: solid; border-color: var(--c-primary); background: var(--c-primary-softer); animation: pop .25s ease; }
.slot.filled b { display: none; }
@keyframes pop { 50% { transform: scale(1.08); } }
.pic-slots.is-wrong { animation: shake .4s ease; }
.pic-slots.is-wrong .slot { border-color: var(--c-missing); background: var(--c-missing-soft); }
.pic-slots.is-right .slot { border-color: var(--c-done); background: var(--c-done-soft); color: var(--c-done); }

.pic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
@media (min-width: 480px) { .pic-grid { grid-template-columns: repeat(4, 1fr); gap: .8rem; } }
.pic-btn {
  display: grid; justify-items: center; gap: .3rem; padding: .85rem .4rem .7rem;
  background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.pic-btn i { font-size: 2.6rem; color: var(--pic-fg, var(--c-primary)); }
.pic-btn span { font-size: .88rem; font-weight: 500; color: var(--c-ink-2); }
.pic-btn:hover { border-color: var(--c-primary); box-shadow: var(--shadow-2); }
.pic-btn:active { transform: scale(.95); }
.pic-actions { display: flex; justify-content: center; margin-top: 1.5rem; }

/* ---------- Word code ---------- */
.word-form { margin-top: 2rem; display: grid; gap: .5rem; }
.word-form .label { font-size: 1rem; }
.word-input { position: relative; }
.word-input > .ph-duotone { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--c-primary); pointer-events: none; }
.word-input .input { min-height: 3.75rem; padding-left: 3.1rem; padding-right: 3.5rem; font-size: 1.25rem; font-family: var(--f-student); letter-spacing: .03em; border-width: 2px; border-radius: var(--r-md); }
.word-eye { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); font-size: 1.35rem; color: var(--c-ink-2); }
.word-eye:hover { background: var(--c-bg-2); }
.word-form .btn { margin-top: 1rem; }

/* ---------- My Work ---------- */
.home-hello { display: flex; align-items: center; gap: 1rem; }
.home-hello .who-av { --av: 3.75rem; margin: 0; }
.announce {
  display: flex; gap: .9rem; align-items: flex-start; margin-top: 1.75rem; padding: 1rem 1.15rem;
  background: var(--c-accent-softer); border: 1px solid var(--c-accent-soft); border-radius: var(--r-lg);
  font-size: 1.05rem; color: var(--c-ink);
}
.announce-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--r-md); background: var(--c-surface); color: var(--c-accent-strong); font-size: 1.5rem; }
.announce-ic .ph-duotone::before { color: var(--c-accent); }
.announce-from { font-size: .85rem; font-weight: 600; color: var(--c-accent-strong); }

.work-tabs { display: flex; gap: .4rem; margin: 2rem 0 1rem; padding: .3rem; background: var(--c-bg-2); border-radius: var(--r-lg); overflow-x: auto; }
.work-tabs button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 3rem; padding: 0 .9rem; border-radius: calc(var(--r-lg) - 4px);
  font-weight: 600; font-size: 1rem; color: var(--c-ink-2); white-space: nowrap;
}
.work-tabs button .ph-duotone { font-size: 1.3rem; }
.work-tabs button[aria-selected="true"] { background: var(--c-surface); color: var(--c-primary-strong); box-shadow: var(--shadow-1); }
.tab-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: var(--r-pill); background: var(--c-surface-2); border: 1px solid var(--c-line); font-size: .8rem; }
[aria-selected="true"] .tab-count { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
@media (max-width: 480px) { .work-tabs button .ph-duotone { display: none; } .work-tabs button { padding: 0 .5rem; font-size: .92rem; } }

.work-list { display: grid; gap: .85rem; }
.work-card {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1.1rem;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.wc-ic { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--r-md); background: var(--c-primary-softer); color: var(--c-primary); font-size: 1.75rem; align-self: start; }
.wc-ic.gold { background: var(--c-accent-softer); color: var(--c-accent-strong); }
.wc-ic.lilac { background: var(--c-returned-soft); color: var(--c-returned); }
.wc-title { font-family: var(--f-student); font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--c-heading); font-variation-settings: normal; }
.wc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: .35rem; font-size: .95rem; color: var(--c-ink-2); }
.wc-progress { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.wc-progress .bar { flex: 1; max-width: 14rem; }
.wc-feedback { margin-top: .6rem; padding: .6rem .8rem; border-radius: var(--r-sm); background: var(--c-surface-2); border-left: 3px solid var(--c-returned); font-size: .98rem; color: var(--c-ink); }
.wc-btn { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .work-card { grid-template-columns: auto 1fr auto; padding: 1.25rem 1.4rem; }
  .wc-btn { grid-column: auto; }
}
.switch-link { margin-top: 2rem; text-align: center; }
.switch-link a { display: inline-flex; align-items: center; gap: .45rem; min-height: 3rem; padding: 0 1rem; font-weight: 600; color: var(--c-primary); text-decoration: none; border-radius: var(--r-pill); }
.switch-link a:hover { background: var(--c-primary-softer); }
/* Student area: server-rendered additions */
a.name-btn { text-decoration: none; }
.kid-bar .lang-switch form { display: contents; }
.kid-flash { display: flex; gap: .6rem; align-items: center; margin: 0 auto 1.25rem; padding: .85rem 1rem; border-radius: var(--r-md); background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); color: var(--c-primary-strong); font-weight: 500; max-width: 34rem; }
.kid-flash .ph-fill { font-size: 1.3rem; flex: none; }
.join-input { width: 100%; min-height: 4.25rem; padding: 0 1rem; font-family: var(--f-student); font-size: clamp(1.6rem, 6vw, 2.1rem); font-weight: 600; letter-spacing: .3em; text-align: center; text-transform: uppercase; color: var(--c-heading); background: var(--c-surface); border: 2px solid var(--c-line-strong); border-radius: var(--r-md); }
.join-input::placeholder { letter-spacing: .04em; font-size: 1.1rem; font-weight: 500; color: var(--c-muted); text-transform: none; }
.join-input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-ring-soft); }
.pic-noscript { display: grid; gap: .75rem; margin-top: 1rem; }
.pic-noscript select { min-height: 3rem; font-size: 1.05rem; }
.empty-work { display: grid; justify-items: center; gap: .75rem; padding: 2.5rem 1.25rem; margin-top: 1.5rem; text-align: center; border: 2px dashed var(--c-line-strong); border-radius: var(--r-xl); background: var(--c-surface); }
.empty-work .ic-tile { width: 4rem; height: 4rem; font-size: 2.2rem; }
.empty-work h2 { font-family: var(--f-student); font-weight: 600; font-variation-settings: normal; letter-spacing: -.01em; font-size: 1.35rem; }
.empty-work p { color: var(--c-ink-2); max-width: 26rem; }
.kid-signout-form { display: inline; }
.locked-box { display: grid; justify-items: center; gap: .6rem; margin-top: 1.5rem; padding: 1.5rem; text-align: center; border-radius: var(--r-lg); background: var(--c-late-soft); color: var(--c-late); }
.locked-box .ph-duotone { font-size: 2.5rem; }
.locked-box p { color: var(--c-ink); font-size: 1.05rem; }
/* Picture password colors (one per picture, no inline styles) */
.pic-sun i, .pic-star i { --pic-fg: var(--c-accent-strong); }
.pic-fish i, .pic-boat i { --pic-fg: var(--c-av-sky-fg); }
.pic-tree i { --pic-fg: var(--c-av-leaf-fg); }
.pic-rocket i, .pic-orange-slice i, .pic-balloon i { --pic-fg: var(--c-av-coral-fg); }
.pic-bicycle i, .pic-moon i { --pic-fg: var(--c-primary); }
.pic-ice-cream i, .pic-flower-tulip i { --pic-fg: var(--c-av-lilac-fg); }
.pic-btn i { color: var(--pic-fg, var(--c-primary)); }
.pic-btn.is-picked { border-color: var(--c-primary); background: var(--c-primary-softer); }
.scan-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1rem; font-weight: 600; color: var(--c-primary); border-radius: var(--r-pill); }
.scan-btn:hover { background: var(--c-primary-softer); }
.scan-btn .ph-duotone { font-size: 1.5rem; }
.scanner { display: grid; justify-items: center; gap: .9rem; }
.scanner-video { width: min(100%, 22rem); aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); background: var(--c-ink); }

/* ==========================================================================
   8. Classes and roster (Phase 2)
   ========================================================================== */
.class-hero { position: relative; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; padding: 1.25rem 1.4rem 1.25rem 1.7rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-1); overflow: hidden; }
.class-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .4rem; background: var(--cls, var(--c-primary)); }
.ch-main { min-width: 0; }
.class-hero h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.ch-section { font-family: var(--f-body); font-size: .5em; font-weight: 600; color: var(--c-muted); letter-spacing: 0; vertical-align: middle; }
.ch-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .4rem; font-size: .88rem; color: var(--c-ink-2); }
.ch-meta > span { display: inline-flex; align-items: center; gap: .35rem; }
.ch-meta .ph { color: var(--c-primary); font-size: 1.05rem; }
.ch-side { display: flex; align-items: flex-start; gap: .5rem; }
.code-box { position: relative; }
.code-box summary { display: grid; grid-template-columns: auto auto; align-items: center; gap: .1rem .75rem; padding: .55rem .85rem; border-radius: var(--r-md); background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); cursor: pointer; list-style: none; }
.code-box summary::-webkit-details-marker { display: none; }
.cb-label { grid-column: 1 / -1; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.cb-code { font-size: 1.45rem; }
.cb-code.is-off { text-decoration: line-through; color: var(--c-muted); }
.cb-hint { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 600; color: var(--c-primary); }
.code-box[open] .cb-hint .ph { transform: rotate(180deg); }
.code-pop { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; width: min(19rem, 86vw); display: grid; gap: .6rem; justify-items: center; padding: 1rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); text-align: center; }
.code-pop img { width: 10rem; height: 10rem; image-rendering: pixelated; }
.code-pop .label { justify-self: start; }
.code-pop .input { font-size: .82rem; }
.login-code { font-family: var(--f-student); font-weight: 600; letter-spacing: .06em; color: var(--c-primary-strong); }
code.login-code { font-size: .95rem; background: var(--c-primary-softer); padding: .15rem .5rem; border-radius: var(--r-xs); }
.big-code { font-size: 1.6rem; margin: .25rem 0 .5rem; overflow-wrap: anywhere; }
.pin-btn.is-pinned { color: var(--c-accent-strong); }
.pin-mark { color: var(--c-accent-strong); font-size: 1.1rem; }
.tabs a, .tab-soon { display: inline-flex; align-items: center; gap: .4rem; }
.tab-soon { padding: .7rem .9rem; font-size: .9rem; font-weight: 600; color: var(--c-muted); opacity: .6; white-space: nowrap; }
.tab-soon .soon { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.roster-tools { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: .9rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.add-student { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 26rem; }
.add-student .input { flex: 1 1 14rem; min-height: 2.6rem; width: auto; }
.add-student .input.num { flex: 0 1 9rem; }
.roster-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.who-cell { display: flex; align-items: center; gap: .65rem; }
.who-cell .avatar { --av: 2.1rem; }
.actions-cell { text-align: right; }
.actions-cell .icon-btn { display: inline-grid; width: 2.3rem; height: 2.3rem; font-size: 1.15rem; }
.table td .inline-form .btn { margin-left: .35rem; }
.pic-code { display: inline-flex; gap: .35rem; }
.pc-item { position: relative; display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: var(--r-xs); background: var(--c-accent-softer); border: 1px solid var(--c-accent-soft); color: var(--c-primary); font-size: 1.3rem; }
.pc-item b { position: absolute; top: -.35rem; left: -.35rem; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font-size: .6rem; }
.pic-code.big { gap: .75rem; margin: .5rem 0; }
.pic-code.big .pc-item { width: 4.2rem; height: 5rem; grid-template-rows: 1fr auto; padding: .4rem 0 .3rem; font-size: 2rem; }
.pic-code.big .pc-item span { font-size: .7rem; font-weight: 600; color: var(--c-ink-2); }
.pic-code.big .pc-item b { width: 1.25rem; height: 1.25rem; font-size: .72rem; }

.member-grid { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.member { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-2); font-size: .9rem; font-weight: 550; cursor: pointer; }
.member input { width: 1.1rem; height: 1.1rem; accent-color: var(--c-primary); }
.member .avatar { --av: 1.8rem; }
.member.is-dim { opacity: .55; cursor: default; }
.member small { font-weight: 500; color: var(--c-muted); }
.group-list { display: grid; gap: 1rem; }
.group-card .panel-head h2 { font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); font-size: 1.25rem; letter-spacing: var(--display-tracking); color: var(--c-heading); }

.dl-settings { display: grid; gap: 0; }
.dl-settings div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--c-line); font-size: .92rem; }
.dl-settings div:first-child { border-top: 0; padding-top: 0; }
.dl-settings dt { color: var(--c-muted); font-weight: 600; }
.dl-settings dd { margin: 0; }
@media (max-width: 520px) { .dl-settings div { grid-template-columns: 1fr; gap: .1rem; } }
.danger-zone { border-color: color-mix(in srgb, var(--c-missing) 30%, var(--c-line)); }
.danger-zone .section-title { color: var(--c-missing); }
.btn-danger { background: var(--c-missing); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--c-missing) 85%, #000); }

.color-choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.color-choice { position: relative; cursor: pointer; }
.color-choice input { position: absolute; opacity: 0; }
.swatch-dot { display: block; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 3px solid var(--c-surface); box-shadow: 0 0 0 1px var(--c-line-strong); }
.color-choice input:checked + .swatch-dot { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-ink); }
.color-choice input:focus-visible + .swatch-dot { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.sw-0f6b66 { background: #0F6B66; } .sw-e0920c { background: #E0920C; } .sw-b4472e { background: #B4472E; } .sw-1c6798 { background: #1C6798; }
.sw-62479f { background: #62479F; } .sw-2f7a3a { background: #2F7A3A; } .sw-a83f6b { background: #A83F6B; } .sw-4b4a44 { background: #4B4A44; }
.option-cards { display: grid; gap: .6rem; }
@media (min-width: 720px) { .option-cards { grid-template-columns: repeat(3, 1fr); } }
.option-card { position: relative; cursor: pointer; }
.option-card input { position: absolute; opacity: 0; }
.oc-body { display: grid; gap: .25rem; height: 100%; padding: .9rem 1rem; border: 1.5px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.oc-body .ph-duotone { font-size: 1.6rem; color: var(--c-primary); }
.oc-body b { font-size: .95rem; }
.oc-body span { font-size: .84rem; color: var(--c-ink-2); }
.option-card input:checked + .oc-body { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-ring-soft); background: var(--c-primary-softer); }
.option-card input:focus-visible + .oc-body { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.avatar-choices { display: flex; flex-wrap: wrap; gap: .4rem; }
.avatar-choice { position: relative; cursor: pointer; }
.avatar-choice input { position: absolute; opacity: 0; }
.avatar-choice .avatar { --av: 2.6rem; border: 2px solid transparent; }
.avatar-choice input:checked + .avatar { border-color: var(--c-ink); box-shadow: 0 0 0 2px var(--c-surface) inset; }
.avatar-choice input:focus-visible + .avatar { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.student-head { display: flex; align-items: center; gap: 1rem; }
.student-head .avatar { --av: 3.6rem; }
.student-head h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.two-col-app { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1180px) { .two-col-app { grid-template-columns: minmax(0, 1fr) 21rem; } }
.class-card .cc-band { background: var(--cls, var(--c-primary)); }
.cc-alert { color: var(--c-late); font-weight: 600; }
.cc-code.is-off { text-decoration: line-through; opacity: .6; }
.cc-stats { flex-wrap: wrap; }
/* Scroll containers must contain absolutely positioned children (e.g. .sr-only labels),
   or those children escape the scroll box and widen the whole page on phones. */
.table-wrap, .tabs, .quick, .work-tabs { position: relative; }
a.kid-back, a.cb-change { text-decoration: none; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.who-cell a { white-space: nowrap; }
@media (max-width: 640px) {
  .roster th:nth-child(2), .roster td:nth-child(2) { display: none; }
  .roster th, .roster td { padding: .65rem .7rem; }
}

/* ==========================================================================
   9. Activities, assignments, and student work (Phase 3)
   ========================================================================== */
.action-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.form-row.three { display: grid; gap: 1rem; }
@media (min-width: 720px) { .form-row.three { grid-template-columns: repeat(3, 1fr); } }
.form-row.tight { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.field.narrow { max-width: 14rem; }
.narrow-form { max-width: 44rem; }
.input-suffix { display: flex; align-items: center; gap: .45rem; }
.input-suffix .input { min-width: 0; }
.input-suffix span { font-size: .85rem; color: var(--c-muted); font-weight: 600; }
.empty-tight { padding: 1.75rem 1.25rem; }
.rich p + p, .rich p + ul, .rich p + ol, .rich ul + p, .rich ol + p { margin-top: .55rem; }
.rich ul, .rich ol { padding-left: 1.3rem; }
.rich a { color: var(--c-primary); font-weight: 600; }
.center-cluster { justify-content: center; }
.chip-btn { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .8rem; border-radius: var(--r-pill); border: 1px solid var(--c-line-strong); background: var(--c-surface); font-size: .82rem; font-weight: 600; color: var(--c-ink-2); }
.chip-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.chip-btn.is-on { background: var(--c-primary-softer); border-color: var(--c-primary); color: var(--c-primary-strong); }

/* ---------- Activity list ---------- */
.act-list { display: grid; gap: .65rem; list-style: none; padding: 0; margin: 0; }
.act-row { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: center; padding: 1rem 1.1rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); transition: border-color .15s ease, box-shadow .15s ease; }
.act-row:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-2); }
.act-ic { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: var(--r-md); background: var(--c-primary-softer); color: var(--c-primary); font-size: 1.6rem; flex: none; }
.act-main { min-width: 0; }
.act-title { font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); letter-spacing: var(--display-tracking); font-size: 1.22rem; color: var(--c-heading); text-decoration: none; overflow-wrap: anywhere; }
.act-title:hover { color: var(--c-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.act-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; margin-top: .3rem; font-size: .84rem; color: var(--c-ink-2); }
.act-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.act-meta .ph { color: var(--c-primary); }
.act-used { color: var(--c-primary-strong); font-weight: 600; }
.act-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
@media (min-width: 760px) {
  .act-row { grid-template-columns: auto 1fr auto; }
  .act-actions { grid-column: auto; justify-content: flex-end; }
}

/* ---------- Builder ---------- */
.builder { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1100px) { .builder { grid-template-columns: minmax(0, 1fr) 19.5rem; } }
.builder-main { min-width: 0; }
.builder-side { display: grid; gap: 1rem; }
.side-panel { padding: 1.1rem; }
.side-panel .section-title { display: flex; align-items: center; gap: .45rem; }
.side-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.compact-form { gap: .75rem; }
.compact-form .check { font-size: .88rem; }
.compact-form fieldset { display: grid; gap: .4rem; }
.act-hero { position: relative; padding: 1.35rem 1.4rem 1.1rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-1); overflow: hidden; }
.act-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: .3rem; background: linear-gradient(90deg, var(--c-primary) 0 70%, var(--c-accent) 70%); }
.act-hero-top { display: flex; gap: 1rem; align-items: flex-start; }
.act-hero-text { min-width: 0; }
.act-hero h1 { font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.15rem); overflow-wrap: anywhere; }
.act-instructions { margin-top: .9rem; padding: .8rem 1rem; border-left: 3px solid var(--c-accent); background: var(--c-surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--c-ink); font-size: .95rem; }
.act-details { margin-top: 1rem; border-top: 1px solid var(--c-line); padding-top: .8rem; }
.act-details > summary { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem; font-weight: 600; font-size: .9rem; color: var(--c-primary); cursor: pointer; list-style: none; }
.act-details > summary::-webkit-details-marker { display: none; }
.qlist { display: grid; gap: .85rem; list-style: none; padding: 0; margin: 0; counter-reset: q; }
.qcard { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); scroll-margin-top: 5.5rem; }
.qcard:target { border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-ring-soft); }
.qcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .65rem; padding: .65rem .75rem .65rem 1rem; border-bottom: 1px solid var(--c-line); background: var(--c-surface-2); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.qnum { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); font-weight: 700; font-size: .85rem; flex: none; }
.qtype-tag { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .86rem; color: var(--c-ink); }
.qtype-tag .ph { color: var(--c-primary); font-size: 1.05rem; }
.qpts { font-size: .8rem; font-weight: 700; color: var(--c-accent-strong); background: var(--c-accent-softer); border-radius: var(--r-pill); padding: .1rem .5rem; }
.qflag { display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; font-weight: 600; color: var(--c-ink-2); background: var(--c-bg-2); border-radius: var(--r-pill); padding: .1rem .5rem; }
.qcard-actions { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.qcard-actions .icon-btn { width: 2.3rem; height: 2.3rem; font-size: 1.1rem; }
.qcard-actions .icon-btn:disabled { opacity: .35; cursor: default; background: none; }
.qcard-body { display: grid; gap: .7rem; padding: 1rem 1.1rem 1.1rem; }
.qprompt { font-size: 1rem; color: var(--c-ink); overflow-wrap: anywhere; }
.qmedia { max-width: min(100%, 22rem); height: auto; border-radius: var(--r-md); border: 1px solid var(--c-line); }
.qaudio { width: min(100%, 22rem); }
.key-choices { display: grid; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.key-choices li { display: flex; align-items: flex-start; gap: .55rem; padding: .45rem .7rem; border-radius: var(--r-sm); background: var(--c-bg); font-size: .93rem; color: var(--c-ink-2); }
.key-choices li .ph, .key-choices li .ph-fill { font-size: 1.15rem; margin-top: .1rem; flex: none; color: var(--c-line-strong); }
.key-choices li.is-right { background: var(--c-done-soft); color: var(--c-ink); font-weight: 600; }
.key-choices li.is-right .ph-fill { color: var(--c-done); }
.key-choices.pics { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.key-choices.pics li { position: relative; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: .6rem; font-size: .85rem; }
.key-choices.pics li > .ph, .key-choices.pics li > .ph-fill { position: absolute; top: .4rem; left: .4rem; margin: 0; }
.key-choice-img { width: 100%; max-width: 6rem; height: auto; }
.key-line { display: flex; align-items: flex-start; gap: .45rem; font-size: .93rem; color: var(--c-ink-2); }
.key-line .ph-fill, .key-line .ph { color: var(--c-done); font-size: 1.15rem; margin-top: .1rem; flex: none; }
.key-line b { color: var(--c-ink); overflow-wrap: anywhere; }
.key-note { font-size: .82rem; color: var(--c-muted); margin-left: 1.6rem; }
.key-pairs { display: grid; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.key-pairs li { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; padding: .45rem .7rem; border-radius: var(--r-sm); background: var(--c-bg); font-size: .93rem; }
.key-pairs .ph { color: var(--c-primary); }
.key-order { display: grid; gap: .3rem; padding-left: 1.4rem; margin: 0; font-size: .93rem; color: var(--c-ink); }
.key-order li::marker { color: var(--c-primary); font-weight: 700; }
.blank-key { display: inline-block; padding: 0 .45rem; margin: 0 .1rem; border-bottom: 2px solid var(--c-primary); background: var(--c-primary-softer); border-radius: 4px 4px 0 0; font-weight: 600; color: var(--c-primary-strong); }
.conj-line, .wq-conj { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.conj-line b, .wq-conj b { font-size: 1.15rem; color: var(--c-heading); }
.conj-line span, .wq-conj span { padding: .15rem .6rem; border-radius: var(--r-pill); background: var(--c-accent-softer); border: 1px solid var(--c-accent-soft); font-size: .85rem; font-weight: 600; color: var(--c-accent-strong); }
.qexplain summary { font-size: .84rem; font-weight: 600; color: var(--c-primary); cursor: pointer; }
.qexplain .rich { margin-top: .45rem; padding: .6rem .8rem; border-radius: var(--r-sm); background: var(--c-bg); font-size: .9rem; color: var(--c-ink-2); }
.add-q { padding: 1.25rem; border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-xl); background: var(--c-surface-2); }
.add-q .section-title { font-family: var(--f-body); font-size: 1.05rem; font-weight: 650; margin-bottom: .9rem; color: var(--c-ink); font-variation-settings: normal; }
.type-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
.type-tile { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; align-items: center; padding: .8rem .9rem; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.type-tile i { grid-row: span 2; font-size: 1.7rem; color: var(--c-primary); }
.type-tile b { font-size: .92rem; font-weight: 650; }
.type-tile span { font-size: .78rem; color: var(--c-muted); line-height: 1.35; }
a.type-tile:hover { border-color: var(--c-primary); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.type-tile.is-soon { opacity: .55; }

/* ---------- Question editor ---------- */
.qeditor { display: grid; gap: 1rem; max-width: 52rem; }
.qtype-title { display: inline-flex; align-items: center; gap: .6rem; }
.qtype-title .ph-duotone { font-size: 1.15em; color: var(--c-primary); }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.lang-pick select { min-height: 2rem; padding: .2rem 2rem .2rem .7rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface) url("../img/chevron-down.svg") no-repeat right .6rem center / .85rem; appearance: none; font-size: .82rem; font-weight: 600; color: var(--c-ink-2); }
.help code, .section-lead code { font-size: .88em; padding: .05rem .35rem; border-radius: 4px; background: var(--c-primary-softer); color: var(--c-primary-strong); }
.media-field { display: grid; gap: .8rem; padding-top: .9rem; border-top: 1px solid var(--c-line); }
.media-current { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.media-current img { max-width: 10rem; height: auto; border-radius: var(--r-sm); border: 1px solid var(--c-line); }
.row-list { display: grid; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.edit-row { display: flex; align-items: center; gap: .5rem; }
.edit-row-img { width: 3rem; height: 3rem; flex: none; border-radius: var(--r-sm); border: 1px solid var(--c-line); background: var(--c-surface); }
.edit-row .input { min-width: 0; flex: 1; }
.row-correct { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: var(--r-sm); background: var(--c-bg); border: 1px solid var(--c-line); cursor: pointer; }
.row-correct input { width: 1.25rem; height: 1.25rem; accent-color: var(--c-done); cursor: pointer; }
.row-correct:has(input:checked) { background: var(--c-done-soft); border-color: var(--c-done); }
.pair-arrow { color: var(--c-primary); flex: none; }
.row-num { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--c-primary-softer); color: var(--c-primary-strong); font-weight: 700; font-size: .85rem; }
.tf-pick { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; max-width: 26rem; }
.tf-pick .oc-body { justify-items: center; text-align: center; padding: 1rem; }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; padding: .85rem 0; background: linear-gradient(to top, var(--c-bg) 70%, transparent); }
@media (max-width: 899px) { .sticky-actions { bottom: 3.6rem; } }
.rich-editor { background: var(--c-surface); }
.ql-toolbar.ql-snow { border: 1px solid var(--c-line-strong); border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--c-surface-2); font-family: var(--f-body); }
.ql-container.ql-snow { border: 1px solid var(--c-line-strong); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); font-family: var(--f-body); font-size: 1rem; }
.ql-editor { min-height: 6.5rem; line-height: 1.55; color: var(--c-ink); }
.ql-editor.ql-blank::before { color: var(--c-muted); font-style: normal; }
.rich-editor.is-invalid .ql-container, .rich-editor.is-invalid + .ql-container { border-color: var(--c-missing); }
.ql-container:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-ring-soft); }

/* ---------- Assign ---------- */
.assign-form { max-width: 52rem; }
.step-dot { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .35rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font-size: .8rem; font-weight: 800; vertical-align: 1px; }
.class-picks { display: grid; gap: .5rem; }
.class-pick { position: relative; display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem .75rem 1.1rem; border: 1.5px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); cursor: pointer; overflow: hidden; }
.class-pick:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-softer); }
.class-pick input { width: 1.2rem; height: 1.2rem; accent-color: var(--c-primary); flex: none; }
.cp-band { position: absolute; left: 0; top: 0; bottom: 0; width: .3rem; background: var(--cls, var(--c-primary)); }
.cp-text { display: grid; flex: 1; min-width: 0; }
.cp-text b { font-weight: 650; }
.cp-text span { font-size: .82rem; color: var(--c-muted); }
.cp-more { font-size: .8rem; font-weight: 600; color: var(--c-primary); white-space: nowrap; }
.seg-choice { display: inline-flex; padding: .25rem; gap: .25rem; border-radius: var(--r-pill); background: var(--c-bg-2); margin-top: .35rem; }
.seg-choice label { position: relative; cursor: pointer; }
.seg-choice input { position: absolute; opacity: 0; }
.seg-choice span { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1.1rem; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; color: var(--c-ink-2); }
.seg-choice input:checked + span { background: var(--c-surface); color: var(--c-primary-strong); box-shadow: var(--shadow-1); }
.seg-choice input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.quick-dates { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.more-options > summary { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--c-primary); cursor: pointer; min-height: 2rem; }
.target-panel { padding: .9rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.target-panel legend { margin-bottom: .55rem; }
.option-card input:disabled + .oc-body { opacity: .5; cursor: not-allowed; }

/* ---------- Assignment page and class tab ---------- */
.asg-hero { position: relative; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; justify-content: space-between; padding: 1.25rem 1.4rem 1.25rem 1.7rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-1); overflow: hidden; }
.asg-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .4rem; background: var(--cls, var(--c-primary)); }
.asg-hero-main { min-width: 0; flex: 1 1 22rem; }
.asg-class { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.asg-hero h1 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem); margin-top: .15rem; overflow-wrap: anywhere; }
.asg-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.stat-row { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.stat { display: grid; align-content: center; gap: .1rem; padding: .85rem 1rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.stat b { font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); font-size: 1.8rem; line-height: 1; color: var(--c-heading); }
.stat span { font-size: .82rem; color: var(--c-muted); font-weight: 600; }
.stat-wide { grid-column: 1 / -1; gap: .45rem; }
@media (min-width: 900px) { .stat-wide { grid-column: span 2; } }
.note-card { display: flex; gap: .75rem; padding: .9rem 1.1rem; border-radius: var(--r-md); background: var(--c-accent-softer); border: 1px solid var(--c-accent-soft); }
.note-card > .ph-duotone { font-size: 1.5rem; color: var(--c-accent-strong); flex: none; }
.asg-table td { vertical-align: middle; }
.row-edit { position: relative; display: inline-block; text-align: left; }
.row-edit > summary { list-style: none; }
.row-edit > summary::-webkit-details-marker { display: none; }
.row-edit-pop { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; width: min(18rem, 80vw); padding: 1rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.edit-panel > summary { display: flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none; margin: 0; }
.edit-panel > summary::-webkit-details-marker { display: none; }
.asg-list { display: grid; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.asg-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; align-items: center; padding: .95rem 1rem 1rem 1.15rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.asg-row-main { min-width: 0; }
.asg-title { font-weight: 650; font-size: 1.02rem; color: var(--c-heading); text-decoration: none; overflow-wrap: anywhere; }
.asg-title:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.asg-row-prog { grid-column: 1 / -1; display: grid; gap: .3rem; font-size: .84rem; color: var(--c-ink-2); }
.asg-row > .icon-btn { grid-row: 1; grid-column: 2; }
@media (min-width: 760px) {
  .asg-row { grid-template-columns: minmax(0, 1fr) 13rem auto; }
  .asg-row-prog { grid-column: auto; }
  .asg-row > .icon-btn { grid-row: auto; grid-column: auto; }
}

/* ---------- Student work page ---------- */
.work-page { flex: 1; }
.work-bar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--c-surface) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line); }
.work-bar-inner { display: flex; align-items: center; gap: .75rem; width: min(100% - 2rem, 50rem); margin-inline: auto; min-height: 4rem; padding: .5rem 0; }
.work-back { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; font-size: 1.3rem; color: var(--c-ink-2); }
.work-back:hover { background: var(--c-bg-2); }
.work-title { min-width: 0; flex: 1; }
.work-title h1 { font-family: var(--f-student); font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; font-variation-settings: normal; color: var(--c-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-sub { display: flex; flex-wrap: wrap; gap: .1rem .75rem; font-size: .86rem; color: var(--c-ink-2); }
.work-sub .is-late { color: var(--c-late); font-weight: 600; }
.work-timer { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: var(--r-pill); background: var(--c-primary-softer); color: var(--c-primary-strong); font-variant-numeric: tabular-nums; flex: none; }
.work-timer b { font-size: 1.05rem; }
.work-timer .ph-duotone { font-size: 1.25rem; }
.work-timer.is-low { background: var(--c-missing-soft); color: var(--c-missing); animation: pulse-soft 1.6s ease-in-out infinite; }
@keyframes pulse-soft { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-missing) 18%, transparent); } }
.save-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: var(--r-pill); background: var(--c-done-soft); color: var(--c-done); font-size: .84rem; font-weight: 600; flex: none; white-space: nowrap; }
.save-chip .ph-fill, .save-chip .ph-duotone { font-size: 1.1rem; }
.save-chip.is-saving { background: var(--c-bg-2); color: var(--c-ink-2); }
.save-chip.is-retrying, .save-chip.is-offline { background: var(--c-late-soft); color: var(--c-late); white-space: normal; }
@media (max-width: 560px) {
  .save-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .save-chip.is-retrying span, .save-chip.is-offline span { position: static; width: auto; height: auto; clip: auto; font-size: .78rem; }
  .work-title h1 { font-size: 1rem; }
}
.work-progress { height: 4px; background: var(--c-bg-2); }
.work-progress .bar-fill { background: var(--c-accent); transition: width .35s ease; border-radius: 0 4px 4px 0; }
.work-container { width: min(100% - 2rem, 50rem); padding-top: 1.5rem; padding-bottom: 3rem; }
.work-intro { display: grid; gap: .9rem; margin-bottom: 1.25rem; }
.work-intro .announce { margin-top: 0; }
.work-instructions { padding: 1rem 1.15rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); font-size: 1.05rem; color: var(--c-ink); }
.work-form { display: grid; gap: 1.1rem; }

.wq { position: relative; display: grid; gap: 1rem; padding: 1.25rem 1.25rem 1.35rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-1); scroll-margin-top: 5.5rem; }
.wq::before { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: transparent; transition: background .2s ease; }
.wq.is-answered::before { background: var(--c-accent); }
.wq-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wq-num { font-family: var(--f-student); font-size: .88rem; font-weight: 600; letter-spacing: .02em; color: var(--c-muted); font-variation-settings: normal; }
.wq-num:focus { outline: none; }
.wq-pts { font-size: .78rem; font-weight: 700; color: var(--c-accent-strong); background: var(--c-accent-softer); border-radius: var(--r-pill); padding: .1rem .55rem; }
.wq-speak { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; min-height: 2.5rem; padding: 0 .85rem; border-radius: var(--r-pill); border: 1px solid var(--c-line); font-size: .88rem; font-weight: 600; color: var(--c-primary); }
.wq-speak .ph-duotone { font-size: 1.3rem; }
.wq-speak:hover { background: var(--c-primary-softer); }
.wq-speak.is-on { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.work-speak { justify-self: start; margin: 0 0 -.3rem; }
.wq-prompt { font-size: 1.2rem; line-height: 1.55; color: var(--c-heading); overflow-wrap: anywhere; }
.wq-prompt.fill { line-height: 2.3; }
.blank-input { display: inline-block; min-width: 5rem; max-width: 100%; margin: 0 .2rem; padding: .15rem .5rem; font: inherit; font-weight: 600; color: var(--c-primary-strong); text-align: center; background: var(--c-primary-softer); border: 0; border-bottom: 2.5px solid var(--c-primary); border-radius: 6px 6px 0 0; line-height: 1.5; }
.blank-input:focus { outline: none; background: var(--c-accent-softer); border-bottom-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-ring-soft); }
.wq-media { width: auto; max-width: 100%; max-height: 22rem; height: auto; border-radius: var(--r-md); border: 1px solid var(--c-line); justify-self: start; }
.wq-audio { width: min(100%, 26rem); }
.wq-hint { font-size: .95rem; color: var(--c-ink-2); margin-top: -.35rem; }
.wchoices { display: grid; gap: .6rem; }
.wchoice { position: relative; display: flex; align-items: center; gap: .85rem; min-height: 3.6rem; padding: .7rem 1rem; border: 2px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); cursor: pointer; font-size: 1.1rem; transition: border-color .15s ease, background .15s ease, transform .1s ease; }
.wchoice:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); }
.wchoice:active { transform: scale(.995); }
.wchoice input { position: absolute; opacity: 0; pointer-events: none; }
.wchoice-mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%; border: 2px solid var(--c-line-strong); font-weight: 700; font-size: .95rem; color: var(--c-ink-2); background: var(--c-surface); transition: all .15s ease; }
.wchoice.multi .wchoice-mark { border-radius: 8px; }
.wchoice.multi .wchoice-mark i { opacity: 0; }
.wchoice-text { flex: 1; overflow-wrap: anywhere; color: var(--c-ink); }
.wchoice:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-softer); }
.wchoice:has(input:checked) .wchoice-mark { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.wchoice.multi:has(input:checked) .wchoice-mark i { opacity: 1; }
.wchoice:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.wchoice:has(input:disabled) { cursor: default; }
.wchoices:has(.tf) { grid-template-columns: 1fr 1fr; }
/* Picture choices (built-in courses): cards in a grid, the letter or check in the corner. */
.wchoices.pics { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.wchoice.pic { flex-direction: column; justify-content: center; gap: .45rem; padding: 2.4rem .75rem .9rem; text-align: center; }
.wchoice.pic .wchoice-mark { position: absolute; top: .55rem; left: .55rem; width: 1.9rem; height: 1.9rem; }
.wchoice.pic .wchoice-text { flex: none; }
.wchoice-img { display: block; width: 100%; max-width: 8.5rem; height: auto; aspect-ratio: 1; }
.wchoice.tf { justify-content: center; min-height: 4.25rem; font-weight: 600; }
.wchoice.tf .wchoice-text { flex: none; }
.wtext { min-height: 3.5rem; font-family: var(--f-student); font-size: 1.2rem; border-width: 2px; border-radius: var(--r-md); }
.wnum { max-width: 14rem; font-variant-numeric: tabular-nums; }
.wlong { min-height: 12rem; font-family: var(--f-student); font-size: 1.1rem; line-height: 1.6; border-width: 2px; border-radius: var(--r-md); }
.word-count { font-size: .9rem; color: var(--c-muted); margin-top: -.5rem; }
.word-count.is-met { color: var(--c-done); font-weight: 600; }
.wmatch { display: grid; gap: .6rem; }
.wmatch-row { display: grid; grid-template-columns: 1fr; gap: .4rem; padding: .7rem .8rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.wmatch-left { font-size: 1.1rem; font-weight: 600; color: var(--c-heading); overflow-wrap: anywhere; }
.wmatch-arrow { display: none; color: var(--c-primary); }
.wmatch-pick { min-height: 3.1rem; font-size: 1.05rem; border-width: 2px; border-radius: var(--r-md); }
.wmatch-pick:not(:has(option[value=""]:checked)) { border-color: var(--c-primary); background-color: var(--c-primary-softer); }
@media (min-width: 640px) {
  .wmatch-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; }
  .wmatch-arrow { display: block; font-size: 1.2rem; }
}
.worder { display: grid; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.worder-item { display: flex; align-items: center; gap: .75rem; min-height: 3.6rem; padding: .5rem .6rem .5rem .75rem; border: 2px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); transition: border-color .2s ease, background .2s ease; }
.worder-item.just-moved { border-color: var(--c-accent); background: var(--c-accent-softer); }
.worder-num { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); font-weight: 700; }
.worder-text { flex: 1; font-size: 1.08rem; color: var(--c-ink); overflow-wrap: anywhere; }
.worder-pos select { min-height: 2.75rem; width: 4.5rem; }
.worder-move { display: flex; gap: .25rem; flex: none; }
.worder-move .icon-btn { width: 2.75rem; height: 2.75rem; border: 1px solid var(--c-line); background: var(--c-surface-2); }
.worder-move .icon-btn:disabled { opacity: .3; cursor: default; }
.accent-wrap { margin-top: -.25rem; }
.accent-toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: 0 .9rem; border-radius: var(--r-pill); border: 1px dashed var(--c-line-strong); font-size: .9rem; font-weight: 600; color: var(--c-ink-2); }
.accent-toggle span { color: var(--c-primary); font-weight: 700; }
.accent-bar { display: flex; flex-wrap: wrap; gap: .35rem; }
.accent-key { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .4rem; border-radius: var(--r-sm); border: 1px solid var(--c-line-strong); background: var(--c-surface); font-family: var(--f-student); font-size: 1.2rem; font-weight: 600; color: var(--c-heading); box-shadow: 0 2px 0 var(--c-line); transition: transform .08s ease, box-shadow .08s ease; }
.accent-key:hover { border-color: var(--c-primary); color: var(--c-primary); }
.accent-key:active { transform: translateY(2px); box-shadow: none; }
.accent-key.shift[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }

.wq.is-right { border-color: color-mix(in srgb, var(--c-done) 45%, var(--c-line)); }
.wq.is-wrong { border-color: color-mix(in srgb, var(--c-missing) 40%, var(--c-line)); }
.wq.is-partial { border-color: color-mix(in srgb, var(--c-late) 45%, var(--c-line)); }
.wq.is-review { border-color: color-mix(in srgb, var(--c-progress) 40%, var(--c-line)); }
.wq-result { display: grid; gap: .5rem; padding: .85rem 1rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.res-line { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.05rem; }
.res-line .ph-fill, .res-line .ph-duotone { font-size: 1.4rem; }
.is-right .res-line { color: var(--c-done); }
.is-wrong .res-line { color: var(--c-missing); }
.is-partial .res-line { color: var(--c-late); }
.res-line.review { color: var(--c-progress); }
.res-pts { font-weight: 600; font-size: .9rem; color: var(--c-ink-2); }
.res-accent { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--c-late); }
.res-accent .ph-duotone { font-size: 1.3rem; }
.res-right { font-size: 1rem; color: var(--c-ink-2); }
.res-right b { color: var(--c-heading); }
.res-explain { padding-top: .5rem; border-top: 1px solid var(--c-line); font-size: .98rem; color: var(--c-ink); }
.wq .wchoice:has(input:disabled:checked) { opacity: 1; }

.step-nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.step-count { font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.turn-in { display: grid; gap: .9rem; justify-items: center; padding: 1.5rem 1rem; margin-top: .25rem; border-radius: var(--r-xl); background: var(--c-surface-2); border: 1.5px dashed var(--c-line-strong); text-align: center; }
.turn-in-note { display: flex; align-items: center; gap: .5rem; color: var(--c-ink-2); font-size: .95rem; }
.turn-in-note .ph-duotone { font-size: 1.4rem; color: var(--c-done); }
.turn-in .btn-accent { min-width: 12rem; }

.kid-dialog { width: min(100% - 2rem, 30rem); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--c-surface); box-shadow: var(--shadow-3); color: var(--c-ink); }
.kid-dialog::backdrop { background: rgba(11, 45, 43, .45); backdrop-filter: blur(2px); }
.kid-dialog form { display: grid; justify-items: center; gap: .75rem; padding: 1.75rem 1.5rem 1.5rem; text-align: center; font-family: var(--f-student); }
.kid-dialog .ic-tile { width: 3.75rem; height: 3.75rem; font-size: 2rem; }
.kid-dialog h2 { font-family: var(--f-student); font-weight: 600; font-variation-settings: normal; letter-spacing: -.01em; font-size: 1.45rem; }
.kid-dialog p { color: var(--c-ink-2); font-size: 1.05rem; }
.unanswered-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.unanswered-btn { min-height: 2.5rem; padding: 0 .9rem; border-radius: var(--r-pill); background: var(--c-late-soft); color: var(--c-late); font-weight: 600; }
.unanswered-btn:hover { background: var(--c-accent-soft); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .5rem; }
.sending-cover { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(251, 248, 242, .92); backdrop-filter: blur(3px); }
.sending-cover[hidden] { display: none; }
.sending-card { display: grid; justify-items: center; gap: 1rem; max-width: 26rem; padding: 2rem 1.5rem; border-radius: var(--r-xl); background: var(--c-surface); box-shadow: var(--shadow-3); text-align: center; }
.sending-card h2 { font-family: var(--f-student); font-weight: 600; font-variation-settings: normal; font-size: 1.25rem; letter-spacing: -.01em; }
.spinner { width: 3rem; height: 3rem; border-radius: 50%; border: 4px solid var(--c-primary-soft); border-top-color: var(--c-primary); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Result ---------- */
.kid-h2 { font-family: var(--f-student); font-weight: 600; font-variation-settings: normal; letter-spacing: -.01em; font-size: 1.4rem; color: var(--c-heading); }
.result-hero { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.1rem; align-items: center; margin-top: 1rem; padding: 1.4rem; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-2); }
.result-badge { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--c-done); color: #fff; font-size: 2rem; box-shadow: 0 0 0 6px var(--c-done-soft); }
.result-hero.is-new .result-badge { animation: pop-in .5s cubic-bezier(.2, 1.4, .5, 1) both; }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } }
.result-text { min-width: 0; }
.result-eyebrow { font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-done); }
.result-text h1 { font-family: var(--f-student); font-weight: 600; font-variation-settings: normal; letter-spacing: -.015em; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); color: var(--c-heading); overflow-wrap: anywhere; }
.result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-top: .3rem; font-size: .92rem; color: var(--c-ink-2); }
.result-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.result-score { grid-column: 1 / -1; display: flex; align-items: baseline; gap: .6rem; padding-top: .9rem; border-top: 1px solid var(--c-line); }
.result-score b { font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); font-size: 2.6rem; line-height: 1; color: var(--c-primary-strong); }
.result-score span { color: var(--c-ink-2); font-size: 1rem; }
@media (min-width: 640px) {
  .result-hero { grid-template-columns: auto 1fr auto; }
  .result-score { grid-column: auto; display: grid; justify-items: end; gap: .2rem; padding: 0 0 0 1.25rem; border-top: 0; border-left: 1px solid var(--c-line); text-align: right; }
}
.result-note { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; color: var(--c-ink-2); }
.result-note .ph-duotone { font-size: 1.4rem; color: var(--c-primary); }
.retry-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding: 1rem 1.15rem; border-radius: var(--r-lg); background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); }
.retry-box p { font-weight: 600; color: var(--c-primary-strong); }
.result-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.kid-container > .kid-flash { margin: 1rem 0 0; max-width: none; }

/* ---------- My Work (server tabs) ---------- */
.work-tabs a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 3rem; padding: 0 .9rem; border-radius: calc(var(--r-lg) - 4px); font-weight: 600; font-size: 1rem; color: var(--c-ink-2); white-space: nowrap; text-decoration: none; }
.work-tabs a .ph-duotone { font-size: 1.3rem; }
.work-tabs a[aria-current="page"] { background: var(--c-surface); color: var(--c-primary-strong); box-shadow: var(--shadow-1); }
[aria-current="page"] .tab-count { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
@media (max-width: 480px) { .work-tabs a .ph-duotone { display: none; } .work-tabs a { padding: 0 .5rem; font-size: .92rem; } }
.work-list { list-style: none; padding: 0; margin: 0; }
.wc-main { min-width: 0; }
.wc-title { overflow-wrap: anywhere; }
.work-card.is-late { border-color: color-mix(in srgb, var(--c-late) 35%, var(--c-line)); }
.wc-score { font-weight: 700; color: var(--c-primary-strong); }
.wc-btn { justify-content: center; }
.small-empty { padding: 2rem 1.25rem; }
.small-empty h2 { font-size: 1.15rem; }

/* ---------- Teacher preview ---------- */
.preview-mode { padding-top: 0; }
.preview-bar { background: var(--c-deep); color: var(--c-on-deep); }
.preview-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; width: min(100% - 2rem, 50rem); margin-inline: auto; padding: .65rem 0; font-family: var(--f-body); }
.preview-bar p { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }
.preview-bar .ph-duotone { font-size: 1.3rem; color: var(--c-accent); }
.preview-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.preview-bar .lang-switch { background: rgba(255, 255, 255, .1); }
.preview-bar .lang-switch a { display: inline-flex; align-items: center; min-height: 2.1rem; padding: 0 .8rem; border-radius: var(--r-pill); font-size: .84rem; font-weight: 600; color: var(--c-on-deep-2); text-decoration: none; }
.preview-bar .lang-switch a[aria-pressed="true"] { background: var(--c-surface); color: var(--c-primary-strong); }
.preview-note { display: flex; align-items: flex-start; gap: .45rem; margin-top: .75rem; font-family: var(--f-body); font-size: .88rem; color: var(--c-muted); }
.preview-mode .work-bar { top: 0; }
.wchoice-mark .ph { font-size: 1.15rem; }
.wchoice-mark .ph::before { -webkit-text-stroke: .6px currentColor; }

/* ==========================================================================
   10. Grading, gradebook, insights, calendar (Phase 4)
   ========================================================================== */
.mini-h { font-family: var(--f-body); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .6rem; font-variation-settings: normal; }
.is-bad { color: var(--c-missing) !important; }
.btn.is-disabled { opacity: .45; pointer-events: none; }
.seg-links { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: var(--r-pill); background: var(--c-bg-2); }
.seg-links a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: 0 1rem; border-radius: var(--r-pill); font-size: .88rem; font-weight: 600; color: var(--c-ink-2); text-decoration: none; }
.seg-links a:hover { color: var(--c-ink); }
.seg-links a[aria-current="page"] { background: var(--c-surface); color: var(--c-primary-strong); box-shadow: var(--shadow-1); }
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-row .chip-btn { text-decoration: none; }
.tab-num { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; margin-left: .25rem; border-radius: var(--r-pill); background: var(--c-bg-2); font-size: .74rem; font-weight: 700; color: var(--c-ink-2); }
.tabs a[aria-current="page"] .tab-num { background: var(--c-primary); color: var(--c-on-primary); }
.qflag-manual { background: var(--c-progress-soft); color: var(--c-progress); }
.manual-check { padding: .75rem .9rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); }

/* ---------- Submission review ---------- */
.review-head { display: grid; gap: 1rem; align-items: center; padding: 1.15rem 1.25rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
@media (min-width: 900px) { .review-head { grid-template-columns: minmax(0, 1fr) auto auto; } }
.review-head .student-head h1 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.review-score { display: flex; align-items: baseline; gap: .4rem; }
.review-score b { font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); font-size: 2.3rem; line-height: 1; color: var(--c-primary-strong); }
.review-score span { color: var(--c-muted); font-weight: 600; }
.review-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.review-form { display: grid; gap: 1rem; max-width: 62rem; }
.gq { background: var(--c-surface); border: 1px solid var(--c-line); border-left: 4px solid var(--c-line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-1); scroll-margin-top: 5rem; }
.gq.is-right { border-left-color: var(--c-done); }
.gq.is-partial { border-left-color: var(--c-late); }
.gq.is-wrong { border-left-color: var(--c-missing); }
.gq.is-review { border-left-color: var(--c-progress); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-progress) 12%, transparent), var(--shadow-1); }
.gq-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--c-line); }
.gq-head h2 { display: flex; align-items: center; gap: .6rem; font-family: var(--f-body); font-size: .95rem; font-weight: 600; font-variation-settings: normal; letter-spacing: 0; }
.gq-body { display: grid; gap: .8rem; padding: 1rem 1.1rem 1.15rem; }
.student-answer { position: relative; padding: .8rem 1rem .8rem 1rem; border-radius: var(--r-md); background: var(--c-bg); border: 1px solid var(--c-line); }
.student-answer p { font-size: 1.02rem; color: var(--c-ink); overflow-wrap: anywhere; }
.student-answer.long p { font-family: var(--f-student); font-size: 1.05rem; line-height: 1.7; white-space: normal; }
.sa-label { display: block; margin-bottom: .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.sa-words { display: block; margin-top: .45rem; font-size: .8rem; color: var(--c-muted); }
.blank-answer { display: inline-block; min-width: 3.5rem; padding: 0 .45rem; margin: 0 .1rem; border-bottom: 2px solid; border-radius: 4px 4px 0 0; font-weight: 600; text-align: center; }
.blank-answer.is-right { background: var(--c-done-soft); border-color: var(--c-done); color: var(--c-done); }
.blank-answer.is-partial { background: var(--c-late-soft); border-color: var(--c-late); color: var(--c-late); }
.blank-answer.is-wrong { background: var(--c-missing-soft); border-color: var(--c-missing); color: var(--c-missing); }
.blank-answer.is-empty { background: var(--c-bg-2); border-color: var(--c-line-strong); }
.gq-grade { display: grid; gap: .9rem; padding-top: .9rem; border-top: 1px dashed var(--c-line); }
@media (min-width: 720px) { .gq-grade { grid-template-columns: 11rem minmax(0, 1fr); align-items: start; } }
.points-field .input { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; max-width: 6rem; }
.points-field .input[data-pending] { border-color: var(--c-progress); background: var(--c-progress-soft); }
.points-field .input.just-filled { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 35%, transparent); transition: box-shadow .3s ease; }
.bank-btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem; padding: 0 .65rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; color: var(--c-primary); }
.bank-btn:hover { background: var(--c-primary-softer); }
.review-overall { display: grid; gap: 1rem; }
.review-actions { z-index: 6; }
.bank-pop { position: absolute; z-index: 60; width: min(26rem, calc(100vw - 1.5rem)); max-height: 24rem; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; }
.bank-search { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--c-line); color: var(--c-muted); }
.bank-search input { flex: 1; min-width: 0; border: 0; background: none; font-size: .95rem; color: var(--c-ink); }
.bank-search input:focus { outline: none; }
.bank-list { flex: 1; overflow-y: auto; list-style: none; padding: .35rem; margin: 0; }
.bank-item { display: grid; gap: .1rem; width: 100%; padding: .55rem .65rem; border-radius: var(--r-sm); text-align: left; font-size: .9rem; color: var(--c-ink); }
.bank-item:hover, .bank-item:focus { background: var(--c-primary-softer); outline: none; }
.bank-tag { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-accent-strong); }
.bank-empty { padding: .8rem; font-size: .9rem; color: var(--c-muted); }
.bank-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .55rem .8rem; border-top: 1px solid var(--c-line); font-size: .82rem; background: var(--c-surface-2); }

/* ---------- Rubric grid ---------- */
.rubric-wrap { overflow-x: auto; position: relative; }
.rubric-table { width: 100%; min-width: 34rem; border-collapse: separate; border-spacing: .35rem; margin: -.35rem; }
.rubric-caption { caption-side: top; text-align: left; padding: 0 .35rem .3rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.rubric-caption .ph { margin-right: .3rem; color: var(--c-primary); }
.rubric-table th { width: 22%; padding: .5rem .6rem; text-align: left; vertical-align: top; font-size: .88rem; font-weight: 650; color: var(--c-ink); background: var(--c-surface-2); border-radius: var(--r-sm); }
.rubric-cell { vertical-align: top; border: 1.5px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); transition: border-color .15s ease, background .15s ease; }
.rubric-cell label { display: grid; gap: .2rem; height: 100%; padding: .5rem .6rem; cursor: pointer; }
.rubric-cell > .rl-head, .rubric-cell > .rl-desc { padding: 0 .6rem; }
.rubric-cell > .rl-head { padding-top: .5rem; }
.rubric-cell > .rl-desc { padding-bottom: .5rem; }
.rubric-cell input { position: absolute; opacity: 0; }
.rubric-cell:hover { border-color: var(--c-line-strong); }
.rubric-cell.is-on { border-color: var(--c-primary); background: var(--c-primary-softer); }
.rubric-cell:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.rl-head { display: flex; justify-content: space-between; gap: .4rem; font-size: .84rem; }
.rl-head span { font-weight: 700; color: var(--c-accent-strong); }
.rl-desc { display: block; font-size: .8rem; line-height: 1.4; color: var(--c-ink-2); }
.rubric-total { margin-top: .6rem; font-size: .88rem; color: var(--c-ink-2); }
.rubric-total b, .rubric-total [data-rubric-total] { color: var(--c-primary-strong); font-weight: 700; }

/* ---------- Grading queue and notifications ---------- */
.queue { display: grid; gap: 1rem; }
.queue-group { position: relative; overflow: hidden; padding-left: 1.5rem; }
.queue-group::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .3rem; background: var(--cls, var(--c-primary)); }
.queue-group .panel-head h2 a { color: var(--c-heading); text-decoration: none; }
.queue-group .panel-head h2 a:hover { text-decoration: underline; }
.queue-list { display: grid; list-style: none; padding: 0; margin: 0; }
.queue-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .2rem .8rem; align-items: center; padding: .6rem .5rem; border-top: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); border-radius: var(--r-sm); }
.queue-list li:first-child .queue-row { border-top: 0; }
.queue-row:hover { background: var(--c-surface-2); }
.queue-row .avatar { --av: 2.2rem; grid-row: span 2; }
.qr-name { font-weight: 600; }
.qr-meta { grid-column: 2; font-size: .8rem; color: var(--c-muted); }
.qr-score { grid-row: 1 / span 2; grid-column: 3; font-size: .86rem; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.queue-row > .ph { grid-row: 1 / span 2; color: var(--c-muted); }
.late-word { color: var(--c-late); font-weight: 600; }
.notice-list { display: grid; gap: .5rem; list-style: none; padding: 0; margin: 0; max-width: 46rem; }
.notice-btn { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .8rem 1rem; text-align: left; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); color: var(--c-ink); }
.notice-btn:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-1); }
.notice.is-new .notice-btn { border-color: var(--c-accent-soft); background: var(--c-accent-softer); }
.notice-btn .ic-tile { width: 2.5rem; height: 2.5rem; font-size: 1.3rem; flex: none; }
.notice-text { flex: 1; display: grid; gap: .1rem; min-width: 0; }
.notice-text span { font-size: .8rem; color: var(--c-muted); }

/* ---------- Assignment results ---------- */
.results-grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1000px) { .results-grid { grid-template-columns: 19rem minmax(0, 1fr); } }
.score-sum { display: flex; gap: 1.5rem; margin-bottom: 1rem; }
.score-sum div { display: grid; }
.score-sum b { font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); font-size: 1.9rem; line-height: 1; color: var(--c-heading); }
.score-sum span { font-size: .78rem; font-weight: 600; color: var(--c-muted); }
.dist { display: grid; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.dist li { display: grid; grid-template-columns: 4.2rem 1fr 1.5rem; gap: .6rem; align-items: center; font-size: .82rem; }
.dist-label { color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.dist-bar { height: .7rem; border-radius: var(--r-pill); background: var(--c-bg-2); overflow: hidden; }
.dist-bar .bar-fill { background: var(--c-primary); }
.dist li:nth-child(4) .bar-fill { background: var(--c-late); }
.dist li:nth-child(5) .bar-fill { background: var(--c-missing); }
.dist-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.items { display: grid; gap: .1rem; list-style: none; padding: 0; margin: 0; }
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding: .65rem 0; border-top: 1px solid var(--c-line); }
.item:first-child { border-top: 0; padding-top: 0; }
.item-num { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--c-bg-2); font-size: .78rem; font-weight: 700; color: var(--c-ink-2); }
.item.is-reteach .item-num { background: var(--c-missing-soft); color: var(--c-missing); }
.item-q { font-size: .9rem; color: var(--c-ink); overflow-wrap: anywhere; }
.item-bar { height: .45rem; margin-top: .35rem; border-radius: var(--r-pill); background: var(--c-bg-2); overflow: hidden; }
.item.is-reteach .item-bar .bar-fill { background: var(--c-missing); }
.item-wrong { margin-top: .35rem; font-size: .78rem; color: var(--c-muted); }
.item-wrong b { color: var(--c-ink-2); }
.item-pct { display: grid; justify-items: end; gap: .25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.score-link { font-weight: 600; color: var(--c-primary-strong); text-decoration: none; }
.score-link:hover { text-decoration: underline; }

/* ---------- Gradebook ---------- */
.gb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.gb-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.gb-filters .input { min-height: 2.4rem; width: auto; min-width: 9rem; padding-top: .35rem; padding-bottom: .35rem; font-size: .9rem; }
.gb-actions { margin-left: auto; }
.gb-mode { margin: .75rem 0 .6rem; }
.gb-wrap { position: relative; overflow: auto; width: fit-content; max-width: 100%; max-height: calc(100vh - 13rem); min-height: 14rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.gb-wrap:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.gb { border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.gb th, .gb td { border-bottom: 1px solid var(--c-line); border-right: 1px solid var(--c-line); background: var(--c-surface); }
.gb thead th { position: sticky; top: 0; z-index: 2; background: var(--c-surface-2); vertical-align: bottom; }
.gb tfoot th, .gb tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--c-bg-2); font-weight: 700; text-align: center; }
.gb .gb-student { position: sticky; left: 0; z-index: 1; min-width: 12rem; max-width: 15rem; padding: .45rem .7rem; text-align: left; background: var(--c-surface); }
.gb thead .gb-corner { left: 0; z-index: 3; padding: .6rem .7rem; text-align: left; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.gb tfoot .gb-student { z-index: 3; background: var(--c-bg-2); text-align: left; }
.gb-student a { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--c-ink); text-decoration: none; }
.gb-student a:hover span:last-child { text-decoration: underline; }
.gb-student .avatar { --av: 1.7rem; flex: none; }
.gb-student a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-asg { min-width: 8.5rem; max-width: 10rem; padding: .55rem .6rem; text-align: left; font-weight: 600; }
.gb-asg a { display: block; color: var(--c-heading); text-decoration: none; line-height: 1.25; }
.gb-asg a:hover { text-decoration: underline; }
.gb-asg-meta { display: block; margin-top: .2rem; font-size: .72rem; font-weight: 500; color: var(--c-muted); }
.gb-cat { display: inline-block; margin-top: .25rem; padding: .05rem .4rem; border-radius: var(--r-pill); background: var(--c-primary-softer); font-size: .68rem; font-weight: 700; color: var(--c-primary-strong); }
.gb-grade-h { min-width: 6.5rem; padding: .55rem .6rem; text-align: center; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.gb .gb-grade { position: relative; padding: .3rem .5rem; text-align: center; background: var(--c-primary-softer); }
.gb-how { display: inline-block; }
.gb-how > summary { display: inline-flex; align-items: baseline; gap: .3rem; padding: .2rem .4rem; border-radius: var(--r-sm); cursor: pointer; list-style: none; font-variant-numeric: tabular-nums; }
.gb-how > summary::-webkit-details-marker { display: none; }
.gb-how > summary:hover { background: var(--c-surface); }
.gb-how > summary b { color: var(--c-primary-strong); }
.gb-letter { font-size: .78rem; font-weight: 700; color: var(--c-ink-2); }
.gb-how-pop { position: absolute; left: 0; top: calc(100% + .25rem); z-index: 70; width: 17rem; padding: .8rem .9rem; text-align: left; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-2); font-size: .82rem; }
.gb-how-title { font-weight: 700; margin-bottom: .35rem; }
.gb-how-pop ul { padding-left: 1rem; color: var(--c-ink-2); display: grid; gap: .2rem; }
.gb-cell { position: relative; min-width: 5.5rem; padding: 0; text-align: center; font-variant-numeric: tabular-nums; }
.gb-cell.is-na { background: repeating-linear-gradient(135deg, var(--c-surface-2) 0 6px, var(--c-bg) 6px 12px); }
.gb-input { width: 100%; height: 2.6rem; padding: 0 1.4rem 0 .5rem; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 600; color: var(--c-ink); }
.gb-input:focus { outline: none; background: var(--c-accent-softer); box-shadow: inset 0 0 0 2px var(--c-primary); }
.gb-input::placeholder { color: var(--c-missing); font-weight: 700; opacity: .9; }
.gb-cell.st-progress .gb-input::placeholder { color: var(--c-progress); }
.gb-val { display: block; padding: .6rem .5rem; font-weight: 600; }
.gb-cell.st-missing { background: color-mix(in srgb, var(--c-missing-soft) 55%, var(--c-surface)); }
.gb-cell.st-missing .gb-val { color: var(--c-missing); }
.gb-cell.st-idle .gb-val { color: var(--c-muted); }
.gb-cell.is-late { background: color-mix(in srgb, var(--c-late-soft) 45%, var(--c-surface)); }
.gb-mark { position: absolute; right: .35rem; top: .3rem; font-size: .8rem; color: var(--c-late); pointer-events: none; }
.st-progress .gb-mark { color: var(--c-progress); }
.st-returned .gb-mark { color: var(--c-returned); }
.gb-open { position: absolute; left: .25rem; top: .25rem; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 4px; font-size: .75rem; color: var(--c-muted); opacity: 0; text-decoration: none; }
.gb-cell:hover .gb-open, .gb-open:focus { opacity: 1; background: var(--c-surface); }
.gb-cell.is-saving { opacity: .6; }
.gb-cell.is-saved { box-shadow: inset 0 0 0 2px var(--c-done); transition: box-shadow .2s ease; }
.gb-cell.is-error { box-shadow: inset 0 0 0 2px var(--c-missing); }
.gb-cell .status { margin: .45rem .3rem; font-size: .72rem; }
.gb-cell a { text-decoration: none; }
.gb-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; }
.gb-save [data-gb-status].is-bad { color: var(--c-missing); font-weight: 600; }
.paper-panel > summary, .edit-panel > summary { display: flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none; }
.paper-panel > summary::-webkit-details-marker { display: none; }

/* ---------- Grading settings ---------- */
@media (min-width: 720px) { .option-cards.two-cards { grid-template-columns: 1fr 1fr; } }
.late-box { display: grid; gap: .75rem; padding: 1rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.scale-table { border-collapse: separate; border-spacing: .5rem .35rem; margin: 0 -.5rem; }
.scale-table th { text-align: left; font-size: .78rem; color: var(--c-muted); font-weight: 600; }
.scale-table .input { width: 7rem; min-height: 2.4rem; }
.cat-table .input { min-height: 2.4rem; }
.cat-table td:nth-child(2), .cat-table td:nth-child(3) { width: 8rem; }
.period-list { display: grid; list-style: none; padding: 0; margin: 0 0 .5rem; }
.period-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .55rem 0; border-top: 1px solid var(--c-line); }
.period-list li:first-child { border-top: 0; }
.period-list li span { flex: 1; font-size: .88rem; color: var(--c-ink-2); }

/* ---------- Class insights and skills ---------- */
.insight-grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1100px) { .insight-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .insight-grid > :first-child { grid-row: span 2; } }
.legend { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--c-muted); }
.lg { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-left: .4rem; }
.lg-done, .tb-done { background: var(--c-primary); }
.lg-score, .tb-score { background: var(--c-accent); }
.trend { display: flex; align-items: flex-end; gap: .5rem; min-height: 14rem; padding: 0; margin: 0; list-style: none; overflow-x: auto; }
.trend li { flex: 1 0 3.2rem; }
.trend-col { display: grid; gap: .4rem; justify-items: center; text-decoration: none; color: var(--c-ink-2); }
.trend-bars { display: flex; align-items: flex-end; gap: 3px; height: 11rem; width: 100%; justify-content: center; padding-bottom: 1px; border-bottom: 1px solid var(--c-line-strong); background: linear-gradient(to top, transparent calc(50% - 1px), var(--c-line) 50%, transparent calc(50% + 1px)); }
.tb { display: block; width: 40%; max-width: 1.1rem; border-radius: 4px 4px 0 0; }
.trend-label { font-size: .7rem; text-align: center; line-height: 1.2; word-break: break-word; }
.trend-col:hover .trend-label { color: var(--c-primary); text-decoration: underline; }
.risk-list, .miss-rows { display: grid; list-style: none; padding: 0; margin: 0; }
.risk-list li, .miss-rows li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .55rem 0; border-top: 1px solid var(--c-line); font-size: .9rem; }
.risk-list li:first-child, .miss-rows li:first-child { border-top: 0; }
.risk-list .who-cell { text-decoration: none; color: var(--c-ink); font-weight: 600; }
.risk-reasons { display: flex; flex-wrap: wrap; gap: .3rem; }
.inline-field { display: flex; align-items: center; gap: .5rem; }
.inline-field .input { min-height: 2.3rem; width: auto; }
.rate-list { display: grid; list-style: none; padding: 0; margin: 0; }
.rate-row { display: grid; gap: .5rem .9rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--c-line); }
.rate-row:first-child { border-top: 0; }
@media (min-width: 760px) { .rate-row { grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr); } }
.rate-pick { display: flex; gap: .3rem; }
.rate-opt { position: relative; cursor: pointer; }
.rate-opt input { position: absolute; opacity: 0; }
.rate-opt span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--r-sm); border: 1.5px solid var(--c-line-strong); background: var(--c-surface); font-weight: 700; color: var(--c-ink-2); }
.rate-opt input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.rate-opt input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.rate-note { min-height: 2.4rem; }
.skill-sum { display: grid; list-style: none; padding: 0; margin: 0; }
.skill-sum li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; padding: .45rem 0; border-top: 1px solid var(--c-line); }
.skill-sum li:first-child { border-top: 0; }
.skill-sum b { min-width: 8rem; }
.skill-dots { display: inline-flex; gap: .25rem; }
.skill-dots span { width: .7rem; height: .7rem; border-radius: 50%; background: var(--c-bg-2); border: 1px solid var(--c-line-strong); }
.skill-dots span.on { background: var(--c-primary); border-color: var(--c-primary); }
.progress-card { padding: 1.15rem 1.25rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-1); }

/* ---------- Comment bank and rubrics ---------- */
.comment-add { max-width: 52rem; }
.comment-add-btn { align-self: end; }
.comment-list { display: grid; gap: .6rem; list-style: none; padding: 0; margin: 0; max-width: 52rem; }
.comment-form { display: grid; gap: .5rem; padding: .8rem .9rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.comment-form textarea.input { min-height: 3.6rem; }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.comment-meta .input { width: auto; min-height: 2.2rem; flex: 0 1 10rem; padding-top: .3rem; padding-bottom: .3rem; font-size: .88rem; }
.comment-meta .small { margin-right: auto; }
.rubric-card { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: center; padding: 1rem 1.1rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
@media (min-width: 760px) { .rubric-card { grid-template-columns: auto 1fr auto; } }
.rubric-card .act-actions { grid-column: 1 / -1; }
@media (min-width: 760px) { .rubric-card .act-actions { grid-column: auto; } }
.rubric-editor { display: grid; gap: 1rem; }
.rubric-edit-wrap { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: .5rem; }
.rubric-edit { border-collapse: separate; border-spacing: .4rem; min-width: 46rem; }
.rubric-edit th, .rubric-edit td { vertical-align: top; }
.re-corner { width: 13rem; text-align: left; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); padding: .4rem; }
.re-level { position: relative; min-width: 10rem; padding: .5rem; background: var(--c-surface-2); border-radius: var(--r-sm); }
.re-level .input { min-height: 2.3rem; }
.re-label { font-weight: 700; margin-bottom: .35rem; }
.re-points { width: 4.5rem !important; }
.re-remove-col { position: absolute; top: -.6rem; right: -.6rem; width: 1.8rem; height: 1.8rem; font-size: .9rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 50%; }
.re-crit { display: flex; gap: .3rem; align-items: flex-start; }
.re-crit .input { font-weight: 600; }
.re-desc { min-height: 5.5rem !important; font-size: .86rem; }

/* ---------- Reports ---------- */
.report-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.report-card { position: relative; overflow: hidden; padding-left: 1.5rem; display: grid; gap: .9rem; align-content: start; }
.report-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .3rem; background: var(--cls, var(--c-primary)); }
.report-card .panel-head { margin-bottom: 0; }
.report-card .panel-head h2 a { color: var(--c-heading); text-decoration: none; }
.report-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.report-stats div { display: grid; }
.report-stats b { font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); font-size: 1.45rem; line-height: 1.1; color: var(--c-heading); }
.report-stats span { font-size: .72rem; font-weight: 600; color: var(--c-muted); }
.report-risk a { color: var(--c-primary); font-weight: 600; }
.report-actions { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- Calendar ---------- */
.cal-head { align-items: center; }
.cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: .9rem; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; list-style: none; padding: 0; margin: 0 0 0 auto; font-size: .82rem; color: var(--c-ink-2); }
.cal-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.cl-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--cls, var(--c-primary)); }
.cal { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); box-shadow: var(--shadow-1); }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow span { padding: .5rem .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); }
.cal-day { display: flex; flex-direction: column; gap: .25rem; min-height: 7rem; padding: .4rem; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); min-width: 0; }
.cal-row .cal-day:nth-child(7n) { border-right: 0; }
.cal-week .cal-day { min-height: 18rem; }
.cal-day.is-out { background: var(--c-bg); }
.cal-day.is-out .cal-num { color: var(--c-line-strong); }
.cal-day.is-today { background: var(--c-accent-softer); }
.cal-day.is-today .cal-num { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: var(--r-pill); background: var(--c-primary); color: var(--c-on-primary); }
.cal-day.is-drop { background: var(--c-primary-softer); box-shadow: inset 0 0 0 2px var(--c-primary); }
.cal-num { align-self: flex-start; font-size: .82rem; font-weight: 700; color: var(--c-ink-2); padding: 0 .3rem; }
.cal-ev { display: grid; grid-template-columns: auto 1fr; gap: 0 .35rem; align-items: center; padding: .25rem .4rem; border-radius: 6px; font-size: .76rem; line-height: 1.25; text-decoration: none; color: var(--c-ink); background: color-mix(in srgb, var(--cls, var(--c-primary)) 12%, var(--c-surface)); border-left: 3px solid var(--cls, var(--c-primary)); min-width: 0; }
.cal-ev:hover { background: color-mix(in srgb, var(--cls, var(--c-primary)) 22%, var(--c-surface)); }
.cal-ev .ph { font-size: .9rem; color: var(--cls, var(--c-primary)); }
.cal-ev.ev-opens, .cal-ev.ev-closes { background: var(--c-surface); border-left-style: dashed; color: var(--c-ink-2); }
.cal-ev[draggable="true"] { cursor: grab; }
.cal-ev.is-dragging { opacity: .45; }
.ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ev-meta { grid-column: 2; font-size: .7rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .cal-month .cal-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal-month .cal-day { min-height: 4.5rem; padding: .2rem; }
  .cal-month .ev-title { display: none; }
  .cal-month .cal-ev { grid-template-columns: 1fr; justify-items: center; padding: .15rem; }
  .cal-week .cal-row:not(.cal-dow) { grid-template-columns: 1fr; }
  .cal-week .cal-dow { display: none; }
  .cal-week .cal-day { min-height: 0; border-right: 0; }
  .cal-legend { margin-left: 0; }
}
@media print {
  .sidebar, .topbar, .bottom-nav, .no-print, .flashes { display: none !important; }
  .app-shell, .app-main, .dash { display: block; padding: 0; margin: 0; }
  .cal { box-shadow: none; }
  .cal-day { min-height: 6.5rem; }
  .cal-ev { break-inside: avoid; }
}

/* ---------- Dashboard, students, sample ---------- */
.due-color { background: var(--cls, var(--c-primary)); }
.due-title a { color: inherit; text-decoration: none; }
.due-title a:hover { text-decoration: underline; }
.feed p a { color: inherit; text-decoration: none; }
.feed p a:hover b { text-decoration: underline; }
.miss-list a { color: inherit; text-decoration: none; }
.miss-list a:hover { text-decoration: underline; }
.sample-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .85rem 1.1rem; border-radius: var(--r-lg); background: var(--c-returned-soft); border: 1px solid color-mix(in srgb, var(--c-returned) 25%, var(--c-line)); }
.sample-banner > .ph-duotone { font-size: 1.6rem; color: var(--c-returned); }
.sample-banner p { flex: 1 1 18rem; font-size: .92rem; }
.this-week { margin-top: 1.5rem; padding: 1rem 1.15rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); }
.this-week h2 { display: flex; align-items: center; gap: .5rem; font-family: var(--f-student); font-weight: 600; font-variation-settings: normal; letter-spacing: -.01em; font-size: 1.1rem; margin-bottom: .5rem; }
.this-week h2 .ph-duotone { font-size: 1.4rem; color: var(--c-primary); }
.this-week ul { display: grid; list-style: none; padding: 0; margin: 0; }
.this-week a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .6rem .3rem; border-top: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); font-size: 1rem; }
.this-week li:first-child a { border-top: 0; }
.this-week a:hover .tw-title { text-decoration: underline; }
.tw-title { font-weight: 600; }
.tw-due { color: var(--c-ink-2); font-size: .92rem; }
.tw-due.is-late { color: var(--c-late); font-weight: 600; }
.res-feedback { display: grid; gap: .3rem; padding: .7rem .85rem; border-radius: var(--r-md); background: var(--c-returned-soft); border-left: 3px solid var(--c-returned); }
.res-feedback-from { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; color: var(--c-returned); }
.res-feedback-from .ph-duotone { font-size: 1.15rem; }
.wq-result .rubric-wrap { margin-top: .3rem; }
.input-suffix { flex-wrap: nowrap; }
.input-suffix span { white-space: nowrap; }
.review-overall .input-suffix .input, .gq-grade .input-suffix .input { max-width: 8rem; }
.wlong-read { padding: .9rem 1rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1.5px solid var(--c-line); font-family: var(--f-student); font-size: 1.08rem; line-height: 1.65; color: var(--c-ink); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .gb .gb-student { min-width: 8.25rem; max-width: 9.5rem; padding: .4rem .5rem; }
  .gb-student .avatar { --av: 1.4rem; }
  .gb-grade-h, .gb .gb-grade { min-width: 4.75rem; }
  .gb-cell { min-width: 4.5rem; }
  .gb-asg { min-width: 7rem; }
  .gb-actions { margin-left: 0; }
}

/* ==========================================================================
   11. Integrity, focus mode, files, and speaking (Phase 5)
   ========================================================================== */
/* ---------- Student: what is recorded (always shown) ---------- */
.watch-note { display: flex; flex-wrap: wrap; gap: .4rem .6rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.watch-note li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: var(--r-pill); background: var(--c-surface); border: 1px solid var(--c-line); font-family: var(--f-student); font-size: .9rem; color: var(--c-ink-2); }
.watch-note .ph-duotone { font-size: 1.15rem; color: var(--c-primary); flex: none; }
.kid-flash.is-error { background: var(--c-missing-soft); border-color: #F1C4BD; color: var(--c-missing); }
.no-back-hint { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: -.25rem; font-size: .92rem; color: var(--c-muted); text-align: center; }
.no-back-hint[hidden] { display: none; }
.no-back-hint .ph-duotone { font-size: 1.15rem; color: var(--c-late); }
.unanswered-btn.is-passed { display: inline-flex; align-items: center; background: var(--c-idle-soft); color: var(--c-muted); cursor: default; }
.wq[data-locked] { opacity: .7; }
.paste-note { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: var(--r-pill); background: var(--c-late-soft); color: var(--c-late); font-size: .92rem; font-weight: 600; }
.paste-note[hidden] { display: none; }

/* ---------- Student: file upload questions ---------- */
.wfiles { display: grid; gap: .65rem; }
.wfile-list, .wfile-progress { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.wfile-list[hidden], .wfile-progress[hidden], .wfile-add[hidden] { display: none; }
.wfile { display: flex; align-items: center; gap: .75rem; min-height: 3.75rem; padding: .5rem .6rem .5rem .5rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1.5px solid var(--c-line); }
.wfile-thumb { width: 3.5rem; height: 3.5rem; flex: none; object-fit: cover; border-radius: var(--r-sm); background: var(--c-bg-2); }
.wfile-ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex: none; border-radius: var(--r-sm); background: var(--c-primary-softer); color: var(--c-primary); font-size: 1.7rem; }
.wfile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-student); font-weight: 500; color: var(--c-ink); }
a.wfile-name { color: var(--c-primary-strong); text-decoration: underline; text-decoration-color: var(--c-primary-soft); text-underline-offset: 3px; }
.wfile-size { flex: none; font-size: .85rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.wfile-bar { flex: none; width: 5.5rem; height: .45rem; border-radius: var(--r-pill); background: var(--c-bg-2); overflow: hidden; }
.wfile-bar .bar-fill { background: var(--c-accent); transition: width .2s ease; }
.wfile.is-uploading { border-style: dashed; }
.wfile.is-failed { border-color: #F1C4BD; background: var(--c-missing-soft); }
.wfile-count { font-size: .88rem; color: var(--c-muted); }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-pick { cursor: pointer; }
.file-input:focus-visible + .file-pick { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.wfile-add { position: relative; display: flex; }

/* ---------- Recorder (students and teachers) ---------- */
.wrec, .trec { display: grid; gap: .65rem; }
.wrec-saved { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem .75rem; border-radius: var(--r-md); background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); }
.wrec-saved[hidden], .wrec-review[hidden], .wrec-panel[hidden], .wrec-fallback[hidden] { display: none; }
.wrec-label { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-student); font-weight: 600; color: var(--c-primary-strong); }
.wrec-label .ph-duotone { font-size: 1.3rem; }
.wrec-saved audio, .wrec-review audio, .res-audio audio, .sa-audio audio { width: min(100%, 22rem); height: 2.6rem; }
.wrec-dur { font-size: .88rem; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.wrec-panel { display: grid; gap: .6rem; }
.wrec-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.rec-live { display: inline-flex; align-items: center; gap: .5rem; }
.rec-live[hidden] { display: none; }
.rec-dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--c-missing); box-shadow: 0 0 0 0 rgba(176, 42, 33, .45); animation: rec-pulse 1.4s ease-out infinite; }
@keyframes rec-pulse { 0% { box-shadow: 0 0 0 0 rgba(176, 42, 33, .45); } 70% { box-shadow: 0 0 0 .55rem rgba(176, 42, 33, 0); } 100% { box-shadow: 0 0 0 0 rgba(176, 42, 33, 0); } }
.rec-meter { display: block; width: 5.5rem; height: .5rem; border-radius: var(--r-pill); background: var(--c-bg-2); overflow: hidden; }
.rec-level { display: block; width: 100%; height: 100%; background: var(--c-done); transform: scaleX(0); transform-origin: left center; transition: transform .08s linear; }
.rec-time { font-variant-numeric: tabular-nums; color: var(--c-ink-2); }
.rec-time b { color: var(--c-ink); }
.wrec-review { display: grid; gap: .55rem; padding: .75rem; border-radius: var(--r-md); background: var(--c-accent-softer); border: 1px solid var(--c-accent-soft); }
.wrec-status { min-height: 1.2em; font-size: .95rem; color: var(--c-done); }
.wrec-status:empty { display: none; }
.wrec-status.is-error { color: var(--c-missing); font-weight: 600; }
.wrec-fallback { display: grid; gap: .35rem; }
.trec { margin-top: .55rem; }
.trec .wrec-saved { background: var(--c-returned-soft); border-color: #D9CFEE; }
.res-audio { margin-top: .35rem; }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } .rec-level { transition: none; } }

/* ---------- Teacher: builder settings ---------- */
.set-group { display: grid; gap: .45rem; margin: .5rem 0 0; padding: .75rem 0 0; border: 0; border-top: 1px dashed var(--c-line-strong); }
.set-group legend { padding: 0; margin-bottom: .35rem; float: left; width: 100%; }
.sub-check { margin-left: 1.6rem; }
.pool-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .92rem; }
.input-sm { width: auto; min-height: 2.25rem; padding: .3rem .55rem; }
.pool-row .input-sm { width: 4.5rem; }
.qflag-pool { background: var(--c-primary-softer); color: var(--c-primary-strong); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem 1rem; }
.prompt-rec { display: grid; gap: .25rem; margin-top: .85rem; padding-top: .85rem; border-top: 1px dashed var(--c-line); }

/* ---------- Teacher: files and recordings in grading ---------- */
.student-answer.files { display: grid; gap: .5rem; }
.sa-photo { justify-self: start; display: block; }
.sa-photo img { display: block; max-width: 100%; max-height: 24rem; width: auto; height: auto; border-radius: var(--r-sm); border: 1px solid var(--c-line); }
.sa-file, .sa-audio { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.sa-file .ph { font-size: 1.2rem; color: var(--c-primary); }
.look-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: var(--r-pill); background: var(--c-late-soft); color: var(--c-late); font-size: .78rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
a.look-chip:hover { background: var(--c-accent-soft); }

/* ---------- Teacher: how this was written ---------- */
.integrity-panel > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; cursor: pointer; list-style: none; }
.integrity-panel > summary::-webkit-details-marker { display: none; }
.integrity-panel > summary::after { content: ""; margin-left: auto; width: .55rem; height: .55rem; border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted); transform: rotate(45deg); transition: transform .15s ease; }
.integrity-panel[open] > summary::after { transform: rotate(-135deg); }
.integrity-panel[open] > summary { margin-bottom: .75rem; }
.ip-title { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--c-heading); font-size: 1.05rem; }
.ip-title .ph { font-size: 1.3rem; color: var(--c-primary); }
.ip-flags { display: grid; gap: .35rem; list-style: none; margin: .25rem 0 1rem; padding: 0; }
.ip-flags li { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--r-sm); background: var(--c-late-soft); color: var(--c-late); font-weight: 600; font-size: .92rem; }
.ip-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .6rem; margin-bottom: .75rem; }
.ip-stats > div { display: grid; gap: .15rem; align-content: start; padding: .7rem .85rem; border-radius: var(--r-md); background: var(--c-bg); border: 1px solid var(--c-line); }
.ip-stats b { font-size: 1.15rem; color: var(--c-heading); font-variant-numeric: tabular-nums; }
.ip-stats span { font-size: .85rem; color: var(--c-ink-2); }
.ip-ratio .bar { margin: .2rem 0; background: var(--c-accent-soft); }
.ip-ratio .bar-fill { background: var(--c-primary); }
.ip-timeline { margin: .5rem 0 1rem; }
.ip-track { position: relative; height: 1.9rem; border-radius: var(--r-sm); background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); overflow: hidden; }
.ip-mark { position: absolute; top: .3rem; bottom: .3rem; width: 4px; margin-left: -2px; border-radius: 2px; }
.ip-mark.is-away { top: 0; bottom: 0; margin-left: 0; border-radius: 0; background: repeating-linear-gradient(135deg, rgba(119, 112, 95, .32) 0 4px, rgba(119, 112, 95, .16) 4px 8px); }
.ip-mark.is-paste, .ip-mark.is-drop, .lg.is-paste { background: var(--c-accent); }
.ip-mark.is-large_insert, .lg.is-large_insert { background: var(--c-missing); }
.ip-mark.is-paste_blocked, .lg.is-paste_blocked { background: var(--c-returned); }
.ip-mark.is-dictation { background: var(--c-progress); }
.ip-ends { display: flex; justify-content: space-between; margin-top: .25rem; }
.ip-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-top: .35rem; color: var(--c-ink-2); }
.lg { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-left: .35rem; }
.lg:first-child { margin-left: 0; }
.lg.is-away { background: repeating-linear-gradient(135deg, rgba(119, 112, 95, .45) 0 3px, rgba(119, 112, 95, .2) 3px 6px); }
.ip-written { display: grid; gap: .55rem; justify-items: start; padding: .85rem 0 0; margin-top: .85rem; border-top: 1px dashed var(--c-line); font-size: .93rem; color: var(--c-ink-2); }
.ip-written b { color: var(--c-ink); }
.replay { justify-self: stretch; display: grid; gap: .6rem; padding: .85rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.replay[hidden] { display: none; }
.replay-text { min-height: 6rem; max-height: 22rem; overflow: auto; padding: .85rem 1rem; border-radius: var(--r-sm); background: var(--c-surface); border: 1px solid var(--c-line); font-family: var(--f-student); font-size: 1.02rem; line-height: 1.65; color: var(--c-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.replay-text mark.pasted { background: var(--c-accent-soft); color: inherit; border-bottom: 2px solid var(--c-accent); border-radius: 2px; }
.replay-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: text-bottom; background: var(--c-primary); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.replay-track { position: relative; height: .55rem; border-radius: var(--r-pill); background: var(--c-bg-2); }
.rp-mark { position: absolute; top: -.15rem; bottom: -.15rem; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--c-accent); }
.rp-mark.is-blur { background: var(--c-idle); }
.rp-mark.is-large_insert { background: var(--c-missing); }
.rp-mark.is-paste_blocked { background: var(--c-returned); }
.rp-mark.is-dictation { background: var(--c-progress); }
.replay-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.replay-seek { flex: 1; min-width: 8rem; accent-color: var(--c-primary); }
.replay-clock { font-variant-numeric: tabular-nums; color: var(--c-ink-2); min-width: 6.5rem; }
@media (prefers-reduced-motion: reduce) { .replay-caret { animation: none; } }

/* ---------- Account: storage ---------- */
.storage-meter { display: grid; gap: .45rem; max-width: 32rem; }
.storage-meter .bar { height: .65rem; }
.storage-meter.is-full .bar-fill { background: var(--c-missing); }

/* ==========================================================================
   12. Plans and billing (Phase 6)
   ========================================================================== */
.badge-gold { background: var(--c-accent); color: var(--c-on-accent); }

/* Where the plan stands: one icon, one headline, one line */
.plan-state { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.1rem; align-items: center; padding: 1.25rem 1.35rem; border-radius: var(--r-lg); border: 1px solid var(--c-line); background: var(--c-surface); box-shadow: var(--shadow-1); }
.plan-state-ic { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; font-size: 1.75rem; background: var(--c-primary-soft); color: var(--c-primary-strong); }
.plan-state h2 { font-family: var(--f-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); line-height: 1.2; }
.plan-state p { margin-top: .3rem; color: var(--c-ink-2); font-size: .94rem; max-width: 46rem; }
.plan-state .bar { margin-top: .8rem; max-width: 22rem; }
.plan-state-act { grid-column: 1 / -1; }
.plan-state.tone-trial { background: var(--c-accent-softer); border-color: var(--c-accent-soft); }
.plan-state.tone-trial .plan-state-ic { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.plan-state.tone-warn { background: var(--c-late-soft); border-color: color-mix(in srgb, var(--c-late) 25%, transparent); }
.plan-state.tone-warn .plan-state-ic { background: var(--c-surface); color: var(--c-late); }
.plan-state.tone-readonly { background: var(--c-idle-soft); border-color: var(--c-line-strong); }
.plan-state.tone-readonly .plan-state-ic { background: var(--c-surface); color: var(--c-ink-2); }
@media (min-width: 720px) {
  .plan-state { grid-template-columns: auto 1fr auto; }
  .plan-state-act { grid-column: auto; }
}

/* Read-only: what still works and what waits */
.readonly-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.ro-col { padding: 1rem 1.15rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); }
.ro-col h3 { display: flex; gap: .45rem; align-items: center; font-family: var(--f-body); font-size: .95rem; font-weight: 650; color: var(--c-done); }
.ro-col.is-paused h3 { color: var(--c-ink-2); }
.ro-col ul { display: grid; gap: .45rem; margin-top: .7rem; font-size: .9rem; color: var(--c-ink-2); }
.ro-col li { position: relative; padding-left: 1.1rem; }
.ro-col li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .38rem; height: .38rem; border-radius: 50%; background: var(--c-done); opacity: .7; }
.ro-col.is-paused li::before { background: var(--c-muted); }
.ro-keep { display: flex; gap: .45rem; align-items: flex-start; margin-top: .85rem; max-width: 52rem; }
.ro-keep .ph { font-size: 1.05rem; margin-top: .1rem; flex: none; }
@media (min-width: 720px) { .readonly-grid { grid-template-columns: 1fr 1fr; } }

/* Choosing monthly or yearly */
.choose { margin-top: 2rem; }
.choose > .alert-box { margin-top: .9rem; }
.choose .section-title { font-family: var(--f-body); font-size: 1.1rem; font-weight: 650; color: var(--c-ink); letter-spacing: -.005em; }
.pay-options { display: grid; gap: 1rem; margin-top: 1rem; max-width: 46rem; }
.pay-option { position: relative; display: flex; flex-direction: column; padding: 1.35rem; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); }
.pay-option.is-best { border: 2px solid var(--c-primary); box-shadow: var(--shadow-2); }
.pay-option h3 { font-family: var(--f-body); font-size: 1rem; font-weight: 650; color: var(--c-ink); }
.pay-ribbon { position: absolute; top: -.7rem; right: 1.1rem; }
.pay-price { display: flex; align-items: baseline; gap: .35rem; margin-top: .5rem; }
.pay-price b { font-family: var(--f-display); font-size: 2.4rem; line-height: 1; letter-spacing: -.03em; color: var(--c-heading); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); }
.pay-price span { color: var(--c-muted); font-size: .9rem; }
.pay-note { margin: .6rem 0 1.2rem; font-size: .88rem; color: var(--c-ink-2); }
.pay-option .btn { margin-top: auto; }
.pay-option .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pay-secure { display: flex; gap: .45rem; align-items: flex-start; margin-top: .9rem; font-size: .85rem; color: var(--c-muted); max-width: 46rem; }
.pay-secure .ph { font-size: 1.05rem; margin-top: .1rem; flex: none; }
@media (min-width: 640px) { .pay-options { grid-template-columns: 1fr 1fr; } }

.billing-cols { display: grid; gap: 1rem; margin-top: 2rem; align-items: start; }
.billing-cols > * { min-width: 0; }
@media (max-width: 520px) { .pay-history .col-for { display: none; } .pay-history td, .pay-history th { padding-inline: .7rem; } }
@media (min-width: 980px) { .billing-cols { grid-template-columns: 3fr 2fr; } }
.plain-list { display: grid; gap: .6rem; font-size: .9rem; color: var(--c-ink-2); }
.plain-list li { position: relative; padding-left: 1.1rem; }
.plain-list li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .38rem; height: .38rem; border-radius: 50%; background: var(--c-primary); opacity: .6; }
.plain-list b { color: var(--c-ink); }
.export-list { display: grid; gap: 0; }
.export-list li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .7rem 0; border-top: 1px solid var(--c-line); }
.export-list li:first-child { border-top: 0; }

/* App-wide notice for read-only and payment problems (under the top bar) */
.plan-banner { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding: .8rem 1rem; border-radius: var(--r-lg); border: 1px solid var(--c-line-strong); background: var(--c-idle-soft); font-size: .92rem; }
.plan-banner p { display: flex; gap: .55rem; align-items: center; color: var(--c-ink); }
.plan-banner .ph-duotone { font-size: 1.35rem; flex: none; color: var(--c-ink-2); }
.plan-banner.is-warn { background: var(--c-late-soft); border-color: color-mix(in srgb, var(--c-late) 25%, transparent); }
.plan-banner.is-warn .ph-duotone { color: var(--c-late); }
.side-plan-card { margin-bottom: .75rem; padding: 1rem; border-radius: var(--r-md); background: var(--c-idle-soft); border: 1px solid var(--c-line-strong); }
.side-plan-card b { display: flex; gap: .4rem; align-items: center; font-size: .9rem; }
.side-plan-card p { margin: .35rem 0 .7rem; font-size: .82rem; color: var(--c-ink-2); line-height: 1.45; }

/* ==========================================================================
   13. Class staff, substitutes, schools, Google Classroom (Phase 7)
   ========================================================================== */
.sub-h { font-family: var(--f-body); font-size: .92rem; font-weight: 650; color: var(--c-ink); letter-spacing: -.005em; }

/* Class staff */
.staff-grid { display: grid; gap: 1.25rem; align-items: start; }
.staff-grid > * { min-width: 0; }
@media (min-width: 1000px) { .staff-grid { grid-template-columns: 1.15fr 1fr; } .staff-grid .role-guide { grid-column: 1 / -1; } }
.staff-list { display: grid; }
.staff-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .85rem; padding: .8rem 0; border-top: 1px solid var(--c-line); }
.staff-row:first-child { border-top: 0; padding-top: 0; }
.staff-av { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: .8rem; font-weight: 700; letter-spacing: .02em; background: var(--c-primary-soft); color: var(--c-primary-strong); }
.staff-av.role-owner { background: var(--c-primary); color: var(--c-on-primary); }
.staff-av.role-aide { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.staff-who { flex: 1 1 12rem; min-width: 0; }
.staff-who b { font-weight: 650; }
.staff-who .cell-sub { overflow-wrap: anywhere; }
.staff-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.role-badge.role-owner { background: var(--c-primary); color: var(--c-on-primary); }
.role-badge.role-co_teacher { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.role-badge.role-aide { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.role-badge.role-school_admin { background: var(--c-returned-soft); color: var(--c-returned); }
.role-badge.role-teacher { background: var(--c-primary-softer); color: var(--c-primary-strong); }

/* Small menu on <details> */
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-pop { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 30; display: grid; min-width: 13rem; padding: .35rem; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-2); }
.more-pop form { display: block; }
.more-pop button, .more-pop a { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 2.5rem; padding: .45rem .65rem; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: .9rem; color: var(--c-ink); text-align: left; text-decoration: none; cursor: pointer; }
.more-pop button:hover, .more-pop a:hover, .more-pop button:focus-visible { background: var(--c-bg-2); }
.more-pop .is-danger { color: var(--c-missing); }

/* Choosing a role */
.role-pick { display: grid; gap: .6rem; border: 0; padding: 0; margin: 0; }
.role-pick legend { margin-bottom: .45rem; }
@media (min-width: 560px) { .role-pick { grid-template-columns: 1fr 1fr; } .role-pick legend { grid-column: 1 / -1; } }
.role-card { position: relative; display: block; cursor: pointer; }
.role-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.role-card-body { display: grid; gap: .25rem; height: 100%; padding: .85rem .95rem; border-radius: var(--r-md); border: 1.5px solid var(--c-line-strong); background: var(--c-surface); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.role-card-body .ph-duotone { font-size: 1.5rem; color: var(--c-primary); }
.role-card-body b { font-size: .95rem; }
.role-card-body span { font-size: .84rem; color: var(--c-ink-2); line-height: 1.45; }
.role-card input:checked + .role-card-body { border-color: var(--c-primary); background: var(--c-primary-softer); box-shadow: 0 0 0 3px var(--c-ring-soft); }
.role-card input:focus-visible + .role-card-body { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.invite-list { display: grid; margin-top: .5rem; }
.invite-list li { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; justify-content: space-between; padding: .65rem 0; border-top: 1px solid var(--c-line); scroll-margin-top: 6rem; }
.invite-list li > span { min-width: 0; overflow-wrap: anywhere; }
.perm-table th[scope="row"] { font-weight: 500; font-size: .9rem; color: var(--c-ink); text-transform: none; letter-spacing: 0; background: transparent; white-space: normal; min-width: 10rem; }
@media (max-width: 520px) { .perm-table td { width: auto; padding-inline: .5rem; } .perm-table thead th { padding-inline: .5rem; } }
.perm-table td { text-align: center; width: 6.5rem; }
.perm-table thead th:not(:first-child) { text-align: center; }
.perm-yes { color: var(--c-done); font-size: 1.05rem; }
.perm-no { color: var(--c-line-strong); font-size: 1.05rem; }
.school-notice { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem 1rem; border-radius: var(--r-md); background: var(--c-returned-soft); border: 1px solid color-mix(in srgb, var(--c-returned) 20%, transparent); font-size: .9rem; color: var(--c-ink); line-height: 1.5; }
.school-notice .ph-duotone { flex: none; font-size: 1.35rem; color: var(--c-returned); margin-top: .05rem; }
.school-notice .text-link { color: var(--c-returned); white-space: nowrap; }
@media (min-width: 1024px) { .me-menu-list .me-menu-mobile { display: none; } }

/* Invite page */
.invite-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-strong); margin-bottom: .35rem; }
.invite-choices { display: grid; gap: .6rem; }
.school-card .panel-head h2 { display: flex; align-items: center; gap: .45rem; }
.school-card .panel-head h2 .ph-duotone { font-size: 1.3rem; color: var(--c-primary); }

/* Substitute area: adult, calm, printable. No third-party resources. */
.sub-area { background: var(--c-bg); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.sub-main { flex: 1; width: min(100% - 2rem, 34rem); margin-inline: auto; padding-block: clamp(1.5rem, 1rem + 2.5vw, 3rem) 4rem; }
.sub-main.is-wide { width: min(100% - 2rem, 62rem); }
.sub-flash { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; padding: .75rem 1rem; border-radius: var(--r-md); background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); color: var(--c-primary-strong); font-weight: 500; }
.sub-flash .ph-fill { font-size: 1.2rem; flex: none; }
@media (max-width: 520px) { .hide-sm { display: none; } }
.sub-signin { text-align: center; }
.sub-art { display: grid; place-items: center; width: 6.5rem; height: 7rem; margin: 0 auto 1.25rem; border-radius: 999px 999px var(--r-lg) var(--r-lg); background: var(--c-primary-soft); color: var(--c-primary); font-size: 3.4rem; box-shadow: inset 0 -.5rem 0 var(--c-accent); }
.sub-h1 { font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); letter-spacing: var(--display-tracking); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.25rem); color: var(--c-heading); line-height: 1.15; }
.sub-lead { margin-top: .5rem; font-size: 1.02rem; color: var(--c-ink-2); }
.sub-form { margin-top: 1.75rem; padding: 1.4rem; text-align: left; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); }
.sub-note { text-align: left; }
.sub-note .sub-h1, .sub-note .sub-lead { text-align: left; }
.sub-code-input { display: flex; align-items: stretch; }
.sub-code-input span { display: grid; place-items: center; padding: 0 .8rem; border: 1px solid var(--c-line-strong); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--c-bg-2); font-weight: 700; letter-spacing: .08em; color: var(--c-ink-2); }
.sub-code-input .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 1.2rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }

/* The plan itself (substitute page, teacher preview) */
.subplan-hero { padding: 1.5rem 1.5rem 1.35rem; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.subplan-hero::after { content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 9rem; height: 9rem; border-radius: 50%; background: var(--c-accent-softer); }
.subplan-hero > * { position: relative; z-index: 1; }
.subplan-kicker { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent-strong); }
.subplan-kicker .ph-duotone { font-size: 1.2rem; }
.subplan-hero h1 { margin-top: .4rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.15; }
.subplan-dates { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; color: var(--c-ink-2); font-weight: 500; }
.subplan-hello { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--c-line); color: var(--c-ink); }
.subplan-hello span { display: block; margin-top: .15rem; font-size: .88rem; color: var(--c-muted); }
.subplan-privacy { display: flex; gap: .5rem; align-items: flex-start; margin-top: .9rem; font-size: .86rem; color: var(--c-ink-2); }
.subplan-privacy .ph-fill { flex: none; margin-top: .15rem; color: var(--c-primary); }
.subplan-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.subplan-jump a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: 0 .9rem; border-radius: var(--r-pill); background: var(--c-surface); border: 1px solid var(--c-line); font-size: .88rem; font-weight: 600; color: var(--c-ink); text-decoration: none; }
.subplan-jump a:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); }
.subplan-jump a.is-emergency { color: var(--c-missing); border-color: color-mix(in srgb, var(--c-missing) 30%, var(--c-line)); }
.dot-cls { width: .6rem; height: .6rem; border-radius: 50%; background: var(--cls, var(--c-primary)); }
.subplan-sec { margin-top: 1.25rem; padding: 1.25rem 1.35rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); scroll-margin-top: 1rem; }
.subplan-sec h2, .subplan-classes-h { display: flex; align-items: center; gap: .5rem; font-family: var(--f-body); font-size: 1.08rem; font-weight: 650; letter-spacing: -.005em; color: var(--c-ink); font-variation-settings: normal; }
.subplan-sec h2 .ph-duotone { font-size: 1.4rem; color: var(--c-primary); }
.subplan-sec .rich { margin-top: .7rem; line-height: 1.6; }
.subplan-sec.is-emergency { background: var(--c-missing-soft); border-color: color-mix(in srgb, var(--c-missing) 25%, transparent); }
.subplan-sec.is-emergency h2, .subplan-sec.is-emergency h2 .ph-duotone { color: var(--c-missing); }
.subplan-classes-h { margin-top: 2rem; font-size: 1.2rem; }
.subplan-class { margin-top: 1rem; padding: 1.2rem 1.35rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); border-left: 6px solid var(--cls, var(--c-primary)); box-shadow: var(--shadow-1); scroll-margin-top: 1rem; }
.spc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.25rem; }
.spc-head h3 { font-family: var(--f-body); font-size: 1.15rem; font-weight: 700; color: var(--c-heading); font-variation-settings: normal; letter-spacing: -.01em; }
.spc-head h3 span { font-weight: 500; color: var(--c-muted); font-size: .95rem; }
.spc-time { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--c-ink-2); margin-bottom: .15rem; }
.spc-code { display: grid; justify-items: end; gap: .1rem; padding: .45rem .8rem; border-radius: var(--r-md); background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); }
.spc-code-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.spc-code .login-code { font-size: 1.25rem; }
.spc-help { margin-top: .6rem; font-size: .85rem; color: var(--c-muted); }
.spc-notes { margin-top: .85rem; line-height: 1.6; }
.spc-sub { margin-top: 1rem; font-family: var(--f-body); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.spc-asg { display: grid; gap: .4rem; margin-top: .45rem; }
.spc-asg li { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.spc-asg .ph-duotone { font-size: 1.3rem; color: var(--c-primary); flex: none; margin-top: .05rem; }
.spc-roster { margin-top: 1rem; border-top: 1px solid var(--c-line); padding-top: .8rem; }
.spc-roster summary { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; font-weight: 650; cursor: pointer; }
.spc-roster > .small { margin: .2rem 0 .5rem; }
.spc-names { columns: 3 12rem; column-gap: 1.5rem; margin-top: .4rem; padding-left: 1.6rem; font-size: .93rem; }
.spc-names li { break-inside: avoid; padding: .2rem 0; }
.spc-names li > span:first-child { margin-right: .35rem; }
.acc-chip { display: inline-flex; align-items: center; gap: .25rem; margin: .1rem .25rem .1rem 0; padding: .05rem .45rem; border-radius: var(--r-pill); background: var(--c-accent-softer); border: 1px solid var(--c-accent-soft); font-size: .74rem; font-weight: 600; color: var(--c-accent-strong); white-space: nowrap; }
.sub-note-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 2rem; padding: 1.35rem 1.5rem; border-radius: var(--r-xl); background: var(--c-deep); color: var(--c-on-deep); }
.sub-note-cta h2 { font-family: var(--f-display); font-size: 1.35rem; color: var(--c-on-deep); }
.sub-note-cta p { margin-top: .25rem; color: var(--c-on-deep-2); font-size: .92rem; }
.sub-note-cta .btn-primary { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
@media print {
  .sub-bar, .subplan-jump, .sub-note-cta, .sub-flash { display: none !important; }
  .sub-area, .subplan-hero, .subplan-sec, .subplan-class { background: #fff; box-shadow: none; }
  .subplan-class { break-inside: avoid; }
  .spc-roster > :not(summary) { display: block !important; }
}

/* Teacher: sub plans */
.emergency-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.15rem; align-items: center; padding: 1.25rem 1.35rem; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-missing-soft) 140%); border: 1px solid color-mix(in srgb, var(--c-missing) 22%, var(--c-line)); box-shadow: var(--shadow-1); }
.emergency-ic { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--r-md); background: var(--c-missing-soft); color: var(--c-missing); font-size: 1.85rem; }
.emergency-body h2 { font-family: var(--f-body); font-size: 1.08rem; font-weight: 700; color: var(--c-ink); font-variation-settings: normal; }
.emergency-body p { margin-top: .25rem; color: var(--c-ink-2); font-size: .92rem; max-width: 40rem; }
.emergency-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
@media (min-width: 760px) { .emergency-card { grid-template-columns: auto 1fr auto; } .emergency-act { grid-column: auto; } }
.how-steps { display: grid; gap: .85rem; }
@media (min-width: 720px) { .how-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .how-steps { grid-template-columns: repeat(4, 1fr); } }
.how-steps li { display: grid; gap: .3rem; align-content: start; padding: 1.1rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); }
.how-steps li > span:last-child { font-size: .88rem; color: var(--c-ink-2); line-height: 1.5; }
.how-n { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .2rem; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-strong); font-weight: 700; }
.sp-list { display: grid; gap: .6rem; }
.sp-card-link { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; box-shadow: var(--shadow-1); transition: border-color .15s ease, transform .15s ease; }
.sp-card-link:hover { border-color: var(--c-line-strong); transform: translateY(-1px); }
.sp-card.has-notes .sp-card-link { border-color: color-mix(in srgb, var(--c-late) 35%, var(--c-line)); }
.sp-date { display: grid; place-items: center; flex: none; width: 3.4rem; height: 3.6rem; border-radius: var(--r-md); background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary-strong); line-height: 1.1; }
.sp-date b { font-family: var(--f-display); font-size: 1.45rem; font-weight: var(--display-weight); letter-spacing: -.02em; }
.sp-main { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.sp-main > b { font-weight: 650; overflow-wrap: anywhere; }
.sp-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.sp-go { color: var(--c-muted); font-size: 1.1rem; }
.sp-grid { display: grid; gap: 1.25rem; align-items: start; }
.sp-grid > * { min-width: 0; }
@media (min-width: 1000px) { .sp-grid { grid-template-columns: 1.1fr 1fr; } }
.sp-side { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.sub-code-card { display: grid; justify-items: start; gap: .2rem; margin-bottom: .75rem; padding: 1rem 1.1rem; border-radius: var(--r-lg); border: 2px dashed var(--c-primary); background: var(--c-primary-softer); }
.scc-label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary-strong); }
.scc-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); letter-spacing: .12em; color: var(--c-primary-ink); }
.scc-meta { font-size: .85rem; color: var(--c-ink-2); }
.sp-make { max-width: 24rem; }
.sp-old summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--c-ink-2); min-height: 2.25rem; display: inline-flex; align-items: center; }
.login-code.is-off { text-decoration: line-through; color: var(--c-muted); }
.sub-notes { display: grid; gap: .7rem; }
.sub-notes li { padding: .85rem 1rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.sub-notes li.is-new { background: var(--c-accent-softer); border-color: var(--c-accent-soft); }
.sn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
.sn-head .cell-sub { display: inline; }
.sn-body { margin-top: .4rem; color: var(--c-ink); line-height: 1.55; overflow-wrap: anywhere; }
.sp-preview { border-radius: var(--r-xl); border: 1px solid var(--c-line-strong); background: var(--c-bg-2); overflow: hidden; }
.sp-preview-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; background: var(--c-deep); color: var(--c-on-deep); font-size: .88rem; font-weight: 500; }
.sp-preview-body { padding: clamp(1rem, .5rem + 2vw, 2rem); }
.spc-edit-list { display: grid; gap: .75rem; }
.spc-edit { margin: 0; padding: .9rem 1rem; border-radius: var(--r-md); border: 1px solid var(--c-line); border-left: 5px solid var(--cls, var(--c-primary)); background: var(--c-surface-2); }
.spc-include { display: flex; align-items: center; gap: .65rem; cursor: pointer; min-height: 2.5rem; }
.spc-include input { width: 1.25rem; height: 1.25rem; accent-color: var(--c-primary); flex: none; }
.spc-fields { display: grid; gap: .9rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--c-line); }
.spc-edit:not(:has(.spc-include input:checked)) .spc-fields { display: none; }
.spc-edit:has(.spc-include input:checked) { background: var(--c-surface); }

/* School console */
.school-head { align-items: flex-end; }
.school-head .invite-kicker { display: flex; align-items: center; gap: .35rem; }
.school-switch { display: grid; gap: .25rem; }
.school-stats { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .school-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .school-stats { grid-template-columns: repeat(3, 1fr); } }
.school-stat { display: grid; align-content: start; gap: .3rem; padding: 1.1rem 1.2rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); }
.school-stat.seats { background: var(--c-primary-softer); border-color: var(--c-primary-soft); }
.ss-label { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--c-muted); }
.ss-label .ph { font-size: 1.05rem; color: var(--c-primary); }
.ss-value { font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); font-size: 2.15rem; line-height: 1.05; letter-spacing: -.02em; color: var(--c-heading); font-variant-numeric: tabular-nums; }
.ss-value span { font-size: 1.1rem; color: var(--c-muted); letter-spacing: 0; }
.ss-value.small-v { font-size: 1.6rem; }
.ss-sub { font-size: .82rem; color: var(--c-ink-2); }
.school-stat .bar { margin: .25rem 0 .1rem; }
.school-privacy { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; color: var(--c-muted); max-width: 52rem; }
.school-privacy .ph { flex: none; margin-top: .15rem; color: var(--c-primary); }
.school-class-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.school-class { display: grid; gap: .2rem; height: 100%; padding: .95rem 1.05rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); border-top: 4px solid var(--cls, var(--c-primary)); color: var(--c-ink); text-decoration: none; box-shadow: var(--shadow-1); transition: border-color .15s ease, transform .15s ease; }
.school-class:hover { transform: translateY(-1px); border-color: var(--c-line-strong); border-top-color: var(--cls, var(--c-primary)); }
.school-class b { font-weight: 650; }
.sc-counts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .4rem; font-size: .82rem; color: var(--c-ink-2); }
.sc-counts span { display: inline-flex; align-items: center; gap: .3rem; }
.school-grid th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--c-surface); font-size: .9rem; font-weight: 600; color: var(--c-ink); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.school-grid thead th { vertical-align: bottom; white-space: nowrap; }
.sg-title { display: block; font-weight: 650; }
.sg-cell { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-cell .status { font-size: .74rem; }

/* Google Classroom */
.gc-top { display: flex; gap: 1rem; align-items: flex-start; }
.gc-logo { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: var(--r-md); background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); color: var(--c-primary); font-size: 1.6rem; }
.gc-panel .section-title { display: flex; align-items: center; gap: .45rem; }
.gc-panel .section-title .ph-duotone { color: var(--c-primary); font-size: 1.25rem; }
.gc-pick { max-width: 52rem; }
.gc-list { display: grid; }
.gc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .6rem 0; border-top: 1px solid var(--c-line); }
.gc-row:first-child { border-top: 0; }
.gc-row.is-linked .check { color: var(--c-muted); }
.plan-banner.invite-banner { background: var(--c-primary-softer); border-color: var(--c-primary-soft); }
.plan-banner.invite-banner .ph-duotone { color: var(--c-primary); }

/* ==========================================================================
   14. Library, courses, standards (Phase 8)
   ========================================================================== */
/* Mastery levels: number plus color, never color alone. */
.lv-4 { --lv-bg: var(--c-done-soft); --lv-fg: var(--c-done); }
.lv-3 { --lv-bg: var(--c-primary-softer); --lv-fg: var(--c-primary-strong); }
.lv-2 { --lv-bg: var(--c-late-soft); --lv-fg: var(--c-late); }
.lv-1 { --lv-bg: var(--c-missing-soft); --lv-fg: var(--c-missing); }
.mr-legend { display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.mr-legend span { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem .25rem .3rem; border-radius: var(--r-pill); background: var(--lv-bg); font-size: .8rem; color: var(--c-ink-2); }
.mr-legend b { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--c-surface); color: var(--lv-fg); font-size: .78rem; }
.mr-std { min-width: 6rem; max-width: 8rem; padding: .55rem .6rem; text-align: center; font-weight: 700; }
.mr-std abbr { text-decoration: none; cursor: help; color: var(--c-heading); }
.gb .mr-cell { min-width: 4.5rem; padding: .35rem .4rem; text-align: center; font-variant-numeric: tabular-nums; }
.gb .mr-cell[class*="lv-"] { background: var(--lv-bg); }
.mr-cell b { display: block; font-size: 1rem; line-height: 1.1; color: var(--lv-fg); }
.mr-cell span { font-size: .7rem; color: var(--c-ink-2); }
.mr-list summary { cursor: pointer; }
.mr-list dl { margin: .75rem 0 0; display: grid; gap: .25rem; }
.mr-list dt { margin-top: .5rem; font-weight: 700; color: var(--c-heading); }
.mr-list dd { margin: 0; color: var(--c-ink-2); font-size: .92rem; }
.mr-pill { display: inline-block; margin-left: .25rem; padding: .05rem .5rem; border-radius: var(--r-pill); background: var(--lv-bg); color: var(--lv-fg); font-size: .72rem; font-weight: 700; }
.sis-form fieldset { margin: 0; padding: 0; border: 0; }
.sis-form legend { margin-bottom: .6rem; padding: 0; font-family: var(--f-body); font-size: 1.05rem; font-weight: 650; color: var(--c-ink); letter-spacing: -.005em; }
.mastery-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mastery-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: var(--r-md); background: var(--lv-bg); }
.mastery-list .ml-n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c-surface); color: var(--lv-fg); font-weight: 800; }
.mastery-list .ml-text b { display: block; color: var(--c-heading); font-size: .9rem; }
.mastery-list .ml-text span { display: block; font-size: .82rem; color: var(--c-ink-2); }
.mastery-list .ml-pct { font-size: .82rem; font-weight: 700; color: var(--lv-fg); white-space: nowrap; }
.lib-search { position: relative; display: flex; gap: .5rem; max-width: 46rem; }
.lib-search > .ph { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--c-muted); font-size: 1.1rem; pointer-events: none; }
.lib-search .input { padding-left: 2.6rem; }

/* The featured course (Spanish first) */
.course-feature { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem 1.4rem; align-items: center; padding: 1.5rem; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-2); color: var(--c-ink); text-decoration: none; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.course-feature::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--cls, var(--c-primary)); }
.course-feature::after { content: ""; position: absolute; right: -4rem; bottom: -5rem; width: 16rem; height: 16rem; border-radius: 50%; background: var(--c-accent-softer); z-index: 0; }
.course-feature > * { position: relative; z-index: 1; }
.course-feature:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -18px rgba(60, 44, 14, .28); }
.cf-art { display: grid; place-items: center; width: 4.5rem; height: 5rem; border-radius: 999px 999px var(--r-md) var(--r-md); background: var(--c-primary-soft); color: var(--cls, var(--c-primary)); font-size: 2.6rem; box-shadow: inset 0 -.4rem 0 var(--c-accent); }
.cf-body { display: grid; gap: .3rem; min-width: 0; }
.cf-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent-strong); }
.cf-title { font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); letter-spacing: var(--display-tracking); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); color: var(--c-heading); line-height: 1.1; }
.cf-title span { color: var(--c-muted); font-size: .6em; }
.cf-desc { color: var(--c-ink-2); font-size: .95rem; max-width: 46rem; }
.cf-stats { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .3rem; font-size: .88rem; color: var(--c-ink-2); }
.cf-stats b { color: var(--c-ink); }
.cf-go { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px) { .course-feature { grid-template-columns: auto 1fr auto; } .cf-go { grid-column: auto; } }

.course-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.course-card { display: grid; gap: .3rem; align-content: start; height: 100%; padding: 1.15rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); border-top: 4px solid var(--cls, var(--c-primary)); color: var(--c-ink); text-decoration: none; box-shadow: var(--shadow-1); transition: transform .15s ease, border-color .15s ease; }
.course-card:hover { transform: translateY(-1px); border-color: var(--c-line-strong); border-top-color: var(--cls, var(--c-primary)); }
.cc-ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .3rem; border-radius: var(--r-md); background: var(--c-primary-softer); color: var(--cls, var(--c-primary)); font-size: 1.5rem; }
.cc-desc { font-size: .88rem; color: var(--c-ink-2); }
.cc-stats { margin-top: .3rem; font-size: .8rem; font-weight: 600; color: var(--c-muted); }

/* Course page */
.course-hero { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; padding: 1.5rem; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); overflow: hidden; }
.course-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--cls, var(--c-primary)); }
.course-hero h1 { margin-top: .25rem; }
.course-desc { margin-top: .5rem; color: var(--c-ink-2); max-width: 52rem; }
@media (max-width: 560px) { .course-hero { grid-template-columns: 1fr; } .course-hero .cf-art { width: 3.5rem; height: 3.9rem; font-size: 2rem; } }
.course-layout { display: grid; gap: 1.5rem; align-items: start; }
.course-layout > * { min-width: 0; }
@media (min-width: 1100px) { .course-layout { grid-template-columns: 15rem 1fr; } }
.unit-nav { display: none; }
@media (min-width: 1100px) { .unit-nav { display: block; position: sticky; top: 1rem; } }
.unit-nav-h { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .5rem; }
.unit-nav ol { display: grid; gap: .1rem; list-style: none; padding: 0; margin: 0; }
.unit-nav a { display: flex; gap: .6rem; align-items: center; padding: .45rem .55rem; border-radius: var(--r-sm); font-size: .88rem; font-weight: 550; color: var(--c-ink-2); text-decoration: none; }
.unit-nav a:hover { background: var(--c-bg-2); color: var(--c-ink); }
.un-n { display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--c-primary-softer); color: var(--c-primary-strong); font-size: .75rem; font-weight: 700; }
.unit-stack { display: grid; gap: 1.25rem; }
.unit-card { padding: 1.25rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); scroll-margin-top: 1rem; }
.unit-head { display: flex; gap: .9rem; align-items: center; }
.unit-num { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: var(--r-md); background: var(--c-accent-soft); color: var(--c-accent-strong); font-family: var(--f-display); font-size: 1.3rem; font-weight: var(--display-weight); }
.unit-head h2 { font-family: var(--f-body); font-size: 1.15rem; font-weight: 700; color: var(--c-heading); font-variation-settings: normal; letter-spacing: -.01em; }
.unit-en { font-weight: 500; color: var(--c-muted); font-size: .9rem; }
.unit-summary { margin: .8rem 0 .2rem; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.unit-summary summary { padding: .65rem .9rem; font-size: .88rem; font-weight: 600; color: var(--c-primary-strong); cursor: pointer; }
.unit-summary .rich { padding: 0 .95rem .9rem; font-size: .9rem; color: var(--c-ink-2); }
.lesson-list { display: grid; gap: .4rem; list-style: none; padding: 0; margin: .9rem 0 0; }
.lesson-row { display: flex; align-items: center; gap: .9rem; padding: .7rem .85rem; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.lesson-row:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); }
.lr-num { flex: none; min-width: 2.4rem; font-size: .8rem; font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.lr-main { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.lr-main b { font-weight: 650; }
.lr-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem .7rem; }
.lr-roles { display: inline-flex; gap: .3rem; color: var(--c-primary); font-size: 1.05rem; }
.lr-fav { color: var(--c-accent); }
@media (max-width: 640px) { .lesson-row { flex-wrap: wrap; } .lr-meta { width: 100%; justify-content: flex-start; padding-left: 3.3rem; } }

/* Lesson page */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .88rem; }
.crumbs a { color: var(--c-primary); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .ph { color: var(--c-muted); font-size: .8rem; }
.lesson-head { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .lesson-head { grid-template-columns: 1fr auto; align-items: start; } }
.lesson-summary { margin-top: .4rem; font-size: 1.05rem; color: var(--c-ink-2); max-width: 46rem; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.std-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; list-style: none; padding: 0; }
.std-chips li { padding: .2rem .6rem; border-radius: var(--r-pill); background: var(--c-returned-soft); color: var(--c-returned); font-size: .78rem; }
.std-chips b { font-weight: 700; }
.lesson-layout { display: grid; gap: 1.5rem; align-items: start; }
.lesson-layout > * { min-width: 0; }
@media (min-width: 1100px) { .lesson-layout { grid-template-columns: 1fr 22rem; } .lesson-acts { order: 2; position: sticky; top: 1rem; } }
.act-cards { display: grid; gap: .6rem; list-style: none; padding: 0; margin: .6rem 0 0; }
.act-card { display: grid; gap: .25rem; padding: .95rem 1rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); }
.act-role { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary-strong); }
.act-role .ph-duotone { font-size: 1.15rem; }
.act-card.role-speaking .act-role, .act-card.role-writing .act-role { color: var(--c-returned); }
.act-card.role-assessment .act-role, .act-card.role-review .act-role { color: var(--c-accent-strong); }
.act-btns { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.lesson-plan { display: grid; gap: 1rem; }
.plan-goals { padding: 1.2rem 1.3rem; border-radius: var(--r-lg); background: var(--c-primary-softer); border: 1px solid var(--c-primary-soft); }
.plan-sec { padding: 1.2rem 1.3rem; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); }
.plan-goals h2, .plan-sec h2 { display: flex; align-items: center; gap: .5rem; font-family: var(--f-body); font-size: 1.02rem; font-weight: 700; color: var(--c-ink); font-variation-settings: normal; letter-spacing: -.005em; margin-bottom: .55rem; }
.plan-goals h2 .ph-duotone, .plan-sec h2 .ph-duotone { font-size: 1.35rem; color: var(--c-primary); }
.plan-sec .rich, .plan-goals .rich { line-height: 1.65; }
.plan-sec .rich h3, .plan-sec .rich h4 { font-family: var(--f-body); font-size: .95rem; font-weight: 700; margin: .9rem 0 .3rem; color: var(--c-heading); font-variation-settings: normal; }
.plan-sec .rich ul, .plan-sec .rich ol, .plan-goals .rich ul { padding-left: 1.3rem; }
.plan-sec .rich li + li, .plan-goals .rich li + li { margin-top: .2rem; }
.plan-sec .rich blockquote { margin: .6rem 0; padding: .6rem .9rem; border-left: 3px solid var(--c-accent); background: var(--c-accent-softer); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.plan-culture { background: var(--c-accent-softer); border-color: var(--c-accent-soft); }
.plan-culture h2 .ph-duotone { color: var(--c-accent-strong); }
.plan-differentiation h2 .ph-duotone, .plan-teacher_notes h2 .ph-duotone { color: var(--c-returned); }
.lib-folder .sub-h { display: flex; align-items: center; gap: .4rem; }
.lib-folder .sub-h .ph-duotone { color: var(--c-accent-strong); font-size: 1.2rem; }

/* Standards picker */
.std-set { border-top: 1px solid var(--c-line); padding: .5rem 0; }
.std-set:first-of-type { border-top: 0; }
.std-set summary { cursor: pointer; min-height: 2.25rem; display: flex; align-items: center; gap: .5rem; }
.std-checks { display: grid; gap: .35rem; margin-top: .4rem; }
.std-cat { margin-top: .5rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.form-inline-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.form-inline-row .field { flex: 1 1 12rem; }

/* Admin import report */
.report-list { display: grid; gap: .25rem; margin-top: .4rem; padding-left: 1.1rem; font-size: .86rem; max-height: 26rem; overflow: auto; }
.report-warn { border-radius: var(--r-md); background: var(--c-late-soft); border: 1px solid color-mix(in srgb, var(--c-late) 25%, transparent); color: var(--c-late); padding: .6rem .9rem; }
.report-warn summary { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-weight: 600; }
.report-warn .report-list { color: var(--c-ink); }

@media print {
  .sidebar, .topbar, .bottom-nav, .lesson-actions, .act-btns, .crumbs, .flashes, .plan-banner, .lesson-acts p.small { display: none !important; }
  .app-main, .dash { margin: 0 !important; padding: 0 !important; }
  .lesson-layout { display: block; }
  .lesson-acts { position: static; margin-bottom: 1rem; }
  .plan-sec, .plan-goals, .act-card { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}