/* The intake page. Builds on studio.css tokens: one calm column, sections separated by space and a
   hairline rather than boxed, a quiet section list that doubles as progress. */

.intake { padding-bottom: var(--space-8); }

.intake-head { padding-top: var(--space-8); padding-bottom: var(--space-5); }
.intake-head h1 { margin-bottom: var(--space-4); }
.lede { font-size: var(--step-1); color: var(--ink-2); }
.req { color: var(--bad); font-weight: 600; }

/* Section list: sticky on wide screens, a scrollable row on phones. */
.progress { position: sticky; top: 0; z-index: 2; background: var(--ground); border-bottom: 1px solid var(--line); }
.progress ol { list-style: none; margin: 0; padding: var(--space-3) 0; display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.progress ol::-webkit-scrollbar { display: none; }
.progress a {
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
  padding: 6px 12px 6px 6px; border-radius: 999px; text-decoration: none;
  font-size: var(--step--1); color: var(--ink-2);
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.progress a:hover { background: var(--surface); color: var(--ink); }
.progress a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.progress-n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-strong); font-size: 0.75rem; font-weight: 600;
}
.progress a.done .progress-n { background: var(--good); border-color: var(--good); color: #fff; }

/* Sections */
.block { padding: var(--space-7) 0 var(--space-4); border-bottom: 1px solid var(--line); scroll-margin-top: 64px; }
.block h2 { margin-top: 0; display: flex; align-items: baseline; gap: var(--space-3); }
.step-n { font-family: var(--face-body); font-size: var(--step-0); font-weight: 600; color: var(--ink-3); }
.block > .muted { margin-bottom: var(--space-5); }

.field { margin: 0 0 var(--space-6); padding: 0; border: 0; min-width: 0; }
.field[hidden] { display: none; }
fieldset.field legend { font-weight: 600; padding: 0; margin-bottom: var(--space-2); }
.field .hint { margin: calc(-1 * var(--space-1)) 0 var(--space-3); }
.field .choice { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); line-height: 1.4; transition: border-color 120ms ease-out; }
.field .choice:hover { border-color: var(--ink-3); }
.field .choice:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field .choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.field .choice input:focus-visible { outline: none; }

.field-error { color: var(--bad); font-size: var(--step--1); font-weight: 600; margin: var(--space-2) 0 0; }
.field-error[hidden] { display: none; }

/* Files */
.drop input[type="file"] {
  width: 100%; font: inherit; color: var(--ink-2); padding: var(--space-5) var(--space-4);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-small); background: var(--surface); cursor: pointer;
}
.drop input[type="file"]:hover { border-color: var(--ink-3); }
.drop input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: var(--space-3); padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--ground); color: var(--ink); cursor: pointer;
}
.files { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.files li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.files .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.button.small { min-height: 36px; padding: 0 14px; font-size: var(--step--1); }

/* The bot trap: off screen for people, present for scripts that fill every field. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.send { padding-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.send .button { min-width: 160px; }
.send .hint { margin: 0; }
/* Who receives the answers, read just before Send: a full line of its own above the button. */
.send #privacy-notice { flex: 0 0 100%; max-width: none; color: var(--ink-2); line-height: 1.5; }
.send #privacy-notice a { color: var(--ink); text-underline-offset: 0.25em; overflow-wrap: anywhere; }
#form-error { margin-top: var(--space-5); }
#form-error:focus { outline: none; }

.thanks { padding-top: var(--space-8); }
.thanks:focus { outline: none; }

@media (min-width: 601px) {
  .progress ol { flex-wrap: wrap; overflow: visible; }
}

@media (max-width: 600px) {
  .intake-head { padding-top: var(--space-7); }
  .block { padding-top: var(--space-6); }
  .send .button { width: 100%; }
}