/* Zone 4 visitor page. Tokens come from docs/BRAND-GUIDELINE.md only.
   Every screen fits the phone with no scrolling: the root size follows the smaller of the width and the height,
   all sizes are in rem, and the content blocks flex into the space that is left.
   Type scale (rem): hero 2.1, h2 1.5, lead 1, body 0.95, label 0.85, caption 0.8, button 1.05. Weights 300-500 only. */
@font-face {
  font-family: 'Readex Pro';
  src: url('assets/ReadexPro.ttf') format('truetype');
  font-weight: 160 700;
  font-display: swap;
}

:root {
  --slate: #25343F;
  --gold: #BB9661;
  --green: #006654;
  --pale: #D0D8DD;
  --cream: #F4EFE4;           /* gold tint: body text on slate (guideline 3.4) */
  --line: rgb(187 150 97 / .38);
  --line-soft: rgb(208 216 221 / .16);
  --s1: rgb(208 216 221 / .06);   /* surfaces: pale over slate (guideline 8) */
  --s2: rgb(208 216 221 / .11);
  --ok: #00AE68;
  --bad: #BB5A1C;             /* terracotta, error */
  --info: #67AEE1;
  --f-tears: #67AEE1;
  --f-serenity: #00AFAD;
  --f-gratitude: #BB9661;
  --f-joy: #00AE68;
  --f-awe: #BB5A1C;
  --f-humility: #7B8A94;
  --ease: cubic-bezier(.16, 1, .3, 1);  /* Al-Haramain easing, guideline 6.2 */
  --dur: 320ms;                         /* UI transition 280-400 ms, guideline 6.3 */
  --press: 140ms;                       /* tap feedback 120-180 ms */
  --cut: .9rem;                         /* chamfer on cards and buttons, guideline 5.5 */
  --strip: calc(min(100vw, 480px) / 9); /* pattern strip keeps the 1080 x 120 ratio of its clip */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  /* Follows the smaller of width and height, but is bounded in rem so the phone's own font-size setting still counts:
     about 14.8 px on a 390 x 844 phone at the default setting, larger when the visitor asked for larger text. */
  font-size: clamp(.84rem, min(3.8vw, 2vh), 1rem);
}

html, body { height: 100%; }
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--slate);
  color: var(--cream);
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.65;
  -webkit-tap-highlight-color: transparent;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Edge-anchored motif pair behind the content: a hairline line drawing, never a fill (guideline 5.3). */
.motif {
  position: fixed; top: 3rem; inset-inline-end: -22%; width: 92%; aspect-ratio: 2 / 1;
  background: url('assets/motif.svg') no-repeat center / contain;
  opacity: .16; pointer-events: none; z-index: 0;
}

/* ---- layout: one screen high, nothing scrolls ---- */
.shell {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: 100dvh; max-width: 440px; margin-inline: auto;
  padding: max(.3rem, env(safe-area-inset-top)) 1.25rem calc(var(--strip) + .7rem + env(safe-area-inset-bottom));
}
.top { display: flex; align-items: center; justify-content: space-between; min-height: 3.4rem; flex: none; }
.logo { height: 2.5rem; width: auto; display: block; }
.lang {
  min-width: 3.9rem; min-height: 2.6rem; padding: 0 .9rem;
  background: none; color: var(--pale); border: 1px solid var(--line-soft); border-radius: 999px;
  font: inherit; font-size: .9rem; font-weight: 500; letter-spacing: .04em; cursor: pointer;
  transition: background-color var(--press) var(--ease), border-color var(--press) var(--ease), transform var(--press) var(--ease);
}
.lang:active { background: var(--s2); border-color: var(--gold); transform: scale(.96); }

.steps { display: flex; gap: .5rem; list-style: none; margin: 0 0 .3rem; padding: 0; height: 4px; flex: none; }
.steps li { flex: 1; height: 4px; border-radius: 2px; background: var(--line-soft); transform-origin: var(--origin, right); overflow: hidden; position: relative; }
.steps li::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: inherit; transition: transform 520ms var(--ease); }
[dir='ltr'] .steps li { --origin: left; }
.steps li.on::after { transform: scaleX(1); }

main { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; outline: none; }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .65rem; padding-top: .5rem; }
.screen[hidden] { display: none; }
.center { text-align: center; }

/* Staggered reveal of a screen's children after it appears (guideline 6.3: 80-120 ms per line, ours 60 ms per block). */
.screen.enter > *, .pane.enter > * { animation: rise 560ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }

/* ---- type ---- */
h1, h2 { margin: 0; font-weight: 300; color: var(--cream); line-height: 1.3; outline: none; flex: none; }
h1 { font-size: 2.1rem; text-align: center; }
h1 em { display: block; font-style: normal; color: var(--gold); margin-top: .1rem; }
h2 { font-size: 1.5rem; }
h2 em { font-style: normal; color: var(--gold); }
h2 small { font-size: .85rem; color: var(--pale); font-weight: 300; }
.sub { margin: 0; color: var(--pale); font-size: 1rem; line-height: 1.7; font-weight: 300; flex: none; }
.welcome .sub { text-align: center; }
.en { margin: 0; color: var(--pale); opacity: .8; font-size: .82rem; text-align: center; line-height: 1.5; font-weight: 300; flex: none; }
html[lang='en'] .en { display: none; }
.note { margin: 0; color: var(--pale); font-size: .82rem; text-align: center; font-weight: 400; flex: none; }
.hint { margin: 0; color: var(--pale); font-size: .85rem; text-align: center; min-height: 1.5em; font-weight: 400; transition: opacity var(--dur) var(--ease); flex: none; }
.foot { margin-top: auto; padding: .5rem 0 .2rem; display: flex; flex-direction: column; gap: .5rem; flex: none; }
.foot.row { flex-direction: row; }
.grow { flex: 1; }

/* ---- welcome seal: rings draw on, star settles (guideline 6.2: strokes draw from the centre outwards) ---- */
.seal { width: min(48vw, 24vh, 230px); margin: 0 auto; aspect-ratio: 1; flex: none; }
.seal.small { width: min(34vw, 17vh, 150px); }
.seal svg { width: 100%; height: 100%; overflow: visible; }
.ring { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease) .3s forwards; transform: rotate(-90deg); transform-origin: 120px 120px; }
.ring.r2 { stroke-width: .8; opacity: .55; animation-delay: .7s; }
.core { fill: var(--gold); transform-box: fill-box; transform-origin: center; animation: settle 900ms var(--ease) both; }
.hole { fill: var(--slate); transform-box: fill-box; transform-origin: center; animation: settle 900ms var(--ease) 160ms both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes settle { from { opacity: 0; transform: scale(.86) rotate(-12deg); } to { opacity: 1; transform: none; } }
.welcome { justify-content: center; }
.welcome .foot { margin-top: 0; padding-top: .8rem; }

/* ---- buttons: chamfered, gold only on the primary action ---- */
.btn {
  min-height: 3.5rem; padding: 0 1.3rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  font: inherit; font-size: 1.05rem; font-weight: 500; line-height: 1.2;
  border: 0; cursor: pointer; position: relative;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition: background-color var(--press) var(--ease), color var(--press) var(--ease), transform var(--press) var(--ease), opacity var(--dur) var(--ease);
}
.btn .ico { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: none; }
.btn .arrow { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform var(--dur) var(--ease); }
[dir='ltr'] .btn .arrow { transform: scaleX(-1); }
.btn.fill { background: var(--gold); color: var(--slate); }
.btn.fill:active { background: var(--cream); transform: scale(.98); }
.btn.fill:not([disabled]):active .arrow { transform: translateX(-4px); }
[dir='ltr'] .btn.fill:not([disabled]):active .arrow { transform: scaleX(-1) translateX(-4px); }
.btn.ghost { background: var(--s1); color: var(--cream); font-weight: 400; box-shadow: inset 0 0 0 1px var(--line-soft); }
.btn.ghost:active { background: var(--s2); transform: scale(.98); }
.btn.small { min-height: 2.8rem; font-size: .9rem; padding: 0 1rem; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- feelings: solid eight-point stars (approved mockup), glyph inside ---- */
.feel { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: .3rem; align-items: center; justify-items: center; }
.ft {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: none; border: 0; padding: 0; color: var(--cream);
  font: inherit; font-size: .95rem; font-weight: 400; cursor: pointer;
  transition: color var(--press) var(--ease);
}
.ft .shape { position: relative; width: min(24vw, 12.5vh, 100px); aspect-ratio: 1; transition: transform var(--press) var(--ease); }
.ft .st { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--c); opacity: .24; transition: opacity var(--dur) var(--ease); }
.ft .gl { position: absolute; inset: 29%; width: 42%; height: 42%; fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur) var(--ease); }
.ft:active .shape { transform: scale(.93); }
.ft[aria-checked='true'] { color: var(--gold); }
.ft[aria-checked='true'] .st { opacity: 1; }
.ft[aria-checked='true'] .gl { stroke: var(--slate); }
.ft[aria-checked='true'] .shape { animation: pop 420ms var(--ease); }
@keyframes pop { 0% { transform: scale(.9); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ---- write ---- */
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: var(--s1); border: 1px solid var(--line-soft); border-radius: 999px; flex: none; }
.seg button { min-height: 2.6rem; background: none; border: 0; border-radius: 999px; color: var(--pale); font: inherit; font-size: .95rem; font-weight: 400; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--press) var(--ease); }
.seg button:active { transform: scale(.97); }
.seg button[aria-selected='true'] { background: var(--gold); color: var(--slate); font-weight: 500; }
.pane { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 0; }
.pane[hidden] { display: none; }
textarea, input[type='text'], input[type='number'] {
  width: 100%; font: inherit; font-size: 1rem; font-weight: 400; color: var(--cream);
  background: var(--s1); border: 1px solid var(--line-soft); padding: .6rem .8rem; border-radius: .7rem; min-height: 2.9rem;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
textarea { flex: 1; min-height: 5.5rem; resize: none; line-height: 1.7; }
textarea:focus, input:focus { outline: none; border-color: var(--gold); background: var(--s2); }
::placeholder { color: var(--pale); opacity: .6; font-weight: 300; }
.cnt { direction: ltr; font-size: .78rem; color: var(--pale); text-align: left; font-weight: 400; font-variant-numeric: tabular-nums; transition: color var(--dur) var(--ease); flex: none; line-height: 1.2; }
.cnt.near { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; flex: none; }
.chip {
  min-height: 2.4rem; padding: 0 .95rem; display: inline-flex; align-items: center;
  background: var(--s1); color: var(--cream); border: 1px solid var(--line-soft); border-radius: 999px;
  font: inherit; font-size: .9rem; font-weight: 400; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--press) var(--ease);
}
.chip:active { transform: scale(.95); background: var(--s2); }
.chip[aria-checked='true'] { background: var(--gold); color: var(--slate); border-color: var(--gold); font-weight: 500; }

/* ---- voice ---- */
.mic { display: flex; justify-content: center; padding-block: .4rem 0; flex: none; }
.recbtn { position: relative; width: min(34vw, 17vh, 140px); aspect-ratio: 1; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--gold); transition: transform var(--press) var(--ease); }
.recbtn:active { transform: scale(.95); }
.recbtn .rs { grid-area: 1 / 1; width: 100%; height: 100%; fill: var(--gold); opacity: .24; transition: opacity var(--dur) var(--ease), fill var(--dur) var(--ease); }
.recbtn .mc { grid-area: 1 / 1; width: 30%; height: 30%; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; }
.recbtn.on .rs { fill: var(--bad); opacity: 1; }
.recbtn.on .mc { stroke: var(--cream); }
.recbtn.on::after { content: ''; position: absolute; inset: -6px; border: 1.5px solid var(--bad); border-radius: 50%; animation: ring 1.5s var(--ease) infinite; }
@keyframes ring { from { opacity: .9; transform: scale(.94); } to { opacity: 0; transform: scale(1.14); } }
.rec-status { margin: 0; min-height: 1.5em; text-align: center; color: var(--cream); font-size: 1rem; font-weight: 400; font-variant-numeric: tabular-nums; flex: none; }
audio { width: 100%; height: 2.4rem; flex: none; }
audio[hidden] { display: none; }

/* ---- details ---- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; flex: none; }
.grp { display: flex; flex-direction: column; gap: .3rem; flex: none; min-width: 0; }
.grp label, .lbl { color: var(--pale); font-size: .85rem; font-weight: 400; line-height: 1.3; }
.consent { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 2.6rem; font-size: .88rem; font-weight: 400; cursor: pointer; line-height: 1.45; flex: none; }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { flex: none; width: 3rem; height: 1.7rem; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); position: relative; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: calc(1.7rem - 8px); height: calc(1.7rem - 8px); border-radius: 50%; background: var(--pale); transition: inset-inline-start var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.consent input:checked + .switch { background: var(--gold); border-color: var(--gold); }
.consent input:checked + .switch::after { inset-inline-start: calc(3rem - 1.7rem + 3px); background: var(--slate); }
.consent input:focus-visible + .switch { outline: 2px solid var(--gold); outline-offset: 3px; }
.privacy { margin: 0; font-size: .8rem; color: var(--pale); line-height: 1.55; font-weight: 400; flex: none; }

/* ---- hold to send: the star fills from the bottom as you press ---- */
.summary { background: var(--s1); border: 1px solid var(--line); border-radius: .8rem; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .2rem; font-size: 1rem; font-weight: 400; line-height: 1.6; flex: none; }
.summary small { color: var(--gold); font-size: .85rem; font-weight: 400; }
.summary span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hold-wrap { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 0; }
.hold { position: relative; width: min(52vw, 27vh, 210px); aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; color: var(--cream); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; --p: 0; }
.ringp { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ringp circle { fill: none; }
.ringp .track { stroke: var(--line-soft); stroke-width: 3; }
.ringp .prog { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 440; stroke-dashoffset: 440; }
.face { position: absolute; inset: 10%; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; row-gap: .1rem; transition: transform var(--press) var(--ease); }
.hs { grid-area: 1 / 1; width: 74%; aspect-ratio: 1; fill: var(--gold); }
.hs-base { opacity: .2; }
.hs-fill { clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0); transition: clip-path 220ms var(--ease); }
.hold.holding .hs-fill { transition: none; }
.hold-label { grid-area: 2 / 1; font-size: .9rem; font-weight: 500; color: var(--cream); text-align: center; line-height: 1.3; padding-bottom: .5rem; transition: opacity 200ms; }
.hold:active .face { transform: scale(.97); }
.hold.busy { pointer-events: none; }
.hold.launched .hs-fill { animation: launch 700ms var(--ease) forwards; }
.hold.launched .hold-label { opacity: 0; }
@keyframes launch { to { transform: translateY(-1.6rem) scale(1.12); opacity: 0; } }
/* When a failure panel is showing, it replaces the help line so the screen never grows. */
.screen:has(.send-panel:not([hidden])) #hold-help { display: none; }

.send-panel { border: 1px solid var(--bad); background: rgb(187 90 28 / .14); padding: .65rem .85rem; display: flex; flex-direction: column; gap: .45rem; border-radius: .7rem; animation: rise 420ms var(--ease) both; flex: none; }
.send-panel.info { border-color: var(--info); background: rgb(103 174 225 / .1); }
.send-panel p { margin: 0; font-weight: 400; font-size: .9rem; line-height: 1.5; }
.send-fields { margin: 0; padding-inline-start: 1.2rem; font-size: .85rem; }
.ref { font-size: .75rem !important; color: var(--pale); font-weight: 300 !important; }
.field-error { margin: 0; color: var(--cream); background: rgb(187 90 28 / .18); border-inline-start: 3px solid var(--bad); padding: .55rem .75rem; font-weight: 400; font-size: .9rem; line-height: 1.5; border-radius: 6px; animation: rise 360ms var(--ease) both; flex: none; }

/* ---- done ---- */
.tick { width: min(26vw, 12vh, 100px); margin: 0 auto; fill: var(--gold); animation: settle 800ms var(--ease) both; flex: none; }
.tick svg { display: block; width: 100%; height: auto; overflow: visible; }
.tick-path { fill: none; stroke: var(--slate); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 700ms var(--ease) 450ms forwards; }
.bignum { font-size: 3rem; font-weight: 300; color: var(--gold); text-align: center; line-height: 1.05; font-variant-numeric: tabular-nums; flex: none; }
.mosaic { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-content: center; overflow: hidden; }
.mosaic svg { width: 100%; aspect-ratio: 1; fill: var(--c, var(--pale)); animation: cell 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 14ms + 500ms); }
.mosaic svg.me { fill: var(--gold); animation: cell 520ms var(--ease) 900ms both, mine 2s ease-in-out 1.5s infinite; }
@keyframes cell { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes mine { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.fcard { margin: 0; background: var(--s1); border: 1px solid var(--line-soft); border-inline-start: 3px solid var(--ok); padding: .6rem .8rem; font-weight: 400; font-size: .9rem; line-height: 1.55; border-radius: 6px; flex: none; }

/* ---- banner: every failure that needs the visitor is shown here or in place (SPEC 2.1 rule 2). Fixed, so it never grows the page. ---- */
.banner {
  position: fixed; top: 0; inset-inline: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .6rem 1.25rem; padding-top: max(.6rem, env(safe-area-inset-top));
  background: var(--bad); color: #fff; font-weight: 400; font-size: .88rem; line-height: 1.5;
  animation: drop 420ms var(--ease) both;
}
@keyframes drop { from { transform: translateY(-100%); } to { transform: none; } }
.banner.info { background: var(--green); }
.banner p { margin: 0; flex: 1 1 14rem; }
.banner-actions { display: flex; gap: .5rem; }
.banner .btn.fill { background: var(--cream); }
.banner .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); }

.noscript { padding: 1.5rem; text-align: center; }

/* ---- pattern: hairline line drawing anchored to the bottom edge (guideline 5.3). Last frame of the HyperFrames clip. ---- */
.strip {
  position: fixed; inset-inline: 0; bottom: 0; margin-inline: auto; max-width: 480px; height: var(--strip); z-index: 2;
  background: var(--slate) url('assets/pattern-end.png') center / 100% 100% no-repeat;
  pointer-events: none;
}
.strip video { display: block; width: 100%; height: 100%; object-fit: fill; }

/* Reduced motion: transitions become a crossfade only; nothing is removed (SPEC 2.1 rule 3). */
@media (prefers-reduced-motion: reduce) {
  .screen.enter > *, .pane.enter > *, .core, .hole, .tick, .send-panel, .field-error, .banner, .mosaic svg { animation: fade 320ms linear both; animation-delay: 0s; }
  .ring, .tick-path { animation: none; stroke-dashoffset: 0; }
  .recbtn.on::after, .ft[aria-checked='true'] .shape, .mosaic svg.me { animation: none; }
  .hold.launched .hs-fill { animation: fade 320ms linear reverse forwards; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ===== Glass surfaces =====
   Frosted pale tint over slate: 7 % pale, 14 px blur, a hairline. No highlight, shine or gradient (guideline 6.1).
   The motif and the pattern strip sit behind, so the blur has something to soften. Gold primary buttons stay solid. */
:root { --glass: rgb(208 216 221 / .07); --glass-line: rgb(208 216 221 / .24); --blur: 14px; }
.motif { opacity: .24; }
.summary, .fcard, .seg, .chip, textarea, input[type='text'], input[type='number'], .lang, .btn.ghost, .send-panel, .field-error {
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15);
  backdrop-filter: blur(var(--blur)) saturate(1.15);
}
.fcard, .seg, .chip, textarea, input[type='text'], input[type='number'], .lang { background: var(--glass); border-color: var(--glass-line); }
.summary { background: var(--glass); }
.btn.ghost { background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); }
.btn.ghost:active { background: var(--s2); }
.lang:active, .chip:active { background: var(--s2); }
/* Browsers without backdrop blur get a slightly stronger tint so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .summary, .fcard, .seg, .chip, textarea, input[type='text'], input[type='number'], .lang, .btn.ghost { background: var(--s2); }
}

/* ===== Professional pass: calmer composition, crisp outlines, clear action hierarchy ===== */
/* The motif pair sits once, centred behind the welcome seal (guideline 5.3); inner screens stay clean. */
.motif { display: none; }
.welcome { justify-content: flex-start; }
.hero { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: .85rem; }
.welcome .foot { margin-top: auto; padding-top: .6rem; }
.seal { position: relative; isolation: isolate; width: min(56vw, 29vh, 250px); }
.seal::before { content: ''; position: absolute; inset: -42% -78%; z-index: -1; background: url('assets/motif.svg') center / contain no-repeat; opacity: .34; pointer-events: none; }
.hero .sub { max-width: 23rem; margin-inline: auto; }

/* Feelings: outlined star with a light tint instead of a muddy fill; the chosen one fills solid. */
.feel { grid-template-rows: none; align-content: center; gap: 1.3rem .4rem; }
.ft .shape { width: min(26vw, 14vh, 112px); }
.ft .st { fill: var(--c); fill-opacity: .14; stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; opacity: 1; transition: fill-opacity var(--dur) var(--ease); }
.ft[aria-checked='true'] .st { fill-opacity: 1; opacity: 1; }

/* Write: a text box sized for a sentence, chips right under it, counter last. */
.pane[data-pane='text'] { flex: 0 1 auto; }
textarea { flex: 0 0 auto; height: min(30vh, 11.5rem); }

/* Voice and hold: outline base, solid fill on action. */
.recbtn .rs { opacity: 1; fill-opacity: .12; stroke: var(--gold); stroke-width: 2.2; stroke-linejoin: round; }
.recbtn.on .rs { fill-opacity: 1; stroke: var(--bad); opacity: 1; }
.hs-base { opacity: 1; fill: var(--gold); fill-opacity: .1; stroke: var(--gold); stroke-width: 2.2; stroke-linejoin: round; }
.ringp .track { stroke-width: 3.5; }
.ringp .prog { stroke-width: 5; }
.hold-label { font-size: 1rem; }

/* Text link: the quiet third action (edit), so the primary and the alternative read first. */
.btn.link { background: none; box-shadow: none; clip-path: none; min-height: 2.6rem; padding: 0 1rem; color: var(--pale); font-size: .95rem; font-weight: 400; -webkit-backdrop-filter: none; backdrop-filter: none; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--line); }
.btn.link:active { color: var(--gold); background: none; transform: none; }
.cnt { margin-top: -.3rem; }
.mosaic svg.empty { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linejoin: round; animation: cell-soft 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 14ms + 500ms); }
@keyframes cell-soft { from { opacity: 0; transform: scale(.5); } to { opacity: .38; transform: none; } }

/* Composition: the content group sits in the middle of the free height, the actions stay at the thumb.
   Free space is split by auto margins above the first block and above the footer, so tall phones
   no longer show the content pinned to the top with a hole underneath. */
.screen:not(.welcome):not([data-screen='done']) > :first-child { margin-top: auto; }
.screen:not(.welcome) > .foot { margin-top: auto; }
.screen { gap: .9rem; }
.feel, .hold-wrap, .pane { flex: 0 0 auto; }
.feel { gap: 1.6rem .4rem; }
.hold-wrap { padding-block: .4rem; }
.screen[data-screen='write'] .pane[data-pane='voice']:not([hidden]) { gap: .9rem; }
.screen[data-screen='details'] { gap: 1rem; }
.screen[data-screen='closed'] { justify-content: center; }
.screen[data-screen='closed'] > .foot { margin-top: 0; }
.screen[data-screen='closed'] > :first-child { margin-top: 0; }

/* Safety net: if a screen is ever taller than the phone (landscape, big text, open keyboard) it scrolls inside
   itself, so no button is cut off. At normal sizes nothing scrolls (checked at 390x844, 375x667, 360x640). */
.screen { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.foot { position: sticky; bottom: 0; background: var(--slate); z-index: 3; }
.screen { margin-inline: -1.25rem; padding-inline: 1.25rem; }

/* Short phones (640 px and under): tighter vertical rhythm so every screen still fits without scrolling. */
@media (max-height: 680px) {
  .top { min-height: 3rem; }
  .screen { gap: .5rem; padding-top: .3rem; }
  .foot { padding: .35rem 0 .1rem; gap: .4rem; }
  .btn { min-height: 3.2rem; }
}

/* ===== Selection motion: every choice answers at once, and the answer is easy to see ===== */
/* Feeling: the chosen star fills and pops, an outline star spreads from it, the others step back, then the screen moves on. */
.ft { transition: color var(--press) var(--ease), opacity 360ms var(--ease), transform 360ms var(--ease); }
.ft .burst { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linejoin: round; opacity: 0; pointer-events: none; }
.ft[aria-checked='true'] .burst { animation: burst 700ms var(--ease) both; }
@keyframes burst { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
.ft .gl { transition: stroke var(--dur) var(--ease), transform 420ms var(--ease); }
.ft[aria-checked='true'] .gl { transform: scale(1.12) rotate(-6deg); }
.ft[aria-checked='true'] .shape { animation: pop 520ms var(--ease); }
.feel[data-picked] .ft:not([aria-checked='true']) { opacity: .3; transform: scale(.9); }
.feel[data-picked] .ft[aria-checked='true'] { transform: translateY(-.2rem); }
.ft:focus-visible .shape { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 50%; }

/* Write / voice switch: one gold thumb slides between the two halves. */
.seg { position: relative; }
.seg::before { content: ''; position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--gold); transition: transform 380ms var(--ease); }
.seg:has(#tab-voice[aria-selected='true'])::before { transform: translateX(100%); }
[dir='rtl'] .seg:has(#tab-voice[aria-selected='true'])::before { transform: translateX(-100%); }
.seg button { position: relative; z-index: 1; }
.seg button[aria-selected='true'] { background: none; }

/* Chips: the chosen one fills, pops, and a tick draws in. */
.chip { position: relative; gap: 0; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--press) var(--ease), padding 300ms var(--ease), gap 300ms var(--ease); }
.chip::before { content: ''; width: 0; height: .8rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transition: width 300ms var(--ease), opacity 300ms var(--ease), margin 300ms var(--ease); }
.chip[aria-checked='true']::before { width: .8rem; opacity: 1; margin-inline-end: .4rem; }
.chip[aria-checked='true'] { animation: pop 420ms var(--ease); }
.chip:active { transform: scale(.94); }

/* Buttons: disabled primary reads clearly dimmed. */
.btn.fill[disabled] { opacity: .35; }

/* Back: the diamond mark from guideline 5.5, icon only. */
.btn.back { width: 3.6rem; min-width: 3.6rem; padding: 0; flex: none; background: var(--s2); box-shadow: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); color: var(--gold); }
.btn.back .arrow { width: 1.2rem; height: 1.2rem; transform: scaleX(-1); }
[dir='ltr'] .btn.back .arrow { transform: none; }
.btn.back:active { background: var(--gold); color: var(--slate); }

@media (prefers-reduced-motion: reduce) {
  .ft[aria-checked='true'] .burst, .chip[aria-checked='true'] { animation: none; }
  .seg::before, .chip::before { transition: opacity 320ms linear; }
}