@layer components {
  .ui-form-section {
    display: grid;
    gap: var(--ui-space-4);
    min-inline-size: 0;
  }

  .ui-form-section--card {
    padding: var(--ui-space-5);
    border: var(--ui-border-width) solid var(--ui-color-border);
    border-radius: var(--ui-radius-panel);
    background: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-panel);
  }

  .ui-form-section--divided {
    padding-block: var(--ui-space-5);
    border-block-start: var(--ui-border-width) solid var(--ui-color-border);
  }

  .ui-form-section__heading,
  .grid,
  .field,
  .fieldset,
  .ui-form-actions {
    min-inline-size: 0;
  }

  .ui-form-section__heading {
    display: grid;
    gap: var(--ui-space-2);
  }

  .ui-form-section__heading h3,
  .ui-form-section__description,
  .field__hint,
  .field__error,
  .fieldset__hint,
  .fieldset__error,
  .ui-form-actions__supplement {
    margin: 0;
  }

  .ui-form-section__description,
  .field__hint,
  .fieldset__hint,
  .ui-form-actions__supplement {
    color: var(--ui-color-text-muted);
    font-size: var(--ui-font-size-sm);
    line-height: var(--ui-line-height-default);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--ui-space-4);
  }

  .ui-form-grid {
    align-items: start;
  }

  .grid--columns-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--row-divided {
    padding-block: var(--ui-space-4);
    border-block: var(--ui-border-width) solid var(--ui-color-border);
  }

  .field {
    display: grid;
    gap: var(--ui-space-2);
    min-inline-size: 0;
  }

  .field--full {
    grid-column: 1 / -1;
  }

  .field__label,
  .field__choice-label,
  .fieldset__legend {
    color: var(--ui-color-text);
    font-weight: 700;
    line-height: var(--ui-line-height-tight);
  }

  .field__control {
    box-sizing: border-box;
    min-inline-size: 0;
    font: inherit;
  }

  .field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    inline-size: 100%;
    min-block-size: var(--ui-control-min-height);
    padding: var(--ui-space-3) var(--ui-control-inline-padding);
    border: var(--ui-border-width) solid var(--ui-color-border);
    border-radius: var(--ui-radius-control);
    background: var(--ui-color-surface);
    color: var(--ui-color-text);
  }

  .field textarea {
    min-block-size: 7.5rem;
    resize: vertical;
  }

  .field :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--ui-color-focus);
    outline-offset: 2px;
  }

  .field :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--ui-color-danger);
  }

  .field :is(input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }

  .field__choice {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-2);
    min-block-size: var(--ui-control-min-height);
  }

  .field__choice .field__control {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-block-start: 0.125rem;
    accent-color: var(--ui-color-action);
  }

  .field__error,
  .fieldset__error {
    color: var(--ui-color-danger);
    font-size: var(--ui-font-size-sm);
    font-weight: 700;
    line-height: var(--ui-line-height-default);
  }

  .fieldset {
    display: grid;
    gap: var(--ui-space-3);
    min-inline-size: 0;
    margin: 0;
    padding: var(--ui-space-4);
    border: var(--ui-border-width) solid var(--ui-color-border);
    border-radius: var(--ui-radius-control);
  }

  .fieldset__legend {
    padding-inline: var(--ui-space-1);
  }

  .ui-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-3);
  }

  .ui-form-actions--between {
    justify-content: space-between;
  }

  .ui-form-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
  }
}

@layer components {
  @media (max-width: 48rem) {
    .grid--columns-two {
      grid-template-columns: minmax(0, 1fr);
    }

    .ui-form-actions--between {
      align-items: stretch;
      flex-direction: column;
    }

    .ui-form-actions__buttons .button {
      min-block-size: var(--ui-control-min-height);
    }
  }
}