/* /audit/ — the five questions, in the reading column.

   Every selector is written under .prose-content, because the form's own
   blocks are paragraphs and prose.css has already said what a paragraph in
   the reading column is: a bare .call-error would lose its margin, its size
   and its colour to .prose-content p and read as body text.

   The form is written on the page's own material: ink on the ground, one
   hairline under every field, the label above it in the quiet label tier, and
   the site's one button at the foot. No boxes, no rounded corners, no shadow,
   no card. A field uses the quiet ink so its boundary remains visible,
   and it turns warm when the reader is in it — the same warm the
   button is, because both are places a person acts.

   Nothing here sets a colour of its own: every value is a token from
   styles.css, so the form turns with the scheme like the rest of the site. */

/* The form is a grid: on a phone one column, and from 600px two, so the four
   short answers sit in two rows of two and the page is not a ladder of
   single fields. The two questions and the button run the full width. */
.prose-content .call-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: calc(var(--cell) * 0.8);
  row-gap: calc(var(--cell) * 0.6);
  margin: 0;
}

@media (min-width: 600px) {
  .prose-content .call-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .prose-content .call-field--wide,
  .prose-content .call-trap,
  .prose-content .call-turnstile,
  .prose-content .call-submit {
    grid-column: 1 / -1;
  }
}

.prose-content .call-field {
  /* A field is a block, not a line of prose: the label sits over the control.
     The grid's gap is the interval between fields. */
  display: block;
  margin: 0;
}

.prose-content .call-field label {
  display: block;
  margin-bottom: calc(var(--cell) * 0.2);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: var(--lh-label);
}

/* The one field that may be left alone says so beside its own name, in the
   quiet ink, so the eye reads the name first. */
.prose-content .call-optional {
  color: var(--ink-quiet);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

.call-form input,
.call-form textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--ink-quiet);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-set);
  /* Sixteen pixels is the floor a phone stops zooming at; the body tier is
     above it, so the page never jumps when a field is tapped. */
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  /* Safari paints its own ground and its own corners on a control unless it
     is told not to. */
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 160ms var(--ease-out);
}

.call-form textarea {
  min-height: calc(var(--lh-body) * 2 + 20px);
  resize: vertical;
}

.call-form input:hover,
.call-form textarea:hover {
  border-bottom-color: var(--ink);
}

/* The reader's place in the form: the line under the field goes warm. The ring
   itself is the site's, drawn by the one :focus-visible rule in styles.css and
   not repeated here — a text field matches :focus-visible however it was
   reached, so a caret in a field always carries both. */
.call-form input:focus,
.call-form textarea:focus {
  border-bottom-color: var(--human-ink);
}

/* Native validation, once the browser has something to judge: a field the
   reader has filled badly is ruled warm. :user-invalid waits for them to
   leave it, so nothing is red while they are still typing. */
.call-form input:user-invalid,
.call-form textarea:user-invalid {
  border-bottom-color: var(--human-ink);
}

/* The trap. Off the screen rather than display:none, so the machines that fill
   every field still fill it; out of the tab order and out of the accessibility
   tree, so nobody reading the page ever meets it. */
.prose-content .call-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.prose-content .call-turnstile {
  margin: 0;
}

.prose-content .call-submit {
  margin: calc(var(--cell) * 0.4) 0 0;
}

/* The button is .cta from styles.css and nothing here changes it; the page
   only has to keep the underline the writing pages put on every link off it,
   because it is a solid rectangle, not a line of prose. */
.prose-page .call-submit a.cta {
  text-decoration: none;
}

.prose-page .call-submit a.cta:is(:hover, :focus-visible) {
  color: var(--on-human);
  text-decoration: none;
}

/* The one line the Worker sends an incomplete form back to. It is in the page
   always and shown only when the URL asks for it: :target when the fragment
   arrived, and the data attribute the page's four lines of script set when
   only the query did. It is ruled on the left in the warm, like the draft
   notice, so it reads as a state of the page rather than an alarm. */
.prose-content .call-error {
  display: none;
  margin: 0 0 calc(var(--cell) * 0.9);
  padding-left: calc(var(--cell) * 0.6);
  border-left: 1px solid var(--human-ink);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.prose-content .call-error:target,
.prose-content .call-error[data-shown] {
  display: block;
}