/* Top bar fit states, set by ip-header-fit.js on <header data-fit>.
   Desktop only; the phone drawer is untouched. */
@media (min-width: 769px) {
  /* The nav had a fixed 980px cap, which clipped the signed-in tab set
     even on a 1920px screen. Available width decides now; the fit script
     steps down to icons when it genuinely runs out. */
  body > header[data-fit] .nav-tabs { max-width: 100%; }
  /* The base grid reserves 150px on both sides to keep the nav page-
     centred, so dropping the wordmark freed nothing. While fitting, the
     sides size to their content and the nav gets everything between. */
  body > header[data-fit] { grid-template-columns: auto minmax(0, 1fr) auto; }

  body > header[data-fit="no-brand"] .logo-text,
  body > header[data-fit="icons"] .logo-text { display: none; }

  /* Labels are clipped, not display:none, so each tab keeps its
     accessible name. Only tabs that have an icon collapse; a text-only
     tab would otherwise become an empty pill. */
  body > header[data-fit="icons"] .nav-tab:has(.nav-tab-icon) .nav-label {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body > header[data-fit="icons"] .nav-tab:has(.nav-tab-icon) {
    padding: 7px 9px; gap: 0;
  }
  body > header[data-fit="icons"] .nav-tab-icon { width: 16px; height: 16px; }
  body > header[data-fit="icons"] #themeLabel,
  body > header[data-fit="icons"] .date-badge { display: none; }
}
