/* Forms (DESIGN.md §5 Form): one field per <p>, label above the control in
   body-strong, hint after it in small muted text, a red asterisk on required
   controls, invalid = negative border and tint, always with a message. */
@layer components {
  .form {
    display: grid;
    gap: var(--space-5);
    max-width: var(--width-reading);

    & > p, & fieldset > p { display: grid; gap: var(--space-1); }
  }

  .form label { font-weight: 500; color: var(--color-text); }

  .form :is(input[type="email"], input[type="text"], textarea) {
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3);
    border: var(--hairline);
    border-radius: var(--radius-s);
    background: var(--color-paper);
    color: var(--color-ink);

    &::placeholder { color: var(--color-subtle); }
    &:focus-visible { outline: var(--focus-outline); outline-offset: 0; border-color: var(--color-text); }
    &[aria-invalid="true"] { border-color: var(--color-negative); background: var(--color-negative-surface); }
  }

  .form textarea { min-height: calc(6 * var(--leading-body)); resize: vertical; }

  /* Required: an asterisk from CSS; screen readers hear the attribute. */
  .form label:has(+ :required)::after,
  .form :required + label::after {
    content: " *";
    color: var(--color-negative);
  }

  .form fieldset {
    display: grid;
    gap: var(--space-3);
    padding-block-start: var(--space-3);
    border-top: var(--rule);
  }

  .form legend {
    float: left;
    width: 100%;
    margin-block-end: var(--space-1);
    font-size: var(--text-title);
    line-height: var(--leading-title);
    font-weight: 500;
    color: var(--color-ink);
  }

  .form .form__hint { display: block; }

  .form__hint {
    font-size: var(--text-small);
    line-height: var(--leading-small);
    color: var(--color-muted);
  }

  .form__optional { font-weight: 400; color: var(--color-muted); }

  /* A checkbox keeps its label beside it. */
  .form .form__check {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-3);

    & input { width: var(--space-5); height: var(--space-5); margin-block-start: calc(var(--space-1) / 2); accent-color: var(--color-text); }
    & label { font-weight: 400; }
  }

  .form__check.is-missing {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-negative);
    border-radius: var(--radius-s);
    background: var(--color-negative-surface);
  }

  .form .form__actions {
    justify-items: start;
    padding-block-start: var(--space-4);
    border-top: var(--hairline);
  }

  .form__status {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    background: var(--color-paper);

    &:empty { display: none; }
    &.is-error { border-color: var(--color-negative); background: var(--color-negative-surface); color: var(--color-ink); }
    &.is-success { border-color: var(--color-positive); background: var(--color-positive-surface); color: var(--color-ink); }
  }

  .captcha-status {
    &.is-verified { color: var(--color-positive); }
    &.is-failed { color: var(--color-negative); }
  }

  /* The honeypot: present for bots, out of sight and out of the tab order for
     people. Not display:none, which some bots skip. */
  .form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}