/**
 * Primary + secondary nav flyout sheets mirror `SidebarInset` inset variant:
 * `my-1.5 mx-2 rounded-xl shadow-sm` below md, `md:my-2 md:mx-2` at md+.
 *
 * Overlap the viewport (including banner / utility chrome) — same as before
 * Compact. Do not replace this with banner/utility `top` offsets; docked rails
 * clear chrome, flyout sheets float over it.
 */
export const NAV_FLYOUT_INSET_Y = "inset-y-1.5 md:inset-y-2"
export const NAV_FLYOUT_INSET_LEFT = "left-2"
export const NAV_FLYOUT_INSET_RIGHT = "right-2"
export const NAV_FLYOUT_RADIUS = "rounded-xl"
/** Inset nav sheets (primary + secondary flyouts) — same elevation as sheet flyouts. */
export const NAV_FLYOUT_CHROME =
  "rounded-xl overflow-hidden shadow-[var(--shadow-sheet-flyout)]"
/** Clip rounded corners on non-scrolling shell wrappers only — do not put on scroll ports. */
export const NAV_FLYOUT_INNER = "overflow-hidden rounded-xl"
/** Scrollable flyout body — min-h-0 + overflow-y-auto; no flex-col (prevents flex-shrink eating overflow). */
export const NAV_FLYOUT_SCROLL_BODY =
  "min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-y-contain"
/** Pin panel chrome (title row) above a scrolling nav body — pair with {@link NAV_FLYOUT_SCROLL_BODY}. */
export const SECONDARY_PANEL_BODY_STACK =
  "flex min-h-0 flex-1 flex-col overflow-hidden"

export function navFlyoutMaxWidth(expandedWidthPx: number) {
  return `min(${expandedWidthPx}px, calc(100vw - 1rem))`
}