/*
 * Forms. The views put each field in a <p> as label-then-control, so the
 * label becomes a block above its control. A checkbox or radio keeps its label
 * beside it (DESIGN.md §5).
 */
@layer components {
  :where(fieldset) {
    border-block-start: var(--rule);
    padding-block-start: var(--space-4);

    & > * + * {
      margin-block-start: var(--space-4);
    }
  }

  /*
   * A legend normally sits on the fieldset's border. Floating it puts it
   * under the rule instead, like the section labels on the public site.
   */
  legend {
    float: inline-start;
    inline-size: 100%;
    font: var(--text-title);
    color: var(--color-ink);

    & + * {
      clear: both;
    }
  }

  label {
    display: block;
    font: var(--text-body-strong);
    margin-block-end: var(--space-1);
  }

  :where(input[type="checkbox"], input[type="radio"]) + label,
  :where(td, th) label {
    display: inline;
    font-weight: 400;
    margin-inline-start: var(--space-2);
  }

  :where(input[type="checkbox"], input[type="radio"]) {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    vertical-align: -0.2em;
    accent-color: var(--color-text);
  }

  :where(
    input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"], [type="hidden"]),
    select,
    textarea
  ) {
    inline-size: 100%;
    max-inline-size: var(--width-reading);
    min-block-size: var(--control-height);
    padding: var(--space-2) var(--space-3);
    border: var(--border);
    border-radius: var(--radius-s);
    background: var(--color-paper);
    color: var(--color-text);

    &:focus-visible {
      outline: 2px solid var(--color-focus);
      outline-offset: 0;
      border-color: var(--color-text);
    }

    &::placeholder {
      color: var(--color-subtle);
    }
  }

  :where(input[type="number"], input[type="date"]) {
    inline-size: auto;
    min-inline-size: 10rem;
  }

  textarea {
    min-block-size: 8rem;
    resize: vertical;
  }

  input[type="file"] {
    font: var(--text-small);
  }

  /* Help text: the views link it to the control with aria-describedby. */
  :where(p) > span[id$="_hint"] {
    display: block;
    font: var(--text-small);
    color: var(--color-muted);
    margin-block-start: var(--space-1);
  }

  /* The <br>s in the markup predate CSS; labels are blocks now. */
  :where(fieldset) p > br {
    display: none;
  }

  /* Fields inside a form get more air than paragraphs of text. */
  form:not(.button_to) :where(p) + :where(p) {
    margin-block-start: var(--space-5);
  }

  /*
   * Required controls: an asterisk after the label. It is decoration --
   * screen readers already announce the required attribute -- so the
   * alternative text is empty.
   */
  :where(form p):has(:is(input, select, textarea)[required]) label::after {
    content: " *" / "";
    color: var(--color-negative);
  }

  /*
   * Invalid fields. config/initializers/field_error_proc.rb wraps the label
   * and the control in span.field_with_errors, marks the control
   * aria-invalid and puts its message in span.field-error right after it.
   */
  .field_with_errors {
    display: contents;
  }

  [aria-invalid="true"] {
    border-color: var(--color-negative);
    background: var(--color-negative-surface);
  }

  .field-error {
    display: block;
    margin-block-start: var(--space-1);
    font: var(--text-small);
    font-weight: 500;
    color: var(--color-negative);
  }

  /* The summary above a form that did not save. */
  .form-errors {
    list-style: none;
    max-inline-size: var(--width-reading);
    padding: var(--space-4) var(--space-5);
    margin-block-end: var(--space-6);
    border: 1px solid var(--color-negative);
    border-inline-start-width: 4px;
    border-radius: var(--radius-s);
    background: var(--color-negative-surface);
    color: var(--color-negative);

    & h2 {
      font: var(--text-body-strong);
      color: inherit;
    }

    & ul {
      list-style: none;
      padding: 0;
    }
  }

  /* A fieldset inside a fieldset is a sub-group: lighter rule, smaller legend. */
  fieldset fieldset {
    border-block-start: var(--border);

    & legend {
      font: var(--text-body-strong);
    }
  }

  /* The actions row: Submit then Cancel, set off from the fields above. */
  :where(form) p:has(> input[type="submit"]) {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    border-block-start: var(--border);
  }

  :where(td) p:has(> input[type="submit"]) {
    margin: 0;
    padding: 0;
    border: 0;
  }
}