/* The client roster (ads_accounts/index) and one ad account's screens: its
   console (show), its edit form and the add form. Every piece is the kit's —
   a Card, Table, Badge, Avatar, Alert, Item, Popover, the collapsible card
   (.postbox) — so this only lays them out: where they sit, how wide, how
   they wrap. Nothing here draws.

   - .client-row: a roster row; a hook tests find a row by, drawn as any
     ui-table row. .client-cell is its mark beside the name, domain and
     platform badges; .client-row__gaps the "Needs setup" popover's size.
   - .account-identity: the console's Avatar beside its page header.
   - .account-facts: the console's facts across a small card.
   - .account-setup__facts / __text / __steps: inside the setup rail's
     collapsible cards; .tracking-fold the nested folds of the tracking one.
   - .account-form: the add and edit forms' fields, the submit last.
   - .account-identity-edit: the linked identity, stated, with Change
     opening its fields in place. */
@layer ui {
  .client-roster__actions {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
  }

  .client-cell {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-inline-size: 14rem;
  }

  .client-cell__name {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
  }

  /* "Needs setup": a status badge that opens a popover of what's missing,
     each with the one place that fixes it. */
  .client-row__gaps-toggle {
    cursor: help;
  }

  .ui-popover.client-row__gaps {
    inline-size: 20rem;
    padding: 1rem;
  }

  .account-identity {
    align-items: center;
    display: flex;
    gap: 1rem;
  }

  /* A broken connection's alert title: what's wrong and the account's
     status badge. */
  .account-gate__title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* The facts across the card, each capped so a long one truncates. */
  .account-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
  }

  .account-facts__fact {
    display: grid;
    gap: 0.25rem;
    max-inline-size: 18rem;
    min-inline-size: 0;
  }

  .account-activity__empty {
    padding: 1.5rem;
  }

  .account-setup__facts {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-setup__text {
    white-space: pre-wrap;
  }

  .tracking-fold[open] > summary {
    margin-block-end: 0.5rem;
  }

  .tracking-fold__caret {
    transition: rotate 100ms ease;

    .tracking-fold:not([open]) > summary > & {
      rotate: -90deg;
    }
  }

  .account-setup__steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: decimal inside;
  }

  .account-conversions__source {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  /* The add and edit forms: fields down the card, the submit last. */
  .account-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .account-form__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
  }

  /* The linked identity, stated as a bordered field row with Change at its
     end; opening it hides Change and shows the fields under it. */
  .account-identity-edit {
    display: flex;
    flex-direction: column;
  }

  summary.account-identity-edit__summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .account-identity-edit__value {
    align-items: center;
    display: flex;
    gap: 0.75rem;
  }

  .account-identity-edit[open] > .account-identity-edit__summary {
    margin-block-end: 1.5rem;

    .account-identity-edit__change {
      display: none;
    }
  }

  /* The add form's platform tabs, under the card's title. */
  .ui-tabs.new-account__platforms {
    margin-block-start: 0.5rem;
  }
}