/*
 * The client-facing intake form. It is the only page an outsider ever sees, so it
 * gets its own vocabulary: a single readable column, one card per section, and
 * questions that stay legible on a phone in a truck cab.
 *
 * Component classes only -- feature views never assemble these out of utilities
 * (app CLAUDE.md, UI rules).
 */

.intake {
  padding-block: var(--size-8);
  padding-inline: var(--size-4);
}

.intake__sheet {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-inline-size: 44rem;
  row-gap: var(--size-4);
}

.intake__heading {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

.intake__intro {
  color: var(--color-text-subtle);
}

.intake__errors {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--size-2);
  padding-inline-start: var(--size-4);
  row-gap: var(--size-1);
}

.intake__thanks {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-2);
}

.intake__submit {
  align-self: flex-start;
}

/*
 * P9's honeypot wrapper. Taken out of the layout without display:none -- some
 * form-filling bots skip what is display:none, and the field is only worth having
 * if a bot can find it. People cannot: it is off-screen and zero-sized here, and
 * aria-hidden with tabindex -1 in the markup.
 */
.intake__hp {
  block-size: 0;
  inline-size: 0;
  inset-inline-start: -9999px;
  overflow: hidden;
  position: absolute;
}

.intake-section {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-5);
}

.intake-section__heading {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.intake-question {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-2);
}

.intake-question[hidden] {
  display: none;
}

.intake-question__label {
  font-weight: var(--font-medium);
}

.intake-question__group {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-2);
}

.intake-question__option {
  align-items: center;
  column-gap: var(--size-2);
  display: flex;
}

.intake-question__help {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

/* Files that survived a refused submission (R4-1): reassurance, so it reads as a
   statement of what we hold rather than as help text about what to do next. */
.intake-question__held {
  background-color: var(--color-secondary);
  border-radius: var(--rounded-md);
  font-size: var(--text-sm);
  margin-block-start: var(--size-2);
  padding: var(--size-2) var(--size-3);
}