@layer components {
  .field {
    display: grid;
    gap: var(--inline-space-half);
    margin-block-end: var(--block-space);
  }

  .field label {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-subtle);
  }

  /* Required-field marker on the label. */
  .field--required label::after {
    content: " *";
    color: var(--color-danger);
  }

  .field--check {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: var(--inline-space);
  }

  .field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select) {
    inline-size: 100%;
    padding: 0.5em 0.7em;
    font-size: max(16px, 1em); /* ≥16px stops iOS zoom-on-focus */
    color: var(--color-text);
    background: var(--color-surface-raised);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-small);
    transition: border-color var(--transition), box-shadow var(--transition);
  }

  .field :is(input, textarea, select):focus {
    outline: none;
    border-color: var(--color-link);
    box-shadow: 0 0 0 3px var(--color-brand-soft);
  }

  .field :is(input, textarea)::placeholder { color: var(--color-muted); }

  /* Rails wraps invalid fields in .field_with_errors — keep it layout-neutral so
     it doesn't break the field grid, and flag the offending control. */
  .field_with_errors { display: contents; }
  .field_with_errors :is(input, textarea, select), .field_with_errors lexxy-editor {
    border-color: var(--color-danger);
  }

  /* One-time code entry — a compact, centred monospace field. */
  .code-input {
    max-inline-size: 14rem;
    font-family: var(--font-mono);
    font-size: var(--text-medium);
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
  }

  .field-note {
    margin-block-start: var(--inline-space-half);
    color: var(--color-muted);
    font-size: var(--text-small);
  }

  .form-actions {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    margin-block-start: var(--block-space-double);
  }

  .form-errors {
    padding: var(--block-space-half) var(--block-space);
    color: var(--color-danger);
    background: oklch(var(--lch-danger) / 0.08);
    border: var(--border-width) solid oklch(var(--lch-danger) / 0.3);
    border-radius: var(--radius);
    margin-block-end: var(--block-space);
  }
}