/* ============================================================
   BEARMINDFUL — COMPONENTS
   ============================================================ */

/* ============================================================
   BADGE — the round tab. The signature of the whole site.
   Reads as an enamel pin pressed into the cover: thick ring,
   inner hairline, real shadow on the illustration beneath.
   ============================================================ */

.badge {
  --size: clamp(140px, 18vw, 240px);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: var(--r-full);
  background: var(--badge-fill, var(--paper));
  color: var(--badge-ink, var(--moss-900));
  box-shadow: var(--shadow-badge);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--dur-ui) var(--ease-out-quart),
              box-shadow var(--dur-ui) var(--ease-out-quart);
}

/* The ring is drawn, not bordered, so it can brighten without
   shifting layout by a single pixel. */
.badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  border: var(--ring) solid var(--badge-ring, var(--moss-500));
  transition: border-color var(--dur-ui) var(--ease-out-quart);
}

.badge::after {
  content: '';
  position: absolute;
  inset: calc(var(--ring) + 5px);
  border-radius: var(--r-full);
  border: 1.5px solid color-mix(in oklab, var(--badge-ring, var(--moss-500)) 38%, transparent);
}

.badge__inner {
  display: grid;
  gap: calc(var(--size) * 0.03);
  justify-items: center;
  padding-inline: 15%;
}

.badge__glyph {
  width: calc(var(--size) * 0.42);
  height: calc(var(--size) * 0.42);
  color: var(--badge-ring, var(--moss-500));
}

.badge__label {
  font-family: var(--font-display);
  font-size: clamp(0.86rem, calc(var(--size) * 0.093), 1.22rem);
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

@media (hover: hover) and (pointer: fine) {
  .badge:hover {
    transform: rotate(var(--tilt, 0deg)) translateY(-5px);
    box-shadow: var(--shadow-badge-lift);
  }
  .badge:hover::before { border-color: var(--badge-ring-hover, var(--ember-500)); }
}

.badge:active {
  transform: rotate(var(--tilt, 0deg)) scale(0.97);
  transition-duration: var(--dur-press);
}

/* Per-tab identity. Each tab owns a colour it keeps site-wide. */
.badge--making    { --badge-ring: var(--moss-500);  --badge-ring-hover: var(--moss-700); }
.badge--story     { --badge-ring: var(--ember-500); --badge-ring-hover: var(--ember-300);
                    --badge-fill: var(--moss-900);  --badge-ink: var(--paper); }
.badge--activities{ --badge-ring: var(--berry-500); --badge-ring-hover: var(--ember-500); }

/* Smaller echo, used on the activities hub. */
.badge--sm { --size: clamp(120px, 15vw, 176px); --ring: 3px; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: var(--track-tight);
  border-radius: var(--r-full);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-press) var(--ease-out-quart),
              background-color var(--dur-ui) var(--ease-out-quart),
              border-color var(--dur-ui) var(--ease-out-quart),
              box-shadow var(--dur-ui) var(--ease-out-quart);
}

/* Ember fill always carries moss-900 ink. White on ember is 2.81:1. */
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-1);
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2.5px var(--rule-strong);
}

.btn--quiet {
  background: transparent;
  color: var(--ink-muted);
  min-height: var(--space-8);
  padding-inline: var(--space-4);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-soft); }
  .btn--secondary:hover { box-shadow: inset 0 0 0 2.5px var(--accent); color: var(--ink); }
  .btn--quiet:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }
}

.btn:active { transform: scale(0.97); }

.btn__icon { width: 1.25em; height: 1.25em; flex: none; }

/* ============================================================
   NAV — the tab metaphor stays continuous. The three round tabs
   shrink into the header rather than turning into text links.
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--nav-h);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--track-tight);
  text-decoration: none;
  color: var(--ink);
}

.nav__mark { width: 40px; height: 40px; flex: none; }

.nav__tabs { display: flex; gap: var(--space-2); align-items: center; }

.nav__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border-radius: var(--r-full);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--track-tight);
  transition: background-color var(--dur-ui) var(--ease-out-quart),
              transform var(--dur-press) var(--ease-out-quart);
}

.nav__tab-disc {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-full);
  border: 2.5px solid var(--tab-ring, var(--moss-500));
  color: var(--tab-ring, var(--moss-500));
}

.nav__tab-disc svg { width: 20px; height: 20px; }

.nav__tab--making     { --tab-ring: var(--moss-500); }
.nav__tab--story      { --tab-ring: var(--ember-500); }
.nav__tab--activities { --tab-ring: var(--berry-500); }

@media (hover: hover) and (pointer: fine) {
  .nav__tab:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); }
}

.nav__tab:active { transform: scale(0.97); }

.nav__tab[aria-current='page'] {
  background: color-mix(in oklab, var(--tab-ring) 16%, transparent);
}

.nav__tab[aria-current='page'] .nav__tab-disc {
  background: var(--tab-ring);
  color: var(--paper);
}

/* Story tab ring is ember; white-on-ember fails, so flip the ink. */
.nav__tab--story[aria-current='page'] .nav__tab-disc { color: var(--moss-900); }

@media (max-width: 860px) {
  .nav__tab-label { display: none; }
  .nav__tab { padding: var(--space-2); }
}

/* ---- Overlay mode.
     On the homepage the nav sits on top of the cover artwork until you
     scroll past it, so the cover reads edge to edge. Toggled by an
     IntersectionObserver, never by a scroll handler. Without JS the nav
     is simply the normal solid one. ---- */

.nav[data-overlay] {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  --ink: var(--paper);
  --brand: var(--moss-300);
  color: var(--paper);
}

/* A scrim under the overlay nav. White chrome sitting on artwork is only
   legible by luck otherwise — this guarantees it whatever the cover
   illustration is replaced with at the next changeover. */
.nav[data-overlay]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    oklch(0.12 0.030 215 / 0.62) 0%,
    oklch(0.12 0.030 215 / 0.34) 60%,
    oklch(0.12 0.030 215 / 0) 100%);
}

/* The mid-tone rings vanish against the dark artwork; lift them. */
.nav[data-overlay] .nav__tab--making     { --tab-ring: var(--moss-300); }
.nav[data-overlay] .nav__tab--story      { --tab-ring: var(--ember-300); }
.nav[data-overlay] .nav__tab--activities { --tab-ring: oklch(0.76 0.11 25); }

@media (hover: hover) and (pointer: fine) {
  .nav[data-overlay] .nav__tab:hover { background: oklch(1 0 0 / 0.14); }
}

/* On a phone the wordmark and three discs together are wider than the
   viewport. The mark alone still identifies the site, and the discs stay
   the navigation. */
@media (max-width: 460px) {
  .nav__brand span { display: none; }
  .nav__inner { gap: var(--space-3); }
  .nav__tabs { gap: var(--space-1); }
  .nav__tab-disc { width: 34px; height: 34px; }
  .nav__tab-disc svg { width: 18px; height: 18px; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-8) var(--space-7);
  margin-block-start: var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-7);
}

.footer__list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }

.footer__list a {
  text-decoration: none;
  color: var(--ink-muted);
  display: inline-block;
  padding-block: var(--space-1);
}

@media (hover: hover) and (pointer: fine) {
  .footer__list a:hover { color: var(--ink); }
}

.footer__fine {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* ============================================================
   PANEL — the honest alternative to a card grid. Used where a
   container genuinely helps, not as default page scaffolding.
   ============================================================ */

.panel {
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
}

.panel--sunk { background: var(--bg-sunk); border-color: transparent; }

.panel--accent {
  background: color-mix(in oklab, var(--accent) 14%, var(--bg));
  border-color: color-mix(in oklab, var(--accent) 34%, transparent);
}

/* ============================================================
   CHIP — big round filters. Sized for a four-year-old's thumb.
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: var(--track-tight);
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2.5px var(--rule-strong);
  transition: background-color var(--dur-ui) var(--ease-out-quart),
              box-shadow var(--dur-ui) var(--ease-out-quart),
              transform var(--dur-press) var(--ease-out-quart);
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover { box-shadow: inset 0 0 0 2.5px var(--accent); }
}

.chip:active { transform: scale(0.97); }

.chip[aria-pressed='true'] {
  background: var(--moss-900);
  color: var(--paper);
  box-shadow: inset 0 0 0 2.5px var(--moss-900);
}

/* ============================================================
   SOUND BUTTON — tap to hear. The ring fills for the duration,
   so a child who cannot read still sees that something is happening
   and how much is left.
   ============================================================ */

.sound-btn {
  --dur: 2s;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tap-child);
  height: var(--tap-child);
  border-radius: var(--r-full);
  background: var(--moss-100);
  color: var(--moss-700);
  cursor: pointer;
  flex: none;
  transition: transform var(--dur-press) var(--ease-out-quart),
              background-color var(--dur-ui) var(--ease-out-quart);
}

.sound-btn svg { width: 44%; height: 44%; }

.sound-btn__ring {
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  pointer-events: none;
}

.sound-btn__ring circle {
  fill: none;
  stroke: var(--ember-500);
  stroke-width: 5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: var(--circ, 289);
  stroke-dashoffset: var(--circ, 289);
}

.sound-btn.is-playing {
  background: var(--ember-300);
  color: var(--moss-900);
}

.sound-btn.is-playing .sound-btn__ring circle {
  animation: ring-fill var(--dur) linear forwards;
}

@keyframes ring-fill { to { stroke-dashoffset: 0; } }

@media (hover: hover) and (pointer: fine) {
  .sound-btn:hover { background: var(--ember-300); color: var(--moss-900); }
}

.sound-btn:active { transform: scale(0.97); }

/* Still a child-facing control, so it stays above the ~2cm minimum
   Nielsen Norman found for 3-6 year olds. 60px was under it. */
.sound-btn--sm { width: 76px; height: 76px; }

@media (prefers-reduced-motion: reduce) {
  .sound-btn.is-playing .sound-btn__ring circle { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================
   MEDIA FRAME — the 16:9 slot every video lives in. In this
   prototype the slideshow engine drives it; a real <video> drops
   into exactly the same box.
   ============================================================ */

.media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--dusk-900);
  box-shadow: var(--shadow-2);
  isolation: isolate;
}

.media__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-in-out);
}

.media__layer.is-live { opacity: 1; }

.media__layer img, .media__layer svg {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Slow drift while a still is on screen. Never competes for attention. */
.media__layer.is-live.has-drift img,
.media__layer.is-live.has-drift svg {
  animation: drift 14s var(--ease-in-out) both;
}

@keyframes drift {
  from { transform: scale(1.00) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -1.4%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .media__layer.is-live.has-drift img,
  .media__layer.is-live.has-drift svg { animation: none; }
  .media__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media__layer { transition-duration: 200ms; }
}

.media__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%,
    transparent 42%, oklch(0.10 0.03 210 / 0.55) 100%);
  opacity: 0;
  transition: opacity var(--dur-scene) var(--ease-out-quart);
}

.is-lights-down .media__vignette { opacity: 1; }

.media__badge {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: var(--z-badge);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-full);
  background: oklch(0.10 0.03 210 / 0.72);
  color: var(--paper);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--track-label);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---- The play affordance on a making-of film ---- */

.film-play {
  position: absolute;
  inset: 0;
  z-index: var(--z-badge);
  display: grid;
  place-items: center;
  cursor: pointer;
  background: oklch(0.10 0.03 210 / 0.28);
  transition: background-color var(--dur-ui) var(--ease-out-quart);
}

.film-play.is-playing { background: transparent; }

.film-play__disc {
  display: grid;
  place-items: center;
  width: var(--tap-child);
  height: var(--tap-child);
  border-radius: var(--r-full);
  background: var(--ember-500);
  color: var(--moss-900);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-press) var(--ease-out-quart),
              opacity var(--dur-ui) var(--ease-out-quart),
              background-color var(--dur-ui) var(--ease-out-quart);
}

.film-play__disc svg { width: 40%; height: 40%; }
.film-play .play-btn__play { transform: translateX(6%); }
.film-play .play-btn__pause { display: none; }
.film-play.is-playing .play-btn__play { display: none; }
.film-play.is-playing .play-btn__pause { display: block; }

/* While a film runs the button fades back so it is not sitting on top
   of the thing you came to look at — but it stays a full-size target,
   and it comes back on hover or focus. */
.film-play.is-playing .film-play__disc { opacity: 0.18; }

@media (hover: hover) and (pointer: fine) {
  .film-play:hover .film-play__disc { opacity: 1; background: var(--ember-300); }
}

.film-play:focus-visible .film-play__disc { opacity: 1; }
.film-play:active .film-play__disc { transform: scale(0.97); }

.film-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  z-index: var(--z-badge);
  background: oklch(1 0 0 / 0.16);
}

.film-progress i {
  display: block;
  height: 100%;
  background: var(--ember-500);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 260ms linear;
}

/* ============================================================
   TRANSPORT — "simple start and stop buttons", taken literally.
   One giant play/pause, one stop, a chapter rail, and nothing
   a small child can get wrong. No scrubber. No drag.
   ============================================================ */

.transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-4), 3vw, var(--space-7));
  flex-wrap: wrap;
}

.play-btn {
  display: grid;
  place-items: center;
  width: var(--tap-hero);
  height: var(--tap-hero);
  border-radius: var(--r-full);
  background: var(--ember-500);
  color: var(--moss-900);
  cursor: pointer;
  box-shadow: var(--shadow-lamp), var(--shadow-2);
  transition: transform var(--dur-press) var(--ease-out-quart),
              background-color var(--dur-ui) var(--ease-out-quart);
}

.play-btn svg { width: 42%; height: 42%; }

/* The play triangle is optically centred by nudging it right; the pause
   bars are already symmetrical and must not be nudged. */
.play-btn__play { transform: translateX(5%); }
.play-btn__pause { display: none; }
.play-btn.is-playing .play-btn__play { display: none; }
.play-btn.is-playing .play-btn__pause { display: block; }

@media (hover: hover) and (pointer: fine) {
  .play-btn:hover { background: var(--ember-300); }
}

.play-btn:active { transform: scale(0.97); }

.control-btn {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  width: var(--tap-child);
  min-height: var(--tap-child);
  border-radius: var(--r-full);
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 0 0 2.5px var(--rule-strong);
  transition: transform var(--dur-press) var(--ease-out-quart),
              box-shadow var(--dur-ui) var(--ease-out-quart),
              background-color var(--dur-ui) var(--ease-out-quart);
}

.control-btn svg { width: 34%; height: 34%; }

@media (hover: hover) and (pointer: fine) {
  .control-btn:hover { box-shadow: inset 0 0 0 2.5px var(--accent); }
}

.control-btn:active { transform: scale(0.97); }

.control-btn[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 0 0 2.5px var(--accent);
}

.control-label {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--track-tight);
  color: var(--ink-muted);
  text-align: center;
}

.control-group { display: grid; justify-items: center; gap: var(--space-2); }

/* ---------- Chapter rail ---------- */

.chapters {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
}

.chapter {
  position: relative;
  flex: 1 1 200px;
  max-width: 300px;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-full);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  color: var(--ink-muted);
  background: color-mix(in oklab, var(--ink) 9%, transparent);
  transition: color var(--dur-ui) var(--ease-out-quart),
              background-color var(--dur-ui) var(--ease-out-quart),
              transform var(--dur-press) var(--ease-out-quart);
}

/* Progress is painted with clip-path so it is one composited layer
   and never triggers layout. */
.chapter__fill {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--accent) 30%, transparent);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 260ms linear;
  pointer-events: none;
}

.chapter__text { position: relative; display: grid; gap: 2px; }

.chapter__name {
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: var(--track-tight);
  line-height: 1.1;
}

.chapter__mode { font-size: var(--step--1); opacity: 0.85; }

.chapter[aria-current='true'] { color: var(--ink); background: color-mix(in oklab, var(--ink) 15%, transparent); }

@media (hover: hover) and (pointer: fine) {
  .chapter:hover { color: var(--ink); }
}

.chapter:active { transform: scale(0.98); }

/* ---------- Volume: three steps, not a slider.
     Drag and fine positioning fail for this age group. ---------- */

.volume { display: flex; gap: 2px; align-items: flex-end; }

/* The button is a proper 44x56 target; the visible bar is drawn inside
   it. Sizing the button to the bar would give a 30x26 hit area, which is
   under every touch-target guideline and unusable for the age group this
   is built for. */
.volume__step {
  position: relative;
  width: 44px;
  height: 56px;
  cursor: pointer;
  background: none;
  border-radius: var(--r-sm);
  transition: transform var(--dur-press) var(--ease-out-quart);
}

.volume__step::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--ink) 18%, transparent);
  transition: background-color var(--dur-ui) var(--ease-out-quart);
}

.volume__step:nth-child(1)::before { height: 26px; }
.volume__step:nth-child(2)::before { height: 40px; }
.volume__step:nth-child(3)::before { height: 54px; }

.volume__step.is-on::before { background: var(--accent); }
.volume__step:active { transform: scale(0.94); }

/* ============================================================
   FORM
   ============================================================ */

.field { display: grid; gap: var(--space-2); }

.field__label { font-weight: 600; font-size: var(--step-0); }

.field__hint { font-size: var(--step--1); color: var(--ink-muted); }

.input {
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink);
  border: 2.5px solid var(--rule-strong);
  transition: border-color var(--dur-ui) var(--ease-out-quart);
  width: 100%;
}

.input::placeholder { color: var(--bark-600); opacity: 1; }

.input:focus { border-color: var(--accent); outline: none; }

.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.input[aria-invalid='true'] { border-color: var(--berry-500); }

/* Consent rows: unticked by default, one clear purpose each,
   nothing pre-selected. The Children's Code calls this high privacy
   by default; it is also just honest. */
.consent {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--r-md);
  border: 2px solid var(--rule);
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-out-quart),
              background-color var(--dur-ui) var(--ease-out-quart);
}

.consent:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.consent input {
  width: 30px; height: 30px;
  flex: none;
  margin-block-start: 2px;
  accent-color: var(--moss-700);
  cursor: pointer;
}

.consent__body { display: grid; gap: var(--space-1); }
.consent__title { font-weight: 700; }
.consent__note { font-size: var(--step--1); color: var(--ink-muted); }

.form-error {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--berry-500);
  font-weight: 600;
  font-size: var(--step--1);
}

/* ============================================================
   NOTE — an inline aside. Not a side-stripe: a full border and a
   tinted ground, which is what an aside actually needs.
   ============================================================ */

.note {
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: var(--bg-sunk);
  border: 2px solid var(--rule);
  font-size: var(--step-0);
}

.note__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--track-tight);
  margin-block-end: var(--space-2);
}

/* ============================================================
   TRANSCRIPT — collapsed by default, always in the DOM so it is
   crawlable and so a parent can read the words without the video.
   ============================================================ */

.transcript { border-top: 1px solid var(--rule); padding-block-start: var(--space-4); }

.transcript > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: var(--track-tight);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-8);
}

.transcript > summary::-webkit-details-marker { display: none; }

.transcript > summary::before {
  content: '';
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--dur-ui) var(--ease-out-quart);
  flex: none;
}

.transcript[open] > summary::before { transform: rotate(-135deg); }

.transcript__body {
  padding-block-start: var(--space-4);
  color: var(--ink-muted);
  max-width: var(--measure);
}

.transcript__body p + p { margin-block-start: var(--space-3); }