/*
 * Shared layer for every page (DESIGN.md): tokens, reset, skeleton, components.
 * A child page adds exactly one direction file from themes/ on top of this.
 * Components read token names only. Motion: transform and opacity only.
 */

@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --space-2xs: 4px;  --space-xs: 8px;  --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px;  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px;
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.3125rem;
  --text-xl: 1.625rem;  --text-2xl: 2.0625rem; --text-display: clamp(2.25rem, 9vw, 3.5rem);
  --leading-body: 1.55; --leading-tight: 1.08; --measure: 62ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-reveal: 520ms;
  --touch-min: 44px; --content-max: 34rem;
  --nav-height: 64px;

  /* Neutral direction: pages without a child direction (sign-in, messages, the front page). */
  --color-paper: oklch(98% 0.004 255);  --color-paper-2: oklch(95% 0.007 255);
  --color-ink: oklch(23% 0.02 262);     --color-ink-2: oklch(46% 0.02 262);
  --color-rule: oklch(87% 0.01 255);
  --color-accent: oklch(50% 0.08 205);  --color-accent-ink: oklch(98% 0.004 255);
  --color-accent-text: oklch(50% 0.08 205);
  --color-accent-2: oklch(95% 0.007 255); --color-accent-2-ink: oklch(23% 0.02 262);
  --color-focus: oklch(50% 0.08 205);
  --font-display: "IBM Plex Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, monospace;
  --radius-card: 8px; --radius-control: 8px; --border-card: 1px;
  --display-weight: 600; --display-case: none; --display-tracking: -0.01em;

  /* Semantic colours for light paper; dark directions restate them. */
  --color-danger: oklch(48% 0.19 27); --color-ok: oklch(42% 0.11 150); --color-wait: oklch(45% 0.1 75);
}
@media (prefers-reduced-motion: reduce) { :root { --dur-base: 120ms; --dur-reveal: 120ms; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body);
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: var(--color-accent-text); text-underline-offset: 0.18em; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- Skeleton ---------- */

.wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-md); }
.page { display: flex; flex-direction: column; gap: var(--space-xl); padding-block: var(--space-lg) calc(var(--nav-height) + var(--space-xl) + env(safe-area-inset-bottom, 0px)); }
.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-xs); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-lg); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.notice-page { padding-block: var(--space-3xl); }

.display {
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-display);
  line-height: var(--leading-tight); letter-spacing: var(--display-tracking); text-transform: var(--display-case);
  text-wrap: balance; overflow-wrap: anywhere;
}
.title {
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl);
  line-height: 1.15; letter-spacing: var(--display-tracking); text-transform: var(--display-case); text-wrap: balance;
}
.label { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); }
.lead { font-size: var(--text-lg); line-height: 1.4; max-width: var(--measure); }
.muted { color: var(--color-ink-2); font-size: var(--text-sm); }
.prose { max-width: var(--measure); overflow-wrap: anywhere; }

/* Bottom bar on a phone, top bar from 768 px. Icon and word, never colour alone. */
.nav {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  min-height: var(--nav-height); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-paper); border-top: var(--border-card) solid var(--color-rule);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--touch-min); padding: var(--space-xs) var(--space-2xs);
  color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 600; text-decoration: none;
  border-top: 3px solid transparent; margin-top: calc(-1 * var(--border-card));
}
.nav a[aria-current="page"] { color: var(--color-ink); font-weight: 700; border-top-color: var(--color-ink); }
.nav a:active { transform: translateY(1px); }
@media (min-width: 48rem) {
  :root { --content-max: 46rem; }
  .nav { position: static; display: flex; justify-content: center; gap: var(--space-lg); border-top: 0; border-bottom: var(--border-card) solid var(--color-rule); }
  .nav a { flex-direction: row; gap: var(--space-xs); font-size: var(--text-sm); border-top: 0; border-bottom: 3px solid transparent; margin: 0 0 calc(-1 * var(--border-card)); padding-inline: var(--space-sm); }
  .nav a[aria-current="page"] { border-bottom-color: var(--color-ink); }
  .page { padding-bottom: var(--space-3xl); }
}

/* ---------- Button: one primary per view ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px; padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent); color: var(--color-accent-ink);
  border: var(--border-card) solid transparent; border-radius: var(--radius-control);
  font-weight: 700; font-size: var(--text-md); line-height: 1.2; white-space: nowrap; text-decoration: none;
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[data-busy] { cursor: progress; transform: none; }
.btn[data-busy]::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: anim-spin 700ms linear infinite;
}
.btn[data-state="ok"] { background: var(--color-ok); color: var(--color-paper); }
.btn[data-state="error"] { background: var(--color-danger); color: var(--color-paper); }
.btn--wide { width: 100%; }
.btn--ink { background: var(--color-ink); color: var(--color-paper); }
.btn--ghost { background: transparent; color: var(--color-ink); border: 2px solid var(--color-ink); min-height: var(--touch-min); padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.btn--link { background: none; border: 0; min-height: var(--touch-min); padding: var(--space-xs) 0; color: var(--color-accent-text); text-decoration: underline; font-weight: 600; white-space: normal; }
.btn--link:hover { transform: none; }
@keyframes anim-spin { to { transform: rotate(360deg); } }

/* ---------- Surfaces ---------- */

.card {
  background: var(--color-paper-2); border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card);
  padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0;
}
.card--plain { background: transparent; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px var(--space-sm);
  border: 1.5px solid var(--color-ink-2); border-radius: var(--radius-control);
  font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-2); white-space: nowrap;
}
.chip .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.chip[data-state="open"] { color: var(--color-accent-text); border-color: var(--color-accent-text); }
.chip[data-state="done"] { color: var(--color-ok); border-color: var(--color-ok); }
.chip[data-state="submitted"] { color: var(--color-wait); border-color: var(--color-wait); }

.alert {
  display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-danger); border-radius: var(--radius-control); color: var(--color-ink); font-weight: 600;
}
.alert .icon { color: var(--color-danger); margin-top: 3px; }
.note-ok { display: flex; gap: var(--space-xs); align-items: center; font-weight: 600; color: var(--color-ok); }

/* Home: the next step is the only large thing on the screen. */
.hello { display: flex; flex-direction: column; gap: var(--space-sm); }
.favs { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.fav { padding: 2px var(--space-sm); background: var(--color-accent-2); color: var(--color-accent-2-ink); border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }

.next { display: grid; gap: var(--space-md); }
.next-text { min-width: 0; }
.next-kicker { align-self: flex-start; }
.next .title { font-size: var(--text-2xl); }
.next-returns { font-size: var(--text-lg); font-weight: 600; line-height: 1.35; }
.next-art { order: -1; justify-self: center; width: min(100%, 180px); aspect-ratio: 1; object-fit: contain; }
@media (min-width: 40rem) {
  .next { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); align-items: center; gap: var(--space-lg); }
  .next-art { order: 0; width: 100%; }
}
.teaser { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-sm); border: 1.5px dashed var(--color-ink-2); border-radius: var(--radius-control); color: var(--color-ink-2); font-size: var(--text-sm); }
.teaser .icon { width: 28px; height: 28px; }

.latest { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: var(--space-md); align-items: center; text-decoration: none; color: inherit; }
.latest-thumb { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: var(--radius-control); border: var(--border-card) solid var(--color-rule); background: var(--color-paper-2); }

.links { display: flex; flex-direction: column; }
.links a > span { flex: 1; }
.links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 52px; padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); color: var(--color-ink); font-weight: 600; text-decoration: none; }
.links a:last-child { border-bottom: 1px solid var(--color-rule); }
.links a:active { transform: translateX(2px); }

/* Track: segmented progress (no percent, no points) and the steps as a path. */
.segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.segs li { height: 12px; border: 2px solid var(--color-ink-2); border-radius: 3px; }
.segs li[data-state="done"] { background: var(--color-ink); border-color: var(--color-ink); }
.segs li[data-state="open"], .segs li[data-state="submitted"] { background: var(--color-accent); border-color: var(--color-ink); }

.path { display: flex; flex-direction: column; gap: var(--space-sm); counter-reset: step; }
.path-text { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.path-returns { font-size: var(--text-sm); color: var(--color-ink-2); }
.path-art { width: 72px; height: 72px; object-fit: contain; }
.path-step[data-state="locked"] .path-art { opacity: 0.4; filter: grayscale(1); }
.path-step { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; min-height: 64px; padding: var(--space-sm) var(--space-md); border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; }
.path-step .path-no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--color-ink-2); font-family: var(--font-num); font-weight: 500; }
.path-step .path-title { font-weight: 700; overflow-wrap: anywhere; }
.path-step[data-state="locked"] { background: transparent; color: var(--color-ink-2); border-style: dashed; }
.path-step[data-state="open"] { border-color: var(--color-ink); border-width: max(2px, var(--border-card)); }
.path-step[data-state="open"] .path-no { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-ink); }
.path-step[data-state="done"] .path-no { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
a.path-step:active { transform: scale(0.99); }

/* Step: clip, task, what you learn, starter prompt, redo, submit. */
.block { display: flex; flex-direction: column; gap: var(--space-xs); }
.block > h2 { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); }
.task { font-size: var(--text-lg); line-height: 1.4; }
.clip { position: relative; aspect-ratio: 9 / 16; max-height: 70dvh; width: auto; margin-inline: auto; background: var(--color-paper-2); border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.clip video { width: 100%; height: 100%; object-fit: cover; }
/* The player script adds one button over the whole clip and a progress line along its bottom edge. */
.clip-button { position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer; }
.clip-button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--color-accent); border: 2px solid var(--color-accent-ink); border-radius: var(--radius-control); }
.clip-button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--color-accent-ink); clip-path: polygon(36% 28%, 36% 72%, 74% 50%); }
.clip[data-player="playing"] .clip-button::before, .clip[data-player="playing"] .clip-button::after { opacity: 0; }
.clip-button:focus-visible { outline-offset: -6px; }
.clip-line { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Until the players (T16) attach a source, an empty video takes no room. */
[data-role="clip"]:has(video:not([src])) { display: none; }
[data-role="redo"] .clip:has(video:not([src])) { display: none; }

/* Branching video: with the script the choices wait until the intro has ended. */
.branch-choices .btn { width: 100%; white-space: normal; text-align: center; }
.branch-choices[data-waiting] { display: none; }

.copy { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); background: var(--color-paper-2); border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card); }
.copy textarea { width: 100%; min-height: 3lh; padding: 0; border: 0; background: transparent; resize: none; line-height: 1.5; field-sizing: content; }
.copy textarea:focus-visible { outline: none; }
.copy:focus-within { border-color: var(--color-ink); }
.copy .btn { align-self: stretch; }
.copy[data-copy-ready] { cursor: copy; }
.copy[data-copy-ready]:active { transform: scale(0.995); }

.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field > label, .field > legend { font-weight: 700; }
.field .hint { color: var(--color-ink-2); font-size: var(--text-sm); }
.field .error { color: var(--color-danger); font-size: var(--text-sm); font-weight: 600; }
.input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md);
  background: var(--color-paper); color: var(--color-ink);
  border: 2px solid var(--color-ink-2); border-radius: var(--radius-control);
}
.field textarea { min-height: 8.5em; resize: vertical; line-height: 1.5; field-sizing: content; }
.input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--color-ink); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }

.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 132px; padding: var(--space-md); border: 2px dashed var(--color-ink-2); border-radius: var(--radius-card); background: var(--color-paper-2); text-align: center; font-weight: 600; }
.drop .icon { width: 32px; height: 32px; }
.drop input[type="file"] { max-width: 100%; font-size: var(--text-sm); }
.drop:focus-within { border-color: var(--color-ink); border-style: solid; }
.drop[data-has-file] { border-style: solid; border-color: var(--color-ink); }
.drop-preview { max-height: 180px; border-radius: var(--radius-control); }

/* A guided step (R75): one thing on the screen, one big button, four dots that say where the child is. */
.mast--quest .title { margin: 0; }
.quest ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.quest li { position: relative; }
.quest li + li::before { content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 4px; background: var(--color-rule); z-index: 0; }
.quest li[data-done] + li::before, .quest li[data-done]::before { background: var(--color-ink); }
.quest a, .quest-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); min-height: var(--touch-min); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.quest-dot { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 4px solid var(--color-rule); background: var(--color-paper); }
.quest-dot .icon { width: 20px; height: 20px; }
.quest li[data-done] .quest-dot { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.quest li[aria-current="step"] .quest-item { color: var(--color-ink); }
.quest li[aria-current="step"] .quest-dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: 0 0 0 5px var(--color-paper-2); }
.stage { display: flex; flex-direction: column; gap: var(--space-lg); margin: 0; padding: 0; border: 0; min-width: 0; }
.stage > .btn--link { align-self: center; }
.stage--done { align-items: center; text-align: center; padding: var(--space-xl) var(--space-md); border: var(--border-card) solid var(--color-accent); border-radius: var(--radius-card); background: var(--color-paper-2); }
.stage-art { width: min(100%, 280px); height: auto; }
.stage-get { display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); font-weight: 600; }
.stage-get .icon { flex: none; margin-top: 2px; color: var(--color-accent-text); }
.picks { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; border: 0; min-width: 0; }
.pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: center; min-height: 64px; padding: var(--space-sm) var(--space-md); border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); font-size: var(--text-md); font-weight: 600; cursor: pointer; }
.pick input { width: 26px; height: 26px; margin: 0; accent-color: var(--color-ink); }
.pick > span { display: flex; gap: var(--space-xs); align-items: center; }
.pick:has(input:checked) { border-color: var(--color-ink); background: var(--color-paper-2); box-shadow: 0 4px 0 var(--color-ink); }
.pick:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.pick-own { display: none; }
.picks:has(.pick--own input:checked) .pick-own { display: flex; }
.pick-own textarea { min-height: 3lh; }
.todo { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; counter-reset: todo; font-size: var(--text-lg); line-height: 1.35; }
.todo li { counter-increment: todo; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.todo li::before { content: counter(todo); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: 700; }
.todo li > span { align-self: center; }
.own-picks { display: flex; flex-direction: column; gap: var(--space-2xs); }
.own-picks .btn { justify-content: flex-start; width: 100%; white-space: normal; text-align: left; font-weight: 600; }

/* Waiting for the review: the one thing on the screen. Something moves, so it is plain that the page is alive. */
.wait { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-xl) var(--space-md); text-align: center; border: var(--border-card) solid var(--color-accent); border-radius: var(--radius-card); background: var(--color-paper-2); }
.wait:focus { outline: none; }
.wait-art img, .wait-art .icon { width: 160px; height: 160px; object-fit: contain; animation: anim-float 2.4s ease-in-out infinite; }
.wait-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-2xl); letter-spacing: var(--display-tracking); text-transform: var(--display-case); line-height: 1.1; }
.wait-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.wait-steps li { display: flex; align-items: center; gap: var(--space-2xs); min-height: var(--touch-min); padding: var(--space-2xs) var(--space-sm); border: 2px solid var(--color-rule); border-radius: 999px; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); }
.wait-steps li[data-done] { border-color: var(--color-ok); color: var(--color-ok); }
.wait-steps li[data-now] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.wait-dots { display: inline-flex; gap: 4px; }
.wait-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: anim-dot 1.2s ease-in-out infinite; }
.wait-dots i:nth-child(2) { animation-delay: 0.2s; }
.wait-dots i:nth-child(3) { animation-delay: 0.4s; }
.wait-when { font-size: var(--text-lg); }
@keyframes anim-float { 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes anim-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.fold > summary { display: flex; align-items: center; justify-content: center; min-height: var(--touch-min); cursor: pointer; color: var(--color-accent-text); font-weight: 600; text-decoration: underline; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold[open] > summary { margin-bottom: var(--space-lg); }
.received { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-md); border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.received img { width: 96px; height: 96px; object-fit: contain; }
.received strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); letter-spacing: var(--display-tracking); text-transform: var(--display-case); line-height: 1.15; }

/* Result: covered until tapped, one reveal, the made thing is the hero. */
/* A reveal may start larger than its place (a stamp, a flip); it never widens the page. */
.reveal { position: relative; border-radius: var(--radius-card); }
.reveal-cover { display: none; }
.reveal.is-covered > .reveal-body { visibility: hidden; }
.reveal.is-covered > .reveal-cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm);
  position: absolute; inset: 0; z-index: 1; width: 100%; padding: var(--space-lg);
  background: var(--color-accent); color: var(--color-accent-ink); border: var(--border-card) solid var(--color-ink); border-radius: var(--radius-card);
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); text-transform: var(--display-case); cursor: pointer;
}
/* The ring sits inside the cover: a direction may clip the reveal box. */
.reveal-cover:focus-visible { outline-color: var(--color-accent-ink); outline-offset: -8px; }
.reveal.is-open > .reveal-body { animation: anim-reveal var(--dur-reveal) var(--ease-out) both; }
@keyframes anim-reveal { from { opacity: 0; transform: translateY(12px); } }
.reveal-body:focus { outline: none; }
.made { display: flex; flex-direction: column; gap: var(--space-sm); }
.made audio { width: 100%; }
.made video { width: 100%; border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-ink); }
.made img { width: 100%; border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.made-file { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); font-weight: 700; overflow-wrap: anywhere; }
.made-text pre { margin: 0; padding: var(--space-md); border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); font-family: var(--font-num); font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback { white-space: pre-line; }

/* My things: newest first; an empty place shows what will fill it. */
.things { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--space-md); }
.thing { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; padding: var(--space-sm); border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.thing-face { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink-2); text-decoration: none; }
.thing-face img { width: 100%; height: 100%; object-fit: cover; }
.thing-face .icon { width: 40px; height: 40px; }
.thing-title { font-weight: 700; font-size: var(--text-sm); line-height: 1.3; overflow-wrap: anywhere; }
.thing .btn--ghost { width: 100%; white-space: normal; text-align: center; padding-inline: var(--space-xs); gap: 6px; font-size: var(--text-xs); }
.thing--next { background: transparent; border-style: dashed; }
.thing-state { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; color: var(--color-ok); }
.sent { display: flex; flex-direction: column; }
.sent-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); gap: var(--space-md); align-items: start; padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.sent-row .btn--ghost { width: 100%; white-space: normal; }
.thing-more summary { min-height: var(--touch-min); display: flex; align-items: center; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-text); cursor: pointer; }
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); text-align: center; padding-block: var(--space-lg); }
.empty img { width: min(60%, 240px); }

/* First visit: three short steps. */
.steps-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-xs); }
.steps-bar li { padding-top: var(--space-xs); border-top: 4px solid var(--color-rule); font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-2); }
.steps-bar li[aria-current="step"] { border-top-color: var(--color-ink); color: var(--color-ink); }
.steps-bar li[data-done] { border-top-color: var(--color-ink-2); }

.dirs { display: grid; gap: var(--space-lg); }
.dir { position: relative; display: block; cursor: pointer; }
.dir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dir-face { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--color-paper); color: var(--color-ink); border: 3px solid var(--color-rule); border-radius: var(--radius-card); font-family: var(--font-body); }
.dir-face img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.dir-body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); }
.dir-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-2xl); text-transform: var(--display-case); letter-spacing: var(--display-tracking); line-height: 1.1; }
.dir-pick { display: none; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; }
.dir input:checked + .dir-face { border-color: var(--color-ink); outline: 4px solid var(--color-accent); outline-offset: 2px; }
.dir input:checked + .dir-face .dir-pick { display: inline-flex; }
.dir input:focus-visible + .dir-face { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* PIN: four big cells drawn behind one numeric input. */
.pin { width: 13.5rem; max-width: 100%; min-height: 64px; padding: 0 0 0 1.05rem; font-family: var(--font-num); font-size: 2rem; letter-spacing: 2.05rem;
  border: 0; border-radius: 0; background: repeating-linear-gradient(90deg, var(--color-paper-2) 0 3rem, transparent 3rem 3.4rem); }
.pin-form { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
/* The door: the PIN page and the "soon" page. One narrow column in the middle of the screen. */
.door { min-height: 100dvh; justify-content: center; align-items: center; padding-block: var(--space-xl); }
.door-in { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); width: min(100%, 22rem); text-align: center; }
.door-art { width: min(100%, 300px); height: auto; }
.door .pin-form { align-items: center; width: 100%; }
.door .alert { text-align: left; }
.door .field { width: 100%; text-align: left; }
.door .field .input { width: 100%; }

/* What AI gives you: one card, one question to copy. */
.gives { display: grid; gap: var(--space-md); }
/* "Minu AI" (R72): one card per tool, then the habits that hold for every tool. */
.tool, .tool-section { display: flex; flex-direction: column; gap: var(--space-xs); }
.tool-points { display: flex; flex-direction: column; gap: var(--space-xs); }
.tool-points li { padding-left: var(--space-sm); border-left: 3px solid var(--color-rule); }
.tool .tool-points { counter-reset: tool; }
.tool .tool-points li { counter-increment: tool; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-xs); padding-left: 0; border-left: 0; }
.tool .tool-points li::before { content: counter(tool); font-weight: 700; color: var(--color-accent-text); }
@media (min-width: 48rem) { .gives { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dirs { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }
@media (min-width: 64rem) { .gives { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.give h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); text-transform: var(--display-case); letter-spacing: var(--display-tracking); line-height: 1.2; }

.facts { display: flex; flex-direction: column; gap: var(--space-sm); }
.facts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.facts .icon { margin-top: 3px; }

/* ---------- Page art and the wide layout ---------- */

/* The top of a page: words on the left, the direction's own picture beside them (above them on a phone). */
.mast { display: grid; gap: var(--space-sm); align-items: center; }
.mast-text { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.mast-art { order: -1; width: 100%; height: 104px; object-fit: contain; object-position: right bottom; }
.crumb { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); align-items: baseline; font-size: var(--text-sm); font-weight: 600; }
.crumb span { color: var(--color-ink-2); }
/* The bottom of a page: a row of small things of the direction. */
.foot { width: 100%; height: 84px; margin-top: var(--space-md); object-fit: cover; object-position: center bottom; }

/* From 64rem the page has two columns: the work, and beside it what comes back and why. */
.cols { display: grid; gap: var(--space-xl); }
.cols-main, .cols-side { min-width: 0; }
.two { display: grid; gap: var(--space-xl); }
.form-grid { display: grid; gap: var(--space-md); }
@media (min-width: 48rem) {
  .mast:has(.mast-art) { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-lg); }
  .mast-art { order: 0; height: auto; max-height: 180px; }
  .foot { height: auto; max-height: 150px; object-fit: contain; }
  .two, .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Fields side by side share their rows (label, hint, control, error), so the controls start on one line
     also when only one of them has a hint or a two-line label. */
  @supports (grid-template-rows: subgrid) {
    /* The grid's own row gap would also open between the shared rows of one field (an empty hint row costs
       two gaps), so the space between two rows of fields is a margin on the second row onward. */
    .form-grid { row-gap: 0; }
    .form-grid > .field:nth-child(n+3) { margin-top: var(--space-md); }
    .form-grid > .field { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .form-grid > .field > label { grid-row: 1; align-self: end; }
    .form-grid > .field > .hint { grid-row: 2; margin-top: var(--space-2xs); }
    .form-grid > .field > :is(.input, select, textarea, .drop) { grid-row: 3; margin-top: var(--space-2xs); }
    .form-grid > .field > .error { grid-row: 4; margin-top: var(--space-2xs); }
  }
}
@media (min-width: 64rem) {
  :root { --content-max: 70rem; }
  .mast:has(.mast-art) { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
  .mast-art { max-height: 200px; }
  .beat-art { width: 80px; height: 80px; }
  .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--space-2xl); align-items: start; }
  .cols-main { grid-column: 1; grid-row: 1; }
  .cols-side { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-lg); }
}

/* What comes back, shown before anything is asked of the child. */
.reward { display: grid; grid-template-columns: minmax(0, 104px) minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-md); background: var(--color-paper-2); border: var(--border-card) solid var(--color-rule); border-radius: var(--radius-card); }
.reward-art { width: 100%; aspect-ratio: 1; object-fit: contain; }
.reward-art--icon { display: grid; place-items: center; color: var(--color-ink-2); }
.reward-art--icon .icon { width: 44px; height: 44px; }
.reward-text { font-size: var(--text-lg); font-weight: 700; line-height: 1.3; }
.skill { display: flex; flex-direction: column; gap: var(--space-2xs); }
.skill-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); letter-spacing: var(--display-tracking); text-transform: var(--display-case); line-height: 1.2; }
@media (min-width: 64rem) {
  .reward { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: var(--space-lg); }
  .reward-art { width: min(100%, 220px); justify-self: center; }
}

/* The three beats of a step, in working order. The number is the order; the picture says what the beat is. */
.beats { display: flex; flex-direction: column; gap: var(--space-xl); counter-reset: beat; }
.beat { counter-increment: beat; display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-lg); border-top: var(--border-card) solid var(--color-rule); scroll-margin-top: var(--space-lg); }
.beat:first-child { padding-top: 0; border-top: 0; }
.beat-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; }
.beat-head::before { content: counter(beat); display: grid; place-items: center; width: 40px; height: 40px; background: var(--color-ink); color: var(--color-paper); border-radius: 50%; font-family: var(--font-num); font-weight: 500; }
.beat-art { order: 3; width: 72px; height: 72px; object-fit: contain; }
.jump a { font-size: var(--text-sm); font-weight: 600; }
.prompt { display: flex; flex-direction: column; gap: var(--space-xs); }
.prompt .hint { color: var(--color-ink-2); font-size: var(--text-sm); }
.note { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--text-sm); font-weight: 600; }
.note .icon { margin-top: 2px; color: var(--color-accent-text); }
.copy-note { font-size: var(--text-sm); font-weight: 600; color: var(--color-ok); }
/* What the labelled lines of the prompt do (R71). The move this step teaches carries the accent. */
/* The new move of the step: the one line of the prompt the child writes on their own (R74). */
.own { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); background: var(--color-paper-2); border: var(--border-card) solid var(--color-accent); border-radius: var(--radius-card); }
.own-head { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin: 0; font-size: var(--text-lg); font-weight: 700; }
.own-example { display: flex; flex-direction: column; gap: var(--space-2xs); padding-left: var(--space-sm); border-left: 3px solid var(--color-rule); font-size: var(--text-sm); }
.own .field textarea { min-height: 3lh; background: var(--color-paper); }
.field--line textarea { min-height: 3lh; }
.moves { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-xs); }
.moves-list { display: flex; flex-direction: column; gap: var(--space-2xs); }
.move { display: grid; gap: var(--space-2xs) var(--space-md); padding: var(--space-xs) var(--space-sm); border-left: 3px solid var(--color-rule); }
.move dt { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); align-items: center; font-weight: 700; }
.move dd { margin: 0; font-size: var(--text-sm); }
.move[data-new] { border-left-color: var(--color-accent); background: var(--color-paper-2); }
.move-new { padding: 1px var(--space-xs); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-control); font-size: var(--text-xs); font-weight: 700; }
@media (min-width: 36rem) {
  .move { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); align-items: baseline; }
  .move dt { flex-direction: column; align-items: flex-start; }
}
.done-when { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); align-items: start; padding: var(--space-md); border: 1.5px dashed var(--color-ink-2); border-radius: var(--radius-control); }
.done-when .icon { margin-top: 2px; }
.status { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.status.received { display: grid; }

/* Home: the help box (R61). Asking is the child's own move, so it is a quiet second action, not the main one. */
.help-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.help-box .btn { justify-self: start; }
@media (min-width: 36rem) { .help-box { grid-template-columns: minmax(0, 1fr) auto; } }

/* Home: how the place works, for a child who has nothing back yet. */
.how { display: flex; flex-direction: column; gap: var(--space-sm); }
.how-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.how-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-sm); align-items: center; font-weight: 600; }
.how-list li:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.how-list img { width: 56px; height: 56px; object-fit: contain; }
.after { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-md); align-items: start; padding: var(--space-md); border: 1.5px dashed var(--color-ink-2); border-radius: var(--radius-card); }
.after:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.after img { width: 72px; height: 72px; object-fit: contain; }

/* Front page and public pages. */
.front { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-lg); text-align: center; }

/* Reduced motion: every spatial move becomes a short fade. */
@media (prefers-reduced-motion: reduce) {
  [class*="anim-"], .reveal.is-open > .reveal-body, .reveal.is-open > .reveal-body * { animation: anim-fade 150ms linear both !important; }
  .reveal.is-open::before, .reveal.is-open::after { animation: none !important; }
  .wait-art img, .wait-art .icon, .wait-dots i { animation: none; }
  .btn, .btn:hover, .btn:active, .nav a:active, a.path-step:active, .links a:active, .copy[data-copy-ready]:active { transform: none; transition: none; }
  .btn[data-busy]::before { animation: none; }
}
@keyframes anim-fade { from { opacity: 0; } }