/* The same column exists before the chat markup and after its JS initializes. */
@media (min-width: 1025px) {
  html { scrollbar-gutter: stable; }
  html[data-cz-chat-open="1"] .global-container { margin-inline-end: clamp(340px, calc(23vw + 40px), 410px); }

  /* Route metadata exists before the header: no dependency on later page markup. */
  .container-fluid.cz-shell {
    --cz-shell-inset: 17px;
    --cz-header-inset: 49px;
    inline-size: 100%;
    max-inline-size: none;
    padding-inline: var(--cz-shell-inset);
  }
  .container-fluid.cz-shell[data-cz-shell-page="profiles"] { --cz-shell-inset: 32px; }
  .container-fluid.cz-shell.cz-menu-page { --cz-shell-inset: 49px; }
  body:has(.cz-desktop-sidebar) .cz-shell > .cz-site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    flex-wrap: nowrap;
    inline-size: auto;
    max-inline-size: none;
    block-size: 80px;
    min-block-size: 80px;
    margin-block: 0 24px;
    margin-inline: calc(var(--cz-header-inset) - var(--cz-shell-inset));
    padding: 0;
    gap: 12px;
  }
  body:has(.cz-desktop-sidebar) .cz-shell[data-cz-shell-page="home"] > .cz-site-header { margin-block-end: 16px; }
  .cz-shell > .cz-site-header > :is(.navbar_menu_left,.navbar_usermenu) {
    flex: none;
    align-self: center;
    padding: 0;
    margin-block: 0;
  }
  body:has(.cz-desktop-sidebar) .cz-site-header .cz-header-online { padding-inline-start: 0; }
  body:has(.cz-desktop-sidebar) .cz-site-header .navbar_usermenu { margin-inline-end: 0; }
  .cz-site-header .cz-header-online__value { min-inline-size: 3ch; }
}

/* Navigation changes colors, never interpolates the page geometry. */
body:has(.cz-desktop-sidebar) :is(.global-container,.container-fluid,.navbar,.cz-page-heading,.cz-page-heading h1,.cz-page-heading p,.cz-desktop-sidebar,.cz-desktop-sidebar__link) {
  transition-property: color, background-color, border-color, opacity, box-shadow;
}

/* Keep the footer outside the loading viewport on short async pages. */
.container-fluid.cz-menu-page { min-block-size: 100svh; }
.cz-menu-page #userStatsContainer { min-block-size: 175px; }
body:has(.cz-header-account__name) .cz-menu-page #userStatsContainer { min-block-size: 335px; }
.cz-menu-page #seasonProgressPercentTop { min-inline-size: 4ch; text-align: end; font-variant-numeric: tabular-nums; }

/* Compact the account controls only when both side columns leave a narrow header. */
@media (min-width: 1025px) {
  @container (max-width: 440px) {
    body:has(.cz-desktop-sidebar) .cz-site-header .navbar_usermenu:has(.cz-header-account) { gap: 4px; }
    body:has(.cz-desktop-sidebar) .cz-site-header .navbar_usermenu:has(.cz-header-account) > button:not(.pay_button) { inline-size: 32px; }
    .cz-site-header .cz-header-account { gap: 6px; }
  }
}