@layer components {
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .form__group {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-sm);
  }

  .form__label { font-weight: 600; font-size: var(--text-base); }
  .form__hint { font-size: var(--text-sm); color: var(--color-ink-muted); }

  .form__error {
    font-size: var(--text-sm);
    color: var(--color-red);
  }

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

  /* Inline form - single row */
  .form--inline {
    flex-direction: row;
    align-items: flex-end;
  }

  .form--inline .form__group {
    flex: 1;
  }

  /* ======================
   * FORM SECTIONS
   * ======================
   * Divide long forms into logical sections with titles.
   */
  .form-section {
    padding-block-end: var(--block-space-lg);
    border-block-end: 1px solid var(--color-border);
  }

  .form-section + .form-section {
    padding-block-start: var(--block-space-lg);
  }

  .form-section:last-child {
    border-block-end: none;
  }

  .form-section__title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0;
    margin-block-end: var(--block-space);
  }

  .form-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  /* ======================
   * FORM ROW
   * ======================
   * Multiple fields side by side.
   */
  .form-row {
    display: flex;
    gap: var(--inline-space-lg);
  }

  .form-row > .form__group {
    flex: 1;
  }

  @media (max-width: 640px) {
    .form-row {
      flex-direction: column;
      gap: var(--block-space);
    }
  }

  /* ======================
   * FORM COLUMNS
   * ======================
   * Two-column layout for complex forms.
   * Main column (larger) and side column.
   * Stacks on mobile.
   */
  .form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--inline-space-xl);
    align-items: start;
  }

  .form-columns__main,
  .form-columns__side {
    display: flex;
    flex-direction: column;
  }

  @media (max-width: 900px) {
    .form-columns {
      grid-template-columns: 1fr;
      gap: 0;
    }
  }

  /* ======================
   * CHECKBOX GROUP
   * ======================
   * Horizontal wrap of checkboxes for multi-select.
   */
  .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-sm) var(--inline-space-lg);
  }

  .checkbox-group .checkbox {
    flex: 0 0 auto;
    min-width: 12rem;
  }
}