/* Prevent layout shift when scrollbar appears/disappears */
html {
  scrollbar-gutter: stable;
  /* Offset auto-scroll (focus, anchor links) so the sticky top header
     doesn't obscure the focused element's label. h-20 = 5rem, +0.5rem clearance.
     Guest and public layouts have a sticky top header at all viewports.
     Host mobile also has a sticky top header (lg:hidden). */
  scroll-padding-top: 5.5rem;
}

/* Host desktop uses a fixed sidebar (no sticky top header), so no offset needed.
   :has() is supported in all modern browsers (Chrome 105+, Firefox 121+, Safari 15.4+). */
@media (min-width: 1024px) {
  html:has(#desktop-sidebar) {
    scroll-padding-top: 0;
  }
}

/* Fix flex-col + mx-auto interaction: ensure page containers fill the main width.
   Without this, mx-auto on a flex child causes it to shrink to content width
   instead of stretching to the parent's full width. */
#main-content > * {
  width: 100%;
}

/* Safe area for iOS devices */
.safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}