/* Harts & Petals — the couple's portal.

   Client-facing, so it wears the brand rather than the OS: the logo's deep
   green and peach on warm paper, terracotta for anything you can touch. Same
   Helvetica Neue as Petal OS; the greeting is set light and large to echo the
   thin wordmark. Mobile first — a couple opens this from an email on a phone.

   Contrast (measured): ink 12.9:1 and green 9.7:1 on paper; terracotta 6.6:1;
   peach ink on green 8.2:1. */

:root {
  --green:      #294634;   /* the logo tile */
  --green-rgb:  41,70,52;
  --peach:      #fdcea5;   /* the logo monogram */
  --peach-rgb:  253,206,165;
  --blush:      #ffbe9f;   /* --peach-fill in the OS */
  --paper:      #fbf7f1;
  --paper-2:    #f2ebe1;
  --ink:        #2b2b2b;
  --ink-soft:   #6b5f55;
  --clay:       #8f3f14;   /* terracotta — the OS's peach ink on paper */
  --clay-rgb:   143,63,20;
  --radius:     18px;
  --ease:       cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 50% -120px, rgba(var(--peach-rgb), .45), transparent 70%),
    var(--paper);
  color: var(--ink);
  font: 16px/1.55 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 28px 16px 8px;
}
.mark { width: 44px; height: 44px; border-radius: 10px; display: block; }
.brand {
  font-weight: 300; font-size: 22px; letter-spacing: .5px; color: var(--green);
}
.brand .amp { color: var(--clay); }

/* ── Layout ─────────────────────────────────────────────────────────── */
main {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 16px 40px;
}
.state { animation: rise .5s var(--ease) both; }
.state[hidden] { display: none; }

.kicker {
  margin: 18px 0 2px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--clay);
}
.hello {
  margin: 4px 0 6px; text-align: center;
  font-weight: 300; font-size: clamp(34px, 9vw, 46px); line-height: 1.1;
  color: var(--green);
}
.lede { margin: 0 auto 26px; max-width: 30em; text-align: center; color: var(--ink-soft); }
.soft { color: var(--ink-soft); text-align: center; }
.intro { margin: 0 0 14px; font-size: 17px; color: var(--ink); }
.sprig { color: var(--clay); }

/* ── Question cards ────────────────────────────────────────────────── */
.card {
  margin: 0 0 14px; padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid rgba(var(--green-rgb), .10);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(var(--green-rgb), .04), 0 10px 30px -18px rgba(var(--green-rgb), .35);
  min-width: 0;
}
fieldset.card { display: block; }
/* A <legend> is drawn ON its fieldset's border by default, which put "Plated or
   buffet dinner?" straddling the card's top edge. Floating it is the standard
   way to pull it inside while keeping the fieldset/legend grouping a screen
   reader announces. */
fieldset.card > legend { float: left; width: 100%; }
fieldset.card > legend + * { clear: both; }
.q {
  display: block; padding: 0; margin: 0 0 10px;
  font-size: 15px; font-weight: 600; color: var(--green);
}
/* Its own quiet line rather than trailing the label — on a phone it wrapped
   anyway, with a stray indent from the margin that separated it. */
.opt {
  display: block; margin-top: 2px;
  font-weight: 400; font-size: 12px;
  color: var(--ink-soft); letter-spacing: .3px;
}
input[type="text"], textarea {
  width: 100%;
  border: 0; border-bottom: 1.5px solid rgba(var(--clay-rgb), .35);
  background: transparent;
  padding: 8px 2px; font: inherit; font-size: 17px; color: var(--ink);
  border-radius: 0; outline: none;
  transition: border-color .2s;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
input[type="text"]::placeholder, textarea::placeholder { color: #a79a8e; }
input[type="text"]:focus, textarea:focus { border-bottom-color: var(--clay); }

/* ── Counters: a posy that grows as you tap + ──────────────────────── */
.count { display: flex; align-items: center; gap: 16px; }
.step {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--clay); background: transparent; color: var(--clay);
  font: 400 24px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  cursor: pointer; display: grid; place-items: center;
  transition: background .15s, transform .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.step:hover { background: rgba(var(--clay-rgb), .08); }
.step:active { transform: scale(.92); }
.step:disabled { opacity: .3; cursor: default; }
.n {
  min-width: 2ch; text-align: center;
  font-size: 30px; font-weight: 300; color: var(--green); font-variant-numeric: tabular-nums;
}
/* Not answered yet. A dash here read as a third minus — "− – +" — so it says
   what to do instead, small and quiet, and is never mistaken for a zero. */
.n.unset { font-size: 13px; font-weight: 400; color: var(--ink-soft); letter-spacing: .3px; }
.posy {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 0; margin-top: 10px;
}
.posy:empty { margin-top: 0; }
.posy svg { width: 22px; height: 22px; animation: pop .35s var(--ease) both; }
.posy .more { font-size: 13px; color: var(--ink-soft); align-self: center; margin-left: 4px; }
.aside { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); }
.aside[hidden] { display: none; }

/* ── Dinner: three big, tappable choices ───────────────────────────── */
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.face {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 104px; padding: 12px 6px;
  border: 1.5px solid rgba(var(--green-rgb), .18); border-radius: 14px;
  color: var(--green); text-align: center;
  transition: border-color .15s, background .15s, transform .15s var(--ease);
}
.face svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.face .label { font-size: 14px; font-weight: 600; }
.choice input:hover + .face { border-color: rgba(var(--clay-rgb), .5); }
.choice input:checked + .face {
  border-color: var(--green); background: var(--green); color: var(--peach);
  transform: translateY(-2px);
}
.choice input:focus-visible + .face { outline: 2px solid var(--clay); outline-offset: 2px; }

/* ── Send ──────────────────────────────────────────────────────────── */
.send {
  display: block; width: 100%; margin: 22px 0 0; padding: 17px 20px;
  border: 0; border-radius: 999px;
  background: var(--green); color: var(--peach);
  font: 600 17px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(var(--green-rgb), .8);
  transition: transform .15s var(--ease), box-shadow .15s;
}
.send:hover { transform: translateY(-1px); }
.send:active { transform: translateY(1px); box-shadow: none; }
.send:disabled { opacity: .6; cursor: default; transform: none; }
.err {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(var(--clay-rgb), .08); color: var(--clay); font-size: 14px;
}
.err[hidden] { display: none; }
.link {
  display: block; margin: 18px auto 0;
  background: none; border: 0; padding: 6px;
  color: var(--clay); font: inherit; font-size: 15px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.heart { color: var(--clay); }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* ── Footer ────────────────────────────────────────────────────────── */
.foot {
  padding: 22px 16px 30px; text-align: center;
  font-size: 12px; letter-spacing: .4px; color: var(--ink-soft);
}
.foot a { color: inherit; }

/* ── The thank-you petals ──────────────────────────────────────────── */
[data-state="thanks"] { position: relative; padding-top: 30px; }
.petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.petals i {
  position: absolute; top: -30px;
  width: 14px; height: 18px;
  background: var(--blush);
  border-radius: 80% 0 80% 0;
  opacity: .85;
  animation: fall linear forwards;
}
.petals i:nth-child(3n) { background: var(--peach); }
.petals i:nth-child(4n) { background: rgba(var(--clay-rgb), .45); width: 10px; height: 13px; }
[data-state="thanks"] > :not(.petals) { position: relative; z-index: 1; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop  { from { opacity: 0; transform: scale(.3) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes fall {
  to { transform: translate3d(var(--drift, 40px), 110vh, 0) rotate(var(--spin, 540deg)); opacity: .9; }
}

/* Anyone who has asked for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .petals { display: none; }
}

@media (max-width: 380px) {
  .choices { gap: 8px; }
  .face { min-height: 92px; }
  .face .label { font-size: 13px; }
}