@layer components {
  /* Header Layout
     ========================================================================== */

  .header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    justify-content: space-between;
    align-items: center !important;
  }

  /* A heading that only earns its row when an action accompanies it — standing
     alone it just repeats the tab title over an empty state, so it collapses
     (the action-less mirror of .empty-state--only-child). */
  .header--with-actions:has(> :only-child) {
    display: none;
  }
}