@layer components {
  /* ======================
   * NESTED FIELDS
   * ======================
   * Form pattern for Rails nested attributes (accepts_nested_attributes_for).
   * Each nested record is displayed as a card with remove button.
   */
  .nested-fields {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .nested-fields__header {
    display: flex;
    gap: var(--inline-space);
    padding-inline: var(--block-space);
    padding-block-end: var(--block-space-xs);
  }

  .nested-fields__header-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-muted);
  }

  .nested-fields__header-label--flex {
    flex: 1;
  }

  .nested-fields__header-label--small {
    width: 6rem;
    flex: none;
  }

  .nested-fields__header-label--medium {
    width: 10rem;
    flex: none;
  }

  .nested-fields__header-spacer {
    width: 2.75rem;
    flex-shrink: 0;
  }

  .nested-field {
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space);
    background-color: var(--color-canvas-alt);
    border-radius: var(--radius-md);
    position: relative;
  }

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

  .nested-field__row {
    display: flex;
    gap: var(--inline-space);
    align-items: center;
  }

  .nested-field__input {
    flex: 1;
  }

  .nested-field__input--small {
    width: 6rem;
    flex: none;
  }

  .nested-field__input--medium {
    width: 10rem;
    flex: none;
  }

  .nested-field__remove {
    flex-shrink: 0;
    align-self: flex-start;
    margin-block-start: var(--block-space-xs);
  }

  .nested-field__position {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--color-grey-200);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-ink-muted);
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .nested-fields__header {
      display: none;
    }

    .nested-field__row {
      flex-direction: column;
      align-items: stretch;
    }

    .nested-field__input--small,
    .nested-field__input--medium {
      width: 100%;
    }
  }

  /* Add button for nested fields */
  .nested-fields__add {
    align-self: flex-start;
  }
}