/* Reset, type, buttons, cards, the one line, toasts, the busy card and the still card (WP2; core DESIGN §7.3, §2.6).
 * Forked from demo app.css @7aafc93 L34-40 and L42 (reset, the focus of a moved heading, .noscript)
 * Forked from demo app.css @7aafc93 L66-68 (title, section label)
 * Forked from demo app.css @7aafc93 L70-90 and L93-105 (buttons, the one focus ring, nope, rows, the signal ring)
 * Forked from demo app.css @7aafc93 L509-510 (working)
 * Forked from demo app.css @7aafc93 L107-115 (say, hint, note, the 6-8 line length)
 * Forked from demo app.css @7aafc93 L125-130, L132, L137 and L456 (cards, fresh, pop)
 * Forked from demo app.css @7aafc93 L186-194 (the "just the toy" strip)
 * Forked from demo app.css @7aafc93 L485-486 and L195-196 (bob, the busy overlay)
 * Forked from demo app.css @7aafc93 L654-661, L558-560 and L739 (toast, undo toast, toast on wide screens)
 * Forked from demo app.css @7aafc93 L742-754 (reduced motion: the button, card, signal, bob, nope and toast parts)
 * Changes: no .spinner (a wait shows the busy card, never a spinner, §2.6); the busy overlay holds one card (a bobbing
 * starter and its line) and sits over sheets (z-index from the tokens); .btn.primary is an alias of .btn-primary; the
 * still card (the no-dead-end screen) is new; layout, header and tabs moved to shell.css. Light theme only. */

/* Reset */
h1[tabindex="-1"]:focus { outline: none; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; font-size: var(--body); line-height: 1.45; letter-spacing: .02em; background: var(--paper); overflow-x: hidden; overscroll-behavior: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.ico { width: 26px; height: 26px; flex: none; }
.noscript { padding: 24px; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; letter-spacing: 0; }
h1.title { font-size: 38px; line-height: 1.1; font-weight: 850; margin: 8px 0 6px; letter-spacing: 0; }
html.older h1.title { font-size: 34px; }
.section-label { font-size: var(--label); color: var(--muted); font-weight: 700; margin: 28px 0 12px; letter-spacing: .03em; }
.section-label.first { margin-top: 0; }

/* Buttons */
.btn { appearance: none; border: 0; margin: 0; font: inherit; color: var(--ink); cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; transition: transform var(--t-micro) var(--spring), opacity var(--t-micro); text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(.96); }
/* One focus ring for every control: ink, no extra hue (16:1 on paper). */
:where(button, a, input, [tabindex]):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn-primary, .btn.primary { width: 100%; min-height: 68px; border-radius: 999px; background: var(--coral); color: var(--ink);
  font-weight: 800; font-size: 22px; letter-spacing: .01em; display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: var(--shadow-lift), var(--press); padding: 8px 24px; }
.btn-primary img, .btn.primary img { width: 46px; height: 46px; object-fit: contain; }
.btn-primary .ico, .btn.primary .ico { width: 30px; height: 30px; }
.btn-primary:disabled, .btn.primary:disabled { background: var(--sand); color: rgba(24, 22, 18, .5); box-shadow: none; cursor: default; }
/* Hero actions (the clapper, Keep): 76 px, like .hero-btn. */
.btn-primary[data-shoot], .btn-primary[data-keep] { min-height: 76px; font-size: 24px; }
.btn-quiet { min-height: var(--tap); border-radius: 999px; background: var(--card); box-shadow: var(--shadow), var(--press);
  padding: 0 22px; font-weight: 750; font-size: var(--body); display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn-quiet:disabled { opacity: .45; cursor: default; }
.btn-quiet .btn-img { width: 36px; height: 36px; object-fit: contain; }
.btn.round { width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--card); box-shadow: var(--shadow), var(--press); display: grid; place-items: center; flex: none; }
.btn.link { width: fit-content; background: transparent; color: var(--muted); font-weight: 700; font-size: var(--muted-size); min-height: var(--tap); display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; margin: 10px auto 0; }
.btn.link:disabled { opacity: .5; }
/* Recording or keeping: a readable working state, not the disabled look. */
.btn.working, .btn.working:disabled { opacity: 1; background: var(--coral-field); color: var(--coral-deep); box-shadow: none; cursor: progress; }
.btn.link.working { border-radius: 999px; padding: 0 18px; }
.nope { animation: nope var(--t-micro) ease-in-out 2; }
@keyframes nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.row { display: flex; gap: var(--tap-gap); margin: 16px 0 0; }
.row > .btn-primary { flex: 1.4; }
.row > .btn-quiet { flex: 1; white-space: nowrap; padding: 0 16px; }
.row.two > .btn-quiet { flex: 1 1 0; min-width: 0; padding: 0 12px; white-space: normal; line-height: 1.15; text-align: left; }

/* One signal ring per screen: "touch this now". */
.signal { position: relative; }
.signal::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--signal); animation: signal 1.8s ease-in-out infinite; }
/* Opacity only: a growing ring would poke past the 16-20 px phone gutter. */
@keyframes signal { 50% { opacity: .55; } }

/* The screen's one line: one sentence in kid body text, plain (nothing spoken). */
.say { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: var(--body); margin: 0 0 18px; line-height: 1.35; }
html.older .say { color: var(--muted); }
.hint { color: var(--muted); font-size: var(--body); margin: -8px 0 14px; }
.note { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: var(--muted-size); margin: 20px 4px 0; line-height: 1.4; }
.note .ico { width: 22px; height: 22px; color: var(--ink); margin-top: 1px; }
/* 6-8: one sentence per screen, in short lines; 9-10 may add the reason. */
html:not(.older) .say + .hint { display: none; }
html:not(.older) .say > span, html:not(.older) .note > span { max-width: 32ch; }

/* Cards and grids: as many columns as the width holds. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 16px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 12px 12px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; border: 0; font: inherit; color: var(--ink); cursor: pointer; transition: transform var(--t-micro) var(--spring), box-shadow var(--t-micro); }
.card:active { transform: scale(.97); }
.card-img { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.card-img img { width: 92%; height: 92%; object-fit: contain; }
.card .name { font-weight: 800; font-size: 22px; letter-spacing: 0; text-align: center; overflow-wrap: anywhere; }
.card.fresh { animation: pop var(--t-pop) cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }

/* "Just the toy, no faces or hands": three pictures and a caption. */
.alone { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0; flex-wrap: wrap; }
.alone-pics { display: flex; gap: 14px; }
.alone-txt { font-size: 15px; color: var(--muted); line-height: 1.3; max-width: 16ch; }
.alone-pic { position: relative; width: 64px; height: 64px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--ink); }
.alone-pic > .ico { width: 40px; height: 40px; }
.alone-mark { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px var(--paper); }
.alone-mark .ico { width: 16px; height: 16px; stroke-width: 3.2; }
.alone-pic.ok .alone-mark { background: var(--green); }
.alone-pic.no .alone-mark { background: var(--coral-deep); }

/* A toy that bobs while something is on its way: the only "loading" picture (never a spinner). */
.bob { width: 150px; height: 150px; object-fit: contain; animation: bob 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-18px) scale(.96, 1.05); } 55% { transform: translateY(-20px); } 85% { transform: translateY(0) scale(1.06, .94); } }

/* The busy overlay: soft paper over the screen and one card, a bobbing starter and its line (ui.busy, after 400 ms). */
.busy { position: fixed; inset: 0; background: rgba(247, 241, 231, .92); display: grid; place-content: center; justify-items: center; gap: 16px;
  z-index: calc(var(--z-sheet) + 5); font-weight: 750; animation: busy-in var(--t-card) ease both; }
.busy .bob { width: 150px; height: 150px; }
.busy-card { display: grid; justify-items: center; gap: 12px; min-width: min(280px, calc(100vw - 48px)); padding: 26px 30px 22px; border-radius: 28px;
  background: var(--card); box-shadow: var(--shadow-lift); text-align: center; }
.busy-card .bob { filter: drop-shadow(0 10px 8px rgba(60, 40, 20, .18)); }
.busy-line { margin: 0; font-size: var(--body); font-weight: 800; letter-spacing: 0; }
@keyframes busy-in { from { opacity: 0; } }

/* The still card: a failure never ends in an empty frame, always a picture, one line and a way back. */
.still-card { display: grid; justify-items: center; gap: 14px; margin: 24px auto; max-width: 420px; padding: 26px 24px 22px; border-radius: 28px;
  background: var(--card); box-shadow: var(--shadow); text-align: center; }
.still-card img { width: 160px; height: 160px; object-fit: contain; }
.still-card .say { justify-content: center; margin: 0; }

/* A note, not a button: so not pill-shaped. Icon + one line in kid body text, wrapping on a narrow phone. */
.toast { position: fixed; left: 50%; bottom: calc(var(--dock) + 16px); transform: translateX(-50%); background: var(--ink); color: var(--paper);
  border-radius: 16px; padding: 12px 20px 12px 14px; font-weight: 700; font-size: var(--body); line-height: 1.3; z-index: var(--z-toast); box-shadow: var(--shadow-lift); animation: toast 2.4s ease forwards;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); }
.toast .ico { width: 24px; height: 24px; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@keyframes toast-calm { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* Put away, with Undo for 5 s. */
.toast.has-undo { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; white-space: normal; width: max-content; max-width: calc(100vw - 32px); animation: undo-in var(--t-card) ease both; }
.toast.has-undo .undo-btn { min-height: var(--tap); padding: 0 20px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 800; display: inline-flex; align-items: center; gap: 8px; flex: none; }
@keyframes undo-in { from { opacity: 0; transform: translate(-50%, 10px); } }
html.sheet-open .toast { z-index: calc(var(--z-toast) + 1); }
@media (min-width: 960px) { .toast { bottom: 40px; } }

/* Reduced motion: the same information without movement. A press darkens instead of squashing, "not now" flashes
   instead of wiggling, a note fades, the busy toy stands still. */
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled), .card:active { transform: none; filter: brightness(.93); transition: filter var(--t-calm); }
  .signal::after, .bob, .card.fresh, .toast.has-undo { animation: none; }
  .nope { animation: nope-dim var(--t-calm) ease-in-out 2; }
  .toast { animation-name: toast-calm; transform: translateX(-50%); }
  .busy { animation: busy-in var(--t-calm) ease both; }
}
@keyframes nope-dim { 50% { opacity: .55; } }