/*
 * Components. Every class here has a specimen in the styleguide
 * (/styleguide.html). New components are added here and to the styleguide
 * before any page uses them. Values come from tokens.css only.
 */

/* ── Button ────────────────────────────────────────────────────────────────── */
.c-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-5);
  border: var(--border-thin) solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  text-decoration: none;
  transition: transform var(--dur-quick) var(--ease-paper), opacity var(--dur-quick);
}
.c-button:active { transform: scale(0.97); }
.c-button:disabled { opacity: 0.45; cursor: default; }
.c-button--quiet { background: transparent; color: var(--color-accent); }
.c-button--small { min-height: var(--space-6); padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.c-button--icon { min-width: var(--tap); padding: 0; border-color: transparent; background: transparent; color: var(--color-text-soft); }
.c-button--icon[hidden] { display: inline-flex; visibility: hidden; }

/* ── Field ─────────────────────────────────────────────────────────────────── */
.c-field { display: flex; flex-direction: column; gap: var(--space-1); }
.c-field__label {
  font-family: var(--font-label); font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); color: var(--color-text-soft);
}
.c-field__input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-rule);
  border-bottom-width: var(--border-thick);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-md);   /* ≥16px, so iOS does not zoom in */
}
textarea.c-field__input { min-height: calc(var(--tap) * 3); resize: vertical; }
.c-field__input:focus { border-color: var(--color-focus); outline: none; }

/* A row of saved / saving / error status under a form. */
.c-status { min-height: 1.5em; font-size: var(--text-sm); font-style: italic; color: var(--color-text-soft); }
.c-status--error { color: var(--color-error); }

/* ── Heading ───────────────────────────────────────────────────────────────── */
.c-heading { display: flex; flex-direction: column; gap: var(--space-1); }
.c-heading__kicker {
  font-family: var(--font-label); font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); color: var(--color-accent);
}
.c-heading__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-2xl); line-height: var(--leading-tight);
}
.c-heading--page .c-heading__title { font-size: var(--text-xl); }

/* ── Text ──────────────────────────────────────────────────────────────────── */
.c-text { display: flex; flex-direction: column; gap: var(--space-3); }
.c-text--lede { font-size: var(--text-lg); }
.c-text--lede > p:first-child::first-letter {
  float: left; font-family: var(--font-display); font-size: var(--text-3xl);
  line-height: 0.85; padding: var(--space-1) var(--space-2) 0 0; color: var(--color-accent);
}
.c-text--aside {
  font-style: italic; color: var(--color-text-soft);
  border-left: var(--border-thick) solid var(--color-highlight); padding-left: var(--space-4);
}
.c-text .unknown-variable { background: var(--color-highlight); padding-inline: var(--space-1); }

/* ── Poem ──────────────────────────────────────────────────────────────────── */
.c-poem { padding: var(--space-3) 0 var(--space-3) var(--space-5); }
.c-poem__lines { font-style: italic; white-space: pre-line; font-size: var(--text-lg); line-height: var(--leading-body); }
.c-poem__credit {
  margin-top: var(--space-2); font-family: var(--font-label); font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); color: var(--color-text-soft);
}

/* ── Instruction: the narrator's steps for today ───────────────────────────── */
.c-instruction {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  box-shadow: var(--shadow-paper);
}
.c-instruction__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); margin-bottom: var(--space-3); }
.c-instruction__steps { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.c-instruction__steps li::marker { font-family: var(--font-display); color: var(--color-accent); }

/* ── Task: something to go and do, chalked on the pavement ──────────────────── */
.c-task {
  background: var(--color-pavement);
  color: var(--color-chalk-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-paper);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.c-task__title {
  font-family: var(--font-label); font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); color: var(--color-highlight);
}
.c-task__text { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-tight); }

/* ── Ornament: a printer's divider ─────────────────────────────────────────── */
.c-ornament {
  display: flex; align-items: center; gap: var(--space-4);
  color: var(--color-highlight); font-family: var(--font-display); font-size: var(--text-lg);
}
.c-ornament::before, .c-ornament::after { content: ''; flex: 1; border-top: var(--border-thin) solid var(--color-rule); }

/* ── Figure: a picture, a photo of Sam's, a painting ───────────────────────── */
.c-figure { display: flex; flex-direction: column; gap: var(--space-2); }
.c-figure__img { width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-paper); background: var(--color-rule); }
.c-figure__caption { font-size: var(--text-sm); font-style: italic; color: var(--color-text-soft); }
.c-figure__credit { font-size: var(--text-xs); color: var(--color-text-faint); }
.c-figure__empty {
  padding: var(--space-6) var(--space-4); text-align: center; font-style: italic;
  color: var(--color-text-faint); border: var(--border-thin) dashed var(--color-rule); border-radius: var(--radius-sm);
}

/* ── Pop-up: the little book that opens on the page ────────────────────────── */
.c-popup { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.c-popup__stage {
  position: relative; aspect-ratio: var(--popup-aspect); width: 100%;
  touch-action: pan-y;       /* let the page scroll; we use horizontal drags */
}
.c-popup__stage canvas { width: 100%; height: 100%; }
.c-popup__hint {
  position: absolute; top: var(--space-2); right: var(--gutter);
  font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  color: var(--color-text-faint); pointer-events: none;
  transition: opacity var(--dur-page);
}
.c-popup__caption { padding-inline: var(--gutter); text-align: center; font-style: italic; font-size: var(--text-sm); color: var(--color-text-soft); }
.c-popup__fallback { padding: var(--space-6) var(--gutter); text-align: center; font-style: italic; color: var(--color-text-faint); }

/* ── Hopscotch: the chalk course on the pavement ───────────────────────────── */
.c-hopscotch { display: flex; flex-direction: column; gap: var(--space-4); }
.c-hopscotch__pavement {
  background: var(--color-pavement);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-paper);
}
.c-hopscotch__course { width: 100%; max-width: 16rem; margin: 0 auto; }
.c-hopscotch__course .square { fill: none; stroke: var(--color-chalk-line); stroke-width: 2.4; stroke-linejoin: round; opacity: 0.9; }
.c-hopscotch__course .square--new { stroke-dasharray: 5 4; }
.c-hopscotch__course .number { fill: var(--color-chalk-line); font-family: var(--font-hand); font-size: 13px; opacity: 0.55; }
.c-hopscotch__course .word { fill: var(--color-chalk-line); font-family: var(--font-hand); font-size: 17px; }
.c-hopscotch__course .word--new { fill: var(--color-highlight); }
.c-hopscotch__words { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Chant: the words, one at a time ───────────────────────────────────────── */
.c-chant { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.c-chant__words { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.c-chant__word {
  font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-tight);
  color: var(--color-text-faint); transition: color var(--dur-quick), transform var(--dur-quick) var(--ease-paper);
}
.c-chant__word[aria-current='true'] { color: var(--color-accent); transform: scale(1.25); }
.c-chant--still .c-chant__word { color: var(--color-text); }
.c-chant__empty { font-style: italic; color: var(--color-text-faint); }

/* ── Photo and voice: things Sam sends back ────────────────────────────────── */
.c-capture {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.c-capture__prompt { font-style: italic; }
.c-capture__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.c-capture__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-2); }
.c-capture__gallery img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.c-capture__recordings { display: flex; flex-direction: column; gap: var(--space-2); }
.c-capture__recordings audio { width: 100%; }
.c-capture__recording-dot {
  width: var(--space-3); height: var(--space-3); border-radius: var(--radius-pill); background: var(--color-accent);
  animation: pulse var(--dur-chant) ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }

/* ── Book cover (the contents screen) ──────────────────────────────────────── */
.c-cover { text-align: center; padding: var(--space-6) 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.c-cover__for { font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: var(--tracking-label); color: var(--color-text-soft); }
.c-cover__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: var(--leading-tight); }
.c-cover__subtitle { font-style: italic; color: var(--color-text-soft); }

/* ── Day card: one day in the contents ─────────────────────────────────────── */
.c-days { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.c-day-card {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: calc(var(--tap) * 1.6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-paper);
  color: inherit; text-decoration: none;
}
.c-day-card__number { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-accent); min-width: 1.5ch; text-align: center; }
.c-day-card__text { flex: 1; display: flex; flex-direction: column; }
.c-day-card__label { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label); color: var(--color-text-soft); }
.c-day-card__title { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-tight); }
.c-day-card__badge {
  font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  color: var(--color-accent-text); background: var(--color-accent); border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
}
.c-day-card--locked { background: transparent; box-shadow: none; border: var(--border-thin) dashed var(--color-rule); color: var(--color-locked); }
.c-day-card--locked .c-day-card__number { color: var(--color-locked); }

/* ── Notice: a whole-screen message (no access, offline) ───────────────────── */
.c-notice { margin: auto; text-align: center; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-7) var(--gutter); }
.c-notice__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); }
.c-notice__text { font-style: italic; color: var(--color-text-soft); }

/* ── Table (admin only) ────────────────────────────────────────────────────── */
.c-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.c-table th {
  text-align: left; font-family: var(--font-label); font-weight: 400; letter-spacing: var(--tracking-label);
  color: var(--color-text-soft); border-bottom: var(--border-thick) solid var(--color-rule); padding: var(--space-2);
}
.c-table td { border-bottom: var(--border-thin) solid var(--color-rule); padding: var(--space-2); vertical-align: top; }
.c-table code { font-size: var(--text-xs); }

/* ── Tabs: a few views of one thing (backstage) ────────────────────────────── */
.c-tabs { display: flex; gap: var(--space-1); padding: var(--space-1); background: var(--color-rule); border-radius: var(--radius-pill); }
.c-tabs__tab {
  flex: 1; min-height: var(--tap); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-text-soft);
  font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: var(--tracking-label);
}
.c-tabs__tab[aria-selected='true'] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-paper); }

/* ── Pick: a list of things to choose one of ───────────────────────────────── */
.c-pick { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.c-pick__item {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: var(--space-1);
  min-height: var(--tap); padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.c-pick__item[aria-current='true'] { border-color: var(--color-accent); box-shadow: var(--shadow-paper); }
.c-pick__title { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-tight); }
.c-pick__meta { font-size: var(--text-sm); color: var(--color-text-soft); }
.c-pick__id { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label); color: var(--color-accent); }

/* ── Range: a labelled slider showing its value ────────────────────────────── */
.c-range { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-1) var(--space-3); }
.c-range__label { font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: var(--tracking-label); color: var(--color-text-soft); }
.c-range__value { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-text); }
.c-range__input { grid-column: 1 / -1; width: 100%; min-height: var(--tap); accent-color: var(--color-accent); }

/* ── Readout: a line of measured facts ─────────────────────────────────────── */
.c-readout { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
.c-readout__item--good::before { content: '✓ '; color: var(--c-moss); }
.c-readout__item--bad { color: var(--color-error); }
.c-readout__item--bad::before { content: '✗ '; }

/* ── Code: a snippet to copy ───────────────────────────────────────────────── */
.c-code {
  white-space: pre-wrap; word-break: break-word;
  font-size: var(--text-sm); padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border-left: var(--border-thick) solid var(--color-highlight);
  border-radius: var(--radius-sm);
}