/* The production finish: one warm canvas, confident type, quiet supporting UI. */
:root { --accent-ink:#b0460a; --control-border:#8f857e; --radius-card:26px; --shadow-raised:0 2px 3px #2d292605,0 12px 32px #2d292609; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-padding-block:24px; }
body { overflow-wrap:break-word; }
[hidden], [data-stage-hidden=true] { display:none!important; }
:focus-visible { outline:3px solid var(--focus,#b4450f); outline-offset:4px; }
a { text-underline-offset:4px; }
button,input,textarea,select,summary { touch-action:manipulation; }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color:transparent; }
.app .wrap { padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
.app .top { min-height:56px; padding-block:8px 16px; }
.app h1 { font-size:clamp(30px,5vw,42px); line-height:1.15; letter-spacing:-.025em; margin-block:8px 20px; }
.app h2 { line-height:1.25; }
.app h3 { line-height:1.35; }
.app .lead { line-height:1.65; }
.app .card { border:1px solid var(--line-soft); padding:24px; }
.app input:not([type=radio]):not([type=checkbox]),.app textarea,.app select { border:1px solid var(--control-border); border-radius:16px; min-height:52px; padding:13px 16px; background:var(--raised); color:var(--ink); max-width:100%; }
.app input[readonly] { background:var(--ground); }
.app :is(input,textarea,select)[aria-invalid=true] { border:2px solid #a3200f; }
.app .hint { font-size:14px; line-height:1.5; color:var(--ink-soft); display:block; font-weight:400; margin-top:4px; }
.app .f { font-size:17px; font-weight:600; line-height:1.4; }
.app .btn { min-height:56px; padding:14px 22px; line-height:1.35; border-radius:999px; }
.app .btn.small { min-height:48px; font-size:16px; padding:10px 18px; }
.app .btn:disabled { opacity:.6; }
.app .check { align-items:flex-start; gap:12px; line-height:1.65; font-size:16px; }
.app .check input { margin-top:3px; }
.app .check a { display:inline; }
.app .error:not(:empty) { border-inline-start:3px solid #a3200f; padding:10px 14px; background:#fff0ec; border-radius:12px; color:#87210f; }
.app .error:empty { margin:0; }
.app .note:empty { min-height:0; margin:0; }
.app .small { line-height:1.6; }
.hero-book .sun.crew { order:0; min-height:156px; max-height:180px; padding-block-start:20px; border-radius:28px; background:radial-gradient(circle at 50% 115%,#f9a03e 0 38%,#fbb443 38% 63%,#ffc94a 63%); }
.hero-book .sun.crew img { max-height:154px; }
body.app[data-setup-screen=welcome] .hero-book { padding-top:clamp(12px,3vh,32px); gap:16px; }
body.app[data-setup-screen=welcome] .hero-book h1 { font-size:clamp(34px,7vw,48px); margin-block:2px; }
body.app[data-setup-screen=welcome] .hero-book .lead { margin:0; max-width:42ch; }
body[data-setup-screen] .pw-gate { display:none; }
.entry-actions { margin-block:8px 16px; gap:10px; }
.entry-account { color:var(--ink-soft); font-size:15px; }
#haveCode>summary { display:none; }
.setup-progress { font-size:14px; color:var(--accent-ink); letter-spacing:.015em; margin:8px 0 12px; }
.flow-heading { margin-block:4px 22px!important; }
.flow-review { border:1px solid var(--line-soft); border-radius:24px; padding:8px 20px; background:var(--raised); margin-block:16px 24px; }
.flow-review dl { margin:0; }
.flow-review dl>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding-block:16px; border-bottom:1px solid var(--line-soft); }
.flow-review dl>div:last-child { border-bottom:0; }
.flow-review dt { color:var(--ink-soft); font-size:14px; grid-column:1; }
.flow-review dd { margin:0; color:var(--ink); font-weight:600; font-size:19px; grid-column:1; overflow-wrap:anywhere; }
.flow-edit { background:none; border:0; color:var(--action); font:600 15px var(--font-sans); min-width:44px; min-height:44px; grid-column:2; grid-row:1 / 3; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.setup-actions { position:sticky; bottom:0; padding-block:14px calc(12px + env(safe-area-inset-bottom)); background:var(--ground); align-items:stretch; z-index:3; }
.setup-actions .btn { flex:1; min-width:0; }
.panel>#go { position:relative; bottom:auto; outline:none; margin-top:16px; }
.panel>#go:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.panel:has(>.setup-actions) { padding-bottom:0; }
#elders { gap:12px; }
#elders .chip span { min-height:76px; font-size:21px; border-radius:22px; background:var(--raised); border:1px solid var(--control-border); box-shadow:none; }
#elders .chip input:checked+span { background:var(--tint); border:2px solid var(--action); color:var(--action); }
#senders { gap:10px; }
#senders .chip span { border:1px solid var(--control-border); min-height:48px; }
.link-card { display:grid; gap:12px; margin-bottom:12px; }
.link-card h2,.link-card h3,.link-card p { margin:0; }
.link-card input { font-size:14px; }
.keep-actions { gap:10px; }
.app.elder .bar { min-height:56px; padding-block:8px; }
.app.elder .btn:not(.small):not(.link) { min-height:68px; font-size:22px; }
.app.elder .view-title { font-size:clamp(28px,6vw,36px); }
.app.elder .home-sky { margin-bottom:14px; }
.app.elder .home-sky .sky { height:110px; border-radius:26px; }
.app.elder .home-sky .sky img { width:84px; margin-bottom:18px; }
.app.elder .home-sky .plate { min-height:0; padding:12px 18px; }
.app.elder .home-sky .plate p { font-size:19px; }
.app.elder #stage { justify-content:flex-start; padding-block:10px; }
.app.elder .suggest,.app.elder .question { border-radius:24px; padding:24px 28px; }
.app.elder .suggest .q,.app.elder .question .q { font-size:clamp(24px,5.6vw,30px); line-height:1.45; }
.app.elder .shelves { grid-template-columns:repeat(2,minmax(0,1fr)); }
.app.elder .shelves h2 { grid-column:1 / -1; }
.app.elder .shelf { padding:16px; min-height:100px; border-radius:22px; }
.app.elder .shelf .name { font-size:20px; }
.app.elder .chapters { gap:12px; }
.app.elder .chapter { border-radius:22px; padding:20px; }
.app.elder .chapter .q { font-size:22px; line-height:1.45; }
.app.elder .rec-actions { border-top:1px solid var(--line-soft); gap:10px; padding-top:16px; }
.app.elder #stage[data-recording] .home-sky .plate p { font-size:23px; }
.app.elder #stage[data-recording] .timer { font-size:48px; font-weight:700; letter-spacing:.04em; }
.app.elder #stage[data-recording] .live { margin-block:4px 12px; }
.drawer .fu { border-radius:20px; padding:18px; }
.drawer .fu .q { font-size:21px; line-height:1.5; }
.app-header-title,.chapter-title,.focus-title,.section-title { text-wrap:balance; }
.tabbar-glass { border:1px solid var(--line-soft); box-shadow:0 8px 28px #2d29260e; }
.chapter-panel { padding-block:16px; }
.chapter-view-tabs [role=tab] { min-height:48px; }
.chapter-view-tabs [aria-selected=true] { background:var(--action); color:var(--on-action); }
.account-destinations { padding:5px; border-radius:24px; border:1px solid var(--line-soft); background:var(--raised); }
.account-destinations .btn { flex:1; }
.app .doc { max-width:700px; padding:24px; background:var(--raised); border-radius:26px; border:1px solid var(--line-soft); margin-block:20px; }
.app .doc h2 { margin-top:32px; }
.app .doc p,.app .doc li { line-height:1.8; }
.ops-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-block:20px; }
.ops-nav button { text-align:start; font:600 16px/1.4 var(--font-sans); min-height:54px; border:1px solid var(--control-border); border-radius:16px; background:var(--raised); color:var(--ink); padding:12px 16px; cursor:pointer; }
.ops-nav [aria-pressed=true] { background:var(--action); color:var(--on-action); border-color:var(--action); }
.ops-task h2 { margin-top:0; font-size:26px; }
.app .ops-task .btn { margin-block:5px; }
.ops-task label { margin-top:14px; }
.pw-shots { scroll-snap-type:x mandatory; }
.pw-shots li { scroll-snap-align:center; }
.pw-shots img { border-radius:20px; box-shadow:var(--shadow-raised); }
.pw-hero h1 { line-height:1.15; }
.product-disclosure { box-shadow:none; }
.product-disclosure>summary { min-height:60px; font-size:18px; }
@media(max-height:740px) and (min-width:361px) { .app.elder .home-sky .sky { height:64px; } .app.elder .home-sky .sky img { width:54px; margin-bottom:10px; } .app.elder #stage { gap:12px; } .app.elder .suggest { padding:18px 24px; } .hero-book .sun.crew { min-height:110px; max-height:130px; } .hero-book .sun.crew img { max-height:110px; } }
@media(min-width:900px) { .app .wrap { width:min(100% - 64px,680px); } .app.elder .wrap { width:min(100% - 64px,700px); } .appbody .appframe { border-inline:1px solid var(--line-soft); } .app .doc { max-width:760px; } }
@media(max-width:360px) { .app .wrap { width:calc(100% - 28px); } .app .card { padding:18px; } .flow-review { padding-inline:16px; } .setup-actions { gap:8px; } .app .btn { padding-inline:16px; } .app.elder .shelves { grid-template-columns:1fr; } }
html[data-a11y-text] .setup-actions,html[data-a11y-text] .rec-actions { position:static; }
html[data-a11y-text=largest] :is(.app-header,.setup-actions,.player-tools,.chapter-list-heading,.account-destinations) { display:flex; flex-wrap:wrap; height:auto; }
html[data-a11y-text=largest] .shelves,html[data-a11y-text=largest] .chapter-list { grid-template-columns:1fr; }
html[data-a11y-text=largest] .chapter-view-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:24px; }
@media(forced-colors:active) { .btn,.chip span,.tab,.chapter,.shelf,.suggest,.ops-nav button { border:2px solid ButtonText!important; } [aria-current=page],[aria-selected=true],[aria-pressed=true] { outline:2px solid Highlight; outline-offset:-4px; } }
@media print { .setup-actions,.ops-nav,.entry-actions { display:none!important; } .app .wrap,.app .doc { width:100%; max-width:none; border:0; box-shadow:none; padding:0; } }
/* Primary recording actions share one row; optional tools stay compact. */
.app.elder .rec-actions .big { grid-column:auto; }
.app.elder .rec-actions>button:nth-child(2) { grid-column:auto; }
.app.elder .rec-actions>button:nth-child(n+3) { min-height:48px; font-size:17px; font-weight:600; padding:10px 12px; }
.app.elder .rec-actions>button:last-child:not(:nth-child(2)) { grid-column:1 / -1; }
.app.elder .rec-actions>button:nth-child(2):last-child { grid-column:auto; }
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,h3[tabindex="-1"]:focus { outline:none; }
.life-phone { gap:12px; }
.life-phone .focus { gap:10px; padding-bottom:0; }
.life-phone .life-pic { height:clamp(100px,20dvh,170px); min-height:0; }
.life-phone .life-pic .sun { height:100%; min-height:0; }
.life-phone .life-photo { width:100%; height:100%; object-fit:cover; }
.life-phone .focus-title { font-size:24px; }
.life-phone .life-nav { margin:0; padding-bottom:8px; }
@media(max-height:740px) { .life-phone .life-pic { height:100px; } .life-phone .focus-year { font-size:32px; } .life-phone .focus-title { font-size:22px; } }
html[data-a11y-text] .life-phone .life-pic { height:150px; }
.flow-review dd:has(.flow-edit) { display:flex; justify-content:space-between; align-items:center; gap:16px; grid-column:1 / -1; }
#elders>.chip span { flex-direction:column; gap:8px; min-height:112px; padding:16px; }
#elders>.chip img { height:48px; width:42px; object-fit:contain; pointer-events:none; }
.more-people { grid-column:1 / -1; }
.more-people summary { min-height:44px; padding:12px 0; color:var(--action); font-size:16px; cursor:pointer; }
.more-people .row { display:grid; grid-template-columns:1fr 1fr; }
#elders .more-people .chip span { min-height:52px; font-size:18px; }
@media(max-height:740px) { #elders>.chip span { min-height:92px; padding:12px; gap:4px; } #elders>.chip img { height:36px; } }
audio[controls] { display:block; width:100%; max-width:100%; margin-block:12px; }
.app .code { overflow-wrap:anywhere; word-break:break-word; }
.outcome-actions { display:grid; gap:12px; margin-top:20px; }
.app.elder #stage:is([data-view=task],[data-view=picker],[data-view=saved]) .home-sky .sky { display:none; }
.app.elder #stage:is([data-view=task],[data-view=picker]) .home-sky:has(.plate p:empty) { display:none; }
.app.elder #stage[data-view=saved] .home-sky .plate { margin-top:0; }
.app.elder .product-disclosure .btn { margin-block:8px; }
@media(max-height:740px) { .life-phone .life-nav { grid-row:2; } .life-phone .focus { grid-row:3; } .life-phone>.arc { top:112px; } .life-phone .focus>.btn { grid-row:4; } .life-phone .focus>.life-pic { grid-row:5; height:72px; } }
.drawer-actions { background:var(--ground); border-top:1px solid var(--line-soft); }