/* ===========================================================================
   Start a project — the survey
   ---------------------------------------------------------------------------
   Same ground, same stone, same borrowed colour. Six questions, one at a time,
   and the progress indicator is the band from the work page: a row of stones,
   each taking a client's hue as you pass it. The page borrows that hue too, so
   answering the survey walks you through the portfolio's own palette.
   ========================================================================= */

/* A display value in a rule beats the hidden attribute, and every block on
   this page that gets hidden carries one. Without this the form never goes
   away and the approved screen is on show from the moment the page loads. */
[hidden] { display: none !important; }

.back {
  font-size: var(--sc-t-sm);
  color: var(--sc-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sc-hairline);
  padding-bottom: 2px;
  transition: border-color 160ms var(--sc-ease-out);
}
.back:hover { border-color: var(--live-ink); }

.ask {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  align-content: start;
  gap: clamp(1rem, 2.6vh, 1.75rem);
  padding: clamp(5rem, 11vh, 7rem) var(--sc-gutter) clamp(1rem, 3vh, 1.75rem);
  max-width: 62rem;
  margin-inline: auto;
  width: 100%;
}

/* ───────────────────────────────────────────────────────── the stones ── */

.steps { display: flex; gap: clamp(5px, 0.7vw, 9px); list-style: none; margin: 0; padding: 0; }
.steps__s {
  width: clamp(18px, 2.2vw, 30px); height: clamp(11px, 1.3vw, 17px);
  border-radius: var(--stone-sm);
  background: var(--sunk);
  box-shadow: var(--sc-edge);
  transition: background 420ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.steps__s.is-done { background: var(--hue, var(--sunk)); }
.steps__s.is-on { transform: translateY(-2px) scale(1.14); background: var(--live); }

/* ─────────────────────────────────────────────────────────── the card ── */

.card {
  width: 100%;
  align-self: start;
  background: var(--sc-surface);
  border-radius: var(--stone);
  box-shadow: var(--sc-e2), var(--sc-edge),
              inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 9%, transparent);
  padding: clamp(1.4rem, 3.4vw, 2.75rem);
  display: grid;
  align-content: start;
}

.step { border: 0; margin: 0; padding: 0; display: none; }
.step.is-on { display: block; }
.step__n {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  padding: 0;
  margin-bottom: var(--sc-3);
}
.step h1, .step h2 { margin: 0; color: var(--live-ink); transition: color 420ms var(--sc-ease-out); }
.step__say {
  margin: var(--sc-3) 0 var(--sc-6);
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
  max-width: 52ch;
}

/* ──────────────────────────────────────────────────────────── fields ── */

.field { display: block; margin-top: var(--sc-4); }
.field > span {
  display: block;
  font-size: var(--sc-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin-bottom: var(--sc-2);
}
.field input, .field textarea {
  width: 100%;
  background: var(--sc-canvas);
  border: 0;
  border-radius: var(--sc-r-md);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 14%, transparent);
  padding: 0.7rem 0.9rem;
  font-size: var(--sc-t-base);
  color: var(--sc-ink);
  transition: box-shadow 160ms var(--sc-ease-out);
}
.field textarea { resize: vertical; min-height: 3.2rem; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 62%, transparent); }
.field input:focus, .field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--live-ink);
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); }
.field-row .field { margin-top: var(--sc-4); }

/* ───────────────────────────────────────────────────────────── chips ── */

.chips { display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.chips--tight { margin-top: var(--sc-5); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: block;
  padding: 0.55rem 1rem;
  border-radius: var(--sc-r-pill);
  background: var(--sc-canvas);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 14%, transparent);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink);
  cursor: pointer;
  transition: background 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover span { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 30%, transparent); }
}
.chip input:checked + span {
  background: var(--live-ink);
  color: var(--sc-surface);
  box-shadow: var(--sc-e1);
}
.chip input:focus-visible + span { outline: 2px solid var(--live-ink); outline-offset: 3px; }
.chip span:active { transform: translateY(1px); }

/* ───────────────────────────────────────────────────────────── nav ── */

.err {
  margin: var(--sc-4) 0 0;
  min-height: 1.2em;
  font-size: var(--sc-t-sm);
  color: #8A2D20;
}
.nav {
  display: flex; align-items: center; gap: var(--sc-3);
  margin-top: var(--sc-5);
}
.ghost {
  border: 0; cursor: pointer;
  background: transparent;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
  padding: 0.75rem 1rem;
  border-radius: var(--stone-sm);
  transition: color 160ms var(--sc-ease-out);
}
.ghost:hover { color: var(--sc-ink); }
.nav .cta { border: 0; cursor: pointer; font-size: var(--sc-t-base); }

/* ────────────────────────────────────────────────────────── the end ── */

.done {
  width: 100%;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--sc-4);
  padding: clamp(1rem, 4vh, 3rem) 0;
}
.done__stamp {
  margin: 0;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sc-surface);
  background: var(--live-ink);
  padding: 0.4rem 0.9rem;
  border-radius: var(--sc-r-pill);
}
.done h2 { margin: 0; color: var(--live-ink); }
.done__say { margin: 0; color: var(--sc-ink-soft); max-width: 46ch; }
.done__reach {
  display: grid; justify-items: center; gap: var(--sc-3);
  margin-top: var(--sc-4);
}
.done__or {
  margin: var(--sc-2) 0 0;
  font-size: var(--sc-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.done__lines {
  margin: 0;
  display: grid; gap: var(--sc-2);
  font-size: var(--sc-t-lg);
}
.done__lines a {
  color: var(--sc-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sc-hairline);
  padding-bottom: 3px;
  transition: border-color 160ms var(--sc-ease-out);
}
.done__lines a:hover { border-color: var(--live-ink); }
.done__lines strong { font-weight: 500; color: var(--live-ink); }
.done__back { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); }
.done__back a { color: var(--sc-ink-soft); text-underline-offset: 3px; }

.confetti {
  position: fixed; inset: 0; z-index: 140;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--sc-ease-out);
}
.confetti.is-on { opacity: 1; }

.start__foot { width: 100%; margin-top: clamp(1rem, 3vh, 2rem); }

/* ──────────────────────────────────────────────────────── reduced ── */

@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .steps__s.is-on { transform: none; }
}

/* ───────────────────────────────────────────────────────── mobile ── */

@media (max-width: 620px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .done__lines { font-size: var(--sc-t-base); }
  .ask { padding-top: clamp(4.5rem, 12vh, 6rem); }
}