/* Inputs, buttons and errors. A field is a title-block cell: its label is the
   cell's tracked-caps label, the control is the value. Errors are orange, the
   "not it" colour; red stays for the one primary action. */
@layer components {
  .form__field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--block-space) * 0.375);
  }

  .input {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding-inline: calc(var(--inline-space) * 1.5);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: 0;
    background-color: var(--color-inset);
    color: var(--color-ink);
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;

    &::placeholder {
      color: var(--color-ink-dim);
    }
  }

  .form__hint {
    color: var(--color-ink-dim);
    font-size: var(--text-xs);
  }

  /* Rails wraps a field that failed validation; keep it out of the layout. */
  .field_with_errors {
    display: contents;

    .label {
      color: var(--color-behind);
    }

    .input {
      border-color: var(--color-behind);
    }
  }

  .form__errors {
    font-size: var(--text-sm);

    .label {
      color: var(--color-behind);
    }
  }

  .form__error-list {
    padding-inline-start: calc(var(--inline-space) * 2);
  }

  .form__check {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    font-size: var(--text-sm);

    /* Drawn like the inputs, not the browser's box: a ruled square on the
       inset, filled with an ink square when checked. */
    input {
      flex-shrink: 0;
      inline-size: 1.125rem;
      block-size: 1.125rem;
      appearance: none;
      border: var(--rule-width) solid var(--color-rule);
      border-radius: 0;
      background-color: var(--color-inset);
      cursor: pointer;

      &:checked {
        background-color: var(--color-ink);
        box-shadow: inset 0 0 0 calc(var(--rule-width) * 3) var(--color-inset);
      }

      /* Forced colours drop the fill and the shadow: give the native box back. */
      @media (forced-colors: active) {
        appearance: auto;
      }
    }
  }

  /* The primary action fills its cell, like START in the run panel. */
  .form__actions {
    display: flex;
    padding: 0;

    .button {
      flex-grow: 1;
      min-block-size: var(--bar-height);
      font-size: var(--text-base);
    }
  }

  .form__links {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--block-space) * 0.25) calc(var(--inline-space) * 2.5);
    color: var(--color-ink-dim);
    font-size: var(--text-sm);
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding-inline: calc(var(--inline-space) * 2);
    border: var(--rule-width) solid transparent;
    border-radius: 0;
    font-size: var(--text-sm);
    font-stretch: var(--stretch-wide);
    font-weight: var(--weight-heavy);
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .button--primary {
    background-color: var(--color-accent);
    color: var(--color-on-accent);

    &:hover {
      background-color: var(--color-accent-hover);
    }
  }

  .button--secondary {
    border-color: var(--color-rule);
    background-color: transparent;
    color: var(--color-ink);

    &:hover {
      color: var(--color-accent-hover);
    }
  }
}