/* ==========================================================================
   Spotless Mind, Spaces
   The Sound Room, the companion, the Conditions explorer and the arcade.
   New sections built on the existing tokens; nothing here hardcodes a value
   that belongs in tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The Sound Room
   -------------------------------------------------------------------------- */
.sr-bar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-3));
  z-index: var(--z-raised);
  background: var(--glass-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-3);
  margin-block: var(--block-gap);
}
.sr-now { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.sr-now-t { flex: 1; min-width: 12rem; }
.sr-now-t b { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--text); }
.sr-now-t span { display: block; font-size: var(--text-sm); color: var(--text-muted); }
.sr-main { min-width: 7rem; }
.sr-main svg { width: 1rem; height: 1rem; }
.sr-master { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.sr-master svg { width: 1.125rem; height: 1.125rem; flex: none; }
.sr-master input { width: 8rem; }
.sr-meta { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted); display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.sr-timer { display: inline-flex; align-items: center; gap: var(--space-2); }
.sr-timer select {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3); color: var(--text); font-size: var(--text-sm);
}
.sr-link { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; font-size: inherit; }

.sr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 100%), 1fr));
  gap: var(--space-4);
}
.sr-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.sr-tile:hover { border-color: var(--border-brand); transform: translateY(-2px); box-shadow: var(--shadow-3); }
.sr-tile.on { border-color: var(--brand); background: var(--brand-tint); box-shadow: var(--shadow-brand); }

/* Scene photo behind each sound, so a tile is recognised by the picture
   before the label is read. sound.js sets --sr-art per tile from the sound's
   id; where no such file exists the layer simply renders nothing and the
   tile looks exactly as it did before, so the art can be added one sound at
   a time. The scrim is what keeps the name and hint legible over a photo. */
.sr-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg,
      color-mix(in oklab, var(--surface) 42%, transparent) 0%,
      color-mix(in oklab, var(--surface) 78%, transparent) 62%,
      color-mix(in oklab, var(--surface) 92%, transparent) 100%),
    var(--sr-art, none);
  background-size: cover;
  background-position: center;
  opacity: .9;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.sr-tile:hover::before { opacity: 1; }
.sr-tile.on::before { opacity: .55; }
/* keep the controls above the art layer */
.sr-tile > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .sr-tile::before { transition: none; } }
.sr-play {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  width: 100%; text-align: left;
  padding: var(--space-5);
  color: var(--text);
  flex: 1;
}
.sr-icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--brand);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-out);
}
.sr-icon svg { width: 1.5rem; height: 1.5rem; }
.sr-tile.on .sr-icon { background: var(--brand); color: var(--text-on-brand); }
.sr-tile.on .sr-icon svg { animation: srBreathe 4s var(--ease-in-out) infinite; }
@keyframes srBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
:root[data-motion="reduce"] .sr-tile.on .sr-icon svg { animation: none; }
.sr-name { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-snug); }
.sr-hint { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }
.sr-vol { display: block; padding: 0 var(--space-5) var(--space-4); }
.sr-vol input { width: 100%; }
.sr-vol-hidden { display: none; }
.sr-opt {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-4);
  font-size: var(--text-sm); color: var(--text-muted);
}
.sr-opt small { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.sr-opt input { accent-color: var(--brand); width: 1.1rem; height: 1.1rem; }

.sr-tile input[type="range"], .sr-master input[type="range"] { accent-color: var(--brand); height: 1.5rem; }

.sr-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--space-4); }
.sr-notes .card p { font-size: var(--text-base); }

@media (max-width: 640px) {
  .sr-bar { top: calc(var(--nav-height) + var(--space-2)); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
  .sr-master input { width: 5.5rem; }
  .sr-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .sr-play { padding: var(--space-4); }
  .sr-name { font-size: var(--text-lg); }
  .sr-hint { display: none; }
}

/* --------------------------------------------------------------------------
   The companion
   A dock in the bottom-right corner, a card that opens above it.
   -------------------------------------------------------------------------- */
#cpDock {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right, 0px));
  bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  /* Above the cookie notice and toasts: on a phone they share the bottom edge */
  z-index: calc(var(--z-toast) + 1);
}
#cpBtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-4);
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-fast) var(--ease-out);
}
#cpBtn:hover { transform: translateY(-2px) scale(1.04); border-color: var(--border-brand); }
#cpBtn .cp-svg { width: 3.1rem; height: auto; }
.cp-dot {
  position: absolute; top: .3rem; right: .3rem;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--deco-warm);
  border: 2px solid var(--surface);
}
.cp-streak {
  position: absolute; bottom: -.25rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium);
  background: var(--brand); color: var(--text-on-brand);
  padding: 1px .45rem; border-radius: var(--radius-full);
  border: 2px solid var(--surface);
}

#cpCard {
  position: absolute;
  right: 0; bottom: calc(100% + var(--space-3));
  width: min(22rem, calc(100vw - 2 * var(--space-4)));
  max-height: min(80svh, 40rem);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-5);
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-entrance);
}
#cpCard.on { opacity: 1; transform: none; }
.cp-x { top: var(--space-3); right: var(--space-3); }
.cp-hero { display: grid; place-items: center; padding: var(--space-3) 0 var(--space-2); }
.cp-hero .cp-svg { width: 9.5rem; height: auto; }
.cp-head h3 { font-size: var(--text-2xl); margin-bottom: var(--space-1); text-align: center; }
.cp-stage { font-size: var(--text-sm); color: var(--text-muted); text-align: center; margin-bottom: var(--space-3); }
.cp-name { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.cp-name input {
  flex: 1; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4); font-size: var(--text-base);
}
.cp-note {
  font-family: var(--font-display); font-size: var(--text-md); color: var(--text);
  background: var(--brand-tint); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  text-wrap: pretty;
}
.cp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.cp-stats div { text-align: center; background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-2) var(--space-1); }
.cp-stats b { display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--text); line-height: 1.1; }
.cp-stats span { display: block; font-size: var(--text-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-family: var(--font-mono); margin-top: 2px; }
.cp-hunger { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-3); }
.cp-bar { flex: 1; height: .6rem; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.cp-bar i { display: block; height: 100%; background: var(--brand); border-radius: inherit; transition: width var(--dur-slower) var(--ease-out); }
.cp-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.cp-actions .btn { flex: 1; min-width: 5.5rem; }
.cp-actions .btn svg { width: 1rem; height: 1rem; }
.cp-next { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-3); }
.cp-next b { color: var(--text); }
.cp-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.cp-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--text-faint);
  border: 1px dashed var(--border); border-radius: var(--radius-full);
  padding: 2px var(--space-3);
}
.cp-badge svg { width: .9rem; height: .9rem; }
.cp-badge.got { color: var(--accent-warm); border-style: solid; border-color: color-mix(in oklab, var(--deco-warm) 50%, transparent); background: color-mix(in oklab, var(--deco-warm) 12%, transparent); }
.cp-fine { font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-normal); }
.cp-install { width: 100%; margin-top: var(--space-3); }

/* The creature itself */
.cp-svg { overflow: visible; }
.cp-svg .cp-bob { transform-origin: 62px 96px; transform: scale(var(--cp-scale, 1)); animation: cpBob 3.6s var(--ease-in-out) infinite; }
@keyframes cpBob { 0%, 100% { transform: scale(var(--cp-scale, 1)) translateY(0); } 50% { transform: scale(var(--cp-scale, 1)) translateY(-3px); } }
:root[data-motion="reduce"] .cp-svg .cp-bob { animation: none; }
.cp-body { fill: var(--green-300); stroke: var(--green-600); stroke-width: 2.5; }
:root[data-theme="dark"] .cp-body, :root:not([data-theme="light"]) .cp-body { }
.cp-moss { fill: var(--green-500); opacity: .55; }
.cp-crack { fill: none; stroke: var(--green-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-arm { fill: none; stroke: var(--green-600); stroke-width: 3; stroke-linecap: round; }
.cp-foot { fill: var(--green-600); }
.cp-eye { fill: var(--ink-900); stroke: var(--ink-900); stroke-width: 2.5; stroke-linecap: round; }
.cp-mood-happy .cp-eye, .cp-mood-sleepy .cp-eye { fill: none; }
.cp-shine { fill: #fff; }
.cp-mouth { fill: none; stroke: var(--ink-900); stroke-width: 2.5; stroke-linecap: round; }
.cp-mood-hungry .cp-mouth { fill: var(--rose-deco); stroke: none; }
.cp-cheek { fill: var(--rose-deco); opacity: .45; }
.cp-sprout { fill: none; stroke: var(--green-700); stroke-width: 2.5; stroke-linecap: round; }
.cp-leaf { fill: var(--green-400); stroke: var(--green-700); stroke-width: 1.5; }
.cp-flower { fill: var(--rose-deco); }
.cp-flower-c { fill: var(--clay-deco); }
.cp-svg .cp-eye, .cp-svg .cp-shine { animation: cpBlink 5.5s steps(1) infinite; transform-origin: center; }
@keyframes cpBlink { 0%, 92%, 100% { transform: scaleY(1); } 94%, 97% { transform: scaleY(.1); } }
.cp-mood-sleepy .cp-eye, .cp-mood-happy .cp-eye { animation: none; }
:root[data-motion="reduce"] .cp-svg .cp-eye { animation: none; }
.cp-react-feed .cp-bob { animation: cpChew .9s var(--ease-in-out) 1; }
@keyframes cpChew { 0%, 100% { transform: scale(var(--cp-scale, 1)); } 25%, 75% { transform: scale(calc(var(--cp-scale, 1) * 1.06)) translateY(2px); } 50% { transform: scale(var(--cp-scale, 1)) translateY(-2px); } }
.cp-react-pet .cp-bob { animation: cpLean .9s var(--ease-in-out) 1; }
@keyframes cpLean { 0%, 100% { transform: scale(var(--cp-scale, 1)) rotate(0); } 40% { transform: scale(var(--cp-scale, 1)) rotate(-7deg) translateX(-3px); } }
.cp-react-play .cp-bob { animation: cpBounce 1.4s var(--ease-out) 1; }
@keyframes cpBounce { 0%, 100% { transform: scale(var(--cp-scale, 1)) translateY(0); } 15%, 45%, 75% { transform: scale(var(--cp-scale, 1)) translateY(-14px); } 30%, 60% { transform: scale(var(--cp-scale, 1)) translateY(0); } 90% { transform: scale(var(--cp-scale, 1)) rotate(360deg); } }
:root[data-motion="reduce"] .cp-react-feed .cp-bob,
:root[data-motion="reduce"] .cp-react-pet .cp-bob,
:root[data-motion="reduce"] .cp-react-play .cp-bob { animation: none; }

/* Keep the dock clear of the cookie notice and the read-aloud bar */
@media (max-width: 640px) {
  #cpBtn { width: 3.6rem; height: 3.6rem; }
  #cpBtn .cp-svg { width: 2.6rem; }
}
@media print { #cpDock { display: none; } }

/* --------------------------------------------------------------------------
   Personality Test v2: who-for chooser, character, save and compare
   -------------------------------------------------------------------------- */
.npt-who { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
@media (max-width: 560px) { .npt-who { grid-template-columns: 1fr; } }
.npt-who-b {
  text-align: left;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.npt-who-b:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-3); }
.npt-who-b b { display: block; font-family: var(--font-display); font-size: var(--text-2xl); margin-bottom: var(--space-1); }
.npt-who-b span { display: block; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }
.npt-mode {
  margin-top: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-muted); text-decoration: underline; text-underline-offset: .2em;
}
.npt-mode:hover { color: var(--brand); }

.npt-art {
  width: min(14rem, 60vw);
  margin: 0 auto var(--space-4);
  aspect-ratio: 1;
  position: relative;
}
.npt-art img, .npt-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.npt-art img { object-fit: contain; z-index: 1; }
.npt-result .npt-type, .npt-result .npt-code, .npt-result .npt-blurb { text-align: center; }
.npt-result .npt-eyebrow { text-align: center; }

.npt-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.npt-profiles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.npt-prof { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--surface-2); border-radius: var(--radius-full); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3); }
.npt-prof b { color: var(--text); }
.npt-prof button { width: 1.5rem; height: 1.5rem; border-radius: 50%; color: var(--text-muted); font-size: 1rem; line-height: 1; }
.npt-prof button:hover { background: var(--accent-rose); color: #fff; }

.npt-cmp-pick { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); font-size: var(--text-sm); color: var(--text-muted); }
.npt-cmp-pick select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); color: var(--text); font-size: var(--text-sm); }
.npt-cmp-row { margin-bottom: var(--space-5); }
.npt-cmp-bars { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: center; margin: var(--space-2) 0; }
.npt-cmp-who { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.npt-cmp-note { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-normal); }
.npt-cmp-note.differs { color: var(--text); background: var(--brand-tint); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }

/* --------------------------------------------------------------------------
   Audience: adults, or parents of children
   -------------------------------------------------------------------------- */
:root[data-aud="adult"]  [data-for="parent"] { display: none !important; }
:root[data-aud="parent"] [data-for="adult"]  { display: none !important; }
:root[data-aud="young"]  [data-for="parent"],
:root[data-aud="young"]  [data-for="adult"],
:root[data-aud="young"]  [data-for="grown"]  { display: none !important; }
:root:not([data-aud="young"]) [data-for="young"] { display: none !important; }
:root[data-aud="adult"]  [data-for="kids"] { display: none !important; }
/* Exclusive variants: exactly one shows, matching the current audience */
:root[data-aud="adult"]  [data-lead]:not([data-lead="adult"]),
:root[data-aud="parent"] [data-lead]:not([data-lead="parent"]),
:root[data-aud="young"]  [data-lead]:not([data-lead="young"]),
:root[data-aud="all"]    [data-lead]:not([data-lead="all"]) { display: none !important; }
:root:not([data-aud="all"]) [data-for="all"] { display: none !important; }
:root[data-aud="adult"]  .door-adult  { order: -1; }
:root[data-aud="parent"] .door-parent { order: -1; }
.aud-young  { color: var(--accent-plum); background: color-mix(in oklab, var(--deco-plum) 12%, transparent); }
.aud-choice.aud-choice-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .aud-choice.aud-choice-3 { grid-template-columns: 1fr; } }
.aud-choice-3 .aud-choice-b b { font-size: var(--text-xl); }
@media (max-width: 1250px) { .nv-right > .aud-pill button { padding-inline: var(--space-3); font-size: var(--text-xs); } }

.aud-pill {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--glass);
}
.aud-pill button {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.aud-pill button[aria-pressed="true"] { background: var(--brand); color: var(--text-on-brand); }
.aud-pill button:hover:not([aria-pressed="true"]) { color: var(--brand); }
.aud-pill-menu { width: 100%; }
.aud-pill-menu button { flex: 1; text-align: center; }

/* Header fit tiers, set by audience.js after measuring the nav */
.aud-one { display: none; align-items: center; gap: var(--space-1); color: var(--text); }
.aud-one i { display: inline-flex; opacity: .7; }

/* The header ALWAYS uses the collapsed control, never the three buttons.
   Changed 2026-09-17. Three buttons made the bar's width depend on the label
   text, so naming teachers in the label pushed the parent view (which also
   carries the most nav links, seven against five) past the available space and
   the items collided. Measuring and folding only after it breaks is fragile:
   the measurement misses items squeezed below their content width, which is
   exactly the case that overlaps. One control of constant width cannot break,
   and it is a clearer affordance anyway, with a chevron that says it opens
   something. The full three-way pill still lives in the burger menu, where
   there is room for it. */
.nv-right > .aud-pill { padding: 0; border: 0; background: none; }
.nv-right > .aud-pill > [data-aud-set] { display: none; }
.nv-right > .aud-pill > .aud-one {
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--glass);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nv-right > .aud-pill > .aud-one:hover { color: var(--brand); border-color: var(--brand); }

/* Tier 1 now buys room by tightening rather than by hiding, so there is still
   a step between the full bar and the burger. Parents see seven links where
   everyone else sees five, and that view should not fall straight to a burger
   on a laptop just because it has two more. */
nav#nav.nav-fit-1 .nv-links { gap: var(--space-2); }
nav#nav.nav-fit-1 .nv-links > * { padding-inline: var(--space-2); }
nav#nav.nav-fit-1 .nv-right > .aud-pill > .aud-one { padding-inline: var(--space-3); }

nav#nav.nav-fit-2 .nv-links,
nav#nav.nav-fit-2 .nv-login { display: none; }
nav#nav.nav-fit-2 .nv-burger { display: flex; }
/* On phones the burger menu carries the full pill, so the header drops it */
@media (max-width: 960px) { .nv-right > .aud-pill { display: none; } }

.aud-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 4px var(--space-3) 4px var(--space-2);
  border-radius: var(--radius-full);
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
}
.aud-tag::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.aud-parent { color: var(--accent-warm); background: color-mix(in oklab, var(--deco-warm) 12%, transparent); }
.aud-adult  { color: var(--accent-cool); background: color-mix(in oklab, var(--deco-cool) 12%, transparent); }
.aud-both   { color: var(--brand); background: var(--brand-tint); }

.aud-card { width: min(38rem, 100%); }
.aud-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 560px) { .aud-choice { grid-template-columns: 1fr; } }
.aud-choice-b {
  text-align: left; padding: var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.aud-choice-b:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-3); }
.aud-choice-b b { display: block; font-family: var(--font-display); font-size: var(--text-2xl); margin-bottom: var(--space-1); }
.aud-choice-b span { display: block; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }

/* About page */
.about-why { max-width: var(--measure); }
.about-why p { color: var(--text-body); font-size: var(--text-lg); line-height: var(--leading-prose); }
.about-why p + p { margin-top: var(--space-4); }

/* Card grids: keep the tag line one height so titles sit on one line */
.grid .card > .cat { display: block; min-height: 1.4em; margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   Home: the three doors that replaced the counters
   -------------------------------------------------------------------------- */
.doors {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.door {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5);
  background: var(--glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.door:hover { border-color: var(--border-brand); transform: translateY(-3px); box-shadow: var(--shadow-3); }
.door b { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semi); }
.door p { color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-normal); flex: 1; }
.door .card-go { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   Conditions & Traits
   -------------------------------------------------------------------------- */
.cx-aud { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.cx-grid .card .cat {
  display: inline-block; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.cx-detail { max-width: var(--measure-wide); }
.cx-head { display: flex; gap: var(--space-4); align-items: flex-start; margin: var(--space-5) 0 var(--space-4); }
.cx-head .icon { width: 3.25rem; height: 3.25rem; flex: none; }
.cx-head .icon svg { width: 1.6rem; height: 1.6rem; }
.cx-head h2 { font-size: var(--text-4xl); margin-bottom: var(--space-2); }
.cx-head .eyebrow { margin-bottom: var(--space-2); }
.cx-review {
  font-size: var(--text-sm); color: var(--accent-warm);
  background: color-mix(in oklab, var(--deco-warm) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--deco-warm) 35%, transparent);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.cx-sec { margin-block: var(--space-7); }
.cx-sec h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.cx-sec p { color: var(--text-muted); line-height: var(--leading-prose); max-width: var(--measure); }
.cx-sec p + p { margin-top: var(--space-3); }
.cx-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.cx-swap { font-size: var(--text-sm); color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.cx-signs { padding-left: var(--space-5); max-width: var(--measure); }
.cx-signs li { color: var(--text-body); line-height: var(--leading-prose); margin-bottom: var(--space-2); }
.cx-often { margin-top: var(--space-4); border-left: 3px solid var(--brand); padding-left: var(--space-4); }
.cx-often p { font-size: var(--text-base); }
.cx-strengths ul { padding-left: var(--space-5); max-width: var(--measure); }
.cx-strengths li { color: var(--text-body); line-height: var(--leading-prose); margin-bottom: var(--space-2); }
.cx-reflect { background: var(--brand-tint); border: 1px solid var(--border-brand); border-radius: var(--radius-xl); padding: var(--space-5); }
.cx-reflect ol { padding-left: var(--space-5); }
.cx-reflect li { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text); line-height: var(--leading-snug); margin-bottom: var(--space-3); }
.cx-reflect-p { font-size: var(--text-base); margin-bottom: var(--space-4); }
.cx-helps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-3); }
.cx-helps .card h4 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.cx-helps .card p { font-size: var(--text-base); }
.cx-crisis { font-size: var(--text-sm); color: var(--accent-rose); margin-top: var(--space-4); }
.cx-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cx-sources ul { padding-left: var(--space-5); margin-bottom: var(--space-3); }
.cx-sources li { margin-bottom: var(--space-1); font-size: var(--text-base); }
@media (max-width: 560px) { .cx-head { flex-direction: column; } .cx-head h2 { font-size: var(--text-3xl); } .cx-reflect { padding: var(--space-4); } }
.cx-detail > .btn svg, .pf-pill svg { width: 1em; height: 1em; }
.cx-head h2:focus { outline: none; }

/* Inline on the ADHD and Autism pages */
.cx-inline .cx-sec:first-of-type { margin-top: var(--space-5); }
.cx-inline .cx-sec { margin-block: var(--space-6); }
.cx-inline .cx-sec h3 { font-size: var(--text-2xl); }
.cx-traits { margin-top: var(--space-8); }
.cx-traits > h3 { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.cx-traits > .lead { margin-bottom: var(--space-5); }
.cx-trait {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  background: var(--glass); margin-bottom: var(--space-3);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.cx-trait[open] { border-color: var(--border-brand); }
.cx-trait summary {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none;
}
.cx-trait summary::-webkit-details-marker { display: none; }
.cx-trait summary > svg:last-child { width: 1.1rem; height: 1.1rem; flex: none; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.cx-trait[open] summary > svg:last-child { transform: rotate(180deg); }
.cx-trait-t { flex: 1; min-width: 0; }
.cx-trait-t b { display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--text); }
.cx-trait-t span { display: block; font-size: var(--text-sm); color: var(--text-muted); }
.cx-trait-b { padding: 0 var(--space-5) var(--space-5); }
.cx-trait-b > p { color: var(--text-muted); line-height: var(--leading-prose); max-width: var(--measure); }
.cx-trait-b > p + p { margin-top: var(--space-3); }
.cx-trait-b .cx-sec { margin-block: var(--space-5); }
.cx-trait-b h4 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.cx-trait-b .cx-helps .card h4 { font-size: var(--text-md); }

/* --------------------------------------------------------------------------
   The Calm Arcade
   -------------------------------------------------------------------------- */
.ar-intro { text-align: center; padding: var(--space-6) 0; }
.ar-intro .lead { margin-inline: auto; }
#arBody { text-align: left; }
.ar-blurb { margin-bottom: var(--space-5); }
.ar-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.ar-rule { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ar-hint { font-size: var(--text-base); color: var(--text-muted); margin-bottom: var(--space-4); min-height: 1.5em; }
.ar-range { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.ar-range input { width: 9rem; accent-color: var(--brand); }
.ar-range output { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); min-width: 4rem; }
.ar-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.ar-check input { accent-color: var(--brand); width: 1.1rem; height: 1.1rem; }
.ar-check small { font-size: var(--text-xs); color: var(--text-faint); }
.ar-round { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }

/* Sorting Garden */
.ar-tray { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-lg); margin-bottom: var(--space-4); min-height: 4.5rem; }
.ar-item { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: var(--radius-md); background: var(--surface); border: 2px solid transparent; transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-fast) var(--ease-out); }
.ar-item:hover { transform: translateY(-2px); }
.ar-item.picked { border-color: var(--brand); transform: scale(1.08); box-shadow: var(--shadow-brand); }
.ar-baskets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: var(--space-3); }
.ar-basket { position: relative; min-height: 8rem; padding: var(--space-3); border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); text-align: left; color: var(--text); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.ar-basket:hover { border-color: var(--brand); background: var(--brand-tint); }
.ar-basket i { position: absolute; top: var(--space-3); right: var(--space-3); width: 1rem; height: 1rem; border-radius: 50%; }
.ar-basket b { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); margin-bottom: var(--space-2); }
.ar-basket-in { display: flex; flex-wrap: wrap; gap: 2px; }

/* Steady Beat */
.ar-pulse { position: relative; display: grid; place-items: center; width: min(16rem, 60vw); aspect-ratio: 1; margin: var(--space-4) auto; border-radius: 50%; background: transparent; }
.ar-pulse-core { width: 55%; height: 55%; border-radius: 50%; background: var(--brand); box-shadow: var(--shadow-brand); transition: transform var(--dur-fast) var(--ease-out); }
.ar-pulse:active .ar-pulse-core { transform: scale(.92); }
.ar-pulse-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--brand); opacity: 0; transform: scale(.55); }
.ar-pulse-ring.go { animation: arRing .6s var(--ease-out) 1; }
@keyframes arRing { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1); } }
.ar-pulse-ring.on { opacity: .6; transform: scale(.9); }

/* Moss Run */
.ar-canvas-wrap { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.ar-canvas-wrap canvas { width: 100%; height: auto; display: block; cursor: pointer; touch-action: manipulation; }

/* Pattern Path */
.ar-pat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); max-width: 22rem; margin: var(--space-4) auto; }
.ar-tile { aspect-ratio: 1; border-radius: var(--radius-xl); opacity: .55; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); border: 3px solid transparent; }
.ar-tile:hover { opacity: .8; }
.ar-tile.lit { opacity: 1; transform: scale(1.04); border-color: var(--text); }
.ar-tile-green { background: var(--deco-green); }
.ar-tile-plum { background: var(--deco-plum); }
.ar-tile-cool { background: var(--deco-cool); }
.ar-tile-warm { background: var(--deco-warm); }

/* Bubble Garden */
.ar-garden { position: relative; height: min(24rem, 60vh); border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; cursor: pointer; margin-bottom: var(--space-4); }
.ar-garden:focus-visible { outline-offset: -3px; }
.ar-bub { position: absolute; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.7), transparent 45%), color-mix(in oklab, var(--c) 55%, transparent); border: 1px solid color-mix(in oklab, var(--c) 60%, transparent); animation: arFloat 6s var(--ease-in-out) infinite alternate; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
@keyframes arFloat { from { transform: translateY(0) } to { transform: translateY(-14px) } }
.ar-bub.pop { transform: scale(1.5); opacity: 0; }
:root[data-motion="reduce"] .ar-bub { animation: none; }
:root[data-motion="reduce"] .ar-pulse-ring.go { animation: none; opacity: .6; }
@media (max-width: 560px) { .ar-item { width: 3rem; height: 3rem; } .ar-item svg { width: 36px; height: 36px; } }

/* --------------------------------------------------------------------------
   Narration player and read-along
   -------------------------------------------------------------------------- */
.ra.na { flex-wrap: wrap; gap: var(--space-3); }
.na-prog { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 12rem; }
.na-prog input { flex: 1; accent-color: var(--brand); }
#naTime { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; }
.na-voice { font-size: var(--text-xs); color: var(--text-faint); width: 100%; }
.na-link { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; font-size: inherit; }
#naRate { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px var(--space-2); color: var(--text); font-size: var(--text-sm); }
.na-w.on { background: var(--brand-tint-2); border-radius: 3px; box-shadow: 0 0 0 2px var(--brand-tint-2); color: var(--text); }
.story-wrap { padding: 0; display: flex; flex-direction: column; }
.story-wrap > .story { flex: 1; border: none; box-shadow: none; }
.story-listen { align-self: flex-start; margin: 0 var(--space-5) var(--space-5); }