/* ============================================================
   Synaptary design system — "a small universe of her own"
   Source of truth: docs/brand/BrandStyleGuide.png + docs/design/.
   Deep-space surfaces (#0A0D14 family), electric blue (#206BFF),
   champagne/pearl accents, Playfair Display for display type,
   Inter for UI. Self-hosted fonts only (CSP: font-src 'self').
   Laws kept from the learner shell: body >=20px, item text >=28px,
   targets >=48px, [hidden] always wins, reduce-motion honored
   at app level, progress only ever fills.
   ============================================================ */

@font-face {
  font-family: "Inter Variable";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display Variable";
  src: url("/assets/fonts/PlayfairDisplay-Var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette — brand swatches */
  --space-0: #0a0d14;   /* deep space: page ground */
  --space-1: #111827;   /* raised surface */
  --space-2: #1e293b;   /* higher surface / borders */
  --blue: #206bff;      /* electric accent (fills, large text) */
  --blue-up: #5b8fff;   /* accessible blue for small text on dark */
  --blue-soft: rgba(32, 107, 255, 0.16);
  --periwinkle: #93a9ea; /* soft display blue (hero "Learning." line) */
  --star: #e6e6e6;      /* primary text */
  --silver: #b0b8c9;    /* secondary text */
  --champagne: #e8dcc2; /* pearl/gold accent (headings, focus) */
  --champagne-deep: #c9b68a;
  --good: #6fd39b;      /* success on dark */
  --ring: rgba(176, 184, 201, 0.16); /* hairline card ring */

  /* legacy token aliases (components below still read these) */
  --ink: var(--star);
  --paper: var(--space-0);
  --accent: var(--blue);
  --accent-soft: var(--blue-soft);
  --muted: var(--silver);
  --card: var(--space-1);

  --font-ui: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Playfair Display Variable", "Iowan Old Style", Georgia, serif;

  --radius: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgba(230, 230, 230, 0.04) inset, 0 12px 32px rgba(0, 0, 0, 0.45);
  --glow-blue: 0 0 0 1px rgba(32, 107, 255, 0.35), 0 6px 24px rgba(32, 107, 255, 0.35);
}

* { box-sizing: border-box; }

/* The hidden attribute always wins, even over display:flex rules. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--space-0);
  color: var(--star);
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  word-spacing: 0.05em;
}

/* Cosmic ground: layered nebula vignettes + a horizon glow. Pure CSS,
   zero requests, calm by construction (nothing here ever animates). */
body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 480px at 82% -8%, rgba(32, 107, 255, 0.10), transparent 62%),
    radial-gradient(900px 420px at 8% 12%, rgba(201, 182, 138, 0.05), transparent 60%),
    radial-gradient(1400px 520px at 50% 108%, rgba(32, 107, 255, 0.14), transparent 55%),
    var(--space-0);
  background-attachment: fixed;
}

/* Starfield: deterministic pinprick stars. Static — never animated. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(230, 230, 230, 0.55), transparent 55%),
    radial-gradient(1.1px 1.1px at 27% 64%, rgba(230, 230, 230, 0.35), transparent 55%),
    radial-gradient(1.6px 1.6px at 38% 30%, rgba(232, 220, 194, 0.5), transparent 55%),
    radial-gradient(1px 1px at 47% 79%, rgba(230, 230, 230, 0.3), transparent 55%),
    radial-gradient(1.3px 1.3px at 58% 12%, rgba(230, 230, 230, 0.45), transparent 55%),
    radial-gradient(1.1px 1.1px at 66% 51%, rgba(127, 167, 255, 0.45), transparent 55%),
    radial-gradient(1.5px 1.5px at 74% 26%, rgba(230, 230, 230, 0.5), transparent 55%),
    radial-gradient(1px 1px at 83% 68%, rgba(232, 220, 194, 0.4), transparent 55%),
    radial-gradient(1.2px 1.2px at 91% 38%, rgba(230, 230, 230, 0.4), transparent 55%),
    radial-gradient(1px 1px at 6% 44%, rgba(127, 167, 255, 0.35), transparent 55%),
    radial-gradient(1.2px 1.2px at 18% 88%, rgba(230, 230, 230, 0.35), transparent 55%),
    radial-gradient(1px 1px at 94% 84%, rgba(230, 230, 230, 0.3), transparent 55%);
}
main, header, aside { position: relative; z-index: 1; }

h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: 0.005em;
  color: var(--champagne);
}

a { color: var(--blue-up); }

::selection { background: var(--blue-soft); color: var(--star); }

/* Keyboard focus is part of the brand: a champagne halo, never removed. */
:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── branded scrollbar: a pearl riding a dark orbit ──────────
   Wide and generous (children scroll too); blue-to-champagne thumb,
   page-ground gutter. No motion — state changes are instant. */
html {
  scrollbar-color: rgba(201, 182, 138, 0.5) var(--space-0); /* firefox lane */
  scroll-behavior: smooth;
}
html.reduce-motion { scroll-behavior: auto; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--space-0); }
::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(91, 143, 255, 0.42), rgba(201, 182, 138, 0.38)),
    var(--space-2);
  border: 3px solid var(--space-0);
  border-radius: var(--radius-pill);
  min-height: 48px;
}
::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(91, 143, 255, 0.68), rgba(201, 182, 138, 0.62)),
    var(--space-2);
  border: 3px solid var(--space-0);
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #3f7dff, var(--blue));
  border: 3px solid var(--space-0);
}
::-webkit-scrollbar-corner { background: var(--space-0); }

.screen {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* ── header / nav ─────────────────────────────────────────── */

.app-header {
  display: flex;
  /* WCAG 2.2 reflow (Stage 19): brand + nav wrap at 320px instead of
     forcing a horizontal scrollbar */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: rgba(17, 24, 39, 0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ring);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* explicit line-height + min-height pin the header's line box, so the
   Playfair swap arriving after first paint can never shift the page (CLS 0) */
.app-header h1 { font-size: 1.5rem; margin: 0; line-height: 1.3; }
.app-header { min-height: 3.6rem; }
.app-nav { display: flex; gap: 0.5rem; align-items: center; }

.brand-lockup { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-lockup .brand-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--champagne);
  letter-spacing: 0.01em;
}
.brand-lockup .brand-ai { color: var(--blue-up); font-family: var(--font-ui); font-size: 0.95rem; }
.brand-mark { display: block; }

.nav-link {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--star);
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.nav-link:hover { border-color: var(--ring); background: rgba(230, 230, 230, 0.05); }

.vault-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--blue);
  color: #fff;
  font-size: 0.8rem;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
  box-shadow: 0 0 10px rgba(32, 107, 255, 0.6);
}

/* ── buttons ──────────────────────────────────────────────── */

.primary {
  min-height: 56px;
  padding: 0.6rem 1.8rem;
  font: inherit;
  font-weight: 560;
  color: #fff;
  background: linear-gradient(180deg, #3f7dff, var(--blue) 55%, #1a5ae0);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--glow-blue);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(32, 107, 255, 0.5), 0 10px 32px rgba(32, 107, 255, 0.45); }
.primary:active { transform: translateY(1px); box-shadow: 0 0 0 1px rgba(32, 107, 255, 0.4), 0 3px 12px rgba(32, 107, 255, 0.35); }

.ghost {
  min-height: 56px;
  padding: 0.6rem 1.6rem;
  font: inherit;
  color: var(--star);
  background: transparent;
  border: 1px solid var(--silver);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.ghost:hover { border-color: var(--champagne); background: rgba(232, 220, 194, 0.06); box-shadow: 0 0 24px rgba(232, 220, 194, 0.14); }
.ghost:active { background: rgba(232, 220, 194, 0.12); }
.ghost svg { transition: transform 200ms ease-out; }
.ghost:hover svg { transform: translateX(3px); }

.app-logo { margin-top: 1rem; filter: drop-shadow(0 0 24px rgba(32, 107, 255, 0.35)); border-radius: 24px; }

/* ── picker (learner door) ────────────────────────────────── */

.learner-tiles { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.learner-tile {
  min-width: 170px;
  min-height: 120px;
  font: inherit;
  font-size: 1.5rem;
  font-family: var(--font-display);
  color: var(--star);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  cursor: pointer;
  background:
    radial-gradient(120px 60px at 50% 0%, hsla(var(--hue, 220), 80%, 62%, 0.28), transparent 70%),
    var(--space-1);
  box-shadow: var(--shadow-card);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.learner-tile:hover {
  transform: translateY(-3px);
  border-color: var(--champagne-deep);
  box-shadow: var(--shadow-card), 0 0 30px rgba(32, 107, 255, 0.16);
}
.learner-tile:active { transform: translateY(-1px); }

.pin-display { min-height: 2rem; font-size: 2rem; letter-spacing: 0.4em; color: var(--champagne); }
.number-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: 0.6rem;
  max-width: 20rem;
  width: 100%;
}
.pin-key {
  min-height: 64px;
  font: inherit;
  font-size: 1.5rem;
  color: var(--star);
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--space-1);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 100ms ease;
}
.pin-key:hover { background: var(--space-2); border-color: var(--silver); }
.pin-key:active { background: var(--blue-soft); border-color: var(--blue); transform: translateY(1px); }
.pin-back {
  align-self: flex-start;
  min-height: 48px;
  padding: 0 0.9rem;
  font: inherit;
  color: var(--silver);
  background: transparent;
  border: 1px solid var(--ring);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.pin-back:hover { border-color: var(--silver); background: rgba(230, 230, 230, 0.05); }

/* ── today board ──────────────────────────────────────────── */

.strip-label { color: var(--silver); margin: 0; min-height: 1.5rem; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; }
.today-strip { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.today-retry { display: block; margin: 0.75rem auto 0; }
/* Teach-before-test intro (D13): the lesson shown before a new skill's items. */
.teach-card { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; text-align: left; }
.teach-intro { margin: 0; color: var(--silver); font-size: 1rem; }
.teach-title { margin: 0; font-size: 1.5rem; color: var(--champagne); }
.teach-line { display: flex; align-items: flex-start; gap: 0.5rem; }
.teach-text { margin: 0; flex: 1; font-size: 1.15rem; line-height: 1.5; }
.teach-start { align-self: center; margin-top: 0.5rem; }
/* Saved-for-later area (D25): calm, low-key, never a source of pressure. */
.today-saved { margin: 1.5rem auto 0; max-width: 32rem; padding: 1rem; border: 1px solid var(--ring); border-radius: var(--radius); background: var(--space-1); }
.saved-heading { font-size: 1rem; margin: 0 0 0.5rem; color: var(--silver); }
.saved-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; }
.saved-skill { margin: 0; color: var(--star); }
.saved-try { min-height: 48px; }
.block-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 200px;
  padding: 1.25rem 1rem 1rem;
  background: var(--space-1);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.block-card::before {
  /* each block is a small planet: a soft orbital arc across the top */
  content: "";
  position: absolute;
  top: -46px;
  left: 50%;
  width: 150px;
  height: 76px;
  transform: translateX(-50%) rotate(-6deg);
  border: 1px solid rgba(201, 182, 138, 0.35);
  border-radius: 50%;
  pointer-events: none;
}
.block-card.done { border-color: rgba(111, 211, 155, 0.5); }
.block-card.done::before { border-color: rgba(111, 211, 155, 0.4); }
.block-subject { text-transform: uppercase; letter-spacing: 0.16em; color: var(--blue-up); margin: 0; font-size: 0.8rem; }
.block-skill { margin: 0; font-size: 1.25rem; text-align: center; font-family: var(--font-display); color: var(--star); }
.block-check { font-size: 2.2rem; color: var(--good); margin: 0; text-shadow: 0 0 14px rgba(111, 211, 155, 0.5); }
.block-start {
  min-height: 52px;
  min-width: 120px;
  font: inherit;
  font-weight: 560;
  color: #fff;
  background: linear-gradient(180deg, #3f7dff, var(--blue) 55%, #1a5ae0);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--glow-blue);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.block-start:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(32, 107, 255, 0.5), 0 10px 32px rgba(32, 107, 255, 0.45); }
.block-start:active { transform: translateY(1px); box-shadow: 0 0 0 1px rgba(32, 107, 255, 0.4), 0 3px 12px rgba(32, 107, 255, 0.35); }
.block-swap {
  min-width: 48px;
  min-height: 48px;
  font-size: 1.2rem;
  color: var(--silver);
  border: 1px solid var(--ring);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.block-swap:hover { color: var(--star); border-color: var(--silver); background: rgba(230, 230, 230, 0.05); }
.block-swap:active { background: var(--space-2); }

/* ── items ────────────────────────────────────────────────── */

.item-stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.item-prompt { font-size: 1.8rem; text-align: center; margin: 0.5rem 0 0; color: var(--star); }
.item-value { font-size: 2.2rem; min-height: 2.6rem; margin: 0; color: var(--champagne); }
.item-input {
  font: inherit;
  font-size: 1.5rem;
  min-height: 56px;
  padding: 0.4rem 0.9rem;
  color: var(--star);
  background: var(--space-1);
  border: 1px solid var(--silver);
  border-radius: 12px;
  max-width: 22rem;
  width: 100%;
}
.item-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); outline: none; }
.item-feedback { font-size: 1.3rem; color: var(--good); min-height: 2rem; text-align: center; }

.dot-field { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 20rem; justify-content: center; }
.dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-block;
  background: radial-gradient(circle at 34% 30%, #cfe0ff, var(--blue) 58%, #123a8f);
  box-shadow: 0 0 8px rgba(32, 107, 255, 0.4);
}

.ten-frames { display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: center; }
.ten-frame {
  display: grid;
  grid-template-columns: repeat(5, 34px);
  grid-auto-rows: 34px;
  border: 1px solid var(--silver);
  border-radius: 8px;
  overflow: hidden;
  background: var(--space-1);
}
.frame-cell { border: 1px solid var(--ring); position: relative; }
.frame-cell.filled-a::after,
.frame-cell.filled-b::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #cfe0ff, var(--blue) 58%, #123a8f);
}
.frame-cell.filled-b::after {
  background: radial-gradient(circle at 34% 30%, #fdf4dd, var(--champagne) 58%, var(--champagne-deep));
}

.number-line { display: flex; align-items: flex-start; gap: 0; padding: 0.75rem 0 1.9rem; width: min(100%, 32rem); }
.line-tick {
  position: relative;
  flex: 1 1 0;
  min-width: 12px;
  height: 16px;
  border-left: 1px solid var(--silver);
  border-bottom: 2px solid var(--silver);
}
.line-tick:last-child { border-right: 1px solid var(--silver); }
.line-tick.line-mark::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #cfe0ff, var(--blue) 58%, #123a8f);
  box-shadow: 0 0 8px rgba(32, 107, 255, 0.4);
}
.line-label {
  position: absolute;
  left: -0.55rem;
  top: 16px;
  font-size: 0.85rem;
  color: var(--silver);
}

.choice-chips { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.choice-chip {
  min-height: 56px;
  min-width: 96px;
  font: inherit;
  font-size: 1.3rem;
  color: var(--star);
  border: 1px solid var(--silver);
  border-radius: var(--radius-pill);
  background: var(--space-1);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}
.choice-chip:hover { border-color: var(--champagne); background: var(--space-2); box-shadow: 0 0 18px rgba(232, 220, 194, 0.10); }
.choice-chip:active { transform: scale(0.98); }

/* Empty-roster setup link (Stage 21): the adult's next step, 48px target. */
.picker-setup-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 200px; margin-top: 1rem; text-decoration: none; border-radius: var(--radius-pill); }

/* Experience runner (Stage 21): instruct → do it away from the screen → return. */
.experience-heading { font-size: 1.2rem; color: var(--silver); margin: 1rem 0 0.25rem; text-align: center; }
.experience-list { list-style: none; padding: 0; margin: 0.25rem 0; text-align: center; }
.experience-list li { font-size: 1.3rem; color: var(--star); margin: 0.2rem 0; }
.experience-steps { margin: 1rem auto; padding: 0 0 0 1.5rem; max-width: 34rem; }
.experience-step { font-size: 1.35rem; color: var(--star); margin: 0.65rem 0; display: flex; align-items: center; gap: 0.6rem; }
.experience-step > span { flex: 1; }
.experience-done { min-height: 56px; min-width: 160px; font-size: 1.4rem; display: block; margin: 1.25rem auto 0; }

.hint-box {
  background: linear-gradient(180deg, rgba(32, 107, 255, 0.14), rgba(32, 107, 255, 0.05));
  border: 1px solid rgba(32, 107, 255, 0.35);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  max-width: 30rem;
}
.hint-text { margin: 0.25rem 0; font-size: 1.2rem; color: var(--star); }
.hint-button {
  min-width: 64px;
  min-height: 64px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 32% 28%, #5b8fff, var(--blue) 62%, #1a5ae0);
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  box-shadow: var(--glow-blue);
  transition: transform 140ms ease, box-shadow 160ms ease;
}
.hint-button:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(32, 107, 255, 0.5), 0 8px 26px rgba(32, 107, 255, 0.5); }
.hint-button:active { transform: translateY(1px); }

/* ── mascot ───────────────────────────────────────────────── */

.mascot-corner { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; z-index: 6; }
.mascot-corner svg.mascot-rig { width: 96px; height: 96px; cursor: pointer; }
.mascot-corner.hint-available svg.mascot-rig { width: 160px; height: 160px; }
.mascot-corner.hint-available { filter: drop-shadow(0 0 14px rgba(32, 107, 255, 0.75)); }
.mascot-bubble {
  max-width: 16rem;
  background: var(--space-1);
  color: var(--star);
  border: 1px solid var(--ring);
  border-radius: 14px 14px 4px 14px;
  padding: 0.5rem 0.8rem;
  font-size: 1.05rem;
  box-shadow: var(--shadow-card);
}
.mascot-chooser { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; }
.mascot-preview { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; background: var(--space-1); border: 1px solid var(--ring); border-radius: var(--radius); padding: 1rem; cursor: pointer; min-width: 48px; min-height: 48px; box-shadow: var(--shadow-card); }
.mascot-preview svg.mascot-rig { width: 240px; height: 240px; }
.mascot-preview.mini svg.mascot-rig { width: 72px; height: 72px; }
.mascot-preview .mascot-name { font-size: 1.2rem; font-family: var(--font-display); color: var(--champagne); }
.mascot-preview.active { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(32, 107, 255, 0.4), var(--shadow-card); }

/* ── settings drawer ──────────────────────────────────────── */

/* Settings dialog head (D52): title + close control on one row. */
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.settings-head h2 { margin: 0; }
#settings-close { min-height: 48px; min-width: 48px; }
/* Wonder Jar form (D53): full-width field + live character count. */
.wonder-form { display: flex; flex-direction: column; }
.wonder-count { margin: 0.25rem 0 0; font-size: 0.8rem; text-align: right; }
.settings-drawer {
  position: fixed;
  right: 1rem;
  top: 4.5rem;
  width: min(22rem, calc(100vw - 2rem));
  background: var(--space-1);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1rem 1.25rem;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.setting-row { display: flex; align-items: center; gap: 0.75rem; min-height: 48px; font-size: 1.1rem; color: var(--star); }
.setting-row input[type="checkbox"] { width: 48px; height: 48px; accent-color: var(--blue); }
.setting-range { flex: 1; min-height: 48px; accent-color: var(--blue); cursor: pointer; }
.setting-row select, .setting-row input[type="email"], .setting-row input[type="password"] {
  font: inherit;
  min-height: 48px;
  background: var(--space-0);
  color: var(--star);
  border: 1px solid var(--silver);
  border-radius: 10px;
  padding: 0 0.6rem;
}

/* ── vault ────────────────────────────────────────────────── */

.vault-boxes { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.mystery-box {
  min-width: 96px;
  min-height: 96px;
  font-size: 2.4rem;
  color: var(--champagne);
  border: 1px dashed var(--champagne-deep);
  border-radius: var(--radius);
  background:
    radial-gradient(70px 40px at 50% 20%, rgba(232, 220, 194, 0.12), transparent 70%),
    var(--space-1);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 140ms ease;
}
.mystery-box:hover { border-style: solid; box-shadow: var(--shadow-card), 0 0 26px rgba(232, 220, 194, 0.18); }
.mystery-box:active { transform: scale(0.97); }
.vault-grid { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.vault-set h2 { font-size: 1.3rem; margin: 0.5rem 0; }
.vault-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.reward-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 130px;
  max-width: 150px;
  padding: 0.75rem;
  background: var(--space-1);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.reward-card.locked { opacity: 0.4; }
.reward-name { font-size: 1rem; margin: 0.25rem 0 0; color: var(--champagne); }
.reward-desc { font-size: 0.85rem; color: var(--silver); margin: 0.25rem 0 0; text-align: center; }
.set-complete { color: var(--good); font-size: 1.05rem; }

.status { min-height: 1.5rem; font-size: 1rem; color: var(--silver); text-align: center; }
.note { color: var(--silver); max-width: 34rem; text-align: center; }

/* ── celebration (motion law: transforms swap out under reduce-motion) ── */

.celebration { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.celebration.normal { animation: pop-in 500ms ease-out; }
.celebration.low { animation: fade-in 400ms ease-in; }

@keyframes pop-in {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Reduce-motion (media query OR app toggle): transform keyframes are
   swapped for opacity fades — no Animation with transform frames runs. */
.reduce-motion .celebration.normal { animation: fade-in 300ms ease-in; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  transition: none !important;
}
/* The media query mirrors the app toggle so the contract holds with JS off. */
@media (prefers-reduced-motion: reduce) {
  .celebration.normal { animation: fade-in 300ms ease-in; }
  *, *::before, *::after { transition: none !important; }
  html { scroll-behavior: auto; }
}


/* ── Stage 19: four celebration sizes, each layer independently gated ──── */
/* off = feedback line only; low = one static star; normal = v2 layering;
   high = the chaos layer. Every animation stays far inside the L2 budget. */
.celebration.off { animation: none; }
.celebration.high { animation: pop-in 500ms ease-out; }
.celebration-stars { display: flex; gap: 0.6rem; font-size: 2rem; color: var(--champagne); }
.celebration-stars.animate .celebration-star { animation: star-pop 600ms ease-out; }
.celebration-chaos { display: flex; gap: 0.9rem; font-size: 1.4rem; color: var(--blue-up); }
.celebration-chaos.animate .celebration-bit { animation: bit-drift 1200ms ease-out; }
@keyframes star-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes bit-drift {
  from { transform: translateY(10px); opacity: 0; }
  60% { opacity: 1; }
  to { transform: translateY(-14px); opacity: 0; }
}
/* Under reduce-motion every celebration layer falls back to a fade. */
.reduce-motion .celebration.high,
.reduce-motion .celebration-stars.animate .celebration-star,
.reduce-motion .celebration-chaos.animate .celebration-bit { animation: fade-in 300ms ease-in; }
@media (prefers-reduced-motion: reduce) {
  .celebration.high,
  .celebration-stars.animate .celebration-star,
  .celebration-chaos.animate .celebration-bit { animation: fade-in 300ms ease-in; }
}

/* ── Wonder Jar ───────────────────────────────────────────── */

.wonder-button {
  margin-top: 1.5rem;
  min-height: 48px;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--champagne-deep);
  color: var(--champagne);
  background:
    radial-gradient(90px 30px at 50% 0%, rgba(232, 220, 194, 0.10), transparent 70%),
    var(--space-1);
  font-size: 1.1rem;
  font-family: var(--font-display);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wonder-button:hover { border-color: var(--champagne); box-shadow: 0 0 22px rgba(232, 220, 194, 0.16); }
.wonder-panel {
  margin-top: 1rem;
  background: var(--space-1);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  max-width: 30rem;
  box-shadow: var(--shadow-card);
}
.wonder-prompt { margin: 0 0 0.5rem; font-size: 1.15rem; }
.wonder-line { margin: 0.35rem 0; font-size: 1.2rem; }
.wonder-panel .item-input { width: 100%; box-sizing: border-box; }
.wonder-panel .primary { margin-top: 0.6rem; }

/* ── read-along + tap-to-hear ─────────────────────────────── */

.prompt-row { display: flex; align-items: center; gap: 0.75rem; }
.speak-button {
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  border: 1px solid var(--blue-up);
  background: var(--space-1);
  color: var(--star);
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.speak-button:hover { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 14px rgba(32, 107, 255, 0.3); }
.read-along .read-word {
  cursor: pointer;
  border-radius: 6px;
  padding: 0 0.1rem;
  display: inline-block;
  min-height: 48px;
  line-height: 48px;
}
.read-along .read-word.read-now { background: var(--blue-soft); outline: 2px solid var(--blue); }
.passage-title { font-family: var(--font-display); color: var(--champagne); }
.passage-text { font-size: 1.6rem; line-height: 2.4; max-width: 30rem; }

/* ── voice input (dark behind VOICE_INPUT) ────────────────── */

.voice-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.voice-button {
  min-width: 56px;
  min-height: 56px;
  border-radius: 50%;
  border: 1px solid var(--blue-up);
  background: var(--space-1);
  font-size: 1.4rem;
  cursor: pointer;
}
.mic-indicator { color: #e06a5a; font-size: 1.4rem; }

/* ── evidence panel / typing / tracing (Stage 08) ─────────── */

.evidence-panel { margin: 0 0 1rem; background: var(--space-1); border: 1px solid var(--ring); border-radius: var(--radius); padding: 1rem; max-width: 30rem; box-shadow: var(--shadow-card); }
.evidence-image { max-width: 100%; height: auto; border-radius: 10px; background: #fff; }
.evidence-caption { font-size: 1.1rem; margin: 0.5rem 0; color: var(--silver); }
.evidence-source { font-size: 0.85rem; margin: 0.25rem 0 0; color: var(--muted, #8a8798); }
.key-rows { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.75rem 0; }
.key-row { display: flex; gap: 0.3rem; }
.key-cap {
  min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ring); border-radius: 8px; background: var(--space-1); font-size: 1.1rem; color: var(--silver);
}
.key-cap.key-next { border-color: var(--blue); background: var(--blue-soft); color: var(--star); box-shadow: 0 0 10px rgba(32, 107, 255, 0.35); }
.typing-typed { letter-spacing: 0.12em; }
/* First wrong character in a typed answer (D26) — marked, not wiped. Underline
   carries the meaning so it does not depend on colour alone. */
.typing-wrong { color: var(--champagne); text-decoration: underline wavy; text-underline-offset: 3px; }
.trace-board { touch-action: none; background: var(--space-1); border: 1px solid var(--ring); border-radius: var(--radius); box-shadow: var(--shadow-card); width: 300px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; }
.trace-guide { fill: none; stroke: #3d475c; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 4; }
.trace-start { fill: var(--champagne); }
.trace-drawn { fill: none; stroke: var(--blue-up); stroke-width: 3.5; stroke-linecap: round; }

/* ── marketing homepage (index.html) ──────────────────────── */

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 2.6rem);
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(10, 13, 20, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(176, 184, 201, 0.10);
}
.site-header .brand-lockup { justify-self: start; }
.site-nav { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.6rem); }
.site-nav a { color: var(--silver); text-decoration: none; font-size: 1rem; min-height: 48px; display: inline-flex; align-items: center; padding: 0 0.4rem; transition: color 160ms ease; white-space: nowrap; }
.site-nav a:hover { color: var(--star); }
/* center links reveal a champagne underline (background-size, not transform) */
.nav-links a {
  background: linear-gradient(var(--champagne-deep), var(--champagne-deep)) no-repeat 0 calc(100% - 9px) / 0% 1.5px;
  transition: color 160ms ease, background-size 220ms ease-out;
}
.nav-links a:hover { background-size: 100% 1.5px; }
.nav-actions { justify-self: end; }
.nav-links { justify-self: center; }
.brand-lockup .brand-mark { transition: filter 200ms ease; }
.brand-lockup:hover .brand-mark { filter: drop-shadow(0 0 9px rgba(91, 143, 255, 0.55)); }
@media (max-width: 1060px) {
  .site-header { grid-template-columns: auto 1fr; }
  .nav-links { display: none; }
}
/* M1: on phones the sticky nav collapses to brand + Start */
@media (max-width: 640px) {
  .nav-actions a:not(.cta-nav) { display: none; }
}

/* The hero owns the whole first viewport: copy left, the orbital child
   right, and the planet rising along the bottom edge. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: min(93vh, 62rem);
  display: flex;
  align-items: center;
}
/* ambient nebula behind the artwork column — lets the keyed art's soft
   glow melt into the page instead of reading as a crop boundary */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(640px 520px at 72% 46%, rgba(64, 105, 190, 0.12), transparent 68%);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1rem, 5vw, 3rem) clamp(3rem, 9vh, 5.5rem);
  position: relative;
  z-index: 1;
}
/* M1 responsive hero: below 860px the art recomposes — the orbital rings
   crop cinematically in a fixed-height window above the copy instead of
   shrinking to a stamp; the type ramp eases for phones. */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art {
    order: -1;
    height: clamp(230px, 52vw, 330px);
    overflow: hidden;
    align-items: center;
    margin: 0 calc(-1 * clamp(1rem, 5vw, 3rem));
  }
  .hero-art img { width: max(480px, 92vw); max-width: none; }
  .hero h1 { font-size: clamp(2.3rem, 9.4vw, 3.2rem); }
  .hero-sub { font-size: 1.05rem; }
  .hero { min-height: 0; }
}

.eyebrow {
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--silver);
  margin: 0 0 1rem;
}
.hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  line-height: 1.1;
  margin: 0 0 1.2rem;
  font-weight: 520;
}
.hero h1 .line-blue { color: var(--blue-up); }
.hero h1 .line-periwinkle { color: var(--periwinkle); }
.hero-sub { color: var(--silver); font-size: 1.15rem; max-width: 27rem; margin: 0 0 1.9rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

.hero-art { display: flex; justify-content: center; }
.hero-art img { width: min(100%, 600px); height: auto; }

/* Earth at dawn, pinned to the hero's bottom edge behind the content. */
.hero-horizon { position: absolute; inset: auto 0 0 0; pointer-events: none; z-index: 0; }
.hero-horizon img { display: block; width: 100%; height: auto; }

.section {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) clamp(1rem, 5vw, 3rem);
  scroll-margin-top: 84px; /* anchors land clear of the sticky header */
}
.section h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 0.4rem; }
.section .section-sub { color: var(--silver); margin: 0 0 2rem; max-width: 40rem; }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.pillar {
  background: var(--space-1);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: var(--shadow-card);
  transition: transform 220ms ease-out, border-color 220ms ease, box-shadow 220ms ease;
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 182, 138, 0.4);
  box-shadow: var(--shadow-card), 0 0 34px rgba(32, 107, 255, 0.13);
}
.pillar svg { display: block; margin-bottom: 0.9rem; }
.pillar h3 { font-family: var(--font-display); color: var(--champagne); margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 540; }
.pillar p { color: var(--silver); font-size: 1rem; margin: 0; }

.promise-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.9rem; }
.promise-list li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  color: var(--star);
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font-size: 1.02rem;
  transition: border-color 180ms ease, background 180ms ease;
}
.promise-list li:hover { border-color: rgba(201, 182, 138, 0.45); background: rgba(30, 41, 59, 0.55); }
.promise-list li::before { content: "✦"; color: var(--champagne-deep); flex: none; }

.site-footer {
  border-top: 1px solid rgba(176, 184, 201, 0.10);
  padding: 2.5rem clamp(1rem, 5vw, 3rem) 3rem;
  text-align: center;
  color: var(--silver);
  font-size: 0.95rem;
}
.site-footer .tagline { letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.75rem; margin-top: 0.8rem; }

/* About: plain words, reading width. */
.section-about .about-copy { color: var(--silver); max-width: 44rem; margin: 0 0 1.1rem; font-size: 1.08rem; }

/* anchor variants of the pill buttons (marketing CTAs) */
a.primary { display: inline-flex; align-items: center; text-decoration: none; }
.cta-nav { min-height: 48px; padding: 0.35rem 1.3rem; }
.picker-mark { margin-top: 1.2rem; filter: drop-shadow(0 0 22px rgba(32, 107, 255, 0.35)); }

/* ── entrance: the homepage settles into place, once ─────────
   One-shot, ≤500ms per element, staggered ≤820ms total. Under
   reduce-motion (either source) every rise becomes a pure fade. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
[data-page="home"] .hero-copy > * { animation: rise-in 480ms ease-out backwards; }
[data-page="home"] .hero-copy > .eyebrow { animation-delay: 40ms; }
[data-page="home"] .hero-copy > h1 { animation-delay: 120ms; }
[data-page="home"] .hero-copy > .hero-sub { animation-delay: 220ms; }
[data-page="home"] .hero-copy > .hero-ctas { animation-delay: 320ms; }
/* The orbital art is the LCP element and the page's anchor: it paints
   IMMEDIATELY (no opacity hold) while the copy rises against it — the page
   feels instantly present and the settle stays calm. */
[data-page="home"] .hero-horizon { animation: fade-in 500ms ease-out 120ms backwards; }
.reduce-motion [data-page="home"] .hero-copy > * { animation-name: fade-in; }
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .hero-copy > * { animation-name: fade-in; }
}

/* ── The Synaptary Map (Stage 14): the learner's sky ─────────────────────── */
.nav-star { width: 22px; height: 22px; fill: var(--champagne, #e8d5a3); display: block; }
.map-screen { position: relative; }
.map-stage {
  position: relative;
  width: 100%;
  height: min(68vh, 640px);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(94, 116, 190, 0.14), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(232, 213, 163, 0.05), transparent 60%),
    var(--space-0);
  border: 1px solid var(--space-2);
  touch-action: none; /* pan/zoom are ours: pointer events drive the viewBox */
}
.map-sky { display: block; width: 100%; height: 100%; }
.map-backdrop-dot { fill: rgba(230, 236, 255, 0.22); }
.map-edge { stroke-width: 1.5; fill: none; }
.map-edge.lit { stroke: rgba(232, 213, 163, 0.55); }
.map-edge.ahead { stroke: rgba(148, 163, 210, 0.18); stroke-dasharray: 3 7; }
.map-star-core { fill: rgba(148, 163, 210, 0.35); }
.map-star-glow { fill: transparent; }
.map-star.stage-spark .map-star-core { fill: #cdb87e; }
.map-star.stage-spark .map-star-glow { fill: rgba(205, 184, 126, 0.10); }
.map-star.stage-star .map-star-core { fill: #e8d5a3; }
.map-star.stage-star .map-star-glow { fill: rgba(232, 213, 163, 0.16); }
.map-star.stage-bright .map-star-core { fill: #f4e7bf; }
.map-star.stage-bright .map-star-glow { fill: rgba(244, 231, 191, 0.26); }
.map-star.stage-radiant .map-star-core { fill: #fdf6de; }
.map-star.stage-radiant .map-star-glow { fill: rgba(253, 246, 222, 0.36); }
/* radiant stars breathe, gently — and hold perfectly still under reduce-motion */
@keyframes star-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.map-star.stage-radiant .map-star-glow { animation: star-breathe 4.5s ease-in-out infinite; }
.reduce-motion .map-star.stage-radiant .map-star-glow { animation: none; }
.map-star-halo { fill: transparent; pointer-events: all; cursor: pointer; }
.map-constellation-name {
  font-family: "Playfair Display Variable", serif;
  font-size: 44px;
  fill: rgba(196, 205, 240, 0.5);
  text-anchor: middle;
  pointer-events: none;
}
.map-star-label {
  font-size: 15px;
  fill: rgba(230, 236, 255, 0.85);
  text-anchor: middle;
  pointer-events: none;
  display: none;
}
.map-sky.labels-visible .map-star-label { display: block; }
.map-sky.labels-visible .map-constellation-name { fill: rgba(196, 205, 240, 0.16); }
.map-zoom {
  position: absolute;
  right: 20px;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
}
.map-zoom-button {
  min-width: 48px;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--space-2);
  background: var(--space-1);
  color: var(--ink, #e6ecff);
  font-size: 22px;
}
.map-inspector {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(440px, calc(100% - 32px));
  background: var(--space-1);
  border: 1px solid var(--space-2);
  border-radius: 16px;
  padding: 16px 18px;
  z-index: 4;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.map-inspector-title { margin: 0 0 4px; font-family: "Playfair Display Variable", serif; }
.map-inspector-stage { margin: 0 0 8px; color: var(--champagne, #e8d5a3); }
.map-inspector-why, .map-inspector-connects { margin: 0 0 8px; }
.map-inspector-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.map-hear { min-width: 48px; min-height: 48px; }
.map-hear-icon { width: 24px; height: 24px; display: block; margin: 0 auto; fill: currentColor; }
.map-hear-wave { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.map-twin { margin-top: 18px; }
.map-twin-name { font-family: "Playfair Display Variable", serif; margin: 14px 0 6px; }
.map-twin-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.map-twin-star {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--space-2);
  background: var(--space-1);
  color: var(--ink, #e6ecff);
  padding: 8px 14px;
  text-align: left;
}

/* guardian sky overlay (Stage 14 §3) */
.dash-sky-svg { width: 100%; height: 340px; display: block; background: var(--space-0); border-radius: 12px; border: 1px solid var(--space-2); }
.dash-sky-star { fill: rgba(148, 163, 210, 0.35); cursor: pointer; }
.dash-sky-star.stage-spark { fill: #cdb87e; }
.dash-sky-star.stage-star { fill: #e8d5a3; }
.dash-sky-star.stage-bright { fill: #f4e7bf; }
.dash-sky-star.stage-radiant { fill: #fdf6de; }
.dash-sky-star.has-misconception { stroke: #c78a17; stroke-width: 3; }

/* CLS 0 on the map: the note line and twin heading reserve their height, so
   text arriving after the async layout fetch never shifts the sky. */
.map-screen #map-note {
  min-height: 1.7em;
  margin-top: 0;
  /* full-width box: text changes repaint INSIDE a stable rect, so swapping
     "waking up" for the intro line can never register as a layout shift */
  width: 100%;
  max-width: none;
  text-align: center;
}
.map-screen #map-twin-heading { min-height: 1.5em; }

/* ── Stage 15: wonder pipeline surfaces ─────────────────────────────────── */
/* the resurfacing line on a Today block: calm, small, speakable */
.block-wonder {
  font-size: 0.95rem;
  color: var(--champagne, #e8d9b8);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
}
.block-wonder .speak-button { min-width: 48px; min-height: 48px; }

/* ── Stage 17: explainability + provenance surfaces ─────────────────────── */
/* tap-optional "Why this?" on a Today block — calm, small, 48px target */
.block-why {
  min-width: 48px;
  min-height: 48px;
  background: transparent;
  border: 1px solid var(--ring);
  border-radius: 999px;
  color: var(--champagne, #e8d9b8);
  font-size: 0.9rem;
  padding: 0 0.9rem;
  cursor: pointer;
}
.block-why:hover, .block-why:focus-visible { border-color: var(--champagne, #e8d9b8); }
.block-reason {
  font-size: 0.95rem;
  color: var(--champagne, #e8d9b8);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
}
.block-reason[hidden] { display: none; }
.block-reason .speak-button { min-width: 48px; min-height: 48px; }

/* the "From: …" / "Made for Synaptary." chip on lessons and passages */
.provenance-chip {
  min-height: 48px;
  align-self: flex-start;
  background: var(--space-1);
  border: 1px solid var(--ring);
  border-radius: 999px;
  color: var(--champagne, #e8d9b8);
  font-size: 0.85rem;
  padding: 0 1rem;
  cursor: pointer;
}
.provenance-chip:hover, .provenance-chip:focus-visible { border-color: var(--champagne, #e8d9b8); }

/* the per-chunk source dot on fact-bearing explainer chunks */
.provenance-dot {
  min-width: 48px;
  min-height: 48px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--champagne, #e8d9b8);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.provenance-dot:hover, .provenance-dot:focus-visible { outline: 2px solid var(--champagne, #e8d9b8); outline-offset: -8px; }

/* the provenance card: a calm overlay naming the source in kid words */
.provenance-card {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 20, 0.72);
  z-index: 60;
  padding: 1rem;
}
.provenance-card-inner {
  background: var(--space-1);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  max-width: 30rem;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}
.provenance-name { font-size: 1.15rem; margin: 0; }
.provenance-kid-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
}
.provenance-kid-line .speak-button { min-width: 48px; min-height: 48px; }
.provenance-citation { font-size: 0.8rem; color: var(--muted, #9aa3c0); margin: 0.25rem 0 0; }
.provenance-close { min-height: 48px; align-self: flex-start; }

/* a wonder star wears a thin ring — born from the learner's own question */
.map-star-ring {
  fill: none;
  stroke: var(--champagne, #e8d9b8);
  stroke-width: 1.5;
  opacity: 0.65;
}
.map-star.stage-unseen .map-star-ring { opacity: 0.35; }
.map-inspector-wonder { color: var(--champagne, #e8d9b8); margin: 0.15rem 0 0; }
.map-inspector-wonder:empty { display: none; }

/* ── Stage 18: habits of thought surfaces ───────────────────────────────── */
/* the sure-o-meter: an optional pick, calm chips, pressed state visible */
.sure-meter { margin: 0.5rem 0; }
.sure-prompt { font-size: 0.95rem; color: var(--champagne, #e8d9b8); margin: 0 0 0.35rem; }
.sure-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sure-chip {
  min-height: 48px;
  min-width: 48px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--ring);
  background: var(--space-1);
  color: inherit;
  cursor: pointer;
  font-size: 0.95rem;
}
.sure-chip[aria-pressed="true"] { border-color: var(--champagne, #e8d9b8); background: rgba(232, 217, 184, 0.12); }

/* the prediction evidence reveal: the evidence gets its turn to speak */
.evidence-reveal {
  margin: 0.75rem 0;
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  background: var(--space-1);
  padding: 1rem;
  max-width: 30rem;
}
.evidence-reveal-text { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.evidence-reveal-text .speak-button { min-width: 48px; min-height: 48px; }
.evidence-reveal-ask { margin: 0.5rem 0 0.25rem; color: var(--champagne, #e8d9b8); }

/* ── L1 craft: the authored icon set ─────────────────────────
   Duotone sprite (assets/icons.svg): structure rides currentColor,
   champagne accents are baked in. The owning control carries the
   accessible name; icons are decoration by contract. */
.icon { width: 26px; height: 26px; display: block; pointer-events: none; }
.nav-link { color: var(--blue-up); }
.nav-link:hover { color: var(--star); }
.nav-link:active { transform: translateY(1px); background: var(--space-2); }
.nav-link:active .icon { transform: scale(0.94); }
.nav-link .icon { transition: transform 120ms ease; }
.speak-button .icon { width: 24px; height: 24px; margin: 0 auto; }
.block-swap .icon { width: 22px; height: 22px; margin: 0 auto; color: inherit; }
#settings-close .icon { width: 22px; height: 22px; }

/* ── L1 craft: feedback moment — the four-point answer bloom ─
   One-shot, 350 ms, next to the feedback line. Under reduce-motion
   (either source) the transform frames vanish and only light remains. */
.answer-bloom { display: inline-block; width: 1.6rem; height: 1.6rem; margin-left: 0.45rem; vertical-align: -0.3rem; }
.answer-bloom svg { width: 100%; height: 100%; display: block; }
.answer-bloom { animation: bloom-pop 350ms ease-out; }
@keyframes bloom-pop {
  0% { transform: scale(0.3) rotate(-14deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.reduce-motion .answer-bloom { animation: fade-in 300ms ease-in; }
@media (prefers-reduced-motion: reduce) {
  .answer-bloom { animation: fade-in 300ms ease-in; }
}

/* ── L1 craft: the Wonder Jar vessel ─────────────────────────
   A real object that visibly holds her questions. The vessel is static;
   a NEW note settles in with one soft one-shot (opacity-only under RM). */
.wonder-jar { display: inline-flex; align-items: center; gap: 0.55rem; margin-left: 0.9rem; vertical-align: middle; }
.wonder-jar svg { width: 34px; height: 40px; display: block; overflow: visible; }
.wonder-jar-count { font-size: 1rem; color: var(--champagne); font-family: var(--font-display); min-width: 1.2rem; }
.wonder-jar .jar-note { opacity: 0.95; }
.wonder-jar .jar-note.settling { animation: note-settle 500ms ease-out; transform-origin: center; }
@keyframes note-settle {
  0% { transform: translateY(-9px) rotate(-10deg); opacity: 0; }
  70% { transform: translateY(1px) rotate(2deg); opacity: 1; }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
.reduce-motion .wonder-jar .jar-note.settling { animation: fade-in 300ms ease-in; }
@media (prefers-reduced-motion: reduce) {
  .wonder-jar .jar-note.settling { animation: fade-in 300ms ease-in; }
}

/* ── L1 craft: zero-shift loading ─────────────────────────────
   Async regions reserve their settled dimensions; arriving content
   replaces quiet space instead of pushing the page (CLS 0 by law). */
.today-strip { min-height: 236px; align-content: flex-start; }
.mascot-chooser { min-height: 300px; }
#vault-grid { min-height: 200px; }

/* ── L1 craft: per-mascot accent warmth ──────────────────────
   Choosing a buddy nudges the accent hue ±6° on the glows that are HERS
   (bubble ring, hint halo). Layout, type, and meaning never change. */
:root { --accent-shift: 0deg; }
.mascot-bubble { border-color: hsl(calc(222deg + var(--accent-shift)) 62% 66% / 0.5); }
.mascot-corner.hint-available { filter: drop-shadow(0 0 14px hsl(calc(222deg + var(--accent-shift)) 88% 60% / 0.75)); }

/* ── L2 signature: the Today orbit ───────────────────────────
   Her day as a small planetary system: blocks ride static elliptical
   tracks around a center star bearing her name; completed blocks dock
   beside the star and light champagne. Pure layout — NOTHING drifts,
   and below 860px the same DOM reads as the card strip. */
/* Orbit progress (Stage 21): one dot per orbit in the day, filled for the
   ones already finished. It ONLY fills — there is no remaining count, no
   time, and no target anywhere in it. */
.orbit-dots { display: flex; gap: 8px; justify-content: center; margin: 1rem 0 0; }
.orbit-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(201, 182, 138, 0.45); }
.orbit-dot.filled { background: var(--champagne, #C9B68A); border-color: var(--champagne, #C9B68A); }

@media (min-width: 860px) {
  .today-strip.orbit {
    display: block;
    position: relative;
    max-width: 880px;
    height: 560px;
    min-height: 560px;
    margin: 0 auto;
  }
  .today-strip.orbit .orbit-dots {
    position: absolute;
    left: 50%;
    bottom: 0.5rem;
    transform: translateX(-50%);
    margin: 0;
  }
  .orbit-track {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(147, 169, 234, 0.16);
    border-radius: 50%;
    pointer-events: none;
  }
  .orbit-track.a { width: 74%; height: 78%; }
  .orbit-track.b { width: 46%; height: 48%; border-color: rgba(201, 182, 138, 0.14); }
  .orbit-center {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 132px;
    min-height: 132px;
    justify-content: center;
    background: radial-gradient(closest-side, rgba(232, 220, 194, 0.14), rgba(232, 220, 194, 0.03) 65%, transparent);
    border: 1px solid rgba(201, 182, 138, 0.35);
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 200ms ease, border-color 200ms ease;
  }
  .orbit-center:hover { border-color: var(--champagne-deep); box-shadow: 0 0 34px rgba(232, 220, 194, 0.22); }
  .orbit-center:active { box-shadow: 0 0 18px rgba(232, 220, 194, 0.18); }
  .orbit-center .orbit-star-glyph { width: 30px; height: 30px; }
  .orbit-center .orbit-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--champagne);
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .orbit-center .orbit-sky-hint { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); }
  .today-strip.orbit .block-card {
    position: absolute;
    width: 220px;
    min-width: 0;
    transform: translate(-50%, -50%);
    transition: left 500ms ease, top 500ms ease, box-shadow 300ms ease;
  }
  /* slots read clockwise from the top — "first this, then that" */
  .today-strip.orbit[data-orbit-count="2"] .orbit-slot-1 { left: 50%; top: 9%; }
  .today-strip.orbit[data-orbit-count="2"] .orbit-slot-2 { left: 50%; top: 85%; }
  .today-strip.orbit[data-orbit-count="3"] .orbit-slot-1 { left: 50%; top: 9%; }
  .today-strip.orbit[data-orbit-count="3"] .orbit-slot-2 { left: 82%; top: 66%; }
  .today-strip.orbit[data-orbit-count="3"] .orbit-slot-3 { left: 18%; top: 66%; }
  .today-strip.orbit[data-orbit-count="4"] .orbit-slot-1 { left: 50%; top: 9%; }
  .today-strip.orbit[data-orbit-count="4"] .orbit-slot-2 { left: 86%; top: 47%; }
  .today-strip.orbit[data-orbit-count="4"] .orbit-slot-3 { left: 50%; top: 85%; }
  .today-strip.orbit[data-orbit-count="4"] .orbit-slot-4 { left: 14%; top: 47%; }
  .today-strip.orbit[data-orbit-count="5"] .orbit-slot-1 { left: 50%; top: 9%; }
  .today-strip.orbit[data-orbit-count="5"] .orbit-slot-2 { left: 85%; top: 38%; }
  .today-strip.orbit[data-orbit-count="5"] .orbit-slot-3 { left: 71%; top: 82%; }
  .today-strip.orbit[data-orbit-count="5"] .orbit-slot-4 { left: 29%; top: 82%; }
  .today-strip.orbit[data-orbit-count="5"] .orbit-slot-5 { left: 15%; top: 38%; }
  /* completed planets dock beside the star and light up */
  .today-strip.orbit .block-card.done { width: 150px; padding: 0.7rem 0.6rem 0.6rem; }
  .today-strip.orbit .block-card.done { box-shadow: var(--shadow-card), 0 0 26px rgba(232, 220, 194, 0.18); border-color: rgba(201, 182, 138, 0.5); }
  .today-strip.orbit[data-orbit-count="2"] .block-card.done.orbit-slot-1,
  .today-strip.orbit[data-orbit-count="3"] .block-card.done.orbit-slot-1,
  .today-strip.orbit[data-orbit-count="4"] .block-card.done.orbit-slot-1,
  .today-strip.orbit[data-orbit-count="5"] .block-card.done.orbit-slot-1 { left: 50%; top: 22%; }
  .today-strip.orbit .block-card.done.orbit-slot-2 { left: 68%; top: 54%; }
  .today-strip.orbit .block-card.done.orbit-slot-3 { left: 32%; top: 54%; }
  .today-strip.orbit .block-card.done.orbit-slot-4 { left: 50%; top: 72%; }
  .today-strip.orbit .block-card.done.orbit-slot-5 { left: 50%; top: 22%; }
  .today-strip.orbit .block-card.done::before { border-color: rgba(201, 182, 138, 0.5); }
}
/* the docking glide is motion: it becomes an instant placement when calm */
.reduce-motion .today-strip.orbit .block-card { transition: box-shadow 300ms ease; }
@media (prefers-reduced-motion: reduce) {
  .today-strip.orbit .block-card { transition: box-shadow 300ms ease; }
}
.orbit-center { display: none; }
.orbit-track { display: none; }
@media (min-width: 860px) {
  .today-strip.orbit .orbit-center { display: flex; }
  .today-strip.orbit .orbit-track { display: block; }
}

/* ── L2 signature: the vault pearl ritual ────────────────────
   A mystery box is a pearl. Tap → a seam of light cracks along it →
   the reveal. ≤900ms; the reduced variant is the same light as a fade. */
.mystery-box {
  position: relative;
  overflow: hidden;
}
.mystery-box::after {
  /* the seam: a vertical thread of light, hidden until the ritual */
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  width: 2px;
  height: 84%;
  transform: translateX(-50%) scaleY(0);
  background: linear-gradient(180deg, transparent, var(--champagne) 30%, #fff 50%, var(--champagne) 70%, transparent);
  opacity: 0;
  pointer-events: none;
}
.mystery-box.opening::after { animation: pearl-crack 480ms ease-in forwards; }
@keyframes pearl-crack {
  0% { transform: translateX(-50%) scaleY(0); opacity: 0; }
  45% { transform: translateX(-50%) scaleY(1); opacity: 0.85; }
  100% { transform: translateX(-50%) scaleY(1); opacity: 1; }
}
.mystery-box.opening { box-shadow: 0 0 30px rgba(232, 220, 194, 0.5); }
.reduce-motion .mystery-box.opening::after { animation: fade-in 300ms ease-in forwards; transform: translateX(-50%) scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .mystery-box.opening::after { animation: fade-in 300ms ease-in forwards; transform: translateX(-50%) scaleY(1); }
}

/* ── L2 signature: the between-block breath ──────────────────
   Two seconds between subjects: the finished planet recedes, the next
   approaches. One tap skips it; reduce-motion never sees it (the JS gate
   simply does not mount it). */
.breath {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  background: rgba(10, 13, 20, 0.86);
  backdrop-filter: blur(6px);
  border: none;
  width: 100%;
  cursor: pointer;
  animation: fade-in 300ms ease-in;
}
.breath-planet { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.breath-planet .breath-globe {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #cfe0ff, var(--blue) 58%, #123a8f);
  box-shadow: 0 0 26px rgba(32, 107, 255, 0.4);
}
.breath-planet.leaving .breath-globe { background: radial-gradient(circle at 32% 28%, #f4ecd8, var(--champagne-deep) 62%, #7a6a45); box-shadow: 0 0 26px rgba(232, 220, 194, 0.35); }
.breath-planet .breath-label { font-family: var(--font-display); font-size: 1.3rem; color: var(--star); }
.breath-planet.leaving { animation: breath-recede 1900ms ease-in forwards; }
.breath-planet.arriving { animation: breath-approach 1900ms ease-out forwards; }
@keyframes breath-recede {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to { transform: translateX(-90px) scale(0.62); opacity: 0.25; }
}
@keyframes breath-approach {
  from { transform: translateX(70px) scale(0.72); opacity: 0.45; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}
.breath-skip-hint { position: absolute; bottom: 2.2rem; left: 0; right: 0; text-align: center; color: var(--silver); font-size: 1rem; }

/* ── M2: show, don't claim — the marketing scroll-telling ──────────────────
   Real product frames with annotations. With JS off (or before app.js runs)
   every step is fully visible: the .js-reveal class — added by bootHome() —
   is what arms the entrance state, and .in releases it per step. Under
   reduce-motion the rise becomes a pure fade. */
.section-walkthrough .walk-steps {
  list-style: none;
  counter-reset: walk;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(2rem, 6vh, 4rem);
}
.walk-step {
  counter-increment: walk;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
}
.walk-step:nth-child(even) .walk-frame { order: 2; }
.walk-frame {
  margin: 0;
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--space-1);
  box-shadow: var(--shadow-card), 0 0 44px rgba(32, 107, 255, 0.10);
}
.walk-frame img { display: block; width: 100%; height: auto; }
.walk-copy h3 { font-family: var(--font-display); color: var(--champagne); font-size: 1.45rem; margin: 0 0 0.5rem; position: relative; }
.walk-copy h3::before {
  content: counter(walk);
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-right: 0.7rem;
  border-radius: 50%;
  border: 1px solid var(--champagne-deep);
  color: var(--champagne);
  font-size: 1rem;
}
.walk-copy p { color: var(--silver); margin: 0 0 0.8rem; }
.walk-guarantee {
  border-left: 2px solid var(--champagne-deep);
  padding: 0.35rem 0 0.35rem 0.9rem;
  color: var(--star);
  font-size: 0.98rem;
}
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
.js-reveal .reveal.in { opacity: 1; transform: none; transition: opacity 460ms ease-out, transform 460ms ease-out; }
.reduce-motion .js-reveal .reveal { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { transform: none; }
}
@media (max-width: 820px) {
  .walk-step { grid-template-columns: 1fr; }
  .walk-step:nth-child(even) .walk-frame { order: 0; }
}

/* ── M2: the calm demo — three real settings states, cross-fading ──────────
   Pure CSS cycle (marketing surface only; learner surfaces never loop).
   Reduce-motion parks it on the first frame with zero animation. */
.section-calm .calm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
.calm-frames {
  position: relative;
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--space-1);
  box-shadow: var(--shadow-card);
  aspect-ratio: 880 / 720;
}
/* the container's aspect-ratio matches the frames exactly, so 100%/100% is
   distortion-free and the stack never shifts layout */
.calm-frames img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: calm-cycle 12s infinite; }
.calm-frames img:nth-child(1) { animation-delay: 0s; }
.calm-frames img:nth-child(2) { animation-delay: 4s; }
.calm-frames img:nth-child(3) { animation-delay: 8s; }
@keyframes calm-cycle {
  0% { opacity: 0; }
  4% { opacity: 1; }
  33.33% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}
.reduce-motion .calm-frames img { animation: none; }
.reduce-motion .calm-frames img:nth-child(1) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .calm-frames img { animation: none; }
  .calm-frames img:nth-child(1) { opacity: 1; }
}
.calm-caption { grid-column: 1 / -1; color: var(--silver); font-size: 0.95rem; margin: 0; }
@media (max-width: 820px) {
  .section-calm .calm-grid { grid-template-columns: 1fr; }
}

/* ── M2: evidence before the claim ─────────────────────────── */
.evidence-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
.evidence-artifact {
  margin: 0;
  background: var(--space-1);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow-card);
}
.evidence-artifact img { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; }
.evidence-artifact figcaption { color: var(--silver); font-size: 0.95rem; margin-top: 0.8rem; }
.evidence-chunk {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--star);
  border-left: 2px solid var(--champagne-deep);
  padding-left: 1rem;
  margin: 0 0 1.1rem;
}
.evidence-source { color: var(--silver); font-size: 0.98rem; margin: 0; }
@media (max-width: 820px) {
  .evidence-pair { grid-template-columns: 1fr; }
}

/* ── M2: the privacy ledger excerpt ─────────────────────────── */
.ledger-excerpt {
  background: var(--space-1);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}
.ledger-row {
  display: grid;
  grid-template-columns: 2rem 10.5rem 6rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid rgba(176, 184, 201, 0.10);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92rem;
  min-width: 34rem;
}
.ledger-seq { color: var(--champagne); }
.ledger-type { color: var(--star); }
.ledger-ts { color: var(--silver); }
.ledger-hash { color: var(--blue-up); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger-receipt {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92rem;
  color: var(--star);
  margin: 0.8rem 0 0;
  min-width: 34rem;
}
.ledger-head { color: var(--champagne); }
.ledger-note { color: var(--silver); max-width: 44rem; margin: 1.2rem 0 0; }

/* ── M2: the wonder wall ────────────────────────────────────── */
.wonder-wall { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; }
.wonder-wall li {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--star);
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid var(--ring);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.wonder-wall li:hover { border-color: rgba(201, 182, 138, 0.45); box-shadow: 0 0 30px rgba(32, 107, 255, 0.12); }
.wonder-close { font-family: var(--font-display); color: var(--champagne); font-size: 1.25rem; margin: 0; }

/* ── L3: alive, but calm ────────────────────────────────────────────────────
   View Transitions: page-to-page orbital continuity. Feature-detected by the
   browser (@view-transition is ignored where unsupported → hard cut); the
   media query gates the OS motion preference, and app.js skips transitions
   when the learner's own Calm-motion toggle is on. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
::view-transition-old(root) { animation-duration: 220ms; }
::view-transition-new(root) { animation-duration: 220ms; }
/* her buddy persists and settles across pages — the continuity anchor */
.mascot-corner { view-transition-name: buddy; }
.app-header { view-transition-name: chrome; }

/* ── L3: input-adaptive density (same DOM, CSS-only) ─────────
   A touchscreen widens targets to 56px and swells the number pad;
   a mouse keeps the tighter grid. */
@media (pointer: coarse) {
  .nav-link, .block-start, .block-swap, .choice-chip, .dash-button, .speak-button { min-height: 56px; min-width: 56px; }
  .pin-key { min-height: 64px; min-width: 64px; font-size: 1.5rem; }
  .number-pad .pin-key { min-height: 72px; font-size: 1.8rem; }
}

/* ── L3: evening temperature ─────────────────────────────────
   After local evening hours (class stamped by state.ts from the LOCAL clock,
   never logged or sent anywhere) the champagne warms ~4% and the signature
   glows soften. Reversible via the Evening warmth setting. */
.evening {
  --champagne: #eedcb4;
  --champagne-deep: #cfb27c;
}
.evening .orbit-center:hover { box-shadow: 0 0 24px rgba(238, 220, 180, 0.18); }
.evening .today-strip.orbit .block-card.done { box-shadow: var(--shadow-card), 0 0 18px rgba(238, 220, 180, 0.15); }
.evening .mystery-box.opening { box-shadow: 0 0 22px rgba(238, 220, 180, 0.42); }

/* ── L3: first-run overture ──────────────────────────────────
   The buddies settle into her orbit one by one, once. One-shot entrances
   (≤500ms each, staggered), a visible skip; reduce-motion keeps the fades. */
.overture .mascot-chooser > .mascot-preview { animation: rise-in 480ms ease-out backwards; }
.overture .mascot-chooser > .mascot-preview:nth-child(1) { animation-delay: 300ms; }
.overture .mascot-chooser > .mascot-preview:nth-child(2) { animation-delay: 900ms; }
.overture .mascot-chooser > .mascot-preview:nth-child(3) { animation-delay: 1500ms; }
.overture-skip { margin-top: 1rem; min-height: 48px; }
.reduce-motion .overture .mascot-chooser > .mascot-preview { animation-name: fade-in; }
@media (prefers-reduced-motion: reduce) {
  .overture .mascot-chooser > .mascot-preview { animation-name: fade-in; }
}

/* ── Age-band presentation surface (Phase 4: one engine, swappable surface) ──
   state.ts stamps `data-band` on the learner root; CSS keyed to it adapts the
   surface to the learner's level. `early` is the IDENTITY surface (the existing
   verified young-child layout); older bands scale type down, cap reading line
   length, tighten density, and shrink the mascot from co-star to quiet helper.
   Only ever affects learner pages (data-band is set nowhere else). */
:root[data-band="early"]  { --band-mascot: 1;    --band-measure: none; --band-density: 1; }
:root[data-band="middle"] { font-size: 19px; --band-mascot: 0.82; --band-measure: 58ch; --band-density: 0.94; }
:root[data-band="upper"]  { font-size: 18px; --band-mascot: 0.70; --band-measure: 66ch; --band-density: 0.88; }
:root[data-band="older"]  { font-size: 18px; --band-mascot: 0.62; --band-measure: 72ch; --band-density: 0.84; }

/* Mascot presence dial: co-star → coach → utility as the learner grows. */
.mascot-corner svg.mascot-rig { width: calc(96px * var(--band-mascot, 1)); height: calc(96px * var(--band-mascot, 1)); }
.mascot-corner.hint-available svg.mascot-rig { width: calc(160px * var(--band-mascot, 1)); height: calc(160px * var(--band-mascot, 1)); }

/* Reading measure: cap line length for older bands; early keeps `none`. */
.teach-text { max-width: var(--band-measure, none); }
.hint-text { max-width: var(--band-measure, none); }

/* Density: the block runner tightens for older bands (early = identity). */
:root[data-band] .block-card { padding: calc(1.25rem * var(--band-density, 1)) calc(1rem * var(--band-density, 1)) calc(1rem * var(--band-density, 1)); }

/* ── The second dial: decoding support (Phase 4 deepening) ─────────────────
   `data-decode` is INDEPENDENT of `data-band` (the two-dial law): guided
   support enlarges only the READING surfaces (prompt, passage, explainer)
   and emphasizes the Hear-it affordance. Register, density, mascot weight,
   and difficulty never move with this dial — an older learner who reads
   below grade gets reading help on a grown-up surface. */
:root[data-decode="guided"] { --decode-reading-scale: 1.12; --decode-measure: 46ch; }
:root[data-decode="standard"] { --decode-reading-scale: 1; --decode-measure: none; }
:root[data-decode="guided"] .item-prompt { font-size: calc(1.8rem * var(--decode-reading-scale)); }
:root[data-decode="guided"] .teach-text,
:root[data-decode="guided"] .passage-text {
  font-size: calc(1.05em * var(--decode-reading-scale));
  line-height: 1.75;
  max-width: min(var(--band-measure, 9999ch), var(--decode-measure));
}
:root[data-decode="guided"] .speak-button {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--silver));
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* ── Homepage: honest coverage section ──────────────────────────────────── */
.section-coverage { text-align: center; }
.coverage-home { max-width: 60rem; margin: 1.5rem auto 0; }
.coverage-stat { font-size: 1.25rem; color: var(--star); margin: 0 0 2rem; }
.coverage-stat strong { color: var(--champagne); font-weight: 700; }
.coverage-group { margin: 0 0 1.75rem; }
.coverage-group-title {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--silver); margin: 0 0 0.85rem; font-family: var(--font-ui); font-weight: 600;
}
.coverage-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.coverage-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
  padding: 0.6rem 0.9rem; border-radius: 14px; border: 1px solid var(--ring);
  background: var(--space-1); text-align: left; min-width: 8.5rem;
}
.coverage-chip.is-live { border-color: color-mix(in srgb, var(--good) 45%, var(--ring)); }
.coverage-chip-label { color: var(--star); font-weight: 600; font-size: 0.95rem; }
.coverage-chip-meta { color: var(--silver); font-size: 0.75rem; }
.coverage-chip.is-live .coverage-chip-meta { color: var(--good); }

/* ── Homepage: audience conversion paths ────────────────────────────────── */
.section-audiences { text-align: center; }
.audience-grid {
  display: grid; gap: 1rem; margin: 2rem auto 0; max-width: 68rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); text-align: left;
}
.audience-card {
  display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem 1.5rem;
  border: 1px solid var(--ring); border-radius: var(--radius); background: var(--space-1);
  transition: border-color 160ms ease, transform 160ms ease;
}
.audience-card:hover { border-color: color-mix(in srgb, var(--periwinkle) 45%, var(--ring)); transform: translateY(-2px); }
.audience-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; color: var(--champagne); }
.audience-card p { margin: 0; color: var(--silver); line-height: 1.55; flex: 1; font-size: 0.98rem; }
.audience-link {
  color: var(--periwinkle); font-weight: 600; text-decoration: none; font-size: 0.95rem;
  min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start;
}
.audience-link:hover { color: var(--blue-up); }
.audience-link:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .audience-card { transition: none; } .audience-card:hover { transform: none; } }

/* Device pairing entry on the picker (Stage 21). */
.pair-entry { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.pair-open { min-height: 48px; min-width: 180px; }
.pair-input { font-size: 1.5rem; text-align: center; letter-spacing: 0.2em; max-width: 14rem; }
.pair-go { min-height: 48px; min-width: 120px; }