/* One stylesheet for the three pages. Colours and spacing come from tokens.css; nothing is written by hand that a token already says. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 500 20px/1.6 var(--font-sans); }
img { max-width: 100%; display: block; }
a { color: var(--action); }
:root { --rec: #a3200f; }   /* the colour of "recording" (7.6:1 with white): the same red as an error, never the only sign of it */
:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }   /* 5:1 against the page; the gaps between buttons are wider than the ring */
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - 32px, 560px); margin-inline: auto; }
.top { padding: 16px 0; display: flex; justify-content: flex-end; }   /* the logo sits on the left, as on the home page and in the sign-up window */
/* the logo: Haley's round mark and the wordmark, the same lockup as the home page */
.logo { display: flex; align-items: center; gap: 8px; direction: ltr; }
.logo img { width: 30px; height: 32px; }
.logo b { font: 900 26px/1 Nunito, ui-rounded, system-ui, sans-serif; letter-spacing: -0.01em; color: var(--ink); position: relative; top: .07em; }
h1 { font-size: clamp(30px, 8vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
h2 { font-size: 26px; line-height: 1.2; font-weight: 800; margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-2); }
.lead { font-size: 18px; color: var(--ink-soft); }
.small { font-size: 18px; color: var(--ink-soft); }   /* ink-soft is 7.4:1, ink-faint only 5.1:1 */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 18px; border: 0; border-radius: var(--radius-pill); background: var(--action); color: var(--on-action); font: 800 18px/1.25 var(--font-sans); text-wrap: balance; text-align: center; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--action); box-shadow: inset 0 0 0 2px var(--action); }
.btn.big { min-height: 52px; font-size: 18px; padding: 10px 18px; }   /* the owner's choice (1.11.2026): app-like sizes, the same buttons everywhere */
@media (forced-colors: active) { .btn { border: 2px solid ButtonText; } }
.btn.wide { width: 100%; }

.card { background: var(--raised); border-radius: var(--radius-card); padding: var(--space-3); box-shadow: var(--shadow-raised); margin-bottom: var(--space-3); }

/* landing */
.hero { text-align: center; padding: var(--space-3) 0 var(--space-4); }
.hero img { width: 120px; margin: 0 auto var(--space-2); }
.steps { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); counter-reset: s; }
.steps li { counter-increment: s; background: var(--tint); border-radius: var(--radius-tile); padding: var(--space-2) var(--space-3); padding-inline-start: 72px; position: relative; font-weight: 700; }
.steps li::before { content: counter(s); position: absolute; inset-inline-start: 20px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; border-radius: 50%; background: var(--haley-orange); color: #fff; display: grid; place-items: center; font-weight: 800; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-3); }
legend, label.f { font-weight: 700; font-size: 16px; color: var(--ink-soft); display: block; margin-bottom: 8px; padding: 0; }   /* a small, quiet label above each choice, as in the first-story sheet */
.hint { font-weight: 500; font-size: 15px; color: var(--ink-faint); display: block; margin-top: 2px; }
input[type=text], input[type=email], input[type=tel] { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 13px; background: var(--raised); color: var(--ink); font: 500 16px var(--font-sans); }
input[type=text]:focus-visible, input[type=email]:focus-visible, input[type=tel]:focus-visible { border-color: var(--action); }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
#elders, #senders, #kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
#senders { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }   /* two or four relations: two even columns */   /* choices are tiles in a grid, not a ragged line of pills */
#elders .chip, #senders .chip, #kinds .chip { justify-self: stretch; padding: 0; border-radius: 0; font: inherit; }   /* the tile is the label's whole width (the status chip's own rules in ui.css must not shrink it) */
.chip span { display: flex; justify-content: center; align-items: center; text-align: center; min-height: 48px; padding: 0 12px; border-radius: 14px; border: 1.5px solid var(--line-soft); background: var(--raised); font: 500 16px/1.25 var(--font-sans); }
.chip input:checked + span { border-color: var(--action); color: var(--action); font-weight: 700; box-shadow: inset 0 0 0 .5px var(--action); }   /* chosen: the action colour on the outline and the words, not a heavy fill */
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.chip input:disabled + span { opacity: .45; }
.topics { display: grid; gap: 8px; }
.topics .chip span { width: 100%; border-radius: var(--radius-sm); min-height: 56px; }
.check { display: flex; gap: 12px; align-items: flex-start; font: 500 16px/1.5 var(--font-sans); padding: 12px 15px; border: 1.5px solid var(--line-soft); border-radius: 16px; background: var(--raised); }   /* each agreement is its own card-row, like the options in the first-story sheet */
.check input { width: 24px; height: 24px; margin: 1px 0 0; flex: none; accent-color: var(--action); }
.panel { display: grid; gap: 14px; margin-bottom: var(--space-3); }   /* the form sits straight on the page, in even steps; the white blocks are the choices themselves */
.panel > * { margin: 0; min-width: 0; }
.panel > .btn.wide { position: sticky; bottom: 12px; z-index: 2; outline: 8px solid var(--ground); }   /* the one main button stays in reach */
.error { color: #a3200f; font-weight: 700; margin: 0 0 var(--space-2); min-height: 0; }
.trust { background: var(--tint); border-radius: var(--radius-tile); padding: var(--space-2) var(--space-3); font-size: 16px; margin-bottom: var(--space-3); }
footer { padding: var(--space-4) 0 var(--space-6); text-align: center; }
footer a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 16px; }   /* a link in a line of text is a 64px target too */
.sent { text-align: center; }
.sent .btn { margin-bottom: 12px; }

/* the older person's page: bigger everything, one thing at a time */
body.elder { font-size: 19px; min-height: 100dvh; display: flex; flex-direction: column; }
body.elder .wrap { flex: 1; display: flex; flex-direction: column; }   /* the stage fills the screen, so Haley, her words and the buttons sit together in the middle */
#stage:focus { outline: none; }   /* focus is parked here between steps so the next Tab starts at the right place; it is not a control */
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-3) 0 var(--space-6); gap: var(--space-2); }
.stage .haley { width: min(52vw, 220px); transition: transform .4s; }
.stage.speaking .haley { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.caption { font: var(--brand-text); color: var(--brand-text-color); min-height: 1.4em; max-width: 30ch; margin-inline: auto; text-align: center; text-wrap: balance; }   /* even lines, centred, never one word left alone */
.from { width: fit-content; max-width: 100%; margin: 0 auto var(--space-2); display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: var(--radius-pill); background: var(--raised); box-shadow: var(--shadow-raised); font-size: 13px; font-weight: 500; line-height: 1; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* who sent the invitation: a soft chip on raised, as in the first-story pages */
.from span { overflow: hidden; text-overflow: ellipsis; }
.from b { font-weight: 700; color: var(--ink); }
.from::before { content: ''; flex: none; width: 18px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Crect x='1.2' y='1.6' width='17.6' height='12.8' rx='3.6' fill='%23fcefe4' stroke='%23f47b2a' stroke-width='1.6'/%3E%3Cpath d='M3 3.6 10 8.8 17 3.6' fill='none' stroke='%23f47b2a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='9' r='2.1' fill='%23ffc22e' stroke='%23f47b2a' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat; }   /* Haley's envelope: tint paper, orange lines, a yellow seal like her hair tie */
.status:empty { min-height: 0; padding: 0; }   /* no empty gap between Haley's words and the buttons while nobody speaks */
.status { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 4px 18px; font-size: 18px; border-radius: var(--radius-pill); font-weight: 800; color: var(--ink-soft); }
/* Two states that must never be mistaken for each other, also by someone who cannot hear: Haley speaking (blue, a speaker, Haley bobs) and Haley listening (red, a microphone, a timer and a level bar). Colour is never the only difference: the words and the icon differ too. */
.stage[data-mode] .status { color: #fff; }
.stage[data-mode] .status::before { content: ""; flex: none; width: 24px; height: 24px; background: center / contain no-repeat; }
.stage[data-mode=speaking] .status { background: var(--action); }
.stage[data-mode=speaking] .status::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z' fill='white'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.stage[data-mode=recording] .status { background: var(--rec); }
.stage[data-mode=recording] .status::before { border-radius: 50%; animation: pulse 1.4s ease-out infinite; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3' fill='white'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } to { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }
.meter { width: min(80%, 320px); height: 20px; background: var(--raised); border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }   /* the track is 3:1 with the page, the bar 7:1 with the track */
.meter i { display: block; height: 100%; width: 0; background: var(--rec); transition: width .1s; }
.timer { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.actions { display: grid; gap: 12px; width: min(100%, 400px); }
.actions .btn { min-height: 52px; font-size: 18px; line-height: 1.25; padding: 10px 18px; text-wrap: balance; }   /* floors for readers of 70 and over: 48px targets and 18px text */
.decades { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 16px; width: min(100%, 420px); }   /* two columns; one when the page is very narrow or zoomed */
.decades .btn { min-height: 52px; font-size: 18px; padding: 8px 12px; }
.decades .btn.ghost { grid-column: 1 / -1; }
/* Nothing moves for someone who asked for less motion: Haley stays still, the dot does not pulse, the bar jumps instead of sliding. The words and icons still tell the states apart. */
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* the sender's listening page */
.player audio { width: 100%; margin: var(--space-2) 0; }
.player .btn { margin-bottom: var(--space-2); }
.timeline { position: relative; display: flex; justify-content: space-between; margin: var(--space-4) 0 var(--space-2); padding-top: 28px; border-top: 4px solid var(--line); font-size: 18px; color: var(--ink-soft); }
.timeline span { position: relative; padding-top: 8px; }
.timeline span.on { color: var(--ink); font-weight: 800; }
.timeline span.on::before { content: ''; position: absolute; top: -40px; inset-inline-start: 50%; translate: 50% 0; width: 22px; height: 22px; border-radius: 50%; background: var(--haley-orange); box-shadow: 0 0 0 6px var(--era-childhood-glow); }
[dir=rtl] .timeline span.on::before { translate: 50% 0; }
@media (max-width: 300px) { .timeline { display: none; } }

/* the plain pages (the parent's approval): the same sizes as the first-story pages. The product's own pages (body.app) set theirs in ui.css. */
body:not(.elder):not(.app) h1 { font-size: clamp(26px, 7vw, 34px); }
body:not(.elder):not(.app) h2 { font-size: 22px; }
body:not(.elder):not(.app) { font: var(--brand-text); color: var(--brand-text-color); }
body:not(.elder):not(.app) .card { padding: var(--space-2) var(--space-3); }   /* ten labels no longer fit; the sentence under the picture says the same */

/* A web app on a phone: no grey flash or double-tap delay on a tap, no pull-down reload in the middle of a recording, nothing selected by a long press on a button; the notch stays clear in landscape. Every field is 16px or more, so iOS does not zoom in on it. */
:root { color-scheme: light; }
html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, input, select, textarea, [role=button] { touch-action: manipulation; }
body { overscroll-behavior-y: contain; padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
.btn, .chip span, .tab { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.screen-scroll { overscroll-behavior: contain; }

/* the code a buyer is shown: big, left to right, easy to select whole */
.code { margin: 0 0 12px; padding: 14px; border-radius: 16px; background: var(--tint); font: 800 22px/1.3 var(--font-sans); letter-spacing: 1px; text-align: center; -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }