/* App bar (MainLayout) rules that must be render-blocking in the head so the prerendered first
   paint already has the right mobile/desktop layout. In-body <style> blocks miss that paint. */

:root {
    /* Height of the thin strip above the main bar (version, env badge, staff links). The theme's
       AppbarHeight (ElevateTheme.cs, 80px) is this plus the 62px main bar. */
    --elevate-utility-bar-height: 18px;
}

/* Breakpoint swap classes. App-owned on purpose: Bootstrap (md = 768px) and MudBlazor (md = 960px)
   both ship d-md-* with !important and disagree between 768 and 959px, so those utilities cannot be
   trusted in the bar. 960px matches MudBlazor's md breakpoint, which the rest of the layout keys off. */
@media (max-width: 959.98px) {
    .appbar-desktop-only {
        display: none !important;
    }
}

@media (min-width: 960px) {
    .appbar-mobile-only {
        display: none !important;
    }
}

/* Brand wordmark. Doubles as the Home link on every breakpoint (mobile used to swap it for a house
   icon, which left the bar with no brand at all). */
.appbar-brand {
    white-space: nowrap;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
}

/* Mobile: the utility strip is dead vertical space unless it actually carries something (environment
   badge, Moderation / Admin CP links), so collapse it otherwise. The app bar height token has to
   follow, or MudMainContent and the clipped drawer keep an 18px gap where the strip used to be. Both
   rules key off the same content test so they cannot disagree, and a browser without :has() ignores
   both together (visible strip, full height), so the fallback is symmetric too.
   Scoped to .elevate-shell (MainLayout's MudLayout): AccountLayoutNew and BannedLayout have their own
   MudLayout and bars and must not pick this up.
   Known boundary: MudDialogProvider sits outside MudLayout, so dialogs keep the root 80px token and
   are 18px shorter than they could be on mobile. Cosmetic, left alone. */
@media (max-width: 959.98px) {
    .elevate-shell .utility-bar:not(:has(.environment-badge, .admin-link)) {
        display: none !important;
    }

    .mud-layout.elevate-shell:not(:has(.utility-bar .environment-badge, .utility-bar .admin-link)) {
        /* 80px is the theme's AppbarHeight (ElevateTheme.cs); the var cannot reference itself. */
        --mud-appbar-height: calc(80px - var(--elevate-utility-bar-height));
    }
}

/* Dark mode toggle re-homed into the member drawer's sticky toolbar on mobile. */
.drawer-toolbar-theme-toggle {
    margin-right: 4px;
}

/* Version caption at the bottom of the member drawer (mobile only; the utility strip shows it on desktop).
   0.8 matches the strip's own version text and keeps light-mode contrast above 4.5:1 (0.6 did not). */
.drawer-version {
    padding: 16px 20px 0;
    opacity: 0.8;
}

/* Swipe-to-close region inside the nav drawers (MudSwipeArea's root div). pan-y keeps vertical
   scrolling native while handing horizontal gestures to the pointer events the swipe area listens
   on; without it, mobile browsers can claim the drag for panning and cancel the pointer stream
   before a right-to-left swipe is recognized. The div sits between .mud-drawer-content (a flex
   column the drawer bodies used to be direct items of) and those bodies, so it must be a flex
   pass-through that fills the drawer; a content-height block would leave short drawers with a dead
   unswipeable zone below the links and change the bodies' stretch behavior. */
.drawer-swipe-region {
    /* pinch-zoom stays allowed: pan-y alone would block touch zoom over the drawer (WCAG 1.4.4). */
    touch-action: pan-y pinch-zoom;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* A mouse swipe would otherwise select nav text as it travels. */
    user-select: none;
}

/* A mouse swipe starting on a link kicks off a native anchor drag, which fires pointercancel and
   silently kills the gesture (verified against the running app, 2026-08-25). Nav links fill most of
   the drawer, so without this a mouse or pen swipe almost never lands. Chromium/WebKit only;
   Firefox has no equivalent, where a link-start mouse swipe stays best-effort. */
.drawer-swipe-region a,
.drawer-swipe-region img {
    -webkit-user-drag: none;
}

/* Public (guest) drawer: the mobile hamburger target for visitors without the member drawer.
   Block-flow body: .mud-drawer-content is a flex column and .mud-divider-fullwidth is flex: 1 0 auto,
   so bare dividers would grow and spread the links down the whole drawer. The body takes focus when
   the drawer opens (tabindex -1); no ring on the wrapper itself, the links show their own. */
.guest-drawer-body {
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
    outline: none;
}

.guest-drawer-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 4px 24px;
}