/* ============================================================
   VIEWPORT SEPARATION TOKENS + WRAPPER RULES
   ============================================================
   The ONE breakpoint for mobile/desktop separation.
   All per-viewport files (*.desktop.css / *.mobile.css) wrap
   their rules in @media guards against 768px.

   Convention (enforced by filename):
     *.desktop.css  -> @media (min-width: 769px) { ... }
     *.mobile.css   -> @media (max-width: 768px) { ... }
     no suffix      -> shared across both viewports

   Razor partials follow the same convention:
     _Foo.Desktop.cshtml   desktop-only markup
     _Foo.Mobile.cshtml    mobile-only markup
     _Foo.cshtml           shared content (consumed by both)

   JS mirrors it:
     site.desktop.js       desktop-only handlers (matchMedia guarded)
     site.mobile.js        mobile-only handlers (matchMedia guarded)
     site.js               shared utilities

   Do NOT introduce raw @media queries at other breakpoints
   inside a .desktop or .mobile file. Fold into 768 or add a
   commented justification for a sub-breakpoint (e.g. 480 for
   very small phones inside a .mobile file).
   ============================================================ */

:root {
	--bp-mobile-max: 768px;
}

/* Hide the opposite-viewport DOM. Both trees render; CSS picks the winner.

   display: contents on the visible wrapper removes the wrapper box from the
   layout tree so its children behave as direct children of the outer parent.
   Critical for #mob-shell, whose flex-column layout expects .mob-nav as a
   direct flex sibling — a plain <div class="mobile-only"> around it would
   otherwise insert an intermediate box and break flex sizing. */
.desktop-only,
.mobile-only {
	display: contents;
}

@media (max-width: 768px) {
	.desktop-only {
		display: none !important;
	}
}

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