:root {
  color-scheme: light;
  --bg: #ffffff;
  --paper: #fbfbfa;
  --ink: #171717;
  --graphite: #2a2926;
  --muted: #6d6a62;
  --line: #ece8e1;
  --orange: #ff6a00;
  --orange-strong: #ff4d00;
  --orange-soft: #fff1e7;
  --radius: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Keep mobile browsers (iOS Safari/Chrome in particular) from inflating
     text sizes on their own, which breaks the layout. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Content injected by browsers (e.g. Google Translate's widgets) must
     never widen the page and push the form off-screen. */
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(90deg, rgba(255, 106, 0, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 106, 0, 0.04) 1px, transparent 1px),
    var(--bg);
  background-size: 72px 72px;
  color: var(--ink);
  min-height: 100vh;
  min-height: 100svh; /* stable height with mobile browser toolbars */
  display: flex;
  justify-content: center;
  padding: 20px 16px 60px;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  line-height: 1.5;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(115deg, rgba(255, 106, 0, 0.12), transparent 32%),
    linear-gradient(245deg, rgba(20, 169, 148, 0.08), transparent 34%);
  opacity: 0.65;
  pointer-events: none;
}

.card {
  width: 100%;
  max-width: 480px;
}

header {
  text-align: center;
  margin: 12px 0 24px;
}

.brand-logo {
  display: block;
  width: 108px;
  height: auto;
  margin: 0 auto 16px;
  overflow: visible;
}

.brand-logo .logo-orange {
  fill: #f15a24;
}

.brand-logo .logo-black {
  fill: var(--ink);
}

h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

header p {
  color: var(--muted);
  margin-top: 6px;
  font-size: 15px;
}

/* Anonymity-delay notice at the top of the form: same card language as the
   questions (orange accent, soft paper), sized as a compact pill so it
   informs without competing with the first question. */
.delay-note {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--orange-soft);
  border: 1px solid rgba(255, 106, 0, 0.28);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(255, 106, 0, 0.08);
  padding: 12px 14px;
  margin: -6px 0 18px;
  color: var(--graphite);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.delay-note strong {
  color: var(--orange-strong);
  font-weight: 700;
  white-space: nowrap;
}

.delay-clock {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.question {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 45px rgba(28, 25, 21, 0.06);
  padding: 18px 16px;
  margin-bottom: 14px;
}

.question::after {
  position: absolute;
  top: 0;
  left: 16px;
  width: 48px;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--orange), transparent);
  box-shadow: 0 0 16px rgba(255, 106, 0, 0.65);
}

.question h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

.dish {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation; /* no double-tap zoom while ticking options */
  -webkit-tap-highlight-color: transparent;
  transition: border-color 160ms ease, background 160ms ease;
}

.dish input {
  width: 18px;
  height: 18px;
  accent-color: var(--orange-strong);
}

.dish.checked {
  border-color: rgba(255, 106, 0, 0.6);
  background: var(--orange-soft);
}

/* Category heading above a group of options (owner-defined grouping);
   used both inline on the form and inside the full-page picker. */
.opt-group {
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.opt-group:first-child {
  margin-top: 2px;
}

/* "See all options" on choice questions with more than six options */
.see-all {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px dashed rgba(255, 106, 0, 0.5);
  border-radius: var(--radius);
  background: none;
  color: var(--orange-strong);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Full-page option picker (view-picker) */
.picker-top {
  margin: 12px 0 16px;
}

.picker-back {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.picker-title {
  font-size: 20px;
}

.picker-hint {
  color: var(--muted);
  font-size: 14px;
  margin: 6px 0 14px;
}

.picker-search {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  /* 16px minimum: below that iOS zooms the page when the field is focused. */
  font-size: 16px;
  font-family: inherit;
  background: var(--paper);
  margin-bottom: 12px;
}

.picker-search:focus {
  outline: none;
  border-color: rgba(255, 106, 0, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.14);
  background: #ffffff;
}

.picker-empty {
  color: var(--muted);
  text-align: center;
  font-size: 15px;
  padding: 16px 0;
}

#view-picker .submit {
  margin-top: 12px;
}

.stars {
  display: flex;
  gap: 6px;
}

.stars button {
  font-size: 34px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--line);
  padding: 2px;
  line-height: 1;
  touch-action: manipulation; /* rapid taps must not zoom the page */
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s, color 0.12s;
}

.stars button.active {
  color: var(--orange);
  text-shadow: 0 0 18px rgba(255, 106, 0, 0.45);
}

.stars button:active {
  transform: scale(1.2);
}

textarea {
  width: 100%;
  min-height: 84px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  /* 16px minimum: below that, iOS zooms the whole page when the field is
     focused and the layout ends up cropped/misaligned. */
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  background: var(--paper);
}

textarea:focus {
  outline: none;
  border-color: rgba(255, 106, 0, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.14);
  background: #ffffff;
}

.submit {
  width: 100%;
  background: linear-gradient(135deg, var(--orange), var(--orange-strong));
  color: #ffffff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  margin-top: 6px;
  box-shadow: 0 10px 30px rgba(255, 106, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 180ms ease;
}

.submit:hover {
  transform: translateY(-1px);
}

.submit:disabled {
  opacity: 0.6;
  transform: none;
}

.error {
  color: #d92d20;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin: 10px 0;
  min-height: 18px;
}

.privacy {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 14px;
  line-height: 1.5;
}

.privacy a {
  color: var(--orange-strong);
}

.center-msg {
  text-align: center;
  margin-top: 26vh;
  padding: 0 10px;
}

.center-msg h1 {
  margin: 14px 0 10px;
}

.center-msg p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.center-msg .submit {
  max-width: 240px;
  margin: 20px auto 0;
  display: block;
}

.pulse-line {
  width: 42px;
  height: 3px;
  margin: 0 auto 14px;
  background: var(--orange);
  box-shadow: 0 0 16px rgba(255, 106, 0, 0.7);
  animation: pulseLine 1.6s ease-in-out infinite;
}

@keyframes pulseLine {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleX(0.68);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* Status views (thank-you, invalid link, connection error, boot fallbacks).
   Each one reuses the .question card so it visually matches the form, topped
   by an orange icon that draws itself in: ring first, then the glyph (check,
   "!" or "?"), then the dot. Every animation fills backwards from its final
   resting state, so with reduced motion (or browsers that ignore pieces of
   this) the view simply shows the finished card. */
.center-msg.state {
  margin-top: 16vh;
}

.state-card {
  padding: 34px 20px 26px;
  margin-bottom: 0;
  animation: stateRise 460ms ease-out backwards;
}

.state-icon {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  filter: drop-shadow(0 12px 22px rgba(255, 106, 0, 0.28));
  animation: statePop 480ms cubic-bezier(0.2, 1.25, 0.4, 1) 120ms backwards;
}

.state-ring {
  fill: var(--orange-soft);
  stroke-width: 4;
  stroke-linecap: round;
  /* 2π × r(32) ≈ 201: one full turn, drawn from 12 o'clock. Explicit length
     because pathLength on <circle> is ignored by older Safari. */
  stroke-dasharray: 202;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: stateRing 640ms ease-out 200ms backwards;
}

.state-glyph {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Glyph paths carry pathLength="100", so one rule fits them all. Browsers
     that ignore it on <path> still work: 100 exceeds every real glyph
     length, the draw just completes a little early. */
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: stateGlyph 340ms cubic-bezier(0.65, 0, 0.45, 1) 700ms backwards;
}

.state-dot {
  fill: var(--orange-strong);
  animation: stateDot 240ms ease-out 940ms backwards;
}

.state-card h1,
.state-card p,
.state-card .submit {
  animation: stateRise 420ms ease-out 260ms backwards;
}

@keyframes statePop {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
}

@keyframes stateRing {
  from {
    stroke-dashoffset: 202;
  }
}

@keyframes stateGlyph {
  from {
    stroke-dashoffset: 100;
  }
}

@keyframes stateDot {
  from {
    opacity: 0;
  }
}

@keyframes stateRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.hidden {
  display: none;
}

/* Static legal pages (privacy.html, delete-account.html) */
.legal {
  max-width: 640px;
}

.legal h1 {
  margin: 18px 0 6px;
}

.legal h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 22px 0 8px;
}

.legal p,
.legal li {
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.65;
}

.legal ul {
  padding-left: 22px;
  margin: 8px 0;
}

.legal .updated {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 18px;
}

.legal a {
  color: var(--orange-strong);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    /* Also drop the delays (thank-you check sequence), or the elements
       would sit invisible in their `backwards` state while waiting. */
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}