/* ============================================================================
   The candidate form doorway.

   Everything here is the difference between the sign-in doorway, which asks for
   one thing, and this one, which asks for ten. The .auth grid, the brand panel,
   .field, .note and the buttons are all borrowed unchanged from screens.css and
   components.css; a candidate who later joins the organisation should recognise
   the sign-in screen as the same product, and the way to guarantee that is to
   add almost nothing.

   THE DESIGN WIDTH IS 390. Every measurement below was chosen at that width and
   then allowed to grow, which is the opposite of the usual order and is right
   here: the desktop case is somebody checking the link works, and the phone case
   is the entire real audience.
   ========================================================================= */

/* The sign-in stage centres one field in the panel, and a dead end or a thank
   you is the same three lines, so those stay centred. A stage with ten fields
   in it has to start at the top instead, or the first question sits below the
   fold while empty space sits above it. The screen says which it is holding;
   nothing here measures anything. */
.cform-stage {
  max-width: 520px;
  padding-top: var(--s-7);
}
.cform-stage[data-fill="form"] { justify-content: flex-start; }

/* ---------------------------------------------------------------- the card

   What this link is, before the questions. Three facts, and the one that earns
   its place is the expiry: a person who knows the date will come back to it,
   and a person who does not will not. */
.cform-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
}
.cform-card-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  min-width: 0;
}
.cform-card-label {
  flex: none;
  color: var(--c-text-3);
  font-size: var(--t-xs);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-track-caps);
  text-transform: uppercase;
}
.cform-card-value {
  color: var(--c-text);
  font-size: var(--t-sm);
  line-height: var(--t-snug);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- the fields

   One column, always. A two column form on a phone is a one column form with
   the labels cut in half, and on a desktop the second column only buys back
   scroll that nobody was struggling with.

   The gap is larger than .form's because these are questions rather than the
   two or three fields of a dialog: at --s-6 the consent box at the bottom reads
   as part of the question above it. */
.cform-form { gap: var(--s-7); }
.cform-fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  min-width: 0;
}
.cform-fields input,
.cform-fields textarea,
.cform-fields select { width: 100%; }

/* The error line appears and disappears under a field, so it reserves nothing
   when empty and pushes when full. Its own margin rather than the field's gap
   keeps it attached to the control it is about. */
.cform-fields .field-error {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: var(--t-snug);
}
.cform-fields .field-hint { margin-top: 0; margin-bottom: var(--s-3); }

/* A field that was refused says so in its border as well as in words, because
   the words are under it and the eye lands on the control first. */
.cform-fields [data-bad="yes"] input,
.cform-fields [data-bad="yes"] textarea,
.cform-fields [data-bad="yes"] select { border-color: var(--c-danger); }

/* ------------------------------------------------------------ choice groups

   A fieldset has a browser default border and padding that no token can reach;
   both are cleared here rather than fought with elsewhere. */
.cform-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.cform-group > .field-label { padding: 0; }

.cform-options {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.cform-option {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  /* 44px of target, not 44px of label. A row that is tappable only on the box
     is a row that misses on a phone, and the whole row is the affordance. */
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: var(--bw) solid var(--c-border-subtle);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--t-base);
  line-height: var(--t-snug);
  cursor: pointer;
}
.cform-option:hover { background: var(--c-hover); border-color: var(--c-border); }
.cform-option input { flex: none; width: 20px; height: 20px; }
.cform-option span { min-width: 0; }

/* ---------------------------------------------------------------- consent

   The one question whose label IS the question, so it gets the paragraph
   treatment rather than the label treatment: full measure, normal weight, and
   the box beside it rather than above it. */
.cform-consent {
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
}
.cform-consent input { flex: none; margin-top: 2px; width: 20px; height: 20px; }
.cform-consent-text {
  display: block;
  min-width: 0;
  color: var(--c-text);
  font-size: var(--t-sm);
  line-height: var(--t-body);
  cursor: pointer;
}
.cform-consent[data-bad="yes"] { border-color: var(--c-danger); }

.cform-legal { max-width: none; margin: 0; }

/* ------------------------------------------------------------ the thank you

   A tick with a ring around it, once, at the top of the panel. It is the only
   ornament in the doorway and it is there because arriving at the end of a form
   with nothing but a paragraph reads as a page that has not finished loading. */
.cform-done-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--c-success-quiet);
  color: var(--c-success);
}
.cform-done-mark svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ phone

   The .auth media query already stacks the two panels and drops the blurb. What
   is left here is the padding: at 390 the panel's side padding plus the stage's
   own is most of a word, so the stage gives its width back and the panel keeps
   the gutter.

   The brand panel keeps its one line on purpose. It is the only thing on the
   screen that says which product this is to somebody who has never seen it. */
@media (max-width: 860px) {
  .cform-stage { padding-top: var(--s-6); max-width: none; justify-content: flex-start; }
  .cform .auth-panel { padding: var(--s-6) var(--s-5) var(--s-10); }
  .cform-card { padding: var(--s-5); }
  .cform-card-line { flex-direction: column; gap: var(--s-1); }
  .cform-card-value { text-align: left; }
  .cform-consent { padding: var(--s-5); }
}