/* The Start form as steps (T-880). One question on screen at a time, chips to pick from, one short
   field to add to them, and the contact box last. Its own file so the Start block can change without
   touching styles.css, which the hero shares. Tokens come from :root in styles.css. */

.intake { display: grid; gap: var(--s4); max-width: var(--measure); margin-top: var(--s4); }

/* Progress: the step label in the mono primitive, and a hairline that fills. */
.intake-progress { display: grid; gap: 10px; }
.intake-track { display: block; height: 1px; background: var(--border); overflow: hidden; }
.intake-fill {
  display: block; height: 100%; width: 0; background: var(--fg);
  transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Steps: only the current one is in the flow; it arrives with a short lift, in the site's easing. */
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step:not(.is-active) { display: none; }
.step.is-active { animation: step-in 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.step.is-active.from-back { animation-name: step-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes step-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.step legend {
  padding: 0;
  font-size: clamp(21px, 2.1vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 30ch;
}
.step .hint { color: var(--muted-fg); margin-top: var(--s1); }

/* Chips are real inputs. The box is hidden; the label carries the state. Each chip carries its number in
   the mono accent, since the number keys pick it; a touch screen has no number keys, so it hides there. */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s3); counter-reset: chip; }
.chip { position: relative; display: inline-block; }
.chip input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--border-strong);
  font-size: 16px;
  line-height: 1.2;
  color: var(--fg);
  background: var(--bg);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
  user-select: none;
}
.chip span::before {
  counter-increment: chip;
  content: counter(chip);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted-fg);
  transition: color 160ms ease;
}
.chip input:hover + span { border-color: var(--fg); }
.chip input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip input:checked + span::before { color: var(--bg); opacity: 0.7; }
.chip input:active + span { transform: scale(0.98); }
.chip input:focus-visible + span { outline: 1px solid var(--fg); outline-offset: 3px; }
@media (pointer: coarse) { .chip span::before { display: none; } .chip span { gap: 0; } }

/* Step changes are read out here; the visible label stays quiet so nothing is announced twice. */
.intake-announce {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The one text field under the chips, and the contact fields. */
.intake .note { display: grid; gap: 8px; margin-top: var(--s3); }
.intake .note > span { font-size: 15px; }
.intake .opt { color: var(--muted-fg); }
.intake input:not([type="checkbox"]):not([type="radio"]),
.intake textarea {
  font: inherit;
  font-size: 17px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 11px 12px;
  width: 100%;
}
.intake textarea { min-height: 88px; resize: vertical; }
.intake input:focus, .intake textarea:focus { outline: 1px solid var(--fg); outline-offset: 2px; border-color: var(--fg); }
.intake .is-invalid { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }

/* Contact step: the notice sits under the box, in the quiet register. */
.intake .quiet { margin-top: var(--s3); font-size: 14px; line-height: 1.55; }

/* Navigation: back as a quiet mono link, next as the one call to action. */
.intake-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.intake-nav .cta { margin-top: 0; cursor: pointer; }
.intake-nav .cta[hidden] { display: none; }
.intake-nav .cta[disabled] { opacity: 0.5; cursor: default; }.intake-back {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-fg); background: none; border: 0; padding: 15px 0; cursor: pointer;
}
.intake-back:hover { color: var(--fg); }
.intake-back[hidden] { visibility: hidden; display: block !important; }   /* keeps Next on the right */

.intake-error { color: var(--fg); font-size: 15px; margin: 0; }
.intake-error:empty { display: none; }

.intake .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.intake-status { margin-top: var(--s2); }
.intake-status:empty { display: none; }
.intake-done { margin-top: var(--s3); font-size: clamp(19px, 1.7vw, 22px); line-height: 1.3; }
.fallback { margin-top: var(--s3); }
.intake-questions { margin-top: var(--s3); padding-left: 1.4em; }
.intake-questions li + li { margin-top: 6px; }
.intake-preview { margin-top: var(--s3); padding: 10px 12px; border: 1px dashed var(--border-strong); color: var(--muted-fg); }
.intake-sent { margin-top: var(--s2); padding: 12px; border: 1px solid var(--border); font: 13px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .chip span { padding: 12px 14px; font-size: 15px; }
  .intake-nav { flex-wrap: wrap; }
  .intake-nav .cta { width: 100%; text-align: center; }
  .intake-back { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .step.is-active { animation: none; }
  .intake-fill, .chip span { transition: none; }
}