/*
 * 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);
}

/* Round 2, B6. layouts.css gives #main `overflow: auto` because in the signed-in
   layout it is a sized grid area that scrolls. Here nothing sizes it, so the DOCUMENT
   scrolls -- but `overflow: auto` still makes #main a scroll container, and a sticky
   child sticks to its nearest one: the sections' sidebar scrolled away with the page
   (measured: top -2396 px after a jump to section 6). The id is in the selector
   because #main's own rule outranks a class. */
#main.intake {
  overflow: visible;
}

.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);
}

/* ------------------------------------------------------------ P10.5 §6.1
 * Collapsible sections. Native <details>, so the form still opens and closes
 * with JavaScript off; the only scripted part is revealing a section that holds
 * an invalid control on submit (intake_sections_controller.js).
 *
 * The card's own padding stays, and the gap between sections comes from
 * .intake__sheet's row-gap, so a closed section is a single tidy bar.
 */
.intake-section {
  display: block;
  /* Round 2: an extra 1rem below each section on top of .intake__sheet's row-gap.
     Nine collapsed bars in a row need more air between them than the open form
     needed between its questions. */
  margin-block-end: 1rem;
  row-gap: 0;
}

.intake-section__summary {
  align-items: center;
  column-gap: var(--size-3);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

/* Safari still draws the disclosure triangle without this. */
.intake-section__summary::-webkit-details-marker {
  display: none;
}

.intake-section__summary:focus-visible {
  border-radius: var(--rounded-md);
  outline: 2px solid var(--color-selected-dark);
  outline-offset: var(--size-1);
}

.intake-section__chevron {
  --icon-color: var(--color-text-subtle);
  --icon-size: 1.125rem;
}

/* Round 2, B2 (David, 2026-10-10): 1.5rem more between questions than the 1.25rem
   they had -- 2.75rem, which css-zero's scale carries exactly. */
.intake-section__body {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--size-5);
  row-gap: var(--size-11);
}

/* ------------------------------------------------------------ P10.5 §6.3
 * The "that is 3" hint. Not an error -- nothing is wrong yet -- so it reads as
 * subtle help rather than as the negative alert the client gets on a refusal.
 */
.intake-question__limit {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

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

/* ------------------------------------------------------------ P10.5 §6.2
 * The upload pair. Exactly one of the two is visible at a time, and which one is
 * decided by intake_upload_controller.js -- which only runs when JS does, so the
 * `hidden` attribute is the whole mechanism and CSS must not override it.
 */
.intake-upload {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-2);
}

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

.dropzone {
  min-block-size: var(--size-24);
  place-content: center;
}

/* ------------------------------------------------------------ F-101b
 * The draft banner. Neutral, not negative: nothing is wrong -- we are telling the
 * client we kept what they typed. `hidden` needs no rule of its own here, because
 * css-zero's reset carries `[hidden] { display: none !important }`.
 */
.intake__draft-banner {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  /* Round 2, B2: it sat flush on the first section. */
  margin-block-end: var(--size-6);
  row-gap: var(--size-2);
}

/* ------------------------------------------------------------ Round 2, B6
 * The sections' contents (David, 2026-10-10: he worked the form out of order and
 * found sections by scrolling and reading). Built the way guide.css lays out a
 * guide: a sticky sidebar beside the sheet when there is room for both, a collapsed
 * block inside the sheet when there is not.
 *
 * "Room for both" is the sheet's 44rem plus the sidebar and the gap, plus #main's
 * padding: 64rem. Below that the sheet would have to give up width to the sidebar,
 * and the sheet's width is the one thing this was not allowed to change.
 */
.intake-layout {
  display: grid;
  gap: var(--size-8);
  grid-template-columns: minmax(0, 44rem);
  justify-content: center;
}

.intake-layout--with-nav {
  @media (width >= 64rem) {
    grid-template-columns: var(--max-i-3xs) minmax(0, 44rem);
  }
}

/* The sheet is a grid item now; the grid centres it. */
.intake-layout > .intake__sheet {
  inline-size: 100%;
  margin-inline: 0;
}

.intake-layout__sidebar {
  display: none;

  @media (width >= 64rem) {
    align-self: start;
    display: block;
    inset-block-start: var(--size-4);
    max-block-size: calc(100dvh - var(--size-8));
    overflow-y: auto;
    position: sticky;
  }
}

.intake-layout__compact {
  @media (width >= 64rem) {
    display: none;
  }

  > summary { cursor: pointer; }
  > .intake-nav { margin-block-start: var(--size-2); }
}

/* The <ol> numbers the sections, as the doc does ("Section 6"), without the word. */
.intake-nav__list {
  counter-reset: intake-section;

  > li { counter-increment: intake-section; }
}

.intake-nav__link {
  text-align: start;
  white-space: normal;

  /* The section the client is in (intake_nav_controller), a shade under the page's
   * light backdrop (David, 2026-10-11: #dae7ee); in dark mode the accent tint the
   * site's callouts use. sidebar_menu.css's own [aria-current="page"] is for pages,
   * and this marks a place within one. Hover keeps it: button.css's hover colour
   * is lighter, and the mark would vanish under the pointer that just made it. */
  &[aria-current="true"] {
    --btn-background: light-dark(#dae7ee, var(--brand-callout));
    --btn-hover-color: var(--btn-background);
  }

  &::before {
    content: counter(intake-section) ". ";
    font-variant-numeric: tabular-nums;
  }
}

/* A section reached by its link lands a little below the top edge, not flush on it. */
.intake-section {
  scroll-margin-block-start: var(--size-4);
}

/* ------------------------------------------------------------ Round 2, B7
 * "Saved in this browser at 3:12 PM." Quiet reassurance, under Send and under the
 * sections' list -- read when wanted, never announced (it is not a live region).
 */
.intake__draft-status {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin-block-start: var(--size-2);
}

.intake-layout__sidebar .intake__draft-status {
  margin-block-start: var(--size-4);
  padding-inline: var(--size-2);
}

/* ------------------------------------------------------------ Round 2, B9
 * The questionnaire's two newer shapes: a section's own intro (under its heading,
 * inside the card), and a one-line meaning under each option of a described
 * question. Both are empty until the doc writes one.
 */
.intake-section__intro {
  color: var(--color-text-subtle);
  margin-block-start: var(--size-3);
}

.intake-question__option--described {
  align-items: flex-start;

  > input { margin-block-start: var(--size-1); }
}

.intake-question__option-text {
  display: flex;
  flex-direction: column;
}

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