/* ============================================================
   Bloom — site styles · "Meadow" v1 (see Bloom_Style_Sheet_Meadow)
   Khan Kids' warm structure × Toca Boca's bold play ×
   Teach Your Monster's adventure magic:
   cool morning-sky paper · white cards with soft offset shadows ·
   Fredoka display + Andika (literacy typeface) body ·
   leaf green = grow/done · sky blue = video things ·
   coral = today/celebrate · sunny gold = reward ·
   midnight reserved for special moments
   ============================================================ */

/* ---------- Self-hosted fonts (no CDN — school filters) ---------- */
@font-face {
  font-family: 'Andika';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/andika-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Andika';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/andika-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/fredoka-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/fredoka-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/fredoka-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/figtree-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/figtree-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/figtree-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/figtree-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/fraunces-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/fraunces-latin-700-normal.woff2') format('woff2');
}

/* Nunito — Bloom Bright (data-brand="v4"). One family, five weights. */
@font-face {
  font-family: 'Nunito';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/nunito-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/nunito-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/nunito-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic; font-weight: 700; font-display: swap;
  src: url('../fonts/nunito-latin-700-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/nunito-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/nunito-latin-900-normal.woff2') format('woff2');
}

/* ---------- Tokens (Meadow) ---------- */
:root {
  /* surfaces & ink */
  --paper: #e9f1f9;          /* morning sky — deepened 29 Jul so white
                                cards visibly float (projectors crush
                                the old near-white contrast) */
  --paper-2: #e9f1f9;        /* soft wells (was the faf7ef tint) */
  --ink:   #2e2c45;          /* soft indigo, never pure black */
  --ink-soft: #5c5877;
  --card:  #ffffff;
  --line-c: rgba(46, 44, 69, 0.16);

  /* brights + text-safe deeps */
  --green: #4caf6e;          /* leaf — grow, go, done */
  --green-deep: #1f7a46;
  --green-soft: rgba(76, 175, 110, 0.16);
  --sky: #3fa9e0;            /* video things */
  --sky-deep: #17709f;
  --coral: #f4606c;          /* today, celebrate */
  --coral-deep: #d63a4e;
  --sunny: #ffb733;          /* reward gold */
  --violet: #8b6fd6;         /* imagine — SOS group colour (30 Jul) */
  --violet-deep: #6b4fc0;
  --midnight: #232a56;       /* special moments only */
  --midnight-2: #2f3a75;

  /* legacy alias — "beige" is now the paper shade */
  --beige: #e4eef6;
  --beige-press: #d6e5f1;

  /* shape, depth, motion */
  --line:  2px solid var(--line-c);
  --radius: 16px;
  --shadow: 0 3px 0 rgba(46, 44, 69, 0.10);
  --shadow-press: 0 1px 0 rgba(46, 44, 69, 0.10);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --hand: 'Fredoka', 'Segoe UI Rounded', 'Comic Sans MS', system-ui, sans-serif;
  --body: 'Andika', 'Segoe UI', 'Comic Sans MS', system-ui, sans-serif;
  --display: var(--hand);   /* brand statements; v1 has no separate face */

  /* light tints — these already existed as hardcoded values scattered
     through this file; naming them means both brands can use them */
  --green-l: #ddf3e5;
  --coral-l: #fde0e3;
  --sunny-l: #fff0d1;
  --sky-l:   #ddf0fa;
  --violet-l:#eae3f9;

  /* radius scale — --radius stays the card value so existing rules are unchanged */
  --r-input: 10px; --r-btn: 999px; --r-card: 16px; --r-tile: 24px; --r-pill: 999px;

  /* touch + calm motion (Staffroom register) */
  --tap-child: 72px; --tap-teacher: 44px;
  --t-calm: 180ms; --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* ============================================================
   Brand System v2
   Set by <html data-brand="v2">, which the Netlify head snippet
   stamps from the site_settings.brand row. Same token names, so
   nothing else in this file changes.

   Every pair below was computed against WCAG, not eyeballed.
   Full system: claude/Bloom_Brand_System_v2.html in the project.
   ============================================================ */
[data-brand="v2"] {
  /* Values below are the Brand System v2 spec, verbatim.
     Spec name is given where this file's token name differs. */

  /* surfaces & ink — warm daylight, not cool sky */
  --paper: #fbf7f1;          /* spec --paper */
  --paper-2: #f2ebe0;        /* spec --paper-2 */
  --ink:   #1e2a24;
  --ink-soft: #55635b;
  --card:  #ffffff;
  --line-c: rgba(30, 42, 36, 0.14);

  /* five families, three steps each: light fill / base shape / deep text */
  --green-l: #cfe9d8;   --green: #3e9e6a;   --green-deep: #1f6b45;   /* spec grow  */
  --coral-l: #fbdcd2;   --coral: #e4694a;   --coral-deep: #a93c25;   /* spec clay  */
  --sunny-l: #fde8be;   --sunny: #f5b62e;                            /* spec sun   */
  --sky-l:   #d3e8f5;   --sky:   #3e9bd0;   --sky-deep: #1a6892;
  --violet-l:#e1d9f7;   --violet:#7e68cd;   --violet-deep: #5a44a8;  /* spec story */
  --green-soft: rgba(62, 158, 106, 0.16);

  /* the deep register is forest, not midnight — Bloom runs at 9am */
  --midnight: #123326;       /* spec --forest   */
  --midnight-2: #1c4a36;     /* spec --forest-2 */

  --beige: #f2ebe0;
  --beige-press: #e7dccb;

  /* shape — radius encodes audience (spec §5) */
  --r-input: 4px; --r-btn: 8px; --r-card: 14px; --r-tile: 26px; --r-pill: 999px;
  --radius: var(--r-card);
  --line:  1px solid var(--line-c);

  /* depth — spec --lift-staff / --lift-meadow */
  --shadow: 0 2px 0 rgba(30, 42, 36, 0.10);
  --shadow-press: 0 1px 0 rgba(30, 42, 36, 0.10);

  /* touch + motion */
  --tap-child: 72px; --tap-teacher: 44px;
  --t-calm: 180ms; --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* type — three faces, three jobs */
  --hand: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --body: 'Andika', 'Segoe UI', 'Comic Sans MS', system-ui, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* v2 brand voice. Fraunces is reserved for the largest headings only —
   everything else stays Figtree, and anything a child reads stays
   Andika. Meadow is untouched by these rules. */
[data-brand="v2"] .page-title,
[data-brand="v2"] .hero-card .week-title,
[data-brand="v2"] .weekdone .wd-title,
[data-brand="v2"] .sechead .wk {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ============================================================
   BRAND SYSTEM v2 — "Staffroom" (data-brand="v3")
   ------------------------------------------------------------
   v2 above is the palette only: Brand System v2 colours poured
   into Meadow's component design.

   v3 is the design language from the brand system document
   itself — the editorial register: quiet rules instead of heavy
   borders, Fraunces statements, uppercase tracked eyebrows,
   square-ish buttons with solid fills, nothing that bounces.

   Same tokens as v2. What differs is the components.
   Reference: docs/Bloom_Brand_System_v2.html
   ============================================================ */

[data-brand="v3"] {
  /* surfaces & ink */
  --paper: #fbf7f1;
  --paper-2: #f2ebe0;
  --ink:   #1e2a24;
  --ink-soft: #55635b;
  --card:  #ffffff;
  --line-c: rgba(30, 42, 36, 0.14);

  /* five families, three steps each */
  --green-l: #cfe9d8;   --green: #3e9e6a;   --green-deep: #1f6b45;
  --coral-l: #fbdcd2;   --coral: #e4694a;   --coral-deep: #a93c25;
  --sunny-l: #fde8be;   --sunny: #f5b62e;
  --sky-l:   #d3e8f5;   --sky:   #3e9bd0;   --sky-deep: #1a6892;
  --violet-l:#e1d9f7;   --violet:#7e68cd;   --violet-deep: #5a44a8;
  --green-soft: rgba(62, 158, 106, 0.16);

  --midnight: #123326;
  --midnight-2: #1c4a36;
  --beige: #f2ebe0;
  --beige-press: #e7dccb;

  --r-input: 4px; --r-btn: 8px; --r-card: 14px; --r-tile: 26px; --r-pill: 999px;
  --radius: var(--r-card);
  --line:  1px solid var(--line-c);

  --shadow: 0 2px 0 rgba(30, 42, 36, 0.10);
  --shadow-press: 0 1px 0 rgba(30, 42, 36, 0.10);

  --tap-child: 72px; --tap-teacher: 44px;
  --t-calm: 180ms; --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  --hand: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --body: 'Andika', 'Segoe UI', 'Comic Sans MS', system-ui, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ---------- v3 components ---------- */

/* Body: Figtree at the document's reading size, not Andika.
   Anything a child reads is opted back into Andika further down. */
[data-brand="v3"] body {
  font-family: var(--hand);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Nav: a quiet rule, not a raised white bar with pill tabs. */
[data-brand="v3"] .nav {
  background: var(--paper);
  border-bottom: 1px solid var(--line-c);
  padding: 14px clamp(20px, 3.5vw, 48px);
  gap: 2px;
}
[data-brand="v3"] .nav .tab {
  font-family: var(--hand); font-weight: 600;
  font-size: 15px; letter-spacing: 0;
  border-radius: var(--r-btn);
  border-bottom: none;
  padding: 8px 14px;
  transition: background var(--t-calm) var(--ease), color var(--t-calm) var(--ease);
}
[data-brand="v3"] .nav .tab:hover { background: var(--paper-2); color: var(--ink); }
[data-brand="v3"] .nav .tab.on { background: var(--green-l); color: var(--green-deep); }

/* Statements in Fraunces. Everything structural stays Figtree. */
[data-brand="v3"] .page-title,
[data-brand="v3"] .hero-card .week-title,
[data-brand="v3"] .weekdone .wd-title,
[data-brand="v3"] .sechead .wk {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
[data-brand="v3"] .page-sub,
[data-brand="v3"] .sechead .advt {
  font-family: var(--hand);
  font-weight: 400;
  color: var(--ink-soft);
}
[data-brand="v3"] .page-sub { font-size: 19px; line-height: 1.55; max-width: 60ch; }

/* Eyebrows: uppercase and tracked, the document's signature move. */
[data-brand="v3"] .kicker,
[data-brand="v3"] .cal .eyebrow,
[data-brand="v3"] .lab-k {
  font-family: var(--hand);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Cards: one hairline rule, barely-there lift. */
[data-brand="v3"] .card {
  border: 1px solid var(--line-c);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 26px 28px;
}

/* Buttons: solid fill, square-ish, no ink outline, no bounce. */
[data-brand="v3"] .btn {
  font-family: var(--hand); font-weight: 600; font-size: 15px;
  border-radius: var(--r-btn);
  border: 1.5px solid rgba(30, 42, 36, 0.30);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  padding: 11px 21px;
  transition: background var(--t-calm) var(--ease), border-color var(--t-calm) var(--ease);
}
[data-brand="v3"] .btn:hover { background: var(--paper-2); }
[data-brand="v3"] .btn:active { transform: none; box-shadow: none; background: var(--beige-press); }

[data-brand="v3"] .watch-cta,
[data-brand="v3"] .btn.primary {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #fff;
  font-size: 16px;
  padding: 13px 26px;
}
[data-brand="v3"] .watch-cta:hover,
[data-brand="v3"] .btn.primary:hover { background: #185737; border-color: #185737; }

/* Tables: uppercase tracked heads, hairline rules. */
[data-brand="v3"] .plan-table th {
  font-family: var(--hand); font-weight: 800;
  font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--paper-2);
}

/* Adventure rows: calm, no rotate-on-hover. */
[data-brand="v3"] .adv-row {
  border-radius: var(--r-card);
  transition: background var(--t-calm) var(--ease), border-color var(--t-calm) var(--ease);
}
[data-brand="v3"] .adv-row:hover { transform: none; background: var(--paper-2); }
[data-brand="v3"] .adv-row:active { transform: none; }
[data-brand="v3"] .adv-row.current { border: 2px solid var(--green-deep); }
[data-brand="v3"] .adv-row .adv-name {
  font-family: var(--hand); font-weight: 600; font-size: 21px;
}

/* Anything a child reads stays Andika, at the sizes the system sets.
   This is the Meadow register living inside the Staffroom shell. */
[data-brand="v3"] .game-tile,
[data-brand="v3"] .game-tile .tx,
[data-brand="v3"] .cal .thumb-sub,
[data-brand="v3"] .cal .done-sub {
  font-family: var(--body);
}
[data-brand="v3"] .game-tile { border-radius: var(--r-tile); }

/* Reduced motion is already handled globally; v3 simply moves less. */

/* ============================================================
   BLOOM BRIGHT (data-brand="v4")
   ------------------------------------------------------------
   Site Style Sheet v2, brought into the class app. Bloom navy is
   the anchor, coral is the only thing you press, five bright hues
   are subject colours, Nunito is the one typeface all the way up
   to 900. Everything is rounded at four sizes: pill, 14, 28, 56.
   No shadows on cards, no gradients, no bounce; a lift on hover.

   Same token names as Meadow, so nothing else in this file changes.
   Reference: claude/Bloom_Site_Style_Sheet_v2.html in the project.
   ============================================================ */

[data-brand="v4"] {
  /* surfaces & ink — off-white ground, ink text, never pure black */
  --paper: #f9f8f2;          /* spec --off */
  --paper-2: #efeee4;        /* spec --off-2 */
  --ink:   #0a2537;          /* spec --ink */
  --ink-soft: #3c505c;       /* spec --slate */
  --card:  #ffffff;
  --line-c: rgba(10, 37, 55, 0.13);

  /* the family: lightest fill / full shape / text-safe deep.
     Bright has no "deep" tier; the deeps here are derived so the
     app's small text on tints still clears AA. */
  --green-l: #dff3c9;   --green: #11b753;   --green-deep: #0b7a38;
  --coral-l: #ffdede;   --coral: #ff5454;   --coral-deep: #c42f2f;
  --sunny-l: #fde9c5;   --sunny: #ff8600;                            /* spec orange */
  --sky-l:   #c8f4ff;   --sky:   #0f8eb3;   --sky-deep: #0a6b87;    /* spec blue   */
  --violet-l:#f1e9ff;   --violet:#8d6dea;   --violet-deep: #6b45d6;  /* spec purple */
  --green-soft: rgba(17, 183, 83, 0.14);

  /* the deep register is Bloom navy */
  --midnight: #0f3550;
  --midnight-2: #0f3550;
  --beige: #efeee4;
  --beige-press: #e4e2d6;

  /* shape — pill / chip / tile / panel */
  --r-input: 14px; --r-btn: 999px; --r-card: 28px; --r-tile: 28px; --r-pill: 999px;
  --radius: var(--r-card);
  --line:  1px solid var(--line-c);

  /* depth — nothing on cards; only the sticky pill floats */
  --shadow: none;
  --shadow-press: none;

  /* touch + motion — lift, never bounce */
  --tap-child: 72px; --tap-teacher: 44px;
  --t-calm: 160ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --bounce: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* type — one family */
  --hand: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --display: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- v4 components ---------- */

[data-brand="v4"] body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Nav: off-white, one hairline, the enrol-style pill for the active tab. */
[data-brand="v4"] .nav {
  background: var(--paper);
  border-bottom: 1px solid var(--line-c);
  padding: 14px clamp(20px, 3.5vw, 48px);
  gap: 4px;
}
[data-brand="v4"] .nav .brand { color: var(--ink); font-weight: 900; letter-spacing: -0.03em; }
[data-brand="v4"] .nav .tab {
  font-family: var(--hand); font-weight: 700;
  font-size: 15.5px; letter-spacing: 0;
  border-radius: var(--r-pill);
  border-bottom: none;
  padding: 8px 16px;
  transition: background var(--t-calm) var(--ease), color var(--t-calm) var(--ease);
}
[data-brand="v4"] .nav .tab:hover { background: var(--paper-2); color: var(--ink); }
[data-brand="v4"] .nav .tab.on { background: var(--midnight); color: var(--paper); }

/* Headlines: 900, tracked tight. Sentence case is already the rule. */
[data-brand="v4"] .page-title,
[data-brand="v4"] .hero-card .week-title,
[data-brand="v4"] .weekdone .wd-title,
[data-brand="v4"] .sechead .wk {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
[data-brand="v4"] .page-sub,
[data-brand="v4"] .sechead .advt {
  font-family: var(--hand);
  font-weight: 400;
  color: var(--ink-soft);
}
[data-brand="v4"] .page-sub { font-size: 19px; line-height: 1.5; max-width: 56ch; }

/* Eyebrows: 800, tracked, uppercase, coral deep. */
[data-brand="v4"] .kicker,
[data-brand="v4"] .cal .eyebrow,
[data-brand="v4"] .lab-k {
  font-family: var(--hand);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral-deep);
}

/* Cards: the tile. No border, no shadow, 28px corners. */
[data-brand="v4"] .card {
  border: none;
  border-radius: var(--r-card);
  box-shadow: none;
  padding: 26px 28px;
}

/* Buttons: pills. Ink outline for secondary, coral with ink text for
   the one thing to press. Lift on hover, no squash. */
[data-brand="v4"] .btn {
  font-family: var(--hand); font-weight: 800; font-size: 16px;
  border-radius: var(--r-pill);
  border: 2.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  padding: 11px 24px;
  letter-spacing: -0.005em;
  transition: transform var(--t-calm) var(--ease), background var(--t-calm) var(--ease);
}
[data-brand="v4"] .btn:hover { background: var(--paper-2); transform: translateY(-2px); }
[data-brand="v4"] .btn:active { transform: none; box-shadow: none; background: var(--beige-press); }

[data-brand="v4"] .watch-cta,
[data-brand="v4"] .btn.primary {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink);
  font-size: 17px;
  padding: 14px 30px;
}
[data-brand="v4"] .watch-cta:hover,
[data-brand="v4"] .btn.primary:hover { background: #ff6b6b; border-color: #ff6b6b; }

[data-brand="v4"] .tick-btn {
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--hand); font-weight: 800;
}
[data-brand="v4"] .tick-btn.done { background: var(--green-l); color: var(--green-deep); border-color: var(--green-deep); }

/* Tables: tracked heads, hairline rules, soft well behind the head row. */
[data-brand="v4"] .plan-table th {
  font-family: var(--hand); font-weight: 800;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--paper-2);
}

/* Adventure rows: tiles, a lift on hover, navy ring when current. */
[data-brand="v4"] .adv-row {
  border-radius: var(--r-card);
  transition: transform var(--t-calm) var(--ease), background var(--t-calm) var(--ease);
}
[data-brand="v4"] .adv-row:hover { transform: translateY(-2px); background: var(--paper-2); }
[data-brand="v4"] .adv-row:active { transform: none; }
[data-brand="v4"] .adv-row.current { border: 2.5px solid var(--midnight); }
[data-brand="v4"] .adv-row .adv-name {
  font-family: var(--hand); font-weight: 800; font-size: 21px; letter-spacing: -0.01em;
}

/* Game tiles and calendar days: the tile radius, no drop shadow. */
[data-brand="v4"] .game-tile { border-radius: var(--r-tile); box-shadow: none; }
[data-brand="v4"] .game-tile .tx { font-family: var(--hand); font-weight: 800; }

/* Reduced motion is already handled globally. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.5;
  /* sticky footer: the meadow horizon sits at the bottom of the
     viewport on short pages, and after the content on long ones */
  display: flex; flex-direction: column;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }

/* ---------- Top navigation ---------- */
.nav {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap; /* five tabs since the nav redo (29 Jul) — wrap, never clip, on narrow screens */
  padding: 12px 22px;
  background: var(--card); /* white bar over the deeper paper — the
                              nav reads as its own layer */
  border-bottom: var(--line);
  position: sticky; top: 0; z-index: 50;
}
.nav .brand {
  font-family: var(--hand);
  font-weight: 700; font-size: 27px; line-height: 1;
  margin-right: 22px; color: var(--green-deep);
}
.nav .brand img { height: 30px; width: auto; display: block; }
.nav .tab {
  padding: 6px 14px;
  white-space: nowrap;
  font-family: var(--hand); font-weight: 500;
  font-size: 16px; color: var(--ink-soft);
  border-radius: 999px;
  border-bottom: 3px solid transparent;
}
.nav .tab:hover { color: var(--ink); background: var(--beige); }
.nav .tab.on { color: #fff; background: var(--green-deep); }
.nav .spacer { margin-left: auto; }

/* Nav structure (23 Oct, Nav Wireframes option 1): one row, two groups.
   The logo is the way to Today (the Today tab is gone). The three
   parts of Bloom — Adventures, Daily Practice, SOS — come first with
   icons; a hairline divider; then the two tools, Day Planner and
   Check-in, one step lighter and smaller. Help lives in the class
   menu (right side, 24 Oct). Everything else stays visible.
   Light touch (Krish, 23 Oct): the active state is a tint, never a
   solid block; icons take the text colour; weights stay at 600/500.
   Written in the shared token names so all four skins pick it up. */
.nav { gap: 6px; }
.nav .tab { display: inline-flex; align-items: center; gap: 7px; line-height: 1; border-bottom: none; }
.nav .tab .fa-solid { font-size: .95em; width: 1.1em; text-align: center; flex: none; opacity: .85; }
.nav .tab.on .fa-solid, .nav .tab:hover .fa-solid { opacity: 1; }
/* core three */
.nav .tab.core { font-weight: 600; font-size: 15.5px; color: var(--ink); padding: 8px 14px; }
.nav .tab.core:hover { background: var(--beige); color: var(--ink); }
.nav .tab.core.on { background: var(--green-l); color: var(--green-deep); }
/* SOS is the "right now" door: coral text, coral tint when active */
.nav .tab.sos { color: var(--coral-deep); }
.nav .tab.sos:hover { background: var(--coral-l); color: var(--coral-deep); }
.nav .tab.sos.on { background: var(--coral-l); color: var(--coral-deep); }
/* tools: a size down, slate text, quiet tint when active */
.nav .tab.tool { font-weight: 500; font-size: 14.5px; color: var(--ink-soft); padding: 7px 12px; }
.nav .tab.tool:hover { background: var(--beige); color: var(--ink); }
.nav .tab.tool.on { background: var(--beige); color: var(--ink); }
.nav .nav-sep { width: 1px; height: 22px; background: var(--line-c); margin: 0 12px; flex: none; }
/* on a narrow screen the row wraps (existing rule); keep the divider off the start of a wrapped line */
@media (max-width: 860px) {
  .nav .nav-sep { display: none; }
  .nav .tab.tool { font-size: 14px; }
}

/* ---------- Page scaffold ---------- */
/* near full-width (Krish, 29 Jul): the content uses the whole
   screen with breathing room at the edges — played on desktops
   and tablets in landscape */
.page { width: 100%; margin: 0 auto; padding: 30px clamp(20px, 3.5vw, 48px) 60px; }
.page-title {
  font-family: var(--hand);
  font-size: 33px; font-weight: 600; line-height: 1.1; margin-bottom: 4px;
}
.page-sub { color: var(--ink-soft); font-size: 17px; margin-bottom: 26px; }

.card {
  background: var(--card);
  border: var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

/* sentence case, never ALL CAPS — beginner readers learn word
   shapes (Meadow reskin, 29 Jul) */
.kicker {
  font-family: var(--hand); font-weight: 500;
  font-size: 15px; letter-spacing: 0.3px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 22px; font-size: 17px;
  font-family: var(--hand); font-weight: 500;
  box-shadow: var(--shadow);
  transition: transform 0.12s var(--bounce), box-shadow 0.12s;
}
.btn:hover { background: var(--beige); }
.btn:active { transform: translateY(2px) scale(0.97); box-shadow: var(--shadow-press); }

.note { color: var(--ink-soft); font-size: 15px; }

/* ---------- Home ---------- */
.hero-card { padding: 26px 28px; }
.hero-card .week-title {
  font-family: var(--hand);
  font-size: 38px; font-weight: 600; line-height: 1.05; margin: 4px 0 8px;
}
.watched-tag { color: var(--green-deep); font-size: 18px; }
.watch-cta {
  font-size: 20px; padding: 14px 32px; margin-top: 14px;
  background: var(--green-deep); border-color: var(--green-deep); color: #fff;
}
.watch-cta:hover { background: #24894f; }

.tick-btn {
  width: 100%; margin-top: 14px;
  font-size: 22px; padding: 12px;
  background: var(--card);
  border: 2px solid var(--ink); border-radius: var(--radius);
}
.tick-btn:hover { background: var(--beige); }
.tick-btn.done { background: var(--green-soft); color: var(--green-deep); border-color: var(--green-deep); }

.dots { display: flex; gap: 10px; margin-top: 18px; }
.dot  { flex: 1; text-align: center; }
.dot .bubble {
  width: 36px; height: 36px; margin: 0 auto 4px;
  border-radius: 50%;
  border: 2px solid var(--line-c);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: transparent; background: var(--card);
}
.dot.on .bubble { background: var(--green); border-color: var(--green-deep); color: #fff; }
.dot .lbl { font-size: 14px; color: var(--ink-soft); }

/* --- Home: the week as a calendar (Home Calendar wireframes, 29 Jul) ---
   One "this week" section; five calendar-day tiles; hanging sticker
   tags. The colour code is a product decision, not a styling whim:
   sky blue = video things · leaf green = done · coral = today. */

/* section header: week number big, adventure title beside it,
   w/c date quiet on the right */
.sechead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sechead .wk { font-family: var(--hand); font-size: 31px; font-weight: 600; line-height: 1; }
.sechead .advt { font-family: var(--hand); font-size: 23px; font-weight: 500; color: var(--ink-soft); }
.sechead .wc { margin-left: auto; font-size: 14px; color: var(--ink-soft); }

/* the Mon–Fri strip. Top margin leaves air for the hanging tags;
   wrapping keeps calendar order on narrow screens. */
.cal-strip { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* a day tile: head band + date number, like a real calendar page */
.cal {
  flex: 1 1 0; min-width: 56px; min-height: 122px;
  border: 2px solid var(--line-c); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
  display: flex; flex-direction: column; position: relative;
}
.cal .head {
  background: var(--beige); border-bottom: 2px solid var(--line-c);
  border-radius: 14px 14px 0 0;
  font-family: var(--hand); font-weight: 500;
  text-align: center; font-size: 13px; padding: 3px 0; letter-spacing: 0.5px;
}
.cal .num { font-size: 19px; text-align: center; padding: 2px 0 0; font-family: var(--hand); }
.cal .body {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
}
.cal .body.pad { padding: 10px; }

/* future: white and warm with a "still growing" sprout — never
   grey, never locked-looking (Meadow reskin). missed: nothing at
   all — the quiet gap in the chain is the only signal (no ✗, no
   red, no word). */
.cal.future { box-shadow: none; color: var(--ink-soft); }
.cal.future .num { opacity: 0.7; }
.cal .sprout { font-size: 22px; line-height: 1; }
.cal .grow-lbl { font-size: 12px; color: var(--ink-soft); text-align: center; line-height: 1.25; padding: 0 4px; }

/* missed days are tap targets → the Lesson page while the video
   is unwatched, the Daily Quests page (steps, catch-up ticks)
   once it is */
.cal.tap { transition: transform 0.24s var(--bounce); }
.cal.tap:hover { background: var(--paper-2); transform: scale(1.02); }
.cal.tap:active { transform: scale(0.98); }

/* done: the activated button — solid leaf, pressed in */
.cal.done {
  background: var(--green); border: 3px solid var(--green-deep);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.22);
}
.cal.done .head { background: var(--green-deep); color: #fff; border-bottom-color: var(--green-deep); }
.cal.done .num { color: #fff; opacity: 0.85; }
.cal.done .body { color: #fff; font-size: 34px; font-weight: 700; }

/* today: the wide, warm tile — the day's one action lives here */
.cal.today {
  flex: 3 1 240px; min-height: 172px;
  border: 3px solid var(--ink); background: #fffdf6; opacity: 1;
}
.cal.today .head { background: var(--sunny); font-weight: 600; font-size: 14px; border-bottom-color: var(--line-c); }
.cal.today.ticked {
  background: var(--green); border-color: var(--green-deep);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.22);
}
.cal.today.ticked .head { background: var(--green-deep); color: #fff; border-bottom-color: var(--green-deep); }

/* hanging sticker tags, top-right: coral TODAY / sky ADVENTURE ✓
   (t-adv rides higher and smaller so the day name stays legible
   on the narrow tiles) */
.cal-tag {
  position: absolute; top: -13px; right: -8px; transform: rotate(3deg);
  font-family: var(--hand); font-weight: 600;
  color: #fff; font-size: 13px; letter-spacing: 0.3px;
  padding: 2px 10px; border-radius: 999px; border: 2px solid #fff;
  box-shadow: var(--shadow);
  white-space: nowrap; z-index: 2;
}
.cal-tag.t-today { background: var(--coral); font-size: 14px; padding: 3px 13px; }
.cal-tag.t-adv {
  background: var(--sky-deep); top: -17px;
  font-size: 11px; letter-spacing: 0.2px; padding: 2px 9px;
}

/* video thumbnails — always sky blue (real thumbnails: a later pass) */
.cal .thumb {
  flex: 1; min-height: 0; margin: 5px 6px 6px;
  border: 2px solid var(--sky-deep); border-radius: 10px;
  background: repeating-linear-gradient(45deg, var(--sky-deep), var(--sky-deep) 6px, #1e85bc 6px, #1e85bc 12px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px;
  transition: transform 0.24s var(--bounce);
}
.cal .thumb:hover { transform: scale(1.03) rotate(-0.5deg); }
.cal .thumb.big {
  width: 100%; margin: 0; flex-direction: column; gap: 6px;
  font-size: 36px; min-height: 96px;
}
.cal .thumb .thumb-sub { font-size: 15px; text-align: center; line-height: 1.2; font-family: var(--hand); font-weight: 500; }

/* the slim ADVENTURE ✓ line on the watch day (order: video first) */
.cal .advline {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--sky-deep); font-weight: 700; letter-spacing: 0.2px;
  font-family: var(--hand);
}
.cal .advline .mini {
  width: 26px; height: 16px; border: 2px solid var(--sky-deep); border-radius: 4px;
  background: repeating-linear-gradient(45deg, var(--sky-deep), var(--sky-deep) 4px, #1e85bc 4px, #1e85bc 8px);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 8px;
}

/* inside the today tile */
.cal .eyebrow { font-family: var(--hand); font-weight: 500; font-size: 14px; letter-spacing: 0.3px; color: var(--ink-soft); }
.cal .cardname {
  font-family: var(--hand); font-size: 24px; font-weight: 600;
  line-height: 1.1; text-align: center;
}
.cal .cardname:hover { text-decoration: underline; }
.cal.today.ticked .advline { color: #e4eef6; }
.cal .cal-tick {
  font-family: var(--hand); font-weight: 600;
  border: 2px solid var(--green-deep); border-radius: 999px;
  background: var(--green-deep); color: #fff;
  padding: 8px 22px; font-size: 17px;
  box-shadow: var(--shadow);
  transition: transform 0.12s var(--bounce), box-shadow 0.12s;
}
.cal .cal-tick:hover { background: #24894f; }
.cal .cal-tick:active { transform: translateY(2px) scale(0.97); box-shadow: var(--shadow-press); }
.cal .done-big { font-size: 44px; font-weight: 700; color: #fff; line-height: 1; animation: bloom-pop 0.6s var(--bounce); }
@keyframes bloom-pop {
  from { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.15); }
  to   { transform: scale(1); opacity: 1; }
}
.cal .done-sub { font-size: 16px; color: #fff; font-family: var(--hand); font-weight: 500; }
.cal .cal-undo { font-size: 13px; color: #e2f4e9; text-decoration: underline; }

/* section footer: only line the section ever speaks (weekdone),
   or the weekend catch-up link when the video was never watched */
.cal-foot { text-align: center; font-size: 16px; color: var(--ink-soft); padding-top: 14px; }
.cal-foot .watch-late { color: var(--sky-deep); font-weight: 700; }
.cal-foot .watch-late:hover { text-decoration: underline; }

/* the day that's up next is outlined heavier (2d) */
.dot.today .bubble { border-width: 3.5px; border-color: var(--ink); }
.dot.tappable { cursor: pointer; }
.dot.tappable:hover .bubble { background: var(--beige); }
.dot.tappable.on:hover .bubble { background: var(--green); opacity: 0.85; }
.dot.future { opacity: 0.45; }

/* weekdone: the week closes calmly (2e) */
.weekdone { text-align: center; padding: 14px 0 6px; }
.weekdone .wd-title { font-family: var(--hand); font-size: 33px; font-weight: 600; }
.weekdone .wd-dots { justify-content: center; margin: 14px 0 4px; }
.weekdone .wd-sub { font-size: 18px; color: var(--ink); margin-top: 8px; }
.weekdone .dash-slot { display: inline-block; }

/* ---------- Today (23 Oct 2026) ----------
   The core loop is the hero: three step cards in the order they
   happen, the next one lit coral, done ones pressed green, later
   ones flat. The old wide TODAY tile is retired; the strip below
   is history. Colour code unchanged: green = done, coral = today /
   next, sky = video things, sunny = reward. */

.today-head { align-items: center; }
.today-head .wc { margin-left: auto; }
.pot-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--hand); font-weight: 600; font-size: 15px;
  border: 2px solid var(--line-c); border-radius: 999px;
  padding: 3px 12px; background: var(--paper-2); white-space: nowrap;
}
.pot-pill small { font-weight: 500; color: var(--ink-soft); font-size: 13px; }

.week-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wd {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--hand); font-weight: 600; font-size: 14px; letter-spacing: 0.3px;
  padding: 4px 14px; border-radius: 999px;
  border: 2px solid var(--line-c); color: var(--ink-soft); background: var(--card);
}
.wd b { font-size: 16px; line-height: 1; }
.wd.done { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.wd.today { border-color: var(--coral); color: var(--coral-deep); background: #fffdf6; }
.wd.future { background: transparent; }
.wd.missed { border-style: dashed; border-color: var(--sunny); background: var(--sunny-l); color: var(--ink); }
a.wd.missed:hover { text-decoration: underline; }
.pupil-only { display: none; }
body.pupil .pupil-only { display: inline-flex; }

/* the missed-day banner: amber, never red, one link */
.miss-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 16px;
  border: 2px solid var(--sunny); border-radius: 12px; background: var(--sunny-l);
  font-size: 15px;
}
.miss-banner a { font-family: var(--hand); font-weight: 600; white-space: nowrap; color: var(--ink); }
.miss-banner a:hover { text-decoration: underline; }

/* the loop: three across, two once the Adventure has collapsed */
.loop {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin-top: 18px;
}
@media (max-width: 760px) { .loop { grid-template-columns: 1fr; } }

.step {
  position: relative; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px 12px; border-radius: var(--radius);
  border: 2px solid var(--line-c); background: var(--card);
  box-shadow: var(--shadow);
}
/* the six slots, same order and size in every state */
.step .st-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 22px;
  font-family: var(--hand); font-weight: 600; font-size: 14px; letter-spacing: 0.3px;
  color: var(--ink-soft);
}
.step .st-next {
  background: var(--coral); color: #fff; border-radius: 999px;
  padding: 1px 10px; font-size: 12px; letter-spacing: 0.5px;
}
.step .st-mark { color: var(--green-deep); font-size: 18px; font-weight: 700; line-height: 1; }
.step .st-visual {
  height: 120px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; line-height: 1;
  background: var(--paper-2); border: 2px solid var(--line-c);
}
.step .st-visual img { height: 104px; width: auto; object-fit: contain; }
.step .st-visual.sky { border: none; background: none; }
.step .st-visual .st-thumb {
  width: 100%; height: 100%; border-radius: 10px; border: 2px solid var(--sky-deep);
  background: repeating-linear-gradient(45deg, var(--sky-deep), var(--sky-deep) 6px, #1e85bc 6px, #1e85bc 12px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 36px;
  transition: transform 0.24s var(--bounce);
}
.step .st-visual .st-thumb:hover { transform: scale(1.02) rotate(-0.5deg); }
.step .st-title {
  font-family: var(--hand); font-size: 23px; font-weight: 600; line-height: 1.15;
  min-height: 54px;   /* two lines, so the action sits at the same height on every card */
}
.step .st-action { margin-top: auto; }
.step .st-btn, .step .st-flat {
  box-sizing: border-box; width: 100%; display: block; text-align: center;
  font-family: var(--hand); font-weight: 600; font-size: 17px;
  padding: 12px 14px; border-radius: 999px; line-height: 1.2;
}
.step .st-btn {
  background: var(--coral); border: 2px solid var(--coral-deep); color: #fff;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform 0.12s var(--bounce), box-shadow 0.12s;
}
.step .st-btn:hover { background: var(--coral-deep); }
.step .st-btn:active { transform: translateY(2px) scale(0.97); box-shadow: var(--shadow-press); }
.step .st-btn:disabled { opacity: 0.6; cursor: default; }
.step .st-flat { border: 2px dashed var(--line-c); color: var(--ink-soft); }
.step .st-flat.on { border-style: solid; border-color: var(--green-deep); color: var(--green-deep); background: var(--card); }
.step .st-links {
  min-height: 22px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
}
.step .st-link {
  font-size: 14px; color: var(--ink-soft); text-decoration: underline;
  cursor: pointer; padding: 0 2px; line-height: 22px;
}
.step .st-link:hover { color: var(--ink); }

/* states: lit = coral edge; done = pressed green; later = flat and quiet */
.step.next { border: 3px solid var(--coral); box-shadow: 0 4px 0 var(--coral-deep); background: #fffdf6; }
.step.done { border: 3px solid var(--green-deep); background: var(--green-l); box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.08); }
.step.done .st-head { color: var(--green-deep); }
.step.done .st-visual { background: var(--card); border-color: var(--green); }
.step.done .st-link { color: var(--green-deep); }
.step.done.quiet { background: var(--paper-2); border-color: var(--line-c); box-shadow: none; }
.step.done.quiet .st-head { color: var(--ink-soft); }
.step.done.quiet .st-visual { background: var(--card); border-color: var(--line-c); }
.step.locked, .step.soon { background: var(--paper-2); box-shadow: none; color: var(--ink-soft); }
.step.locked .st-visual, .step.soon .st-visual { background: var(--card); opacity: 0.8; }
.step.locked .st-title, .step.soon .st-title { color: var(--ink); }
.today-head .wk small { font-size: 18px; font-weight: 500; color: var(--ink-soft); }

/* the done moment — green block, huge number; stays all day */
.daydone {
  margin-top: 16px; padding: 30px 24px; text-align: center;
  border: 3px solid var(--green-deep); border-radius: 18px; background: var(--green-l);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: cel-pop 0.6s var(--bounce);
}
.daydone .kicker { color: var(--green-deep); font-weight: 600; margin: 0; }
.daydone .dd-art { font-size: 64px; line-height: 1; animation: bloom-pop 0.8s var(--bounce); }
.daydone .dd-total {
  font-family: var(--hand); font-weight: 700; font-size: clamp(44px, 7vw, 76px); line-height: 1;
  color: var(--green-deep);
}
.daydone .dd-line { font-family: var(--hand); font-size: 24px; font-weight: 500; }
.daydone .dd-chips, .wks-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.chip {
  font-size: 14px; padding: 5px 14px; border-radius: 999px;
  border: 2px solid var(--line-c); background: var(--card); color: var(--ink-soft);
}
.chip.on { border-color: var(--green-deep); color: var(--green-deep); font-weight: 700; }
.daydone .dd-pot { font-size: 15px; color: var(--ink-soft); margin-top: 4px; }
.daydone .dd-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.link-btn { font-size: 14px; color: var(--ink-soft); text-decoration: underline; }
.link-btn:hover { color: var(--ink); }

/* the weekend summary */
.wk-summary {
  margin-top: 16px; padding: 26px 24px;
  border: 2px solid var(--green-deep); border-radius: 18px; background: var(--green-l);
  display: flex; flex-direction: column; gap: 10px;
}
.wk-summary .kicker { color: var(--green-deep); font-weight: 600; margin: 0; }
.wks-title { font-family: var(--hand); font-size: 34px; font-weight: 600; line-height: 1.1; }
.wks-line { font-size: 18px; }
.wks-next { font-size: 15px; color: var(--ink-soft); margin-top: 6px; }
.wks-watch { align-self: flex-start; margin-top: 6px; background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; }

/* This week card: the strip is its own card now */
.week-card { margin-top: 16px; padding: 18px 22px 20px; }
.week-card .cal-strip { margin-top: 18px; }
.cal .day-n { font-size: 13px; font-weight: 600; font-family: var(--hand); opacity: 0.95; margin-top: 2px; }
.cal.done .body { gap: 0; }
.cal .rewatch {
  font-size: 11px; color: #fff; text-align: center; padding: 0 0 6px;
  font-family: var(--hand); font-weight: 600; opacity: 0.9;
}
.cal .rewatch:hover { text-decoration: underline; }
.cal.today-tile { border: 3px solid var(--coral); background: #fffdf6; }
.cal.today-tile .head { background: var(--sunny); font-weight: 600; }
.cal.missed { border: 2px dashed var(--sunny); background: var(--sunny-l); box-shadow: none; }
.cal .tick-late { font-size: 12px; color: var(--ink); text-decoration: underline; font-family: var(--hand); font-weight: 600; }

/* done-moment petals: over the page, no dark backdrop, no clicks */
.celebrate.light { background: transparent; pointer-events: none; z-index: 110; }

/* welcome back — one line, shown once, dismisses itself (2h) */
.welcome-line {
  background: var(--paper-2);
  border: var(--line); border-radius: var(--radius);
  padding: 10px 16px; font-size: 17px;
  margin-bottom: 16px;
  animation: welcome-fade 9s forwards;
}
@keyframes welcome-fade {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* ---------- Lab (admin-only dev controls + pinned-day banner) ---------- */

/* Unmissable thin strip along the bottom whenever a day is pinned.
   The whole strip is a button: tap to clear the pin. */
.lab-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  width: 100%; border: none; cursor: pointer;
  background: var(--midnight); color: #fff;
  padding: 6px 14px; font-size: 14px; font-family: var(--body);
  text-align: center; letter-spacing: 0.02em;
}
.lab-banner:hover { background: var(--midnight-2, #2F3A75); }
body.lab-pinned { padding-bottom: 34px; }

/* The tiny flask — quiet until hovered. Rendered only when an
   admin auth session exists on the device (app.js BloomLab). */
.lab-btn {
  position: fixed; left: 12px; bottom: 12px; z-index: 210;
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--line-c); background: var(--card);
  font-size: 16px; line-height: 1; cursor: pointer;
  opacity: 0.45; padding: 0;
}
.lab-btn:hover, .lab-btn:focus-visible { opacity: 1; box-shadow: var(--shadow, 0 3px 0 rgba(46,44,69,.12)); }
body.lab-pinned .lab-btn { bottom: 44px; }

/* The panel: one card, right-hand side, over whatever page is open */
.bl-overlay.lab-overlay { align-items: stretch; justify-content: flex-end; padding: 0; z-index: 300; }
.lab-panel {
  width: 100%; max-width: 380px; margin: 0;
  border-radius: 0; overflow-y: auto;
  padding: 18px 20px 26px;
}
.lab-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lab-title { font-family: var(--hand); font-weight: 600; font-size: 21px; }
.lab-who { color: var(--ink-soft); font-size: 13px; margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.lab-x { border: none; background: none; font-size: 17px; cursor: pointer; color: var(--ink-soft); padding: 4px; }
.lab-sec { border-top: 1px solid var(--line-c); padding: 12px 0; }
.lab-k { font-family: var(--hand); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 6px; }
.lab-line { font-size: 15px; padding: 2px 0; }
.lab-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.lab-date { font: inherit; font-size: 15px; padding: 6px 10px;
  border: var(--line); border-radius: var(--radius); background: var(--card); }
.lab-small { font-size: 14px; padding: 7px 14px; }
.lab-note { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-top: 8px; }
.lab-errors { max-height: 240px; overflow-y: auto; font-size: 13px; }
.lab-err-row { padding: 7px 0; border-bottom: 1px solid var(--line-c); }
.lab-err-meta { color: var(--ink-soft); font-size: 12px; }
.lab-err-msg { word-break: break-word; }
.lab-err-dev { color: var(--ink-soft); font-size: 11px; word-break: break-word; }
.lab-foot { border-top: 1px solid var(--line-c); padding-top: 12px; font-size: 14px; }

/* ---------- Adventures ---------- */
.adv-list { display: flex; flex-direction: column; gap: 12px; }
.adv-row {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 20px;
  position: relative;
}
.adv-row .wk {
  flex: 0 0 56px; height: 56px; border-radius: var(--radius);
  background: var(--beige); border: var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--hand);
  line-height: 1;
}
.adv-row .wk small { font-size: 11px; letter-spacing: 0.3px; }
.adv-row .wk big   { font-size: 22px; font-weight: 600; }
/* Adventures row rework (24 Oct 2026, Krish): the week box stays
   neutral (coral only on this week); the calendar leaf on the right
   IS the tick (watched = green, a tick drawn over the date, like
   ticking a wall calendar); the practice row is the nav's sprout
   plus five flat day circles (done / missed / today / not yet);
   "still growing" is gone. Cards get a firmer edge + soft shadow so
   they lift off the page without touching the page background. */
.adv-row.current .wk { background: var(--coral); border-color: var(--coral-deep); color: #fff; }
.adv-row { border: 1.5px solid var(--line-c); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.adv-row.current { border: 2px solid var(--green-deep); }
.adv-row { transition: transform 0.24s var(--bounce); }
.adv-row:hover { transform: scale(1.015) rotate(-0.3deg); }
.adv-row:active { transform: scale(0.99); }
.adv-row .adv-name { font-family: var(--hand); font-size: 23px; font-weight: 500; line-height: 1.15; }
.adv-row .adv-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.adv-row .adv-meta .sprout { color: var(--green-deep); font-size: 16px; margin-right: 2px; }
/* the five day circles: one glyph (the tick), four solid states */
.adv-row .mini-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--beige); border: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hand); font-size: 11px; font-weight: 700; color: var(--ink);
  position: relative;
}
.adv-row .mini-dot.on { background: var(--green-deep); }
.adv-row .mini-dot.on::after {
  content: ''; width: 10px; height: 5px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.adv-row .mini-dot.missed { background: var(--sunny); }
.adv-row .mini-dot.today { background: var(--card); border: 2px solid var(--ink); }
.adv-row .adv-tick { margin-left: auto; display: flex; }
/* the calendar leaf */
.adv-leaf {
  width: 62px; height: 66px; border-radius: 10px; box-sizing: border-box;
  border: 1.5px solid var(--line-c); background: var(--card);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  line-height: 1; font-family: var(--hand);
}
.adv-leaf .leaf-m {
  background: var(--ink-soft); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; padding: 5px 0;
}
.adv-leaf .leaf-d { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: var(--ink); }
.adv-row.current .adv-leaf { border: 2px solid var(--coral-deep); }
.adv-row.current .leaf-m { background: var(--coral); }
.adv-row.watched .adv-leaf { border: 2px solid var(--green-deep); }
.adv-row.watched .leaf-m { background: var(--green-deep); }
.adv-row.watched .leaf-d { opacity: 0.22; }
.adv-row.watched .adv-leaf::after {
  content: ''; position: absolute; left: 15px; top: 27px;
  width: 28px; height: 14px; border-radius: 2px;
  border-left: 4px solid var(--green-deep); border-bottom: 4px solid var(--green-deep);
  transform: rotate(-45deg);
}
/* "this week" — a coral sticker resting on the card edge,
   sentence case (was floating red text) */
.here-tag {
  font-family: var(--hand);
  position: absolute; top: -15px; left: 18px; transform: rotate(-2deg);
  background: var(--coral); color: #fff;
  font-size: 15px; font-weight: 600;
  padding: 4px 15px; border-radius: 999px; border: 2px solid #fff;
  box-shadow: var(--shadow);
  white-space: nowrap; z-index: 2;
}
/* future weeks: faded, never locked-looking; date + empty circles still show */
.adv-row.future { opacity: 0.7; }
.adv-row.future .adv-name { color: var(--ink); }

/* ---------- Lesson ---------- */
.back-link { display: inline-block; font-size: 17px; color: var(--ink-soft); margin-bottom: 12px; }
.back-link:hover { color: var(--ink); }
/* the story stage (Meadow reskin): the week's video sits on a
   starred midnight panel — the special-moment register, reserved
   for exactly this */
.story-stage {
  /* the one width cap that stays: an uncapped 16:9 video grows
     taller than the screen on wide monitors */
  max-width: 1280px;
  background:
    radial-gradient(circle 2.5px at 6% 22%, rgba(255,255,255,0.55) 98%, transparent),
    radial-gradient(circle 2px at 13% 62%, rgba(255,255,255,0.4) 98%, transparent),
    radial-gradient(circle 3px at 91% 18%, rgba(255,255,255,0.55) 98%, transparent),
    radial-gradient(circle 2px at 84% 70%, rgba(255,255,255,0.4) 98%, transparent),
    radial-gradient(circle 2.5px at 96% 46%, rgba(255,255,255,0.45) 98%, transparent),
    linear-gradient(180deg, var(--midnight) 0%, var(--midnight-2) 100%);
  border-radius: 22px;
  padding: 16px 18px 18px;
  box-shadow: var(--shadow);
}
.stage-label {
  font-family: var(--hand); font-weight: 600;
  color: #fff; font-size: 18px; margin-bottom: 12px;
}
.video-frame {
  background: #101430; border: none; border-radius: 14px;
  aspect-ratio: 16 / 9; width: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #e4eef6; font-size: 20px;
  overflow: hidden;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.lesson-note { color: var(--ink-soft); font-size: 15px; margin-top: 10px; }

/* ---------- SOS (icon-tile redesign, 30 Jul — Wireframes v2) ----------
   Shelves: each group is a full-width row on a 3-column grid,
   padded to three slots by sos.html. Tiles are GENERATED: group
   colour gradient + white library icon (icons.js) + name on a
   scrim. Within a shelf the gradient cycles three shade steps by
   sort order. Uploaded images (games.tile_url) remain a dormant
   full-bleed override for games with no icon. */
.sos-group { margin-bottom: 44px; }
.sos-group h2 {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--hand);
  font-size: 27px; font-weight: 600; margin-bottom: 14px;
}
.grp-dot { width: 15px; height: 15px; border-radius: 50%; flex: none; }
.grp-dot.sky    { background: var(--sky); }
.grp-dot.violet { background: var(--violet); }
.grp-dot.coral  { background: var(--coral); }
.grp-dot.leaf   { background: var(--green); }
.grp-dot.sunny  { background: var(--sunny); }

.tile-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (min-width: 860px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}

.game-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 24px;             /* Meadow's touchable register */
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow);
  transition: transform 0.24s var(--bounce);
}
.game-tile:hover { transform: scale(1.04) rotate(-1deg); }
.game-tile:active { transform: scale(0.98); box-shadow: var(--shadow-press); }
.game-tile .art {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
/* the icon is the hero: ~64% of the tile, nudged above the scrim */
.game-tile .art svg {
  width: 64%; height: 64%; margin-bottom: 9%;
  filter: drop-shadow(0 2px 0 rgba(35, 42, 86, 0.15));
}
/* dormant override: admin-uploaded art fills the frame (cover
   crops, never squashes) */
.game-tile .art.photo img { width: 100%; height: 100%; object-fit: cover; }
.game-tile .scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
  background: linear-gradient(180deg, rgba(35, 42, 86, 0) 0%, rgba(35, 42, 86, 0.55) 85%);
}
.game-tile .name {
  position: absolute; left: 16px; right: 16px; bottom: 12px;
  color: #fff;
  font-family: var(--hand); font-weight: 600;
  font-size: 21px; line-height: 1.2;
  text-shadow: 0 1px 2px rgba(35, 42, 86, 0.4);
}

/* group gradients — three shade steps per colour, assigned by
   sort order (tg-<colour>-<1|2|3> from sos.html). Deterministic:
   a game keeps its exact look day after day. */
.tg-sky-1    { background: linear-gradient(180deg, #9ad4f5 0%, #3fa9e0 100%); }
.tg-sky-2    { background: linear-gradient(180deg, #7fc6ef 0%, #2e93cc 100%); }
.tg-sky-3    { background: linear-gradient(180deg, #b4dff8 0%, #55b4e6 100%); }
.tg-violet-1 { background: linear-gradient(180deg, #c4b4ee 0%, #8b6fd6 100%); }
.tg-violet-2 { background: linear-gradient(180deg, #b29ce8 0%, #7a5bcb 100%); }
.tg-violet-3 { background: linear-gradient(180deg, #d4c8f4 0%, #9c82de 100%); }
.tg-coral-1  { background: linear-gradient(180deg, #fbaab2 0%, #f4606c 100%); }
.tg-coral-2  { background: linear-gradient(180deg, #f98e99 0%, #e24a58 100%); }
.tg-coral-3  { background: linear-gradient(180deg, #fcc1c7 0%, #f77680 100%); }
.tg-leaf-1   { background: linear-gradient(180deg, #a9dcbb 0%, #4caf6e 100%); }
.tg-leaf-2   { background: linear-gradient(180deg, #8fd0a6 0%, #3d9a5e 100%); }
.tg-leaf-3   { background: linear-gradient(180deg, #bfe5cc 0%, #5fba7d 100%); }
.tg-sunny-1  { background: linear-gradient(180deg, #ffd48a 0%, #ffb733 100%); }
.tg-sunny-2  { background: linear-gradient(180deg, #ffc95f 0%, #f0a41e 100%); }
.tg-sunny-3  { background: linear-gradient(180deg, #ffdfa6 0%, #ffc14d 100%); }

/* per-game flower pill — the class's harvest from this game
   (🌼 top-right; added by sos.html when get_game_flowers answers;
   absent entirely on pre-SQL servers / offline) */
.game-tile .tile-flowers {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink); font-weight: 800; font-size: 14px;
  box-shadow: 0 2px 6px rgba(35, 42, 86, 0.18);
  pointer-events: none;
}

/* "a new game is growing" — shelf padding to three slots (things
   that aren't ready are still growing, never locked) */
.game-tile.soon {
  box-shadow: none; cursor: default;
  border: 2.5px dashed var(--line-c);
  background: var(--beige);
}
.game-tile.soon:hover { transform: none; }
.game-tile.soon .inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--ink-soft);
}
.game-tile.soon .em { font-size: 32px; }
.game-tile.soon .tx { font-family: var(--hand); font-weight: 500; font-size: 16px; }

/* ---------- Pupil mode ---------- */
body.pupil .teacher-only { display: none !important; }
.kit-btn {
  display: none;
  align-items: center; gap: 8px;
  background: var(--beige); border: var(--line);
  border-radius: 999px; padding: 5px 16px;
  font-size: 16px;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
body.pupil .kit-btn { display: inline-flex; }
.hold-ring { font-size: 13px; color: var(--ink-soft); }

/* ---------- Help ---------- */
.help-list { display: flex; flex-direction: column; gap: 10px; max-width: 700px; }
.help-item { padding: 0; overflow: hidden; }
.help-item summary {
  list-style: none; cursor: pointer;
  padding: 14px 20px; font-size: 19px;
  font-family: var(--hand); font-weight: 500;
  display: flex; align-items: center;
}
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary::after { content: "▸"; margin-left: auto; color: var(--ink-soft); transition: transform 0.15s; }
.help-item[open] summary::after { transform: rotate(90deg); }
.help-item .answer { padding: 0 20px 16px; color: var(--ink-soft); font-size: 16px; }

/* ---------- Term plan (print) ---------- */
.plan-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.plan-table th, .plan-table td {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--line-c); font-size: 17px;
}
.plan-table th { font-family: var(--hand); font-weight: 500; font-size: 14px; letter-spacing: 0.3px; color: var(--ink-soft); }
@media print {
  .nav, .no-print { display: none !important; }
  body { background: #fff; }
  .card { border-color: #999; box-shadow: none; }
  .footer { background: none; padding: 20px 0; }
}

/* ---------- Footer — the meadow horizon (Meadow reskin) ----------
   Three soft hills (left, right, and a centre one so the words
   always sit on solid green, not in the dip) with a strip of small
   drawn flowers and grass tufts along the bottom edge: an inline
   SVG tile, 340px wide, repeating. Pure CSS, so every page gets it
   for free. (24 Oct 2026: the emoji flower row above the words was
   dropped and the spacing rebalanced; the SVG strip replaced it.) */
.footer {
  font-family: var(--hand); font-weight: 500;
  text-align: center; color: var(--ink-soft);
  font-size: 17px; padding: 88px 0 58px;
  margin-top: auto; /* sticky footer — always at the bottom */
  width: 100%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='44' viewBox='0 0 340 44'%3E%3Cpath d='M30 44 Q33 32.0 30 20' stroke='%237cb48f' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M30 33 q6 -7 12 0 q-6 4 -12 0z' fill='%239ccfae'/%3E%3Ccircle cx='30.0' cy='10.8' r='3.2' fill='%23f7b9c9'/%3E%3Ccircle cx='34.9' cy='14.4' r='3.2' fill='%23f7b9c9'/%3E%3Ccircle cx='33.1' cy='20.2' r='3.2' fill='%23f7b9c9'/%3E%3Ccircle cx='26.9' cy='20.2' r='3.2' fill='%23f7b9c9'/%3E%3Ccircle cx='25.1' cy='14.4' r='3.2' fill='%23f7b9c9'/%3E%3Ccircle cx='30' cy='16' r='2.6' fill='%23fff0b8'/%3E%3Cpath d='M66 44 q-3 -9 -5 -11 M66 44 q0 -10 1 -13 M66 44 q4 -8 6 -10' stroke='%239ccfae' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M96 44 Q93 35.5 96 27' stroke='%237cb48f' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='96.0' cy='20.0' r='2.5' fill='%23ffe08a'/%3E%3Ccircle cx='99.5' cy='22.0' r='2.5' fill='%23ffe08a'/%3E%3Ccircle cx='99.5' cy='26.0' r='2.5' fill='%23ffe08a'/%3E%3Ccircle cx='96.0' cy='28.0' r='2.5' fill='%23ffe08a'/%3E%3Ccircle cx='92.5' cy='26.0' r='2.5' fill='%23ffe08a'/%3E%3Ccircle cx='92.5' cy='22.0' r='2.5' fill='%23ffe08a'/%3E%3Ccircle cx='96' cy='24' r='2.0' fill='%23ffffff'/%3E%3Cpath d='M128 44 q-3 -9 -5 -11 M128 44 q0 -10 1 -13 M128 44 q4 -8 6 -10' stroke='%239ccfae' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M140 44 q-3 -9 -5 -11 M140 44 q0 -10 1 -13 M140 44 q4 -8 6 -10' stroke='%239ccfae' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M170 44 Q173 30.0 170 16' stroke='%237cb48f' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M170 30 q-6 -7 -12 0 q6 4 12 0z' fill='%239ccfae'/%3E%3Ccircle cx='170.0' cy='6.2' r='3.6' fill='%23cbb9f2'/%3E%3Ccircle cx='175.5' cy='10.2' r='3.6' fill='%23cbb9f2'/%3E%3Ccircle cx='173.4' cy='16.7' r='3.6' fill='%23cbb9f2'/%3E%3Ccircle cx='166.6' cy='16.7' r='3.6' fill='%23cbb9f2'/%3E%3Ccircle cx='164.5' cy='10.2' r='3.6' fill='%23cbb9f2'/%3E%3Ccircle cx='170' cy='12' r='2.9' fill='%23fff0b8'/%3E%3Cpath d='M206 44 q-3 -9 -5 -11 M206 44 q0 -10 1 -13 M206 44 q4 -8 6 -10' stroke='%239ccfae' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M238 44 Q236 34.5 238 25' stroke='%237cb48f' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M238 36 q6 -7 12 0 q-6 4 -12 0z' fill='%239ccfae'/%3E%3Ccircle cx='238.0' cy='17.6' r='2.7' fill='%23ffffff'/%3E%3Ccircle cx='241.8' cy='19.8' r='2.7' fill='%23ffffff'/%3E%3Ccircle cx='241.8' cy='24.2' r='2.7' fill='%23ffffff'/%3E%3Ccircle cx='238.0' cy='26.4' r='2.7' fill='%23ffffff'/%3E%3Ccircle cx='234.2' cy='24.2' r='2.7' fill='%23ffffff'/%3E%3Ccircle cx='234.2' cy='19.8' r='2.7' fill='%23ffffff'/%3E%3Ccircle cx='238' cy='22' r='2.2' fill='%23ffd166'/%3E%3Cpath d='M272 44 q-3 -9 -5 -11 M272 44 q0 -10 1 -13 M272 44 q4 -8 6 -10' stroke='%239ccfae' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M284 44 q-3 -9 -5 -11 M284 44 q0 -10 1 -13 M284 44 q4 -8 6 -10' stroke='%239ccfae' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M306 44 Q308 32.0 306 20' stroke='%237cb48f' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='306.0' cy='12.2' r='3.0' fill='%23fbc9a6'/%3E%3Ccircle cx='310.6' cy='15.5' r='3.0' fill='%23fbc9a6'/%3E%3Ccircle cx='308.8' cy='20.9' r='3.0' fill='%23fbc9a6'/%3E%3Ccircle cx='303.2' cy='20.9' r='3.0' fill='%23fbc9a6'/%3E%3Ccircle cx='301.4' cy='15.5' r='3.0' fill='%23fbc9a6'/%3E%3Ccircle cx='306' cy='17' r='2.4' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x bottom center / 340px 44px,
    radial-gradient(62% 130% at 22% 100%, #cde8d6 58%, transparent 62%),
    radial-gradient(64% 140% at 80% 100%, #b9dfc6 58%, transparent 62%),
    radial-gradient(70% 110% at 50% 100%, #c4e4d0 58%, transparent 62%);
  background-repeat: repeat-x, no-repeat, no-repeat, no-repeat;
}

/* ---------- Class badge + menu (added by app.js) ---------- */
/* Nav right side (24 Oct, "Nav Right Side" wireframe, option A).
   One identity pill: school name · class badge · chevron. It opens
   the class menu (help, report a problem, refresh, log out). Pupil
   mode hides the button and shows the school name as plain text in
   its place (the school name is always visible, 29 Jul rule). Long
   names truncate with an ellipsis. The teacher's own check-in icon
   (.tck-nav, checkin.css) sits just to the left, same height. */
.badge-wrap { position: relative; margin-left: 6px; display: inline-flex; align-items: center; min-width: 0; }
.badge-school-pupil { display: none; font-size: 15px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
body.pupil .badge-school-pupil { display: inline-block; }
.badge-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 8px 0 14px; max-width: 40vw;
  border: 1px solid var(--line-c); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font: inherit; line-height: 1; box-shadow: none;
  transition: background var(--t-calm) var(--ease);
}
.badge-btn .badge-school {
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.badge-mark {
  min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; flex: none;
  border: 1.5px solid var(--ink);
  display: inline-grid; place-items: center;
  font-family: var(--hand); font-size: 12.5px; font-weight: 700; letter-spacing: .5px;
}
.badge-car { font-size: 11px; color: var(--ink-soft); margin: 0 2px 0 -2px; }
.badge-btn:hover { background: var(--beige); }
.badge-btn[aria-expanded="true"] { background: var(--beige); }
@media (max-width: 760px) { .badge-btn { max-width: 48vw; } .badge-school-pupil { max-width: 24vw; } }

.badge-menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 290px; z-index: 60; padding: 6px;
  background: var(--card); border: 1px solid var(--line-c); border-radius: 16px;
  box-shadow: 0 14px 36px rgba(46, 44, 69, 0.16);
}
.badge-menu .bm-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line-c); margin-bottom: 6px; }
.badge-menu .bm-class { font-family: var(--hand); font-size: 18px; font-weight: 700; line-height: 1.15; }
.badge-menu .bm-school { font-size: 14px; color: var(--ink); margin-top: 2px; }
.badge-menu .bm-teacher { font-size: 13.5px; color: var(--ink-soft); }
.badge-menu .bm-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; border: none;
  padding: 9px 12px; border-radius: 10px; font-size: 15px; color: var(--ink);
}
.badge-menu .bm-item .fa-solid { width: 18px; text-align: center; font-size: 14px; color: var(--ink-soft); flex: none; }
.badge-menu .bm-item:hover { background: var(--beige); }
.badge-menu .bm-item.bm-quiet { color: var(--ink-soft); }
.badge-menu .bm-div { height: 1px; background: var(--line-c); margin: 6px 4px; }

/* small overlay shared by the logout confirm + support form */
.bl-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(35, 42, 86, 0.38);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.bl-modal { width: 100%; max-width: 420px; padding: 22px 24px; }
.bl-modal h2 { font-family: var(--hand); font-size: 23px; font-weight: 600; line-height: 1.15; margin-bottom: 8px; }
.bl-modal p { font-size: 16px; color: var(--ink-soft); line-height: 1.55; }
.bl-modal .bl-sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; }
.bl-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.bl-quiet { background: var(--paper-2); border-color: var(--line-c); }
.bl-label { display: block; font-size: 14px; color: var(--ink-soft); margin: 10px 0 3px; }
.bl-input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  padding: 8px 12px; resize: vertical;
}
.bl-input:focus { outline: 3px solid var(--green-soft); }
.bl-err {
  border: 2px solid var(--coral-deep); background: #fdecee; border-radius: 12px;
  padding: 8px 12px; font-size: 14px; color: #a02332; margin-top: 10px;
}

/* ---------- The flower pot (rewards, 29 Jul) ----------
   Count + fill bar toward the goal; after the unlock it just
   keeps counting. Rebuilt 29 Jul PM — the original pot styles
   were lost when two same-day sessions both touched this file. */
.pot-card { margin: 16px 0 0; padding: 16px 22px; position: relative; }
.pot-row { display: flex; align-items: center; gap: 14px; }
.pot-flower { font-size: 34px; line-height: 1; }
.pot-main { flex: 1; min-width: 0; }
.pot-count { font-size: 18px; }
.pot-count b { font-size: 21px; }
.pot-sub { font-size: 14px; color: var(--ink-soft); }
.pot-bar {
  height: 14px; margin-top: 6px;
  border: 2px solid var(--line-c); border-radius: 999px;
  background: var(--beige); overflow: hidden;
}
.pot-fill { height: 100%; background: linear-gradient(90deg, var(--green) 0%, var(--green-deep) 100%); border-radius: 999px; transition: width 0.6s var(--bounce); }
.pot-goal { font-size: 15px; color: var(--ink-soft); }
.pot-replay {
  border: 2px solid var(--ink); border-radius: 999px;
  background: var(--beige); padding: 6px 14px; font-size: 14px;
  font-family: var(--hand); font-weight: 500;
}
.pot-replay:hover { background: var(--beige-press); }

/* "+100 🌼" drifting up from the pot when a tick lands */
.pot-float {
  position: absolute; right: 26px; top: 6px;
  font-size: 20px; font-weight: 700; color: var(--green-deep);
  pointer-events: none;
  animation: pot-float 1.5s forwards;
}
@keyframes pot-float {
  from { opacity: 0; transform: translateY(8px); }
  20%  { opacity: 1; }
  to   { opacity: 0; transform: translateY(-28px); }
}

/* the unlock celebration — full screen, petals falling.
   Midnight, gold and white: the special-moment register, used
   nowhere else on the everyday pages. */
.celebrate {
  position: fixed; inset: 0; z-index: 120;
  background: linear-gradient(180deg, rgba(35, 42, 86, 0.92), rgba(47, 58, 117, 0.92));
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow: hidden;
}
.petal { position: absolute; top: -50px; animation: petal-fall linear infinite; }
@keyframes petal-fall {
  from { transform: translateY(-6vh) rotate(0deg); }
  to   { transform: translateY(112vh) rotate(320deg); }
}
.cel-card {
  position: relative; z-index: 1;
  background: var(--card); border: var(--line); border-radius: var(--radius);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
  padding: 30px 38px; text-align: center; max-width: 440px;
  animation: cel-pop 0.6s var(--bounce);
}
@keyframes cel-pop {
  from { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.08); }
  to   { transform: scale(1); opacity: 1; }
}
.cel-pot { font-size: 56px; line-height: 1; }
.cel-title { font-family: var(--hand); font-size: 34px; font-weight: 600; line-height: 1.05; margin-top: 6px; }
.cel-sub { font-size: 18px; margin-top: 8px; }
.cel-btn {
  margin-top: 20px;
  background: var(--sunny); border-color: var(--sunny); color: var(--ink);
  font-weight: 600; font-size: 18px; padding: 12px 28px;
}
.cel-btn:hover { background: #ffc95c; }

/* ---------- The school garden ----------
   Every class's pot growing together. Name order, never ranked;
   our own row highlighted. */
.garden-card { margin: 16px 0 0; }
.garden-total { font-size: 18px; margin-bottom: 12px; }
.garden-rows { display: flex; flex-direction: column; gap: 8px; }
.garden-row { display: flex; align-items: center; gap: 12px; }
.garden-row.me {
  background: var(--green-soft); border-radius: 10px;
  padding: 5px 8px; margin: 0 -8px;
}
.g-name {
  flex: 0 0 170px; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-us { color: var(--green-deep); font-size: 14px; }
.g-bar {
  flex: 1; height: 12px; display: block;
  border: 2px solid var(--line-c); border-radius: 999px;
  background: var(--beige); overflow: hidden;
}
.g-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--green) 0%, var(--green-deep) 100%); border-radius: 999px; }
.g-n { flex: 0 0 auto; min-width: 66px; text-align: right; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 560px) { .g-name { flex-basis: 110px; } }

/* ---------- Home identity (added by app.js) ---------- */
/* Whose page this is: the class name, big. The school name lives
   in the nav (always visible) — not repeated here. */
.home-ident { margin: 0 0 14px; line-height: 1.1; }
.home-ident .hi-class {
  display: block;
  font-family: var(--hand); font-size: 26px; font-weight: 600;
}


/* ---------- Day Planner (dayplan.html · Day Plan Spec v1, 17 Aug) ----------
   The visual class timetable. Colour families are the soft wash
   behind each icon — a deliberate exception to Meadow's "one bright
   family per screen" rule because the colour is doing a job
   (grouping activities); the washes stay soft so the wall reads calm.
   Namespace .plan-* — nothing here touches Home. */
.plan-section { padding: 22px 26px 26px; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.plan-head h2 { font-family: var(--hand); font-weight: 600; font-size: 30px; line-height: 1.1; }
.plan-head .right { display: flex; align-items: center; gap: 14px; }
.plan-date { color: var(--ink-soft); font-size: 16px; font-family: var(--hand); }
.plan-offline { font-size: 13px; color: var(--coral-deep); font-family: var(--hand); }

/* the row: wraps, never scrolls — the whole day is always visible */
.plan-row {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch;
  padding: 14px; min-height: 176px;
  background: var(--beige); border-radius: var(--radius);
  transition: background 0.2s;
}
.plan-row.is-over { background: var(--beige-press); }

.plan-card, .plan-lib-card { touch-action: none; user-select: none; -webkit-user-select: none; }

.plan-card {
  position: relative;
  flex: 1 1 130px; min-width: 112px; max-width: 176px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 8px 12px;
  background: var(--card); border: 3px solid var(--line-c); border-radius: var(--radius);
  box-shadow: var(--shadow); cursor: grab;
  transition: transform 0.24s var(--bounce), box-shadow 0.2s, opacity 0.2s;
}
.plan-card:active { cursor: grabbing; }
.plan-ic {
  position: relative; width: 74px; height: 74px; border-radius: 18px;
  display: grid; place-items: center;
}
.plan-ic svg { width: 54px; height: 54px; }
.plan-lb { font-family: var(--hand); font-weight: 600; font-size: 19px; line-height: 1.1; text-align: center; }
.plan-sub { font-family: var(--hand); font-size: 12px; color: var(--ink-soft); text-align: center; line-height: 1.15; }
.plan-check { display: none; }
.plan-pin { position: absolute; top: 5px; left: 8px; font-size: 12px; opacity: 0.75; }

/* colour families: soft wash + deep twin for the glyph and border */
.fam-sky    .plan-ic { background: #ddf0fa; color: var(--sky-deep); }    .fam-sky    { border-color: #b7def3; }
.fam-leaf   .plan-ic { background: #ddf3e5; color: var(--green-deep); }  .fam-leaf   { border-color: #b7e2c6; }
.fam-sunny  .plan-ic { background: #fff0d1; color: #b87400; }            .fam-sunny  { border-color: #ffdfa0; }
.fam-violet .plan-ic { background: #eae3f9; color: var(--violet-deep); } .fam-violet { border-color: #cfc2f0; }
.fam-coral  .plan-ic { background: #fde0e3; color: var(--coral-deep); }  .fam-coral  { border-color: #f9bec4; }

/* NOW = first un-ticked card */
.plan-card.now {
  border-color: var(--coral); border-width: 4px;
  transform: translateY(-4px); box-shadow: 0 7px 0 rgba(46, 44, 69, 0.14);
}
.plan-card.now::after {
  content: 'NOW'; position: absolute; top: -13px; right: -8px; transform: rotate(4deg);
  background: var(--coral); color: #fff; font-family: var(--hand); font-weight: 700;
  font-size: 12px; letter-spacing: 0.6px; padding: 3px 10px; border-radius: 999px;
  border: 2px solid #fff; box-shadow: var(--shadow); z-index: 2;
}

/* done = the week calendar's pressed-green activated button */
.plan-card.done {
  background: var(--green); border-color: var(--green-deep);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.18); transform: translateY(2px);
  color: #fff;
}
.plan-card.done .plan-ic { background: rgba(255, 255, 255, 0.22); color: #fff; }
.plan-card.done .plan-ic svg { opacity: 0.35; }
.plan-card.done .plan-check {
  display: grid; place-items: center; position: absolute; inset: 0;
  font-family: var(--hand); font-weight: 700; font-size: 52px; color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.plan-card.done .plan-lb, .plan-card.done .plan-sub { color: #fff; }
.plan-card.done .plan-pin { filter: grayscale(1) brightness(3); }
.plan-undo { position: absolute; bottom: 5px; right: 10px; font-size: 11px; color: #fff; text-decoration: underline; opacity: 0.9; }

/* the Bloom card's own tick button — same look as Home's cal-tick */
.plan-tick {
  margin-top: 2px; background: var(--green-deep); color: #fff;
  font-family: var(--hand); font-weight: 600; font-size: 12px;
  padding: 5px 10px; border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; max-width: 100%;
  transition: transform 0.12s var(--bounce), box-shadow 0.12s;
}
.plan-tick:hover { background: #24894f; }
.plan-tick:active { transform: translateY(2px) scale(0.97); box-shadow: var(--shadow-press); }

/* drop hint + drag gap */
.plan-drop {
  flex: 0 0 130px; min-height: 140px;
  border: 3px dashed rgba(46, 44, 69, 0.28); border-radius: var(--radius);
  display: grid; place-items: center; color: var(--ink-soft);
  font-family: var(--hand); font-size: 15px; text-align: center; padding: 10px;
}
.plan-drop.wide { flex: 1 1 320px; }
.plan-gap {
  flex: 1 1 130px; min-width: 112px; max-width: 176px; min-height: 140px;
  border: 3px dashed var(--sky); border-radius: var(--radius); background: rgba(63, 169, 224, 0.10);
}
.plan-lifted { opacity: 0.25; }
.plan-ghost {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; margin: 0;
  box-shadow: 0 14px 24px rgba(46, 44, 69, 0.28); will-change: transform;
}
body.plan-dragging { cursor: grabbing; }
body.plan-dragging * { cursor: grabbing !important; }
@keyframes plan-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.plan-shake { animation: plan-shake 0.25s ease-in-out 2; }

/* the library */
.plan-lib-wrap { margin-top: 18px; }
.plan-lib-lbl { font-family: var(--hand); font-weight: 500; font-size: 15px; color: var(--ink-soft); margin: 0 0 8px 4px; }
.plan-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.plan-lib-card {
  background: var(--card); border: 2px solid var(--line-c); border-radius: 12px;
  padding: 9px 6px 8px; text-align: center; box-shadow: var(--shadow); cursor: grab;
  transition: transform 0.15s var(--bounce), opacity 0.2s;
}
.plan-lib-card:hover { transform: translateY(-2px); }
.plan-lib-card .plan-ic { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 5px; }
.plan-lib-card .plan-ic svg { width: 32px; height: 32px; }
.plan-lib-card .plan-lb { font-weight: 500; font-size: 13px; }
.plan-lib-card.used { opacity: 0.45; }
.plan-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.plan-legend span::before { content: ''; display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; border: 2px solid; }
.plan-legend .l-sky::before    { background: #ddf0fa; border-color: #b7def3; }
.plan-legend .l-leaf::before   { background: #ddf3e5; border-color: #b7e2c6; }
.plan-legend .l-sunny::before  { background: #fff0d1; border-color: #ffdfa0; }
.plan-legend .l-violet::before { background: #eae3f9; border-color: #cfc2f0; }
.plan-legend .l-coral::before  { background: #fde0e3; border-color: #f9bec4; }

/* wall mode: the section alone, fullscreen, library hidden, everything bigger */
.plan-section.wall, .plan-section:fullscreen {
  background: var(--paper); border: none; border-radius: 0; box-shadow: none;
  padding: 36px clamp(24px, 4vw, 64px); min-height: 100vh; overflow: auto;
}
.plan-section.wall .plan-lib-wrap, .plan-section:fullscreen .plan-lib-wrap { display: none; }
.plan-section.wall .plan-head h2, .plan-section:fullscreen .plan-head h2 { font-size: 40px; }
.plan-section.wall .plan-date, .plan-section:fullscreen .plan-date { font-size: 22px; }
.plan-section.wall .plan-row, .plan-section:fullscreen .plan-row { gap: 20px; padding: 20px; min-height: 260px; }
.plan-section.wall .plan-card, .plan-section:fullscreen .plan-card { flex-basis: 190px; min-width: 150px; max-width: 250px; padding: 20px 10px 16px; gap: 10px; }
.plan-section.wall .plan-gap, .plan-section:fullscreen .plan-gap { flex-basis: 190px; min-width: 150px; max-width: 250px; }
.plan-section.wall .plan-ic, .plan-section:fullscreen .plan-ic { width: 108px; height: 108px; border-radius: 26px; }
.plan-section.wall .plan-ic svg, .plan-section:fullscreen .plan-ic svg { width: 78px; height: 78px; }
.plan-section.wall .plan-lb, .plan-section:fullscreen .plan-lb { font-size: 27px; }
.plan-section.wall .plan-sub, .plan-section:fullscreen .plan-sub { font-size: 15px; }
.plan-section.wall .plan-card.done .plan-check, .plan-section:fullscreen .plan-card.done .plan-check { font-size: 76px; }
.plan-section.wall .plan-tick, .plan-section:fullscreen .plan-tick { font-size: 16px; padding: 8px 16px; }
.plan-section.wall .plan-drop, .plan-section:fullscreen .plan-drop { flex-basis: 190px; min-height: 200px; }
.plan-section.wall .plan-card.now::after, .plan-section:fullscreen .plan-card.now::after { font-size: 15px; padding: 4px 13px; top: -16px; }

/* ---------- Support board (Support Board Spec v1.1, 25 Aug) ----------
   support.html — the shared bugs & ideas board behind the class
   code. Cards: vote block left, words middle, status pill right.
   Leaf = up / fixed · coral = down · violet = planned · sunny =
   in progress · grey = waiting for review. */
.spt-page { max-width: 960px; }
.spt-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.spt-head > div { flex: 1 1 360px; }
.spt-head .page-sub { margin-bottom: 0; }
.spt-new {
  flex: 0 0 auto; font-size: 20px; padding: 14px 26px;
  background: var(--green-deep); color: #fff; border-color: var(--green-deep);
}
.spt-new:hover { background: #1a6a3c; }
.spt-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.spt-tabs { display: inline-flex; gap: 4px; background: var(--card); border: var(--line); border-radius: 999px; padding: 4px; }
.spt-tab {
  padding: 7px 18px; border-radius: 999px;
  font-family: var(--hand); font-weight: 500; font-size: 17px; color: var(--ink-soft);
}
.spt-tab:hover { background: var(--beige); color: var(--ink); }
.spt-tab.on { background: var(--green-deep); color: #fff; }
.spt-sort { margin-left: auto; font-size: 15px; color: var(--ink-soft); padding: 6px 10px; border-radius: 999px; }
.spt-sort:hover { background: var(--beige); color: var(--ink); }
.spt-list { display: flex; flex-direction: column; gap: 10px; }
.spt-loading, .spt-empty { text-align: center; color: var(--ink-soft); font-size: 18px; padding: 40px 20px; }
.spt-empty.small { padding: 22px 20px; font-size: 16px; }
.spt-empty a { text-decoration: underline; }

.spt-card { display: flex; gap: 16px; padding: 16px 18px; cursor: pointer; align-items: flex-start; }
.spt-card:hover { border-color: rgba(46, 44, 69, 0.32); }
.spt-card.open { cursor: default; }
.spt-vote {
  flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  user-select: none;
}
.spt-vote button {
  width: 44px; height: 34px; border-radius: 10px; font-size: 18px; line-height: 1;
  color: var(--ink-soft); border: 2px solid transparent;
  transition: transform 0.12s var(--bounce), background 0.12s;
}
.spt-vote button:hover { background: var(--beige); color: var(--ink); }
.spt-vote button:active { transform: scale(0.9); }
.spt-vote .spt-up.on { background: var(--green); color: #fff; }
.spt-vote .spt-down.on { background: var(--coral); color: #fff; }
.spt-score { font-family: var(--hand); font-weight: 600; font-size: 20px; min-height: 26px; line-height: 26px; }
.spt-vote.quiet { justify-content: center; padding-top: 6px; color: var(--ink-soft); }
.spt-main { flex: 1; min-width: 0; }
.spt-top { display: flex; align-items: flex-start; gap: 10px; }
.spt-title { font-family: var(--hand); font-weight: 600; font-size: 20px; line-height: 1.2; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.spt-body { color: var(--ink-soft); font-size: 15.5px; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.spt-body.clamp {
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spt-reply {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--green-soft); border: 2px solid rgba(76, 175, 110, 0.35);
  font-size: 15.5px; white-space: pre-wrap;
}
.spt-reply-k { font-family: var(--hand); font-weight: 600; font-size: 14px; color: var(--green-deep); margin-bottom: 2px; }
.spt-cmt { padding: 6px 0; border-top: 1px solid rgba(76, 175, 110, 0.25); }
.spt-cmt:first-of-type { border-top: none; }
.spt-cmt-when { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.spt-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.spt-ref { font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
.spt-you { color: var(--green-deep); font-weight: 700; }
.spt-pill {
  flex: 0 0 auto; display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-family: var(--hand); font-weight: 500; font-size: 13px; line-height: 1.5; white-space: nowrap;
  border: 2px solid transparent;
}
.spt-pill.wait { background: var(--beige); color: var(--ink-soft); border-color: var(--line-c); }
.spt-pill.planned { background: #eae3f9; color: var(--violet-deep); border-color: #cfc2f0; }
.spt-pill.progress { background: #fff0d1; color: #8a5a00; border-color: #ffdfa0; }
.spt-pill.fixed { background: #ddf3e5; color: var(--green-deep); border-color: #b7e2c6; }

.spt-fixed { margin-top: 26px; }
.spt-fixed summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--hand); font-weight: 500; font-size: 18px; color: var(--ink-soft);
  padding: 6px 4px; margin-bottom: 8px;
}
.spt-fixed summary::-webkit-details-marker { display: none; }
.spt-fixed summary::before { content: "▸"; transition: transform 0.15s; }
.spt-fixed[open] summary::before { transform: rotate(90deg); }
.spt-fixed .spt-card { opacity: 0.85; }

/* the form panel */
.spt-form { max-width: 560px; }
.spt-form h2 { margin-bottom: 4px; }
.spt-types { display: flex; gap: 10px; margin-top: 2px; }
.spt-type-btn {
  flex: 1; padding: 12px 10px; border-radius: 14px; font-family: var(--hand); font-weight: 500; font-size: 18px;
  border: 2px solid var(--line-c); background: var(--card); box-shadow: var(--shadow);
  transition: transform 0.12s var(--bounce);
}
.spt-type-btn:hover { background: var(--beige); }
.spt-type-btn.on { border-color: var(--green-deep); background: var(--green-soft); }
.spt-type-btn:active { transform: scale(0.97); }
.spt-count { text-align: right; font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.spt-privacy { font-size: 14px; color: var(--ink-soft); font-style: italic; margin-top: 8px; }
.spt-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 15px; cursor: pointer; }
.spt-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green-deep); }
.spt-send { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.spt-send:hover { background: #1a6a3c; }
.spt-send:disabled { opacity: 0.7; cursor: default; }

.spt-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--midnight); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-family: var(--hand); font-size: 16px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s var(--bounce); z-index: 200;
}
.spt-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 600px) {
  .spt-card { gap: 10px; padding: 14px 12px; }
  .spt-vote { flex-basis: 44px; }
  .spt-vote button { width: 40px; }
  .spt-new { width: 100%; }
}

/* ---------- Class mood row (23 Oct) ----------
   One slim row under the pot: the check-in Fox · label + day · five
   faces with counts (top face a touch bigger) · the term heartbeat
   (BloomMeadow, one bar a day) · Results / Check-in. ~84px. */
.checkin-card.pic-row { padding: 10px 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pic-row .pic-fox { width: 54px; height: 54px; object-fit: contain; }
.pic-row .pic-label { font-family: var(--hand); font-weight: 600; font-size: 17px; line-height: 1.15; white-space: nowrap; }
.pic-row .pic-label small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-soft); }
.pic-row .st-visual.faces { display: flex; align-items: flex-end; justify-content: center; gap: 8px; flex: 0 1 300px; height: 60px; border: none; background: none; }
.st-visual.faces .face { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; line-height: 1; }
.st-visual.faces .face img { height: 34px; width: auto; }
.st-visual.faces .face b { font-family: var(--hand); font-size: 14px; color: var(--ink-soft); }
.st-visual.faces .face.top img { height: 44px; }
.st-visual.faces .face.top b { color: var(--green-deep); font-size: 16px; }
.pic-row .pic-none { flex: 1; font-size: 15px; color: var(--ink-soft); }
.pic-row .pic-hb { flex: 1 1 220px; min-width: 160px; display: flex; justify-content: flex-end; }
.pic-row .pic-hb .ck-hb { height: 44px; width: 100%; max-width: 320px; padding-top: 0; overflow-x: hidden; }
.pic-row .pic-hb .ck-hb-bar.none { background: var(--beige); border-radius: 2px; }
.pic-row .pic-btn { font-size: 15px; padding: 7px 16px; white-space: nowrap; }
.pic-row .ck-home-asks { flex-basis: 100%; }

/* ============================================================
   Today v2 (24 Oct 2026): the calendar page.
   head band · skill zone · steps zone · chains zone. Colour has
   three jobs: ink = now, green = done, sky = video. No red.
   ============================================================ */
.home-ident { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-ident .pot-pill { background: var(--card); border-color: #d5d9e3; }

.calendar {
  border: 3px solid var(--ink); border-radius: 18px; background: var(--card);
  box-shadow: 0 5px 0 rgba(46, 44, 69, 0.2); overflow: hidden;
  display: flex; flex-direction: column;
}
.cal-head {
  background: var(--ink); color: #fff; padding: 14px 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--hand); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
}
.cal-head .cal-term { text-transform: none; letter-spacing: 0; opacity: 0.6; }
.cal-zone { background: #f2ebe0; padding: 24px 32px; border-bottom: 2px solid var(--ink); }
.cal-zone.cal-foot { border-bottom: 0; border-top: 2px solid var(--ink); padding: 22px 32px 24px; display: flex; flex-direction: column; gap: 18px; }
.cal-body { padding: 26px 32px 30px; display: flex; flex-direction: column; gap: 18px; }
.skill-line { margin: 0; font-family: var(--hand); font-size: 30px; font-weight: 700; line-height: 1.15; }
.skill-line em { font-style: normal; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; text-decoration-color: var(--green-deep); }
.steps-title { font-family: var(--hand); font-size: 18px; font-weight: 700; }
.steps-title span { font-weight: 500; color: var(--ink-soft); font-size: 14px; }

/* the whole calendar goes green when the day is done */
.calendar.done { border-color: var(--green-deep); background: #dff3e6; box-shadow: 0 5px 0 rgba(31, 122, 70, 0.3); }
.calendar.done .cal-head { background: var(--green-deep); }
.calendar.done .cal-zone { background: #c9ead5; border-color: var(--green-deep); }
.calendar.done .skill-line { color: #1f5c38; }
.calendar.done .daydone { background: var(--card); border: 2px solid var(--green-deep); }
.calendar.done .wk-summary { background: var(--card); }

/* chains */
.ch-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 18px; }
.ch-name { font-family: var(--hand); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.chain { position: relative; display: grid; align-items: start; }
.chain.days { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 2px; }
.chain.weeks { display: flex; align-items: center; padding: 0 calc(10% - 11px); }
.ch-track { position: absolute; left: 10%; right: 10%; top: 15px; border-top: 3px dotted #c8cdd9; }
.ch-fill { position: absolute; left: 10%; top: 13px; height: 7px; background: var(--green-deep); border-radius: 4px; }
.ch-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.ch-lbl { font-family: var(--hand); font-size: 13px; font-weight: 600; color: #a7a9b8; }
.ch-lbl small { font-weight: 500; opacity: 0.7; }
.ch-dot {
  width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box;
  background: var(--card); border: 3px solid #c8cdd9;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hand); font-weight: 800; font-size: 16px; color: #fff; line-height: 1;
}
.ch-dot.done { background: var(--green-deep); border-color: var(--green-deep); }
.ch-dot.done + .ch-lbl { color: var(--green-deep); font-weight: 700; }
.ch-dot.today { border: 4px solid var(--ink); box-shadow: 0 0 0 4px #f2ebe0, 0 0 0 6px var(--ink); }
.ch-dot.today + .ch-lbl { color: var(--ink); font-weight: 800; }
.ch-dot.done.today { border-color: var(--green-deep); box-shadow: 0 0 0 4px #c9ead5, 0 0 0 6px var(--green-deep); }
.ch-dot.done.today + .ch-lbl { color: #1f5c38; }
.ch-dot.missed { border-style: dashed; border-color: #b9bcc9; }
a.ch-item:hover .ch-dot.missed { border-color: var(--ink); }
.ch-dot.small { width: 22px; height: 22px; font-size: 10px; border-width: 2px; color: #a7a9b8; }
.ch-dot.small.done { color: #fff; }
.ch-dot.small.today { border-width: 3px; color: var(--ink); box-shadow: 0 0 0 3px #f2ebe0, 0 0 0 4px var(--ink); }
.ch-gap { flex: 1; border-top: 2px dotted #c8cdd9; }
.ch-gap.done { border-top: 4px solid var(--green-deep); }
.calendar.done .ch-track, .calendar.done .ch-gap { border-color: #9fd0b2; }
.calendar.done .ch-dot.future { border-color: #9fd0b2; }
.calendar.done .ch-dot.small.today { box-shadow: 0 0 0 3px #c9ead5, 0 0 0 4px var(--ink); }

/* steps: badge, four states */
.step { padding: 20px; gap: 14px; }
.loop { gap: 24px; margin-top: 0; }
.st-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.st-badge b {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.step .st-next { display: none; }
.step.next { border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); background: var(--card); }
.step.next .st-visual { background: none; border: none; position: relative; }
.step.next .st-visual.fox::before, .step.next .st-visual.fox::after {
  content: ""; position: absolute; border-radius: 50%; border: 2px solid #e4e7ee; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.step.next .st-visual.fox::before { width: 104px; height: 104px; }
.step.next .st-visual.fox::after { width: 72px; height: 72px; border-color: #cfd3dd; }
.step.next .st-btn { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 800; }
.step.next .st-btn:hover { background: #1d1b30; }
.step.done { border: 3px solid var(--green-deep); background: #dff3e6; box-shadow: none; }
.step.done .st-badge, .step.done .st-badge b { color: #1f5c38; }
.step.done .st-badge b { background: var(--green-deep); color: #fff; }
.step.done .st-mark {
  width: 34px; height: 34px; border-radius: 50%; background: var(--green-deep); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.step.done .st-visual { background: none; border: none; }
.step.done .st-flat.on { background: var(--green-deep); color: #fff; border-color: var(--green-deep); font-weight: 800; }
.step.done .st-link { color: var(--green-deep); }
.step.done.quiet { background: #f6f4fb; border-color: #e6e3f3; }
.step.done.quiet .st-badge, .step.done.quiet .st-badge b { color: #9b96b8; }
.step.done.quiet .st-badge b { background: var(--card); border: 2px solid #d9d4ee; }
.step.locked, .step.soon { border: 2px solid #e6e3f3; background: #f6f4fb; box-shadow: none; color: #9b96b8; }
.step.locked .st-badge, .step.soon .st-badge { color: #9b96b8; }
.step.locked .st-badge b, .step.soon .st-badge b { background: var(--card); border: 2px solid #d9d4ee; color: #b3aed0; }
.step.locked .st-visual, .step.soon .st-visual { background: none; border: none; opacity: 0.35; filter: blur(0.4px); }
.step.locked .st-title, .step.soon .st-title { color: #9b96b8; }
.step.locked .st-flat, .step.soon .st-flat { border: none; font-style: italic; font-weight: 500; color: #9b96b8; }
.step .st-visual.sky .st-thumb { font-size: 32px; }

/* retired from v1: the week pills and the in-block head */
.week-row, .today-head { display: none; }

/* Today v2 fixes (24 Oct pm): the day chain's cells (teacher/pupil
   twins share one grid cell, so Friday never wraps); air between the
   calendar and the rows under it. */
.chain.days .ch-cell { display: flex; justify-content: center; min-width: 0; }
.chain.days .ch-cell .ch-item { width: 100%; }
.chain .ch-item.pupil-only { display: none; }
body.pupil .chain .ch-item.pupil-only { display: flex; }
body.pupil .chain .ch-item.teacher-only { display: none; }
/* the heartbeat draws the whole term: past days with no check-in are beige, days ahead are faint ghosts */
.pic-row .pic-hb .ck-hb { gap: 2px; }
.pic-row .pic-hb .ck-hb-bar { max-width: 10px; }
.pic-row .pic-hb .ck-hb-bar.ahead { background: transparent; border: 1px dashed rgba(46,44,69,.22); border-bottom: 0; height: 100%; cursor: default; box-sizing: border-box; }
.pic-row .pic-hb .ck-hb-bar.none { background: var(--paper-2); }
.page > .calendar { margin-bottom: 8px; }
.page > .card + .card, .page > .calendar + .card { margin-top: 18px; }
.teacher-week-card { margin-top: 18px; }