/* [family-a] Family Voices (public/voices.js), recording and playing voice clips (public/voice-recorder.js),
   voice messages (public/screens/messages.js), the Calm Corner (public/calm.js), Sleep Sounds
   (public/sleep.js) and the save, spend and give jars (public/jars.js). Tokens from public/ui/tokens.css;
   the age skins come from [data-skin] on the page. Every grid uses minmax(0, 1fr) so nothing pushes the
   page wider at 375 px or at 200% zoom. */

/* ---------- recording and playing ---------- */
.vr-hold.is-on { background: var(--danger); color: #fff; border-color: var(--danger); }
.vr-bubble { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: 0 6px 24px rgb(0 0 0 / 0.25); max-width: calc(100vw - 32px); }
.vr-bubble small { opacity: 0.8; }
.vr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 calc(var(--vr-level, 0) * 10px) rgb(224 101 79 / 0.35); transition: box-shadow 0.1s; }
.vr-panel { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-3) 0; }
.vr-record { min-height: 56px; padding-inline: var(--space-5); }
.vr-live { display: flex; align-items: center; gap: var(--space-3); }
.vr-level { width: 40px; height: 40px; border-radius: 50%; background: var(--danger); opacity: 0.85; transform: scale(calc(0.6 + var(--vr-level, 0) * 0.6)); transition: transform 0.1s; }
.vr-bigtime { font-family: var(--font-display); font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.vr-audio { width: 100%; max-width: 420px; }
.vr-listen { margin: 0; font-weight: var(--weight-strong); }
.vr-player { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.vr-play { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); cursor: pointer; flex: none; }
.vr-play .ui-icon { width: 22px; height: 22px; }
.vr-play--big { width: 72px; height: 72px; }
.vr-play--big .ui-icon { width: 34px; height: 34px; }
.vr-player.is-playing .vr-play { background: var(--ink); color: var(--bg); }
.vr-len { font-size: var(--text-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 2.6em; }

/* ---------- voice messages ---------- */
.m-voice { display: grid; gap: var(--space-1); justify-items: start; min-width: 0; }
.m-voice-words { font-size: var(--text-sm); opacity: 0.9; overflow-wrap: anywhere; }

/* ---------- Family Voices ---------- */
.fv-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.fv-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.fv-row.is-new { background: var(--accent-soft); }
.fv-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fv-row-title { margin: 0; font-weight: var(--weight-strong); overflow-wrap: anywhere; }
.fv-row-sub { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.fv-kid { display: grid; gap: var(--space-3); }
.fv-kid-head { display: flex; align-items: center; gap: var(--space-3); }
.fv-kid-head p { margin: 0; }
.fv-card { display: grid; gap: var(--space-2); }
.fv-card.is-waiting { border-left: 4px solid var(--accent); }
.fv-card.is-rejected { opacity: 0.7; }
.fv-card-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.fv-words summary { cursor: pointer; color: var(--ink-muted); font-size: var(--text-sm); }
.fv-words p { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.fv-book { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.fv-book-title { margin: 0; font-weight: var(--weight-strong); }
.fv-book-pic { width: 100%; max-width: 560px; height: auto; border-radius: var(--radius-lg); }
.fv-book-text { margin: 0; font-size: var(--text-lg); line-height: 1.5; max-width: 40em; white-space: pre-line; text-align: start; }
.fv-book-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; max-width: 560px; }
.fv-book-count { margin: 0; }
.fv-have { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
[data-skin="little"] .fv-row { padding: var(--space-3); }

/* ---------- the Calm Corner ---------- */
.cc-page { display: grid; gap: var(--space-3); }
.cc-breath { display: grid; justify-items: center; gap: var(--space-2); text-align: center; padding: var(--space-3) 0; }
.cc-bubble-wrap { width: 220px; height: 220px; display: grid; place-items: center; }
.cc-bubble { position: relative; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, var(--teal-soft, #A6DEDA) 35%, var(--teal, #2B9A94) 100%); box-shadow: 0 0 40px rgb(43 154 148 / 0.35); transform: scale(0.45); transition: transform 0.12s linear; overflow: hidden; }
.cc-breath-word { margin: 0; font-family: var(--font-display); font-size: 1.6rem; }
.cc-breath-sub { margin: 0; }
.cc-check { display: grid; gap: var(--space-3); }
.cc-q { margin: 0; font-size: var(--text-lg); }
.cc-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-2); }
.cc-faces.is-little { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
.cc-face { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2); border: 3px solid transparent; border-radius: var(--radius-lg); background: var(--surface-sunken); cursor: pointer; min-height: 44px; }
.cc-face.is-on { border-color: var(--accent); background: var(--accent-soft); }
.cc-face-art { display: block; line-height: 0; }
.cc-face-name { font-weight: var(--weight-strong); font-size: var(--text-sm); }
.cc-picked { display: flex; align-items: center; gap: var(--space-3); }
.cc-picked p { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-strong); }
.cc-sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); align-items: end; }
.cc-size { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-1); border: 2px solid transparent; border-radius: var(--radius-md); background: none; cursor: pointer; min-height: 44px; }
.cc-size.is-on { border-color: var(--accent); background: var(--accent-soft); }
.cc-size-dot { width: calc(14px + var(--cc-size) * 9px); height: calc(14px + var(--cc-size) * 9px); border-radius: 50%; background: var(--cc-color, var(--accent)); }
.cc-size-name { font-size: var(--text-xs, 0.75rem); text-align: center; }
.cc-words { width: 100%; }
.cc-ideas { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); }
.cc-shared { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.cc-shared-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cc-shared-words { margin: 0; overflow-wrap: anywhere; }
.cc-page.is-teen .cc-bubble, .cc-page.is-grown .cc-bubble { box-shadow: none; }

/* ---------- Sleep Sounds ---------- */
.sl-page { display: grid; gap: var(--space-3); }
.sl-night { display: grid; gap: var(--space-2); justify-items: center; text-align: center; padding: var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(180deg, #1A2442, #243152); color: #FBF7EC; }
.sl-now { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }
.sl-left { margin: 0; opacity: 0.85; min-height: 1.4em; }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-2); }
.sl-sound { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-2); border-radius: var(--radius-lg); border: 3px solid transparent; background: #243152; color: #FBF7EC; cursor: pointer; font-weight: var(--weight-strong); min-height: 44px; }
.sl-sound[aria-pressed="true"] { border-color: #FFD35C; box-shadow: 0 0 18px rgb(255 211 92 / 0.35); }
.sl-art { line-height: 0; }
.sl-story { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); }
.sl-story-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sl-line { margin: 0; font-style: italic; color: var(--ink-muted); min-height: 1.4em; }
.bt-card-sleep { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-weight: var(--weight-strong); }

/* ---------- jars ---------- */
.jr-slot:empty { display: none; }
.jr-kid { display: grid; gap: var(--space-3); }
.jr-jars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); text-align: center; }
.jr-jar { display: grid; justify-items: center; gap: 2px; }
.jr-jar-art { line-height: 0; }
.jr-jar-n { font-family: var(--font-display); font-size: 1.5rem; }
.jr-jar-name { font-size: var(--text-sm); color: var(--ink-muted); }
.jr-goal { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.jr-goal-art { line-height: 0; flex: none; }
.jr-goal-main { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.jr-bar { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.jr-bar span { display: block; height: 100%; background: #2B9A94; border-radius: inherit; }
.jr-cause { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.jr-cause-main { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.jr-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: var(--space-2); }
.jr-pic { display: grid; place-items: center; min-height: 56px; border: 3px solid transparent; border-radius: var(--radius-md); background: var(--surface-sunken); cursor: pointer; }
.jr-pic.is-on { border-color: var(--accent); background: var(--accent-soft); }
.jr-sum { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jr-chip { padding: 2px var(--space-2); border-radius: 999px; font-size: var(--text-sm); font-weight: var(--weight-strong); background: var(--surface-sunken); }
.jr-chip--spend { box-shadow: inset 4px 0 0 #F2A93B; }
.jr-chip--save { box-shadow: inset 4px 0 0 #2B9A94; }
.jr-chip--give { box-shadow: inset 4px 0 0 #E0654F; }
.jr-kid.is-little .jr-jar-n { font-size: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .cc-bubble, .vr-level, .vr-dot { transition: none; }
}