/* Administration: Settings, Users, Roles, sessions, notifications, AI spend, connecting a
/* device, an app's consent screen (app/views/settings, users, roles, sessions, notifications,
/* ai_spend, device_approvals, oauth/authorizations, search). The kit draws every component —
/* cards, tables, items, badges, fields, the code's InputOTP, the results' Command; this only
/* lays them out. */
@layer ui {
  /* A table row's buttons, at its end and no wider than they are. */
  .ui-table td.admin-table__actions {
    inline-size: 1px;
    text-align: end;
    white-space: nowrap;
  }

  /* A flush card's empty state and its footer line, padded as the card's own parts are. */
  .admin-card__empty {
    padding-block: 1.5rem;
  }

  .ui-card__footer.admin-card__footer {
    padding-block: 1rem;
  }

  /* A limit typed as a number: wide enough for the figure, not the whole card. */
  .ui-input.settings-number {
    max-inline-size: 12rem;
  }

  /* A new user's or role's two columns (users/new, roles/new: the form and its Save box),
  /* stacked when the list's side sheet loads them: the sheet is narrower than the window the
  /* layout's breakpoint measures, so the Save box falls under the form rather than squeezing
  /* it. */
  .ui-sheet .admin-new-columns {
    align-items: stretch;
    flex-direction: column;

    > aside {
      inline-size: auto;
    }
  }

  /* A notification in the inbox (notifications/_notification): an Item kept on one line, its
  /* start lined up with the card's header. */
  .notification-item {
    flex-wrap: nowrap;
    padding-inline: 1.5rem 1rem;
  }

  /* A model's share of the month (ai_spend/show): the kit's Progress, thin and narrow. */
  .spend-meter--share {
    block-size: 0.375rem;
    min-inline-size: 4rem;
  }

  /* Typing a device's code in (device_approvals/new): the field and Continue on one line,
  /* bottoms aligned, the field as wide as a code. */
  .device-code-form {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .ui-input.device-code-input {
    inline-size: 11rem;
  }

  /* The search page (search/index): the box and its button across the card's header. */
  .search-page__form {
    align-items: center;
    display: flex;
    gap: 0.5rem;
  }
}