/* =====================================================================
   Grow · user dashboard redesign draft
   Shared foundation copied verbatim from the Grow sales page (Daybreak family:
   Plus Jakarta Sans + Grow strategy colours). Dashboard styles follow below.
   ===================================================================== */
:root {
  --disc: #F0893C; --teach: #E84E4E; --env: #E4D353; --evt: #BED65A;
  --vol: #82D1DD;  --fam: #F27A9E;   --lead: #434A50;
  --disc-ink: #A94F0C; --teach-ink: #B41818; --env-ink: #635910; --evt-ink: #515E17;
  --vol-ink: #1D616C;  --fam-ink: #AE1140;   --lead-ink: #434A50;
  --disc-soft: #FDEEE3; --teach-soft: #FCE7E7; --env-soft: #FBF7DA; --evt-soft: #F2F8DF;
  --vol-soft: #E5F6F8;  --fam-soft: #FDE9F0;   --lead-soft: #ECEEF0;
  --ink: #1F2328; --ink-2: #454C55; --ink-3: #5F6873;
  --bg: #F6F7F9; --surface: #FFFFFF; --line: #E4E7EB; --line-2: #D3D8DE;
  --char: #434A50; --char-2: #2F3439; --char-3: #23272B;
  --hl: #DCEBA4;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(31,35,40,.05), 0 8px 24px rgba(31,35,40,.06);
  --shadow-lg: 0 2px 4px rgba(31,35,40,.05), 0 18px 48px rgba(31,35,40,.10);
  --max: 80rem;
  --stripe: linear-gradient(90deg, var(--disc) 0 16.667%, var(--teach) 0 33.333%, var(--env) 0 50%,
            var(--evt) 0 66.667%, var(--vol) 0 83.333%, var(--fam) 0 100%);
}
[data-theme="disc"]  { --a: var(--disc);  --a-ink: var(--disc-ink);  --a-soft: var(--disc-soft); }
[data-theme="teach"] { --a: var(--teach); --a-ink: var(--teach-ink); --a-soft: var(--teach-soft); }
[data-theme="env"]   { --a: var(--env);   --a-ink: var(--env-ink);   --a-soft: var(--env-soft); }
[data-theme="evt"]   { --a: var(--evt);   --a-ink: var(--evt-ink);   --a-soft: var(--evt-soft); }
[data-theme="vol"]   { --a: var(--vol);   --a-ink: var(--vol-ink);   --a-soft: var(--vol-soft); }
[data-theme="fam"]   { --a: var(--fam);   --a-ink: var(--fam-ink);   --a-soft: var(--fam-soft); }
[data-theme="lead"]  { --a: var(--lead);  --a-ink: var(--lead-ink);  --a-soft: var(--lead-soft); }
/* Games + Music (dashboard categories, not Grow strategies): Grow's own "violet" + "lilac" category colours
   (grow-curriculum-frontend TryGrowForFree/FreeGrowMain.jsx), far from the six strategy hues and Leadership charcoal.
   See docs/design-system.md. -ink tones are text-safe (AA) on white and on the -soft wash. */
:root { --games: #7F8CFF; --games-ink: #4650C8; --games-soft: #EEF0FF; --music: #D986FF; --music-ink: #8A2BB8; --music-soft: #F8EDFF;
  --teach-deep: #C83535; }
[data-theme="games"] { --a: var(--games); --a-ink: var(--games-ink); --a-soft: var(--games-soft); }
[data-theme="music"] { --a: var(--music); --a-ink: var(--music-ink); --a-soft: var(--music-soft); }
/* a strategy colour as a filled surface that carries text (active tabs, planning cards): --a-fill + --a-on pass
   WCAG AA (4.5:1). Dark ink on every fill except Teaching (red is 4.2:1 with ink and 3.7:1 with white, so the fill
   deepens to #C83535 with white, 5.2:1: the design system's own rule) and Leadership charcoal (white, 9:1). */
[data-theme] { --a-fill: var(--a); --a-on: var(--ink); }
[data-theme="teach"] { --a-fill: var(--teach-deep); --a-on: #fff; }
[data-theme="lead"]  { --a-fill: var(--lead); --a-on: #fff; }

/* the main accent (Kenny round 2, #4): primary buttons, links, focus rings, the board's selection rings and count badge.
   Orange was the default (Daybreak) until 2026-10-01; html[data-accent="green"] (?accent=green) swapped in
   Grow's green. Now green is the default (see the end of this note). Round 3 (Kenny 2026-09-30, #3: "I feel like the logo is lighter, let's try and match that"): the fill
   is now the logo's own leaf green #BCDA82, sampled from grow-curriculum-frontend src/assets/images/Logo.svg (the file
   growcurriculum.org's header shows; the live header's pixels are the same #BCDA82). Round 2 used #84B327, the app's
   $color-green-200, which is darker than the logo. Dark ink on it (10.2:1). It sits close to Events lime #BED65A, so
   the clash is handled by context, not by darkening the fill: the green fill only ever carries dark ink, and every
   Events tile, tab, card and chip says "Events" in words. Links stay a deep ink green #4B6D0B (6.0:1 on white). Focus
   rings stay mid green #5E8117 (4.5:1 on white, 3.3:1 on the charcoal panels). Hover is #AECF6D, the app's
   $color-green-100, one step deeper. docs/design-system.md §4b.
   Round 4 (Kenny 2026-10-01, #2: "turn the saturation up on the green accent button slightly ... a tiny bit pale"):
   the fill, hover, edge, lip and glow each get the same small step, HSL saturation +12 points at the same hue and
   lightness: fill #BCDA82 -> #BFE478 (ink on it 11.0:1), hover #AECF6D -> #B2DB61 (9.9:1), edge #71932C -> #6D941E
   (3.6:1 on white, 3.3:1 on the canvas), lip #4B6D0B -> #4D7404, glow #84B327 -> #88C01A. Not darker, and not the
   round 2 #84B327. Links #4B6D0B and rings #5E8117 are contrast colours and stay as they are.
   Kenny 2026-10-01 ("update to the green accent color across all of the sites"): GREEN IS NOW THE DEFAULT. The green
   values live in :root unconditionally; the old orange is kept only as a fallback behind html[data-accent="orange"]
   (?accent=orange; accent.js). Round 5 (Kenny 2026-10-01): no switch and nothing remembered, so the fallback is a
   hidden demo hook that applies only while ?accent=orange is in the address. */
:root { --acc: #BFE478; --acc-hover: #B2DB61; --acc-on: var(--ink); --acc-ink: #4B6D0B; --acc-ring: #5E8117;
  --acc-soft: #F5F8E9; --acc-lip: transparent; --acc-glow: rgba(109,148,30,.3); --acc-edge: #6D941E; }
html[data-accent="orange"] { --acc: var(--disc); --acc-hover: #F4AA73; --acc-on: var(--ink); --acc-ink: var(--disc-ink); --acc-ring: var(--disc);
  --acc-soft: var(--disc-soft); --acc-lip: rgba(169,79,12,.35); --acc-glow: rgba(240,137,60,.35); --acc-edge: transparent; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--acc-ink); text-underline-offset: 3px; }
b, strong { font-weight: 700; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acc-ring); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap; font-weight: 800; font-size: 15px; letter-spacing: -.005em;
  padding: 13px 22px; border-radius: var(--r-pill); transition: transform .15s, box-shadow .15s, background .15s; }
/* round 3 (#3): the logo green is light (1.6:1 on white), so a green primary button gets a deeper-green edge: the pill's
   outline is 3.5:1 on white and 3.3:1 on the page canvas (a control's edge needs 3:1), on top of its 10:1 label.
   2026-10-01: green is the default, so the edge is unconditional; the orange fallback drops it. */
.btn-primary { background: var(--acc); color: var(--acc-on); box-shadow: inset 0 0 0 1.5px var(--acc-edge), 0 2px 0 var(--acc-lip); }
.btn-primary:hover { background: var(--acc-hover); transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--acc-edge), 0 6px 16px var(--acc-glow); }
html[data-accent="orange"] .btn-primary { box-shadow: 0 2px 0 var(--acc-lip); }
html[data-accent="orange"] .btn-primary:hover { box-shadow: 0 6px 16px var(--acc-glow); }
.btn-dark { background: var(--char-3); color: #fff; }
.btn-dark:hover { background: #000; transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.btn-light { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.btn-light:hover { background: rgba(255,255,255,.18); }
.btn-lg { padding: 16px 28px; font-size: 17px; }
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- header ---------- */
.gc-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.gc-header .bar { display: flex; align-items: center; gap: 22px; height: 68px; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.gc-logo { --logo-ink: #1F2328; display: inline-flex; align-items: center; gap: 14px; color: var(--logo-ink); text-decoration: none; flex: none; }
.gc-logo .mark { height: 38px; display: inline-flex; }
.gc-logo .mark svg { height: 100%; width: auto; }
.gc-logo .rule { width: 2px; height: 36px; border-radius: 1px; background: #8C8C8C; }
.gc-logo .word { font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: -.02em; }
.gc-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.gc-nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.gc-nav a:hover { background: var(--bg); color: var(--ink); }
.gc-nav .login { margin-left: 6px; }
.gc-header .btn { padding: 10px 18px; font-size: 14.5px; }
.gc-menu { display: none; }
@media (max-width: 960px) {
  .gc-header .bar { gap: 10px; height: 60px; padding: 0 16px; }
  .gc-logo { gap: 10px; } .gc-logo .mark { height: 31px; } .gc-logo .rule { height: 29px; } .gc-logo .word { font-size: 18px; }
  .gc-nav { display: none; }
  .gc-header .btn { margin-left: auto; padding: 9px 15px; font-size: 14px; }
  .gc-menu { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--bg); cursor: pointer; }
  .gc-menu svg { width: 20px; height: 20px; }
  .gc-header.open .gc-nav { display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; right: 0; top: 60px;
    background: #fff; border-bottom: 1px solid var(--line); padding: 10px 16px 16px; box-shadow: var(--shadow); }
  .gc-header.open .gc-nav a { padding: 12px 14px; font-size: 16px; }
}
@media (max-width: 370px) {
  .gc-logo .mark { height: 26px; } .gc-logo .rule { height: 24px; } .gc-logo .word { font-size: 15.5px; }
  .gc-header .btn { padding: 8px 12px; font-size: 13px; }
}

/* ---------- shared section bits ---------- */
section { position: relative; }
.sec { padding: 104px 0; }
.sec.tint { background: var(--bg); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--a-ink, var(--acc-ink)); }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--a, var(--acc)); }
.h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -.038em; font-weight: 800; margin: 14px 0 16px; text-wrap: balance; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 40rem; margin: 0; line-height: 1.55; }
.head { max-width: 46rem; margin-bottom: 48px; }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.head.center .lede { margin: 0 auto; }
.hl { background: linear-gradient(transparent 56%, var(--hl) 56%, var(--hl) 86%, transparent 86%); padding: 0 .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 40px; }
.cta-row.center { justify-content: center; }
.cta-note { font-size: 14.5px; color: var(--ink-3); font-weight: 600; }