/* Solari · product demo styling
   The animated app recreations on the homepage. Rebuilt from the shipped
   SwiftUI source (Theme.swift, PlanView.swift, CookModeView.swift) so the
   web version matches the real app; data is a fictional demo family.
   All motion is CSS transitions keyed off [data-state], set by demo.js.

   Sizing: each screen is a CSS container. --pt is one iPhone logical
   point (screen width 393pt), so spec values copy over 1:1. */

/* ─── Device frame ─────────────────────────────────────────────────── */

.phone {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 401 / 860;
  margin: 0 auto;
}

.phone-body {
  position: absolute;
  inset: 0;
  background: #2B2A25;             /* warm hardware black, never #000 */
  border-radius: 15cqw;
  box-shadow:
    inset 0 0 0 0.45cqw #4C4B42,   /* chamfer highlight */
    0 0.5cqw 1.2cqw rgba(31, 31, 28, .12),
    0 7cqw 16cqw rgba(31, 31, 28, .16);
}

.phone-body::before {
  content: "";
  position: absolute;
  left: -0.45cqw;
  top: 25cqw;
  width: 0.45cqw;
  height: 18cqw;
  background: #3B3A33;
  border-radius: 0.3cqw 0 0 0.3cqw;
  box-shadow: 0 26cqw 0 0 #3B3A33; /* second volume button */
}
.phone-body::after {
  content: "";
  position: absolute;
  right: -0.45cqw;
  top: 33cqw;
  width: 0.45cqw;
  height: 14cqw;
  background: #3B3A33;
  border-radius: 0 0.3cqw 0.3cqw 0;
}

.phone-screen {
  container-type: inline-size;
  position: absolute;
  inset: 2.4cqw;
  overflow: hidden;
  border-radius: 12.8cqw;
  background: var(--cream-100, #FAF6E9);
}

.phone-island {
  position: absolute;
  top: 5cqw;
  left: 50%;
  width: 30cqw;
  height: 8.6cqw;
  transform: translateX(-50%);
  background: #151512;
  border-radius: 999px;
  z-index: 9;
}

.phone-home {
  position: absolute;
  bottom: 4.2cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 33cqw;
  height: 1.2cqw;
  border-radius: 999px;
  background: rgba(31, 31, 28, .3);
  z-index: 9;
}

/* every app surface (full screen or cropped panel) */
.app {
  --pt: 0.2545cqw; /* one logical point at 393pt width */
  position: absolute;
  inset: 0;
  font-family: var(--font-sans, "Inter", sans-serif);
  color: var(--ink-900, #1F1F1C);
  -webkit-font-smoothing: antialiased;
  line-height: 1.25;
}

.sb {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--pt) * 54);
  padding: calc(var(--pt) * 10) calc(var(--pt) * 26) 0 calc(var(--pt) * 34);
}
.sb-time {
  font-size: calc(var(--pt) * 16.5);
  font-weight: 650;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
.sb svg { width: calc(var(--pt) * 68); height: calc(var(--pt) * 13); display: block; }

/* ─── Caption under a demo ─────────────────────────────────────────── */

.demo-caption {
  min-height: 1.6em;
  margin: 22px 0 0;
  text-align: center;
  color: var(--ink-500, #6B675C);
  font: italic 400 17px/1.5 var(--font-serif, "Source Serif 4", serif);
}
.demo-caption.is-live { animation: caption-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes caption-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Screen-crop panel (beat visuals, no bezel) ───────────────────── */

.panel {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cream-300, #DBCFB6);
  border-radius: 18px;
  background: var(--cream-100, #FAF6E9);
  box-shadow: 0 18px 50px rgba(31, 31, 28, .08);
}
.panel .app { position: relative; inset: auto; }

/* ══════════════════════════════════════════════════════════════════
   HERO · the week screen (PlanView)
   States: empty → press → drafting → drafting-2 → fill-1..7 → full
           → wed-swipe → wed-commit → rest → outro
   ══════════════════════════════════════════════════════════════════ */

.wk { display: flex; flex-direction: column; height: 100%; }

/* week navigator bar */
.wk-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pt) * 14);
  padding: calc(var(--pt) * 12) calc(var(--pt) * 20);
  border-bottom: 1px solid var(--cream-200, #EDE4D2);
}
.wk-nav-date {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 20);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.wk-nav-mark { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); }
.wk-nav-chev {
  width: calc(var(--pt) * 10);
  height: calc(var(--pt) * 17);
  margin: 0 calc(var(--pt) * 12);
  color: var(--sage-700, #4F7A3A);
}

/* header pill rail (appears once a week exists) */
.wk-rail {
  display: flex;
  gap: calc(var(--pt) * 4);
  margin: calc(var(--pt) * 10) calc(var(--pt) * 20);
  padding: calc(var(--pt) * 4);
  border: 1px solid var(--cream-200, #EDE4D2);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wk-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pt) * 5);
  min-height: calc(var(--pt) * 40);
  border-radius: calc(var(--pt) * 14);
  background: rgba(236, 239, 223, .72);
  color: var(--sage-700, #4F7A3A);
  font-size: calc(var(--pt) * 12);
  font-weight: 600;
}
.wk-pill svg { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); }
.wk-pill.is-amber {
  background: rgba(247, 233, 207, .58);
  box-shadow: inset 0 0 0 1.2px rgba(226, 152, 49, .54);
  color: var(--ink-700, #3A3A33);
}

/* ── empty state ── */
.wk-empty {
  position: absolute;
  inset: calc(var(--pt) * 100) calc(var(--pt) * 24) calc(var(--pt) * 90);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(var(--pt) * 10);
  transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wk-empty-logo { width: calc(var(--pt) * 108); height: calc(var(--pt) * 108); }
.wk-empty-title {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 20);
  font-weight: 600;
}
.wk-empty-sub {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 17);
  color: var(--ink-500, #6B675C);
  margin-bottom: calc(var(--pt) * 14);
}
.wk-draft-btn {
  width: 100%;
  min-height: calc(var(--pt) * 58);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pt) * 2);
  border-radius: calc(var(--pt) * 14);
  background: var(--sage-700, #4F7A3A);
  color: var(--cream-100, #FAF6E9);
  transition: transform 150ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wk-draft-btn .t1 { font-size: calc(var(--pt) * 17); font-weight: 600; }
.wk-draft-btn .t2 {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 13);
  opacity: .88;
}
.wk-empty-ask { margin-top: calc(var(--pt) * 12); }
.wk-empty-ask .a1 {
  font-size: calc(var(--pt) * 15);
  font-weight: 600;
  color: var(--sage-700, #4F7A3A);
}
.wk-empty-ask .a2 {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 13);
  color: var(--ink-400, #8E8A7E);
  margin-top: calc(var(--pt) * 3);
}
.wk-empty-scratch {
  margin-top: calc(var(--pt) * 10);
  font-size: calc(var(--pt) * 15);
  font-weight: 600;
  color: var(--sage-700, #4F7A3A);
}

[data-state="press"] .wk-draft-btn { transform: scale(0.97); filter: brightness(0.92); }

/* ── drafting state ── */
.wk-drafting {
  position: absolute;
  inset: calc(var(--pt) * 140) calc(var(--pt) * 24) calc(var(--pt) * 120);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pt) * 22);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wk-throbber { width: calc(var(--pt) * 132); height: calc(var(--pt) * 132); }
/* the official mark's five rays light in a left→right wave */
.wk-throbber .ray { animation: ray-wave 2.3s ease-in-out infinite; opacity: .26; }
.wk-throbber .ray-1 { animation-delay: 0s; }
.wk-throbber .ray-2 { animation-delay: .24s; }
.wk-throbber .ray-3 { animation-delay: .48s; }
.wk-throbber .ray-4 { animation-delay: .72s; }
.wk-throbber .ray-5 { animation-delay: .96s; }
@keyframes ray-wave {
  0%, 55%, 100% { opacity: .26; }
  22% { opacity: 1; }
}
.wk-throbber .dome {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: dome-breathe 2s ease-in-out infinite alternate;
}
@keyframes dome-breathe { from { transform: scale(1); } to { transform: scale(1.04); } }

.wk-quip {
  position: relative;
  width: 100%;
  height: calc(var(--pt) * 44);
  text-align: center;
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 15);
  color: var(--ink-500, #6B675C);
}
.wk-quip span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease-in-out;
}
[data-state="drafting"] .wk-quip .q1 { opacity: 1; }
[data-state="drafting-2"] .wk-quip .q2 { opacity: 1; }

[data-state="drafting"] .wk-drafting,
[data-state="drafting-2"] .wk-drafting { opacity: 1; }

[data-state="drafting"] .wk-empty,
[data-state="drafting-2"] .wk-empty { opacity: 0; }

/* ── the week list ── */
.wk-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 6) calc(var(--pt) * 20) 0;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.wk-intro {
  position: relative;
  padding: 0 calc(var(--pt) * 24) 0 calc(var(--pt) * 4);
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 15);
  line-height: 1.45;
  color: var(--ink-500, #6B675C);
}
.wk-intro .x {
  position: absolute;
  top: calc(var(--pt) * 2);
  right: calc(var(--pt) * 4);
  font-size: calc(var(--pt) * 11);
  font-weight: 700;
  color: var(--ink-400, #8E8A7E);
  font-family: var(--font-sans, "Inter", sans-serif);
}

.tile {
  position: relative;
  height: calc(var(--pt) * 82);
  border-radius: calc(var(--pt) * 16);
  overflow: hidden;
  opacity: 0;
  transform: translateY(calc(var(--pt) * 8));
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.tile-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  border-radius: calc(var(--pt) * 16);
  background: var(--sage-700, #4F7A3A);
  color: var(--cream-100, #FAF6E9);
  padding-left: calc(var(--pt) * 18);
  font-size: calc(var(--pt) * 15);
  font-weight: 600;
  gap: calc(var(--pt) * 7);
}
.tile-reveal svg { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); }
.tile-reveal .lbl { opacity: 0; transition: opacity 150ms ease-out; }

.tile-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 10);
  padding: 0 calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 16);
  background: var(--cream-100, #FAF6E9);
  box-shadow: inset 0 0 0 1px var(--cream-200, #EDE4D2);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tile.is-cook .tile-face { background: var(--sage-50, #ECEFDF); }

/* drag grip: 3×2 dots, always-reserved column */
.tile-grip {
  flex: 0 0 calc(var(--pt) * 9.5);
  display: grid;
  grid-template-columns: repeat(2, calc(var(--pt) * 3));
  gap: calc(var(--pt) * 3.5);
  justify-content: start;
}
.tile-grip i {
  width: calc(var(--pt) * 3);
  height: calc(var(--pt) * 3);
  border-radius: 50%;
  background: rgba(142, 138, 126, .4);
}
.tile.is-easy .tile-grip i, .tm.is-easy .tile-grip i { background: transparent; }

.tile-main { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--pt) * 4); }
.tile-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 5);
  font-size: calc(var(--pt) * 12);
  color: var(--ink-400, #8E8A7E);
  white-space: nowrap;
}
.tile-meta .day { font-weight: 600; letter-spacing: 0.02em; }
.tile-meta .dot { opacity: .5; }
.tile-meta .easy {
  font-size: calc(var(--pt) * 10);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tile-meta svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 10); }
.tile-title {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 20);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile.is-easy .tile-title { color: var(--ink-900, #1F1F1C); }
.tile-sub {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 12);
  color: var(--ink-500, #6B675C);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-sub.is-sage { color: var(--sage-700, #4F7A3A); font-weight: 500; }

/* swap: the Wednesday tile carries two titles; face slides to reveal sage */
.tile-title .t-old, .tile-title .t-new { transition: opacity 200ms ease-out; }
.tile-title .t-new { display: none; opacity: 0; }

[data-state="wed-swipe"] .tile.is-wed .tile-face { transform: translateX(calc(var(--pt) * 122)); }
[data-state="wed-swipe"] .tile.is-wed .tile-reveal .lbl { opacity: 1; transition-delay: 90ms; }

:is([data-state="wed-commit"], [data-state="wed-done"], [data-state="fri-lift"], [data-state="fri-drag"], [data-state="fri-drop"], [data-state="rest"], [data-state="outro"]) .tile.is-wed .tile-face {
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(0.34, 1.46, 0.64, 1);
}
:is([data-state="wed-commit"], [data-state="wed-done"], [data-state="fri-lift"], [data-state="fri-drag"], [data-state="fri-drop"], [data-state="rest"], [data-state="outro"]) .tile.is-wed .t-old { display: none; }
:is([data-state="wed-commit"], [data-state="wed-done"], [data-state="fri-lift"], [data-state="fri-drag"], [data-state="fri-drop"], [data-state="rest"], [data-state="outro"]) .tile.is-wed .t-new { display: inline; opacity: 1; }
:is([data-state="wed-commit"], [data-state="wed-done"], [data-state="fri-lift"], [data-state="fri-drag"], [data-state="fri-drop"], [data-state="rest"], [data-state="outro"]) .tile.is-wed .tile-sub { opacity: 0; }
[data-state="wed-commit"] .tile.is-wed .tile-face {
  animation: swap-flash 200ms ease-in-out 5 alternate;
}
@keyframes swap-flash {
  from { box-shadow: inset 0 0 0 1px var(--cream-200, #EDE4D2); }
  to   { box-shadow: inset 0 0 0 2.5px var(--sage-700, #4F7A3A); }
}

/* staggered reveal: once drafting ends, the week chrome is live */
[data-demo="plan"]:not([data-state="empty"]):not([data-state="press"]):not([data-state="drafting"]):not([data-state="drafting-2"]) .wk-list { opacity: 1; }
[data-demo="plan"]:not([data-state="empty"]):not([data-state="press"]):not([data-state="drafting"]):not([data-state="drafting-2"]) .wk-rail { opacity: 1; }
[data-demo="plan"]:not([data-state="empty"]):not([data-state="press"]):not([data-state="drafting"]):not([data-state="drafting-2"]) .wk-empty { opacity: 0; }

[data-state="fill-1"] .t-1 { opacity: 1; transform: none; }
[data-state="fill-2"] .t-1, [data-state="fill-2"] .t-2 { opacity: 1; transform: none; }
[data-state="fill-3"] .t-1, [data-state="fill-3"] .t-2, [data-state="fill-3"] .t-3 { opacity: 1; transform: none; }
[data-state="fill-4"] .t-1, [data-state="fill-4"] .t-2, [data-state="fill-4"] .t-3, [data-state="fill-4"] .t-4 { opacity: 1; transform: none; }
[data-state="fill-5"] .t-1, [data-state="fill-5"] .t-2, [data-state="fill-5"] .t-3, [data-state="fill-5"] .t-4, [data-state="fill-5"] .t-5 { opacity: 1; transform: none; }
[data-state="fill-6"] .t-1, [data-state="fill-6"] .t-2, [data-state="fill-6"] .t-3, [data-state="fill-6"] .t-4, [data-state="fill-6"] .t-5, [data-state="fill-6"] .t-6 { opacity: 1; transform: none; }
:is([data-state="fill-7"], [data-state="full"], [data-state="wed-swipe"], [data-state="wed-commit"], [data-state="wed-done"], [data-state="fri-lift"], [data-state="fri-drag"], [data-state="fri-drop"], [data-state="rest"], [data-state="outro"]) .tile { opacity: 1; transform: none; }

.wk-intro { opacity: 0; transition: opacity 220ms ease-out; }
[data-demo="plan"]:not([data-state="empty"]):not([data-state="press"]):not([data-state="drafting"]):not([data-state="drafting-2"]) .wk-intro { opacity: 1; }

/* ── tonight hero (today's tile, promoted) ── */
.tile.is-tonight { height: auto; min-height: calc(var(--pt) * 118); }
.tile.is-tonight .tile-face {
  position: relative;
  inset: auto;
  min-height: calc(var(--pt) * 118);
  background: #F7E9CF;
  box-shadow: inset 0 0 0 2.5px var(--amber-500, #E29831);
  padding: calc(var(--pt) * 15) calc(var(--pt) * 16);
  gap: calc(var(--pt) * 14);
  align-items: center;
}
.tn-grip { flex: 0 0 auto; width: calc(var(--pt) * 12); color: rgba(142, 138, 126, .55); }
.tile.is-tonight .tile-main { gap: calc(var(--pt) * 6); }
.tn-eyebrow {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 5);
  font-size: calc(var(--pt) * 12);
  font-weight: 700;
  color: var(--sage-700, #4F7A3A);
}
.tn-eyebrow .dt { font-weight: 500; }
.tn-eyebrow .dot { color: var(--ink-400, #8E8A7E); opacity: .55; font-weight: 500; }
.tn-title {
  font-family: var(--font-display, "DM Serif Display", serif);
  font-weight: 400;
  font-size: calc(var(--pt) * 25);
  line-height: 1.08;
  color: var(--ink-900, #1F1F1C);
}
.tn-meta {
  font-size: calc(var(--pt) * 13);
  font-weight: 500;
  color: var(--ink-500, #6B675C);
  white-space: nowrap;
}
.tn-sides {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 13);
  font-weight: 500;
  color: var(--sage-700, #4F7A3A);
}
.tn-cook {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pt) * 6);
  height: calc(var(--pt) * 40);
  padding: 0 calc(var(--pt) * 15);
  border-radius: 999px;
  background: var(--sage-700, #4F7A3A);
  color: var(--cream-100, #FAF6E9);
  font-size: calc(var(--pt) * 15);
  font-weight: 600;
}
.tn-cook svg { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); }

/* ── drag-to-move: Friday's pizza night drops onto Saturday ── */
.tm { position: absolute; inset: 0; display: flex; align-items: center; gap: calc(var(--pt) * 10); padding: 0 calc(var(--pt) * 14); transition: opacity 200ms ease-out; }
.tm-b { opacity: 0; }
.tile.is-fri { overflow: visible; } /* the lifted card must leave its slot */
.tile.is-fri .tile-face, .tile.is-sat .tile-face { transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), background 220ms ease-out, box-shadow 220ms ease-out; }

:is([data-state="fri-lift"], [data-state="fri-drag"]) .tile.is-fri { z-index: 5; }
:is([data-state="fri-lift"], [data-state="fri-drag"]) .tile.is-fri .tile-face {
  box-shadow: inset 0 0 0 1px var(--cream-200, #EDE4D2), 0 calc(var(--pt) * 10) calc(var(--pt) * 24) rgba(31, 31, 28, .22);
}
[data-state="fri-lift"] .tile.is-fri .tile-face { transform: scale(1.035) translateY(calc(var(--pt) * -3)); }
[data-state="fri-drag"] .tile.is-fri .tile-face { transform: scale(1.035) translateY(calc(var(--pt) * 72)) rotate(.4deg); transition-duration: 420ms; }
[data-state="fri-drag"] .tile.is-sat .tile-face {
  background: #E3E9D1;
  box-shadow: inset 0 0 0 2.5px var(--sage-700, #4F7A3A);
}
:is([data-state="fri-drop"], [data-state="rest"], [data-state="outro"]) .tile.is-fri .tile-face {
  transform: none;
  transition: transform 320ms cubic-bezier(0.34, 1.46, 0.64, 1), background 220ms ease-out;
  background: var(--cream-100, #FAF6E9);
}
:is([data-state="fri-drop"], [data-state="rest"], [data-state="outro"]) .tile.is-sat .tile-face {
  background: var(--sage-50, #ECEFDF);
  box-shadow: inset 0 0 0 1px var(--cream-200, #EDE4D2);
}
:is([data-state="fri-drop"], [data-state="rest"], [data-state="outro"]) .tm-a { opacity: 0; }
:is([data-state="fri-drop"], [data-state="rest"], [data-state="outro"]) .tm-b { opacity: 1; }

/* loop restart: soften the cut back to empty */
.wk-stage { position: relative; flex: 1; min-height: 0; transition: opacity 300ms ease-in; }
[data-state="outro"] .wk-stage { opacity: 0; transition: opacity 420ms ease-out; }

/* ── floating tab bar ── */
.wk-tabs {
  position: absolute;
  left: calc(var(--pt) * 10);
  right: calc(var(--pt) * 10);
  bottom: calc(var(--pt) * 16);
  display: flex;
  padding: calc(var(--pt) * 5) calc(var(--pt) * 6);
  border-radius: calc(var(--pt) * 26);
  background: rgba(250, 246, 233, .94);
  box-shadow: inset 0 0 0 1px rgba(237, 228, 210, .9),
              0 calc(var(--pt) * 8) calc(var(--pt) * 20) rgba(31, 31, 28, .13);
  z-index: 7;
}
.wk-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pt) * 1.5);
  color: #33322C;
  font-size: calc(var(--pt) * 10);
  font-weight: 600;
}
.wk-tab svg { width: calc(var(--pt) * 23); height: calc(var(--pt) * 21); }
.tab-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--pt) * 3) calc(var(--pt) * 10);
  border-radius: calc(var(--pt) * 10);
}
.wk-tab.is-on { color: var(--sage-700, #4F7A3A); }
.wk-tab.is-on .tab-ic { background: var(--sage-50, #ECEFDF); }

/* ══════════════════════════════════════════════════════════════════
   BEAT · capture (recipes arrive from everywhere)
   States: start → card-1..4 → rest → outro
   ══════════════════════════════════════════════════════════════════ */

.cap { padding: calc(var(--pt) * 26) calc(var(--pt) * 24) calc(var(--pt) * 24); }
.cap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: calc(var(--pt) * 16);
}
.cap-title {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 22);
  font-weight: 600;
}
.cap-count {
  font-size: calc(var(--pt) * 12);
  font-weight: 500;
  color: var(--ink-400, #8E8A7E);
  font-feature-settings: "tnum";
}
.cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--pt) * 10);
}
.cap-card {
  border-radius: calc(var(--pt) * 14);
  background: var(--cream-100, #FAF6E9);
  box-shadow: inset 0 0 0 1px var(--cream-200, #EDE4D2);
  padding: calc(var(--pt) * 12) calc(var(--pt) * 13) calc(var(--pt) * 11);
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 7);
  min-height: calc(var(--pt) * 96);
  opacity: 0;
  transform: translateY(calc(var(--pt) * 10)) scale(.97);
  transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cap-card.c-0 { opacity: 1; transform: none; }
.cap-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pt) * 5);
  align-self: flex-start;
  padding: calc(var(--pt) * 4) calc(var(--pt) * 9);
  border-radius: 999px;
  background: var(--cream-200, #EDE4D2);
  color: var(--ink-700, #3A3A33);
  font-size: calc(var(--pt) * 11);
  font-weight: 600;
}
.cap-chip svg { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }
.cap-card-title {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 17);
  font-weight: 600;
  line-height: 1.2;
}
.cap-card-meta {
  margin-top: auto;
  font-size: calc(var(--pt) * 12);
  color: var(--ink-400, #8E8A7E);
}

[data-state="card-1"] .c-1 { opacity: 1; transform: none; }
[data-state="card-2"] .c-1, [data-state="card-2"] .c-2 { opacity: 1; transform: none; }
[data-state="card-3"] .c-1, [data-state="card-3"] .c-2, [data-state="card-3"] .c-3 { opacity: 1; transform: none; }
[data-state="card-4"] .c-1, [data-state="card-4"] .c-2, [data-state="card-4"] .c-3, [data-state="card-4"] .c-4 { opacity: 1; transform: none; }
:is([data-state="card-5"], [data-state="rest"], [data-state="outro"]) .cap-card { opacity: 1; transform: none; }

.cap-note {
  margin-top: calc(var(--pt) * 16);
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-style: italic;
  font-size: calc(var(--pt) * 13);
  color: var(--ink-500, #6B675C);
  opacity: 0;
  transition: opacity 220ms ease-out;
}
[data-state="rest"] .cap-note, [data-state="outro"] .cap-note { opacity: 1; }

/* counter ticks up as cards land */
.cap-count span { display: none; }
[data-state="start"] .cap-count .n-0 { display: inline; }
[data-state="card-1"] .cap-count .n-1 { display: inline; }
[data-state="card-2"] .cap-count .n-2 { display: inline; }
[data-state="card-3"] .cap-count .n-3 { display: inline; }
[data-state="card-4"] .cap-count .n-4 { display: inline; }
:is([data-state="card-5"], [data-state="rest"], [data-state="outro"]) .cap-count .n-5 { display: inline; }

/* ══════════════════════════════════════════════════════════════════
   BEAT · shop (ShoppingTabView, aisle lens)
   States: start → check-1 → check-2 → check-3 → rest → outro
   ══════════════════════════════════════════════════════════════════ */

.shp { padding-top: calc(var(--pt) * 18); }
.shp-count {
  padding: 0 calc(var(--pt) * 24) calc(var(--pt) * 8);
  font-size: calc(var(--pt) * 12);
  color: var(--ink-500, #6B675C);
  font-feature-settings: "tnum";
}
.shp-count span { display: none; }
[data-state="start"] .shp-count .n-0 { display: inline; }
[data-state="check-1"] .shp-count .n-1 { display: inline; }
[data-state="check-2"] .shp-count .n-2 { display: inline; }
[data-state="check-3"] .shp-count .n-3, [data-state="rest"] .shp-count .n-3,
[data-state="outro"] .shp-count .n-3 { display: inline; }

.shp-band {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 8);
  min-height: calc(var(--pt) * 44);
  padding: 0 calc(var(--pt) * 16);
  background: var(--sage-50, #ECEFDF);
}
.shp-band svg { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); color: var(--ink-500, #6B675C); }
.shp-band-title {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 20);
  font-weight: 600;
}
.shp-band-count {
  font-size: calc(var(--pt) * 15);
  font-weight: 600;
  color: var(--ink-500, #6B675C);
}
.shp-band .chev { margin-left: auto; width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); }

.shp-row {
  display: flex;
  align-items: flex-start;
  padding: calc(var(--pt) * 10) calc(var(--pt) * 16);
  border-bottom: 1px solid var(--cream-200, #EDE4D2);
}
.shp-check {
  position: relative;
  flex: 0 0 calc(var(--pt) * 32);
  height: calc(var(--pt) * 22);
  margin-top: calc(var(--pt) * 1);
}
.shp-check svg {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--pt) * 20);
  height: calc(var(--pt) * 20);
  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.shp-check .off { color: var(--ink-500, #6B675C); opacity: 1; }
.shp-check .on  { color: var(--sage-700, #4F7A3A); opacity: 0; }

.shp-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--pt) * 3); }
.shp-name {
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 17);
  color: var(--ink-900, #1F1F1C);
  transition: color 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.shp-cap { font-size: calc(var(--pt) * 12); color: var(--ink-500, #6B675C); }
.shp-qty {
  margin-left: calc(var(--pt) * 8);
  font-size: calc(var(--pt) * 15);
  color: var(--ink-500, #6B675C);
  white-space: nowrap;
  font-feature-settings: "tnum";
  transition: color 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.shp-row .chev {
  flex: 0 0 auto;
  width: calc(var(--pt) * 11);
  height: calc(var(--pt) * 11);
  margin: calc(var(--pt) * 5) 0 0 calc(var(--pt) * 12);
  color: var(--ink-400, #8E8A7E);
}

/* checked style: sage mark, muted struck name + amount; the row stays put */
.shp-row.is-done .shp-check .off { opacity: 0; }
.shp-row.is-done .shp-check .on  { opacity: 1; }
.shp-row.is-done .shp-name,
.shp-row.is-done .shp-qty { color: var(--ink-500, #6B675C); text-decoration: line-through; }

[data-state="start"] .shp-row { text-decoration: none; }
.shp-row .shp-name, .shp-row .shp-qty { text-decoration: none; }

/* which rows are checked in which state (cumulative) */
[data-state="check-1"] .shp-row.k-1 .off, [data-state="check-2"] .shp-row.k-1 .off,
[data-state="check-3"] .shp-row.k-1 .off, [data-state="rest"] .shp-row.k-1 .off,
[data-state="outro"] .shp-row.k-1 .off,
[data-state="check-2"] .shp-row.k-2 .off, [data-state="check-3"] .shp-row.k-2 .off,
[data-state="rest"] .shp-row.k-2 .off, [data-state="outro"] .shp-row.k-2 .off,
[data-state="check-3"] .shp-row.k-3 .off, [data-state="rest"] .shp-row.k-3 .off,
[data-state="outro"] .shp-row.k-3 .off { opacity: 0; }

[data-state="check-1"] .shp-row.k-1 .on, [data-state="check-2"] .shp-row.k-1 .on,
[data-state="check-3"] .shp-row.k-1 .on, [data-state="rest"] .shp-row.k-1 .on,
[data-state="outro"] .shp-row.k-1 .on,
[data-state="check-2"] .shp-row.k-2 .on, [data-state="check-3"] .shp-row.k-2 .on,
[data-state="rest"] .shp-row.k-2 .on, [data-state="outro"] .shp-row.k-2 .on,
[data-state="check-3"] .shp-row.k-3 .on, [data-state="rest"] .shp-row.k-3 .on,
[data-state="outro"] .shp-row.k-3 .on { opacity: 1; }

[data-state="check-1"] .shp-row.k-1 .shp-name, [data-state="check-1"] .shp-row.k-1 .shp-qty,
[data-state="check-2"] .shp-row.k-1 .shp-name, [data-state="check-2"] .shp-row.k-1 .shp-qty,
[data-state="check-2"] .shp-row.k-2 .shp-name, [data-state="check-2"] .shp-row.k-2 .shp-qty,
[data-state="check-3"] .shp-row.k-1 .shp-name, [data-state="check-3"] .shp-row.k-1 .shp-qty,
[data-state="check-3"] .shp-row.k-2 .shp-name, [data-state="check-3"] .shp-row.k-2 .shp-qty,
[data-state="check-3"] .shp-row.k-3 .shp-name, [data-state="check-3"] .shp-row.k-3 .shp-qty,
[data-state="rest"] .shp-row.k-1 .shp-name, [data-state="rest"] .shp-row.k-1 .shp-qty,
[data-state="rest"] .shp-row.k-2 .shp-name, [data-state="rest"] .shp-row.k-2 .shp-qty,
[data-state="rest"] .shp-row.k-3 .shp-name, [data-state="rest"] .shp-row.k-3 .shp-qty,
[data-state="outro"] .shp-row.k-1 .shp-name, [data-state="outro"] .shp-row.k-1 .shp-qty,
[data-state="outro"] .shp-row.k-2 .shp-name, [data-state="outro"] .shp-row.k-2 .shp-qty,
[data-state="outro"] .shp-row.k-3 .shp-name, [data-state="outro"] .shp-row.k-3 .shp-qty {
  color: var(--ink-500, #6B675C);
  text-decoration: line-through;
}

/* bottom dock CTA */
.shp-dock { padding: calc(var(--pt) * 10) calc(var(--pt) * 16) calc(var(--pt) * 16); }
.shp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 14) 0;
  border-radius: 999px;
  background: var(--sage-700, #4F7A3A);
  color: var(--cream-100, #FAF6E9);
  font-size: calc(var(--pt) * 15);
  font-weight: 600;
  box-shadow: 0 calc(var(--pt) * 4) calc(var(--pt) * 10) rgba(31, 31, 28, .18);
}
.shp-logos { display: flex; }
.shp-logos i {
  width: calc(var(--pt) * 22);
  height: calc(var(--pt) * 22);
  border-radius: calc(var(--pt) * 6);
  box-shadow: 0 0 0 1px var(--cream-100, #FAF6E9);
}
.shp-logos i + i { margin-left: calc(var(--pt) * -6); }
.shp-logos .st-1 { background: #E8930C; }
.shp-logos .st-2 { background: #175B33; }
.shp-logos .st-3 { background: #145DA6; }

/* ══════════════════════════════════════════════════════════════════
   BEAT · cook mode (the only dark screen in the product)
   States: step-2 → advance-press → step-3 → rest → outro
   ══════════════════════════════════════════════════════════════════ */

.ck {
  background: var(--ink-900, #1F1F1C);
  color: #FFFFFF;
  padding: calc(var(--pt) * 20) 0 calc(var(--pt) * 22);
}
.ck-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--pt) * 24);
  color: rgba(255, 255, 255, .7);
  font-size: calc(var(--pt) * 17);
  font-weight: 600;
}
.ck-top .x { font-size: calc(var(--pt) * 19); font-weight: 500; }
.ck-progress {
  height: calc(var(--pt) * 4);
  margin: calc(var(--pt) * 18) calc(var(--pt) * 24) 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.ck-progress i {
  display: block;
  height: 100%;
  width: 33.3%;
  border-radius: 999px;
  background: var(--sage-700, #4F7A3A);
  transition: width 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ck-body {
  padding: calc(var(--pt) * 20) calc(var(--pt) * 24) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 16);
}
.ck-steplabel {
  font-size: calc(var(--pt) * 20);
  font-weight: 600;
  color: var(--sage-300, #B6BF95);
}
.ck-steplabel span { display: none; }
.ck-text {
  position: relative;
  font-family: var(--font-serif, "Source Serif 4", serif);
  font-size: calc(var(--pt) * 30);
  font-weight: 600;
  line-height: 1.4;
  min-height: calc(var(--pt) * 170);
}
.ck-text > span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ck-timer {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: calc(var(--pt) * 7);
  padding: calc(var(--pt) * 10) calc(var(--pt) * 14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: var(--sage-300, #B6BF95);
  font-size: calc(var(--pt) * 15);
  font-weight: 600;
  opacity: 0;
  transform: translateY(calc(var(--pt) * 6));
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.ck-timer svg { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); }
.ck-for { display: flex; flex-direction: column; gap: calc(var(--pt) * 8); }
.ck-for-h {
  font-size: calc(var(--pt) * 15);
  font-weight: 600;
  color: var(--sage-300, #B6BF95);
}
.ck-for-item { font-size: calc(var(--pt) * 17); color: rgba(255, 255, 255, .85); }
.ck-next {
  display: flex;
  align-items: baseline;
  gap: calc(var(--pt) * 8);
  font-size: calc(var(--pt) * 15);
  font-weight: 500;
  color: rgba(255, 255, 255, .68);
}
.ck-next svg {
  width: calc(var(--pt) * 14);
  height: calc(var(--pt) * 14);
  align-self: center;
  color: var(--sage-300, #B6BF95);
  flex: 0 0 auto;
}
.ck-nav {
  display: flex;
  gap: calc(var(--pt) * 16);
  padding: calc(var(--pt) * 22) calc(var(--pt) * 24) 0;
}
.ck-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--pt) * 56);
  border-radius: calc(var(--pt) * 14);
  font-size: calc(var(--pt) * 17);
  font-weight: 600;
  transition: transform 150ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ck-btn.is-back { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.ck-btn.is-next { background: var(--sage-700, #4F7A3A); color: var(--ink-900, #1F1F1C); }
[data-state="advance-press"] .ck-btn.is-next { transform: scale(0.97); filter: brightness(0.92); }

/* step 2 ↔ step 3 content */
[data-state="step-2"] .ck-text .s2, [data-state="advance-press"] .ck-text .s2 { opacity: 1; }
[data-state="step-3"] .ck-text .s3, [data-state="rest"] .ck-text .s3,
[data-state="outro"] .ck-text .s3 { opacity: 1; }

[data-state="step-2"] .ck-steplabel .l2, [data-state="advance-press"] .ck-steplabel .l2 { display: inline; }
[data-state="step-3"] .ck-steplabel .l3, [data-state="rest"] .ck-steplabel .l3,
[data-state="outro"] .ck-steplabel .l3 { display: inline; }

[data-state="step-2"] .ck-for .f2, [data-state="advance-press"] .ck-for .f2 { display: flex; }
.ck-for .f2, .ck-for .f3 { display: none; flex-direction: column; gap: calc(var(--pt) * 8); }
[data-state="step-3"] .ck-for .f3, [data-state="rest"] .ck-for .f3,
[data-state="outro"] .ck-for .f3 { display: flex; }

[data-state="step-2"] .ck-next .nx2, [data-state="advance-press"] .ck-next .nx2 { display: inline; }
.ck-next .nx2, .ck-next .nx3 { display: none; }
[data-state="step-3"] .ck-next .nx3, [data-state="rest"] .ck-next .nx3,
[data-state="outro"] .ck-next .nx3 { display: inline; }

[data-state="step-3"] .ck-progress i, [data-state="rest"] .ck-progress i,
[data-state="outro"] .ck-progress i { width: 50%; }

[data-state="step-3"] .ck-timer, [data-state="rest"] .ck-timer,
[data-state="outro"] .ck-timer { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════════
   BEAT · the weekly note (WeeklyPromptSheet: speak or type, it listens)
   States: idle → press → rec-1 → rec-2 → writing → settle-1..3 → rest
   ══════════════════════════════════════════════════════════════════ */

.vp {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 13);
  padding: calc(var(--pt) * 16) calc(var(--pt) * 24) calc(var(--pt) * 24);
}
.vp-nav { display: flex; align-items: center; margin-bottom: calc(var(--pt) * 2); }
.vp-cancel { flex: 1; font-size: calc(var(--pt) * 17); color: var(--sage-700, #4F7A3A); }
.vp-week { font-size: calc(var(--pt) * 17); font-weight: 600; }
.vp-spacer { flex: 1; }
.vp-title {
  font-family: var(--font-display, "DM Serif Display", serif);
  font-weight: 400;
  font-size: calc(var(--pt) * 22);
  color: var(--ink-900, #1F1F1C);
}
.vp-sub { font-size: calc(var(--pt) * 15); color: var(--ink-500, #6B675C); margin-top: calc(var(--pt) * -8); }
.vp-field {
  min-height: calc(var(--pt) * 110);
  border-radius: calc(var(--pt) * 14);
  box-shadow: inset 0 0 0 1px var(--cream-200, #EDE4D2);
  padding: calc(var(--pt) * 13) calc(var(--pt) * 14);
  font-size: calc(var(--pt) * 16);
  line-height: 1.45;
  transition: box-shadow 220ms ease-out;
}
:is([data-state="rec-1"], [data-state="rec-2"]) .vp-field {
  box-shadow: inset 0 0 0 1.5px rgba(79, 122, 58, .55);
}
.vp-ph { color: var(--ink-400, #8E8A7E); }
.vp-tx { color: var(--ink-900, #1F1F1C); }
.vp-tx span { opacity: 0; transition: opacity 300ms ease-out; }
:is([data-state="settle-1"], [data-state="settle-2"], [data-state="settle-3"], [data-state="rest"], [data-state="outro"]) .vp-ph { display: none; }
:is([data-state="settle-1"], [data-state="settle-2"], [data-state="settle-3"], [data-state="rest"], [data-state="outro"]) .vp-tx .w-1 { opacity: 1; }
:is([data-state="settle-2"], [data-state="settle-3"], [data-state="rest"], [data-state="outro"]) .vp-tx .w-2 { opacity: 1; }
:is([data-state="settle-3"], [data-state="rest"], [data-state="outro"]) .vp-tx .w-3 { opacity: 1; }

.vp-voice {
  min-height: calc(var(--pt) * 60);
  border-radius: calc(var(--pt) * 14);
  background: var(--sage-50, #ECEFDF);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--pt) * 12);
  transition: transform 150ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-state="press"] .vp-voice { transform: scale(0.98); filter: brightness(0.95); }
.vp-idle, .vp-rec, .vp-writing { display: flex; align-items: center; gap: calc(var(--pt) * 11); width: 100%; }
.vp-rec, .vp-writing { display: none; }
.vp-badge {
  width: calc(var(--pt) * 38);
  height: calc(var(--pt) * 38);
  border-radius: 50%;
  background: var(--sage-700, #4F7A3A);
  color: var(--cream-100, #FAF6E9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.vp-badge svg { width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); }
.vp-idle-label { font-size: calc(var(--pt) * 17); font-weight: 600; color: var(--sage-700, #4F7A3A); }
.vp-bars { display: flex; align-items: center; gap: calc(var(--pt) * 3); height: calc(var(--pt) * 28); flex: 1; }
.vp-bars i {
  width: calc(var(--pt) * 3.5);
  border-radius: 999px;
  background: var(--sage-700, #4F7A3A);
  height: calc(var(--pt) * 9);
  animation: vp-bar 900ms ease-in-out infinite;
}
.vp-bars i:nth-child(even) { animation-delay: 300ms; }
.vp-bars i:nth-child(3n) { animation-delay: 150ms; }
.vp-bars i:nth-child(4n) { animation-delay: 450ms; }
.vp-bars i:nth-child(5n) { animation-delay: 600ms; }
@keyframes vp-bar {
  0%, 100% { height: calc(var(--pt) * 9); }
  50% { height: calc(var(--pt) * 26); }
}
.vp-timer {
  font-size: calc(var(--pt) * 15);
  font-weight: 600;
  font-feature-settings: "tnum";
  color: var(--ink-900, #1F1F1C);
}
.vp-timer span { display: none; }
[data-state="rec-1"] .vp-timer .t-1 { display: inline; }
[data-state="rec-2"] .vp-timer .t-2 { display: inline; }
:is([data-state="rec-1"], [data-state="rec-2"]) .vp-idle { display: none; }
:is([data-state="rec-1"], [data-state="rec-2"]) .vp-rec { display: flex; }
[data-state="writing"] .vp-idle { display: none; }
[data-state="writing"] .vp-writing { display: flex; font-size: calc(var(--pt) * 15); font-weight: 600; color: var(--sage-700, #4F7A3A); }
.vp-spin {
  width: calc(var(--pt) * 18);
  height: calc(var(--pt) * 18);
  border-radius: 50%;
  border: calc(var(--pt) * 2.5) solid rgba(79, 122, 58, .25);
  border-top-color: var(--sage-700, #4F7A3A);
  animation: vp-spin 800ms linear infinite;
  flex: 0 0 auto;
}
@keyframes vp-spin { to { transform: rotate(360deg); } }
.vp-btn {
  height: calc(var(--pt) * 52);
  border-radius: calc(var(--pt) * 14);
  background: var(--sage-700, #4F7A3A);
  color: var(--cream-100, #FAF6E9);
  font-size: calc(var(--pt) * 17);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the real "For younger kids" card from Cook Mode */
.ck-kids {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 12) calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 15);
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(182, 191, 149, .34);
}
.ck-kids-h { font-size: calc(var(--pt) * 12); font-weight: 600; color: var(--sage-300, #B6BF95); }
.ck-kids-t { font-size: calc(var(--pt) * 15); font-weight: 500; color: var(--cream-100, #FAF6E9); line-height: 1.35; }