/* NeuroDivine, the app. Love Sunday's paper, sun and type, made for one hand on a phone.
   Every text pairing below is one love-sunday.css already measured (ink, ink-soft and
   red-ink on paper, blush and mat; mat on red-ink). Bright red is for the mark and the
   halo, never for words a person has to read.
   Motion is soothing by rule: slow ease-outs, small distances, nothing that flashes,
   shakes or loops faster than a breath, and every bit of it answers something the reader
   did. Prefers-reduced-motion stills all of it (the end of this file). */

:root {
  --red: #FE1717;
  --red-ink: #BD1212;
  --ink: #3B1C24;
  --ink-soft: #7D4B53;
  --paper: #FEDEED;
  --blush: #FBCFE1;
  --mat: #FFFDFB;
  --sky: #FFF1F6;
  --glow: #FFD9C2;
  --line: #EFC6D3;
  --line-strong: #E1A9BC;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
  --tap: 3rem;
  --r: 1.25rem;
  --shadow: 0 1px 2px rgb(59 28 36 / .07), 0 10px 28px -14px rgb(59 28 36 / .22);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --soft-spring: cubic-bezier(.34, 1.3, .64, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(180deg, var(--sky) 0, var(--paper) 18rem) no-repeat, var(--paper);
  color: var(--ink); font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--red-ink); text-underline-offset: .18em; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; border-radius: .5rem; }
[hidden] { display: none !important; }

/* — the frame — */
.shell { max-width: 34rem; margin: 0 auto; padding: 0 1rem calc(6rem + env(safe-area-inset-bottom)); }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: calc(.6rem + env(safe-area-inset-top)) 0 .6rem;
  background: linear-gradient(180deg, var(--sky) 70%, rgb(255 241 246 / 0)); }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: 1.3rem; font-variation-settings: "SOFT" 100, "WONK" 1; }
.brand svg { width: 2.5rem; height: 2.5rem; }
.brand i { color: var(--red); font-weight: 400; }
main:focus { outline: none; }

.tabs { position: fixed; left: 50%; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 6;
  translate: -50% 0; width: min(22rem, calc(100% - 2rem)); display: grid; grid-template-columns: 1fr 1.2fr 1fr;
  align-items: center; padding: .35rem; border-radius: 999px; background: var(--mat); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.tab { display: grid; justify-items: center; gap: .1rem; min-height: 3.25rem; padding: .35rem 0;
  border-radius: 999px; color: var(--ink-soft); text-decoration: none; font-size: .78rem; font-weight: 600; }
.tab svg { width: 1.45rem; height: 1.45rem; }
.tab[aria-current="page"] { color: var(--ink); background: var(--blush); }
.tab--rate { color: var(--ink); }
.tab--rate svg { width: 2.2rem; height: 2.2rem; margin-top: -.15rem; }

/* — type — */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 1;
  line-height: 1.08; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 1.6rem + 3vw, 2.8rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p { margin: 0; }
.love { font-style: italic; font-weight: 400; color: var(--red); }
.eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.nm { text-transform: none; letter-spacing: .02em; }
.soft { color: var(--ink-soft); }
.small { font-size: .92rem; }

/* — screens — */
.screen { display: grid; gap: 1.25rem; padding-top: .75rem; }
.screen__head { display: grid; gap: .5rem; }
.stack { display: grid; gap: .75rem; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.card { display: grid; gap: .75rem; padding: 1.25rem; border-radius: var(--r); background: var(--mat); box-shadow: var(--shadow); }
.card--quiet { background: rgb(255 253 251 / .6); box-shadow: 0 0 0 1px var(--line); }
.card--invite { background: var(--ink); color: var(--mat); }
.card--invite .soft { color: var(--blush); }
.note { padding: .75rem 1rem; border-radius: .9rem; background: var(--blush); font-size: .95rem; }
.note--error { background: var(--mat); box-shadow: inset 0 0 0 2px var(--red-ink); }
.empty { padding: 1.5rem 1.25rem; border: 1.5px dashed var(--line-strong); border-radius: var(--r); color: var(--ink-soft); text-align: center; }
.loading { display: grid; justify-items: center; gap: 1rem; padding: 5rem 0; color: var(--ink-soft); }
.loading__mark { width: 5rem; height: 5rem; }

/* — buttons — */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap);
  padding: 0 1.4rem; border: 0; border-radius: 999px; background: var(--red-ink); color: var(--mat);
  font-weight: 700; font-size: 1.05rem; text-decoration: none; cursor: pointer; }
.btn--wide { width: 100%; min-height: 3.5rem; font-size: 1.1rem; }
.btn--line { background: transparent; color: var(--red-ink); box-shadow: inset 0 0 0 2px var(--red-ink); }
.btn--soft { background: var(--mat); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ink { background: var(--ink); color: var(--mat); }
.btn:disabled { opacity: .55; cursor: default; }
.btn svg { width: 1.6rem; height: 1.6rem; }
.link { background: none; border: 0; padding: .4rem 0; color: var(--red-ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: .18em; cursor: pointer; min-height: 2.75rem; }
.back { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: 0;
  border: 0; background: none; color: var(--ink-soft); font-weight: 600; cursor: pointer; text-decoration: none; }

/* — forms — */
.field { display: grid; gap: .35rem; }
.field label, .field legend { font-weight: 600; }
.field .hint { color: var(--ink-soft); font-size: .92rem; }
.input, .textarea { width: 100%; min-height: var(--tap); padding: .7rem 1rem; border: 1.5px solid var(--line-strong);
  border-radius: .9rem; background: var(--mat); font-size: 1.05rem; }
.textarea { min-height: 6rem; resize: vertical; }
.input:focus, .textarea:focus { outline: 3px solid var(--red-ink); outline-offset: 1px; border-color: var(--red-ink); }
.check { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: start; min-height: var(--tap); padding: .35rem 0; cursor: pointer; }
.check input { width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; accent-color: var(--red-ink); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.count { justify-self: end; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); }

/* — chips — */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { min-height: 2.75rem; padding: 0 1rem; border: 1.5px solid var(--line-strong); border-radius: 999px;
  background: var(--mat); font-weight: 600; font-size: .95rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--mat); border-color: var(--ink); }
.chip--small { min-height: 2.4rem; padding: 0 .85rem; font-size: .9rem; }

/* — the halo — */
.halo { display: block; width: 100%; max-width: 22rem; margin: 0 auto; overflow: visible; }
.halo--small { width: 4.25rem; height: 4.25rem; max-width: none; margin: 0; }
.halo--mid { max-width: 15rem; }
.halo--rate { max-width: 9.5rem; }                 /* small enough that all five words fit on one phone screen */
.screen--rate { gap: .8rem; padding-top: 0; }
.screen--rate .question { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2rem); }
.screen--rate .word { min-height: 3.3rem; padding-block: .35rem; }
.screen--rate .words { gap: .45rem; }
.halo .glow { opacity: .9; }
.halo .lvl { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 2 5; }
.halo .ray-n { fill: var(--ink-soft); }
.halo .ray-f { fill: var(--red); }
.halo .ray-dot { fill: var(--line-strong); }
.halo .ray-now { fill: var(--line-strong); }
.halo .ring { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 5 5; }
.halo .lab { font-family: var(--font-text); font-size: 21px; font-weight: 600; }
.halo .lab-n { fill: var(--ink-soft); }
.halo .lab-f { fill: var(--red-ink); }
.halo path { transition: d .35s var(--ease); }

/* — places — */
.search { position: relative; }
.search .input { padding-left: 2.75rem; }
.search svg { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 1.2rem; height: 1.2rem; color: var(--ink-soft); }
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.place { display: grid; grid-template-columns: 4.25rem 1fr; gap: 1rem; align-items: center; padding: .9rem 1rem;
  border-radius: var(--r); background: var(--mat); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.place__name, .place__where, .place__sum { display: block; }
h1:focus { outline: none; }
.place__name { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.15;
  font-variation-settings: "SOFT" 100, "WONK" 1; }
.place__where { color: var(--ink-soft); font-size: .92rem; }
.place__sum { font-size: .95rem; }
.fit { display: inline-block; margin-top: .25rem; padding: .1rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.fit--yes { background: var(--blush); color: var(--ink); }
.fit--check { background: var(--ink); color: var(--mat); }
.status { display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: var(--blush); color: var(--ink); }
.status--public { background: var(--red-ink); color: var(--mat); }

.rays { list-style: none; margin: 0; padding: 0; display: grid; }
.rays li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.rays li:last-child { border-bottom: 0; }
.rays b { font-weight: 600; color: var(--ink-soft); }
.rays .f b { color: var(--red-ink); }
.rays span { text-align: right; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tags li { padding: .25rem .75rem; border-radius: 999px; background: var(--blush); font-size: .93rem; }
.tags--heads li { background: var(--mat); box-shadow: inset 0 0 0 1px var(--line-strong); }
.said { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.said li { display: grid; gap: .2rem; padding-left: .9rem; border-left: 3px solid var(--line-strong); }
.said .who { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }

/* — rating — */
.progress { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.progress i { height: .35rem; border-radius: 999px; background: var(--line); }
.progress i.done { background: var(--ink-soft); }
.progress i.done.f { background: var(--red); }
.progress i.here { background: var(--ink); }
.question { font-family: var(--font-display); font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.2rem); line-height: 1.12; }
.words { display: grid; gap: .6rem; }
.word { display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; align-items: center; width: 100%; min-height: 3.6rem;
  padding: .5rem 1.1rem .5rem .7rem; border: 1.5px solid var(--line-strong); border-radius: 1.1rem; background: var(--mat);
  text-align: left; font-size: 1.1rem; font-weight: 600; cursor: pointer; }
.word small { display: block; font-weight: 400; font-size: .9rem; color: var(--ink-soft); }
.word[aria-pressed="true"] { border-color: var(--ink); background: var(--blush); box-shadow: inset 0 0 0 1.5px var(--ink); }
.level { display: flex; gap: 3px; align-items: flex-end; height: 1.6rem; }
.level i { width: 5px; border-radius: 3px; background: var(--line-strong); }
.level i.on { background: var(--ink-soft); }
.level--f i.on { background: var(--red); }
.skip { justify-self: center; }
.result__sum { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.25; text-align: center;
  font-variation-settings: "SOFT" 100, "WONK" 1; }
.pledge { display: grid; gap: .25rem; padding: 1rem; border-radius: 1rem; background: var(--blush); }

.hero { display: grid; gap: 1rem; justify-items: center; text-align: center; padding: 1rem 0 .5rem; }
.hero svg.mark { width: 7rem; height: 7rem; filter: drop-shadow(0 0 1.6rem var(--glow)); }
.hero h1 { font-size: clamp(2.3rem, 1.8rem + 3vw, 3rem); }
.big-rate { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem;
  border-radius: var(--r); background: var(--ink); color: var(--mat); text-decoration: none; box-shadow: var(--shadow); }
.big-rate svg { width: 3.5rem; height: 3.5rem; }
.big-rate strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem;
  font-variation-settings: "SOFT" 100, "WONK" 1; }
.big-rate span span { color: var(--blush); font-size: .95rem; }
.big-rate .arrow { font-size: 1.6rem; }
.invite-link { font-family: var(--font-mono); font-size: .82rem; overflow-wrap: anywhere; padding: .6rem .8rem;
  border-radius: .7rem; background: var(--sky); color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: calc(6.25rem + env(safe-area-inset-bottom)); z-index: 7; translate: -50% 0;
  max-width: calc(100% - 2rem); padding: .75rem 1.1rem; border-radius: 999px; background: var(--ink); color: var(--mat);
  font-weight: 600; box-shadow: var(--shadow); }

/* — the flow: one question, a few calm choices — */
.screen--flow { gap: 1.1rem; }
.dots { display: flex; gap: .35rem; }
.dots i { width: .5rem; height: .5rem; border-radius: 999px; background: var(--line); transition: background .35s ease, width .35s var(--ease); }
.dots i.done { background: var(--ink-soft); }
.dots i.here { width: 1.3rem; background: var(--red-ink); }
.picks { display: grid; gap: .55rem; }
.pick { display: grid; grid-template-columns: 1.9rem 1fr; gap: .8rem; align-items: center; width: 100%; min-height: 3.4rem;
  padding: .5rem 1.1rem .5rem .8rem; border: 1.5px solid var(--line-strong); border-radius: 1.1rem; background: var(--mat);
  text-align: left; font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.pick small { display: block; font-weight: 400; font-size: .9rem; color: var(--ink-soft); }
.pick__box { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--line-strong); color: transparent; transition: background .3s ease, box-shadow .3s ease, color .3s ease; }
.pick__box svg, .extra__tick svg { width: 1.15rem; height: 1.15rem; }
.pick__box path, .extra__tick path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s var(--ease) .05s; }
.pick[aria-pressed="true"] { border-color: var(--ink); background: var(--blush); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pick[aria-pressed="true"] .pick__box { background: var(--red-ink); box-shadow: none; color: var(--mat); }
.pick[aria-pressed="true"] .pick__box path { stroke-dashoffset: 0; }
.more { justify-self: start; }
.word--none .level--none { display: grid; place-items: center; font-size: 1.35rem; color: var(--ink-soft); font-weight: 400; }

/* — the hub — */
.hub-head { grid-template-columns: 6.5rem 1fr; align-items: center; gap: 1rem; }
.halo--hub { width: 6.5rem; height: 6.5rem; max-width: none; }
.extras { display: grid; gap: .7rem; }
.extra { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .85rem; align-items: center; width: 100%; min-height: 4.2rem;
  padding: .75rem 1.1rem .75rem .9rem; border: 0; border-radius: var(--r); background: var(--mat); box-shadow: var(--shadow);
  text-align: left; cursor: pointer; color: var(--ink); }
.extra__text strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.2;
  font-variation-settings: "SOFT" 100, "WONK" 1; }
.extra__text small { display: block; color: var(--ink-soft); font-size: .92rem; }
.extra__tick { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--line-strong); color: transparent; transition: background .35s ease, color .35s ease; }
.extra--done .extra__tick { background: var(--red-ink); box-shadow: none; color: var(--mat); }
.extra--done .extra__tick path { stroke-dashoffset: 0; }
.extra__go { font-weight: 700; color: var(--red-ink); font-size: .95rem; }
.when-line { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.when-line .link { min-height: 2.5rem; }
.btn--glow { box-shadow: 0 12px 30px -14px rgb(189 18 18 / .7); }

/* — photos — */
.photo-slot { display: grid; gap: .75rem; }
.drop { display: grid; justify-items: center; gap: .35rem; padding: 2rem 1rem; border: 2px dashed var(--line-strong); border-radius: var(--r);
  background: rgb(255 253 251 / .7); color: var(--ink); text-align: center; cursor: pointer; transition: background .3s ease, border-color .3s ease; }
.drop:hover { background: var(--mat); border-color: var(--ink-soft); }
.drop svg { width: 3rem; height: 3rem; color: var(--red-ink); }
.drop small { color: var(--ink-soft); }
.photo-slot.is-busy { opacity: .6; }
.photo-preview { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--mat); }
.photo-preview img { display: block; width: 100%; max-height: 22rem; object-fit: cover; }
.strip { display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1rem; padding: .2rem 1rem .6rem;
  scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip__item { flex: 0 0 auto; display: grid; gap: .3rem; width: 11rem; padding: 0; border: 0; background: none; text-align: left;
  scroll-snap-align: start; cursor: pointer; color: var(--ink-soft); font-size: .85rem; font-weight: 600; }
.strip__item img { display: block; width: 11rem; height: 8.25rem; object-fit: cover; border-radius: 1rem; box-shadow: var(--shadow); background: var(--blush); }
.lightbox { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem;
  background: rgb(59 28 36 / .82); }
.lightbox figure { margin: 0; display: grid; gap: .6rem; max-width: 40rem; }
.lightbox img { display: block; max-width: 100%; max-height: 78vh; border-radius: 1rem; object-fit: contain; }
.lightbox figcaption { color: var(--blush); font-weight: 600; text-align: center; }
.lightbox__close { position: absolute; top: calc(.75rem + env(safe-area-inset-top)); right: 1rem; width: 3rem; height: 3rem;
  border: 0; border-radius: 999px; background: var(--mat); color: var(--ink); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.said--photo { grid-template-columns: 3.5rem 1fr; column-gap: .75rem; }
.said--photo > *:not(.said__thumb) { grid-column: 2; }
.said__thumb { grid-row: 1 / span 3; width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: .7rem; }

/* — the place — */
.feel { text-align: center; font-weight: 600; color: var(--ink-soft); margin-top: -.25rem; }
.place__vibe { display: block; color: var(--red-ink); font-weight: 600; font-size: .9rem; }
.note--you { display: grid; gap: .35rem; background: var(--sky); box-shadow: inset 0 0 0 1px var(--line); }
.tags--offers li { background: var(--sky); box-shadow: inset 0 0 0 1px var(--line-strong); }
.card--link { color: inherit; text-decoration: none; }
.card__go { justify-self: start; font-weight: 700; color: var(--red-ink); }
.card--fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; }
.card--fold summary::-webkit-details-marker { display: none; }
.card--fold summary::after { content: "+"; font-size: 1.6rem; color: var(--ink-soft); transition: rotate .3s var(--ease); }
.card--fold[open] summary::after { rotate: 45deg; }
.card--celebrate { position: relative; overflow: hidden; }
/* Saved: on a short phone the halo gives way, but only down to a size whose ray names still read
   (16.5rem keeps them at 12px and up), and Share stays in reach without a scroll. Where the screen is
   too short for it to sit under the halo card, it rests just above the tab bar until the screen is
   scrolled to where it belongs. */
.screen--done { gap: 1rem; }
.screen--done h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.5rem); }
.screen--done .card--celebrate { gap: .5rem; padding-block: 1rem; }
.screen--done .card--celebrate .halo { max-width: clamp(16.5rem, calc((100vh - 31rem) * 1.28), 22rem);
  max-width: clamp(16.5rem, calc((100svh - 31rem) * 1.28), 22rem); }
.screen--done > .btn--glow { position: sticky; bottom: calc(6rem + env(safe-area-inset-bottom)); z-index: 5; }
.btn--small { min-height: 2.75rem; padding: 0 1rem; font-size: .95rem; gap: .4rem; }
.btn--small svg { width: 1.2rem; height: 1.2rem; }

/* — home screen — */
.home-slot:empty { display: none; }
.card--home { grid-template-columns: 3.5rem 1fr; align-items: start; gap: 1rem;
  background: linear-gradient(135deg, var(--mat) 40%, var(--sky)); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.card--home h2 { font-size: 1.3rem; }
.card--home-quiet { box-shadow: 0 0 0 1px var(--line); }
.home-icon { width: 3.5rem; height: 3.5rem; border-radius: .95rem; box-shadow: 0 6px 16px -8px rgb(59 28 36 / .45); }
.card--home.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .28s ease, transform .28s var(--ease); }
.sheet { position: fixed; inset: 0; z-index: 25; display: grid; align-items: end; background: rgb(59 28 36 / .45); }
.sheet__panel { display: grid; gap: 1rem; width: min(34rem, 100%); margin: 0 auto; padding: .75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  border-radius: 1.6rem 1.6rem 0 0; background: var(--mat); box-shadow: 0 -12px 40px -16px rgb(59 28 36 / .45); }
.sheet__grip { justify-self: center; width: 2.75rem; height: .3rem; border-radius: 999px; background: var(--line-strong); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 2.9rem 1fr; gap: .9rem; align-items: center; font-size: 1.05rem; font-weight: 600; }
.steps__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .9rem; background: var(--blush); color: var(--red-ink); }
.steps__icon svg { width: 1.5rem; height: 1.5rem; }
.sheet.is-leaving { opacity: 0; transition: opacity .26s ease; pointer-events: none; }
.sheet.is-leaving .sheet__panel { transform: translateY(24px); transition: transform .26s var(--ease); }
/* a sheet taller than the phone (larger system type, a short screen) scrolls inside itself */
.sheet__panel { position: relative; max-height: calc(100vh - .5rem); max-height: calc(100dvh - env(safe-area-inset-top) - .5rem);
  overflow-y: auto; overscroll-behavior: contain; }
.sheet__panel h2:focus { outline: none; }
.sheet__status { font-weight: 600; }
/* an empty status takes no room but stays in the page, so a screen reader hears what it says next:
   a live region that appears already holding its words is often not read out */
.sheet__status:empty { position: absolute; }
.sheet__x { position: absolute; top: .6rem; right: .75rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px;
  background: var(--sky); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* — the share drawer — */
.sheet__panel--share { gap: .8rem; }
.sheet__panel--share h2 { padding-right: 3rem; }
.sheet__panel--share .btn--small { justify-self: center; }
.shares { display: flex; gap: .6rem; align-items: start; min-height: 11.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; margin: 0 -1.25rem; padding: .35rem 1.25rem .5rem; scroll-padding-inline: 1.25rem; scrollbar-width: none; }
.shares::-webkit-scrollbar { display: none; }
.shares__wait { align-self: center; }
.share-pick { flex: 0 0 auto; display: grid; justify-items: center; gap: .35rem; padding: .3rem; border: 0; border-radius: 1rem;
  background: none; color: var(--ink-soft); font-size: .85rem; font-weight: 600; scroll-snap-align: start; cursor: pointer; }
.share-pick canvas { display: block; width: 5.75rem; height: auto; border-radius: .6rem; box-shadow: var(--shadow); background: var(--blush); }
.share-pick[aria-pressed="true"] { color: var(--ink); }
.share-pick[aria-pressed="true"] canvas { box-shadow: 0 0 0 3px var(--mat), 0 0 0 5.5px var(--ink); }

/* — Face ID — */
.card--face { grid-template-columns: 3.5rem 1fr; align-items: start; gap: 1rem;
  background: linear-gradient(135deg, var(--mat) 40%, var(--sky)); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.card--face h2 { font-size: 1.3rem; }
.card--face-on .face-icon { background: var(--red-ink); color: var(--mat); }
.face-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: .95rem; background: var(--blush); color: var(--red-ink); }
.face-icon svg { width: 2rem; height: 2rem; }
.face-icon--big { width: 6rem; height: 6rem; border-radius: 1.6rem; box-shadow: 0 0 2.2rem var(--glow); }
.face-icon--big svg { width: 3.4rem; height: 3.4rem; }
.btn--face svg { width: 1.5rem; height: 1.5rem; }

/* ——— motion: soft, slow, and only in answer to the reader ——— */
@keyframes nd-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nd-bloom { 0% { transform: scale(1); } 45% { transform: scale(1.018); box-shadow: 0 0 0 6px rgb(251 207 225 / .9), inset 0 0 0 1.5px var(--ink); } 100% { transform: scale(1); } }
@keyframes nd-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes nd-ray { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes nd-sun { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes nd-glow { from { opacity: .15; } to { opacity: .9; } }
@keyframes nd-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-10px) scale(.4); }
  35% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1); } }
@keyframes nd-toast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.screen > * { animation: nd-rise .5s var(--ease) backwards; }
.screen > *:nth-child(2) { animation-delay: .05s; }
.screen > *:nth-child(3) { animation-delay: .1s; }
.screen > *:nth-child(4) { animation-delay: .15s; }
.screen > *:nth-child(5) { animation-delay: .2s; }
.screen > *:nth-child(n+6) { animation-delay: .25s; }
.places > li, .extra, .strip__item { animation: nd-rise .5s var(--ease) backwards; animation-delay: calc(.08s + var(--i, 0) * .06s); }
.words > .word, .picks > .pick { animation: nd-rise .45s var(--ease) backwards; }
.words > .word:nth-child(2), .picks > .pick:nth-child(2) { animation-delay: .04s; }
.words > .word:nth-child(3), .picks > .pick:nth-child(3) { animation-delay: .08s; }
.words > .word:nth-child(4), .picks > .pick:nth-child(4) { animation-delay: .12s; }
.words > .word:nth-child(5), .picks > .pick:nth-child(5) { animation-delay: .16s; }
.words > .word:nth-child(n+6), .picks > .pick:nth-child(n+6) { animation-delay: .2s; }
.pick--late { animation-delay: calc(var(--i, 0) * .05s) !important; }
.btn, .word, .pick, .chip, .extra, .place, .tab, .big-rate {
  transition: transform .2s var(--ease), background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease; }
.btn:active, .word:active, .pick:active, .chip:active, .extra:active, .place:active, .big-rate:active { transform: scale(.975); }
@media (hover: hover) {
  .btn:hover, .extra:hover, .place:hover, .big-rate:hover { transform: translateY(-1px); }
}
.word[aria-pressed="true"], .pick[aria-pressed="true"], .chip[aria-pressed="true"] { animation: nd-bloom .5s var(--ease); }
.progress i { transition: background .4s ease; }
.loading__mark { animation: nd-breathe 3.6s ease-in-out infinite; }
.toast { animation: nd-toast .35s var(--ease) both; }
.lightbox { animation: nd-fade .25s ease backwards; }
@keyframes nd-sheet { from { transform: translateY(100%); } to { transform: none; } }
.sheet { animation: nd-fade .3s ease backwards; }
.sheet__panel { animation: nd-sheet .45s var(--ease) backwards; }
.steps li { animation: nd-rise .45s var(--ease) backwards; animation-delay: calc(.2s + var(--i, 0) * .08s); }
.lightbox img { animation: nd-rise .4s var(--ease) backwards; }
.lightbox.is-leaving { opacity: 0; transition: opacity .2s ease; }
.photo-preview img, .strip__item img { animation: nd-fade .5s ease backwards; }
.halo .ray-fresh, .halo--grow .ray-n, .halo--grow .ray-f { transform-box: fill-box; transform-origin: 50% 100%;
  animation: nd-ray .6s var(--soft-spring) both; }
.halo--grow .sun circle { transform-box: fill-box; transform-origin: 50% 50%; animation: nd-sun .9s var(--soft-spring) both; }
.halo--grow .glow { animation: nd-glow 1.6s ease both; }
.sparkles { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.sparkles i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 999px; background: var(--c);
  opacity: 0; animation: nd-spark 1.5s var(--ease) both; animation-delay: calc(.35s + var(--t)); }
.sparkles i:nth-child(3n) { width: 6px; height: 6px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .sparkles { display: none; }
}
/* You, as a short menu: one row per thing, a few words on where it stands, one screen each. */
.menu { display: grid; border-radius: var(--r); background: var(--mat); box-shadow: var(--shadow); overflow: hidden; }
.menu--quiet { background: rgb(255 253 251 / .6); box-shadow: 0 0 0 1px var(--line); }
.menu__row { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 4rem; padding: .85rem 1.25rem;
  border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.menu__row + .menu__row { box-shadow: inset 0 1px 0 var(--line); }
.menu__row:active { background: var(--sky); }
.menu__text { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.menu__title { font-weight: 600; }
.menu__status { color: var(--ink-soft); font-size: .93rem; }
.menu__go { color: var(--ink-soft); font-size: 1.6rem; line-height: 1; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.plain-list li { padding-left: .9rem; border-left: 3px solid var(--line-strong); }
.invite-list { list-style: none; margin: 0; padding: 0; display: grid; }
.invite-row { display: flex; align-items: center; gap: 1rem; min-height: 3.75rem; padding: .5rem 0; }
.invite-row + .invite-row { box-shadow: inset 0 1px 0 var(--line); }
.btn--fit { justify-self: start; }