/* Tag Manager containers (gtm_containers/). Every piece is the kit's —
   Cards, Tables, status Badges, Empty, the collapsible card (.postbox) for
   the Google accounts — so this only lays them out.

   - .gtm-container-cell: a container's name (and whether it's the default)
     over its Tag Manager path, in the index's tables.
   - .gtm-empty, .gtm-table__none: nothing to list, inside a flush card.
   - .container-picker: the Add containers screen — the login switch, a card
     per Tag Manager account with its containers as tick-box rows, and the
     error state. */
@layer ui {
  .gtm-container-cell {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .gtm-container-cell__name {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .gtm-empty {
    padding-block: 1.5rem;
  }

  .gtm-table__none {
    padding-block-end: 1.5rem;
  }

  .container-picker {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .container-picker__login {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }

  .container-picker__switch {
    align-items: center;
    display: flex;
    gap: 0.5rem;

    .ui-select {
      inline-size: auto;
      min-inline-size: 14rem;
    }
  }

  .container-picker__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .container-picker__choice .ui-label {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .container-picker__error {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}