@flamingo-stack/openframe-frontend-core 0.0.702 → 0.0.703-snapshot.20261006080901

package/dist/{chunk-CZ34HXDW.js → chunk-4KGXLVCF.js}

@@ -23,10 +23,10 @@ import {
   useLocalStorage,
   useNotificationPermission,
   useToast
-} from "./chunk-KJ5LWATV.js";
+} from "./chunk-IHU5ANUY.js";
 import {
   Pagination
-} from "./chunk-HUMWQMCU.js";
+} from "./chunk-UT4YHQZW.js";
 import {
   Checkbox
 } from "./chunk-PLWMIU72.js";
@@ -60,6 +60,7 @@ import {
   ModalTwoColumn,
   NO_BROKEN_LINKS,
   OVERLAY_BACKDROP_CLASS,
+  PanelResizeHandle,
   ScrollFadeOverlay,
   ScrollShadow,
   SimpleMarkdownRenderer,
@@ -94,12 +95,12 @@ import {
   useCaptions,
   useCollapsible,
   useIsHydrated,
+  useResizablePanelSize,
   useScrollFade
-} from "./chunk-6JPQDYYY.js";
+} from "./chunk-2JDVL7UV.js";
 import {
   NEAR_VIEWPORT_ROOT_MARGIN,
   ToolIcon,
-  clamp,
   createHeadingIdDeduper,
   scanHeadings,
   slugifyHeadingBase,
@@ -108,11 +109,8 @@ import {
   useAutoplay,
   useDebounce,
   useInView,
-  useLgUp,
-  useMdUp,
-  useMediaQuery,
   useNearViewport
-} from "./chunk-64O4L7WN.js";
+} from "./chunk-WUJNYGO2.js";
 import {
   usePathname,
   useRouter,
@@ -264,19 +262,25 @@ import {
   mediaNameKey,
   personFirstName,
   personInitials
-} from "./chunk-6YCXA7CN.js";
+} from "./chunk-CH5232HV.js";
 import {
   next_image_default
 } from "./chunk-FBZMAPWO.js";
 import {
+  ViewportBreakpoints,
+  breakpoints,
   createLocalStorageAdapter,
   embedAuthedFetch,
   subscribeEmbedCredentialChange,
   useAuthedImageSrc,
+  useContentLgUp,
+  useContentMdUp,
   useImageEdgeColor,
   useIsTruncated,
-  useIsomorphicLayoutEffect
-} from "./chunk-2T6QWNXU.js";
+  useIsomorphicLayoutEffect,
+  useMdUp,
+  useMediaQuery
+} from "./chunk-NDESEPW5.js";
 import {
   OpenFrameLogo
 } from "./chunk-O43V3EOS.js";
@@ -293,7 +297,7 @@ import {
   Label,
   RequiredMark,
   Skeleton
-} from "./chunk-5V6O73EH.js";
+} from "./chunk-FLKJYMVB.js";
 import {
   CheckboxCheckmarkIcon,
   SearchIcon
@@ -512,7 +516,6 @@ AllowedDomainsInput.displayName = "AllowedDomainsInput";
 
 // src/components/ui/announcement-bar-view.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var MD_QUERY = "(min-width: 800px)";
 function AnnouncementBarView({
   startAdornment,
   title,
@@ -524,7 +527,7 @@ function AnnouncementBarView({
   style
 }) {
   const handleContentClick = onContentClick ? () => {
-    if (!window.matchMedia(MD_QUERY).matches) onContentClick();
+    if (!window.matchMedia(breakpoints.md).matches) onContentClick();
   } : void 0;
   return /* @__PURE__ */ jsxs2("div", { className: cn("flex min-h-11 w-full max-w-full items-center", className), style, children: [
     /* @__PURE__ */ jsxs2(
@@ -1291,10 +1294,10 @@ var CheckboxBlock = forwardRef4(
         className: cn(
           "flex w-full items-center gap-[var(--spacing-system-s)] rounded-md ring-1 ring-inset",
           // Trailing content stacks full-width below the text on mobile.
-          trailing && "flex-wrap md:flex-nowrap",
+          trailing && "flex-wrap content-md:flex-nowrap",
           "p-[var(--spacing-system-sf)]",
-          !description && "min-h-[44px] md:min-h-[48px]",
-          description && "min-h-[60px] md:min-h-[64px]",
+          !description && "min-h-[44px] content-md:min-h-[48px]",
+          description && "min-h-[60px] content-md:min-h-[64px]",
           "bg-ods-card ring-ods-border",
           "cursor-pointer transition-colors duration-200",
           // States mirror Input: hover / active move the BACKGROUND, the ring
@@ -1323,7 +1326,7 @@ var CheckboxBlock = forwardRef4(
               "aria-required": required || void 0,
               "aria-invalid": error ? true : void 0,
               className: cn(
-                "h-4 w-4 shrink-0 md:h-6 md:w-6",
+                "h-4 w-4 shrink-0 content-md:h-6 content-md:w-6",
                 "rounded-[6px] border-2",
                 error ? "border-ods-error" : "border-[var(--color-border-strong)]",
                 "bg-ods-card",
@@ -1335,7 +1338,7 @@ var CheckboxBlock = forwardRef4(
                 "disabled:data-[state=unchecked]:border-ods-border disabled:data-[state=unchecked]:bg-ods-bg",
                 "data-[state=checked]:border-[var(--color-accent-primary)] data-[state=checked]:bg-[var(--color-accent-primary)]"
               ),
-              children: /* @__PURE__ */ jsx9(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-ods-text-on-accent", children: /* @__PURE__ */ jsx9(CheckboxCheckmarkIcon, { className: "h-2 w-2 md:h-2.5 md:w-2.5" }) })
+              children: /* @__PURE__ */ jsx9(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-ods-text-on-accent", children: /* @__PURE__ */ jsx9(CheckboxCheckmarkIcon, { className: "h-2 w-2 content-md:h-2.5 content-md:w-2.5" }) })
             }
           ),
           /* @__PURE__ */ jsxs5(
@@ -1353,7 +1356,7 @@ var CheckboxBlock = forwardRef4(
                   "span",
                   {
                     className: cn(
-                      "!leading-5 text-h4 md:!leading-6",
+                      "!leading-5 text-h4 content-md:!leading-6",
                       "select-none text-ods-text-primary",
                       truncateLabel ? "block truncate" : "break-words"
                     ),
@@ -1367,7 +1370,7 @@ var CheckboxBlock = forwardRef4(
               ]
             }
           ),
-          trailing && /* @__PURE__ */ jsx9("div", { className: "flex w-full shrink-0 items-center md:ml-auto md:w-auto", children: trailing })
+          trailing && /* @__PURE__ */ jsx9("div", { className: "flex w-full shrink-0 items-center content-md:ml-auto content-md:w-auto", children: trailing })
         ]
       }
     ),
@@ -2587,7 +2590,7 @@ function DurationInput({ value, onChange, invalid, className }) {
         }
       },
       className: cn(
-        "flex h-11 w-full items-center gap-[var(--spacing-system-xxs)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-sf)] transition-colors duration-200 md:h-12",
+        "flex h-11 w-full items-center gap-[var(--spacing-system-xxs)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-sf)] transition-colors duration-200 content-md:h-12",
         "cursor-text focus-within:border-ods-accent",
         invalid && "border-ods-error focus-within:border-ods-error",
         className
@@ -2727,7 +2730,7 @@ var ProgressBar = ({
   mobileHeight = 8,
   inverted = false
 }) => {
-  const isMdUp = useMdUp() ?? true;
+  const isMdUp = useContentMdUp() ?? true;
   const effectiveSegmentWidth = isMdUp ? segmentWidth : mobileSegmentWidth;
   const effectiveHeight = isMdUp ? height : mobileHeight;
   const containerRef = useRef4(null);
@@ -3418,7 +3421,7 @@ import React2 from "react";
 
 // src/components/ui/no-data/no-data-styles.ts
 import { cva } from "class-variance-authority";
-var noDataIconClasses = "inline-flex shrink-0 items-center justify-center [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6";
+var noDataIconClasses = "inline-flex shrink-0 items-center justify-center [&_svg]:h-4 [&_svg]:w-4 content-md:[&_svg]:h-6 content-md:[&_svg]:w-6";
 var noDataActionsVariants = cva("overflow-hidden rounded-md", {
   variants: {
     variant: {
@@ -3437,13 +3440,13 @@ var NoDataAction = React2.forwardRef(function NoDataActionImpl({ icon, label, ch
       ref,
       className: cn(
         "flex flex-1 items-center gap-[var(--spacing-system-s)] p-[var(--spacing-system-m)] text-ods-text-secondary",
-        "md:w-[224px] md:flex-none md:flex-col md:items-start md:gap-[var(--spacing-system-xs)]",
+        "content-md:w-[224px] content-md:flex-none content-md:flex-col content-md:items-start content-md:gap-[var(--spacing-system-xs)]",
         className
       ),
       ...props,
       children: [
         icon && /* @__PURE__ */ jsx25("span", { className: cn(noDataIconClasses, "text-ods-text-primary"), children: icon }),
-        /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 break-words text-h6 md:w-full md:flex-none", children: label ?? children })
+        /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 break-words text-h6 content-md:w-full content-md:flex-none", children: label ?? children })
       ]
     }
   );
@@ -3455,14 +3458,18 @@ var NoDataActions = React2.forwardRef(function NoDataActionsImpl({ actions, vari
     "div",
     {
       ref,
-      className: cn(noDataActionsVariants({ variant }), "flex w-full flex-col md:w-auto md:flex-row", className),
+      className: cn(
+        noDataActionsVariants({ variant }),
+        "flex w-full flex-col content-md:w-auto content-md:flex-row",
+        className
+      ),
       ...props,
       children: blocks.map((block, index) => /* @__PURE__ */ jsxs18(React2.Fragment, { children: [
         index > 0 && /* @__PURE__ */ jsx25(
           "div",
           {
             "aria-hidden": "true",
-            className: "shrink-0 self-stretch border-t border-ods-border md:border-l md:border-t-0"
+            className: "shrink-0 self-stretch border-t border-ods-border content-md:border-l content-md:border-t-0"
           }
         ),
         block
@@ -3521,7 +3528,7 @@ var NoData = React4.forwardRef(function NoDataImpl({
       leftIcon: buttonIcon,
       onClick: onButtonClick,
       ...buttonProps,
-      className: cn("w-full md:w-auto", buttonProps?.className),
+      className: cn("w-full content-md:w-auto", buttonProps?.className),
       children: buttonLabel
     }
   ) : null);
@@ -4181,7 +4188,7 @@ function TagsManager({
       "label",
       {
         className: cn(
-          "flex min-h-11 w-full cursor-text flex-wrap items-center gap-2 rounded-[6px] border px-3 py-1 md:min-h-12",
+          "flex min-h-11 w-full cursor-text flex-wrap items-center gap-2 rounded-[6px] border px-3 py-1 content-md:min-h-12",
           "transition-colors duration-200",
           "border-ods-border bg-ods-card",
           "group",
@@ -4197,7 +4204,7 @@ function TagsManager({
             "span",
             {
               className: cn(
-                "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 [&_svg]:size-4 md:[&_svg]:size-6",
+                "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 [&_svg]:size-4 content-md:[&_svg]:size-6",
                 open && "text-ods-accent"
               ),
               children: /* @__PURE__ */ jsx34(SearchIcon, {})
@@ -4248,7 +4255,7 @@ function TagsManager({
             {
               type: "button",
               onClick: handleClearAll,
-              className: "flex flex-shrink-0 items-center justify-center transition-opacity hover:opacity-70 [&_svg]:size-4 md:[&_svg]:size-6",
+              className: "flex flex-shrink-0 items-center justify-center transition-opacity hover:opacity-70 [&_svg]:size-4 content-md:[&_svg]:size-6",
               "aria-label": "Clear all tags",
               children: /* @__PURE__ */ jsx34(XmarkCircleIcon, { className: "text-ods-text-secondary" })
             }
@@ -4328,7 +4335,7 @@ function TagsManager({
                   "aria-selected": isSelected,
                   tabIndex: 0,
                   className: cn(
-                    "flex h-11 cursor-pointer items-center border-b border-ods-border px-4 transition-colors last:border-b-0 md:h-12",
+                    "flex h-11 cursor-pointer items-center border-b border-ods-border px-4 transition-colors last:border-b-0 content-md:h-12",
                     "text-h4",
                     isSelected ? "text-ods-accent" : "text-ods-text-primary",
                     "group/item hover:bg-ods-bg-hover"
@@ -4386,7 +4393,7 @@ function TagsManager({
                 "aria-selected": false,
                 tabIndex: 0,
                 className: cn(
-                  "flex h-11 cursor-pointer items-center gap-2 px-4 transition-colors text-h4 md:h-12",
+                  "flex h-11 cursor-pointer items-center gap-2 px-4 transition-colors text-h4 content-md:h-12",
                   "hover:bg-ods-bg-hover",
                   isCreating && "pointer-events-none opacity-50"
                 ),
@@ -4691,7 +4698,7 @@ var DialogContent = forwardRef13(({ className, children, ...props }, ref) => /*
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx37("div", { className: "grid min-h-0 gap-[var(--spacing-system-mf)] overflow-y-auto", children }),
+        /* @__PURE__ */ jsx37("div", { className: "grid min-h-0 gap-[var(--spacing-system-mf)] overflow-y-auto", children: /* @__PURE__ */ jsx37(ViewportBreakpoints, { children }) }),
         /* @__PURE__ */ jsxs28(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
           /* @__PURE__ */ jsx37(X3, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx37("span", { className: "sr-only", children: "Close" })
@@ -5097,7 +5104,7 @@ var SheetContent = forwardRef15(
   ({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs32(SheetPortal, { children: [
     /* @__PURE__ */ jsx43(SheetOverlay, {}),
     /* @__PURE__ */ jsxs32(SheetPrimitive.Content, { ref, className: cn(sheetVariants({ side }), className), ...props, children: [
-      children,
+      /* @__PURE__ */ jsx43(ViewportBreakpoints, { children }),
       /* @__PURE__ */ jsxs32(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
         /* @__PURE__ */ jsx43(X4, { className: "h-4 w-4" }),
         /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "Close" })
@@ -5169,7 +5176,10 @@ var BreadcrumbList = forwardRef17(({ className, ...props }, ref) => /* @__PURE__
   "ol",
   {
     ref,
-    className: cn("flex flex-wrap items-center gap-1.5 break-words text-ods-text-muted text-h6 md:gap-2.5", className),
+    className: cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-ods-text-muted text-h6 content-md:gap-2.5",
+      className
+    ),
     ...props
   }
 ));
@@ -5682,7 +5692,7 @@ var TabBar = memo(function TabBarImpl({
                       tab.icon,
                       {
                         className: cn(
-                          "h-4 w-4 transition-colors md:h-6 md:w-6",
+                          "h-4 w-4 transition-colors content-md:h-6 content-md:w-6",
                           isActive ? "text-ods-accent" : "text-ods-text-secondary"
                         )
                       }
@@ -5693,7 +5703,7 @@ var TabBar = memo(function TabBarImpl({
                     // the label (there's no icon corner to anchor to).
                     /* @__PURE__ */ jsx50(StatusDot, { indicator: tab.indicator, className: "shrink-0" })
                   ) : null,
-                  tab.sublabel ? /* @__PURE__ */ jsxs38("span", { className: "flex min-w-0 flex-col items-start text-left md:flex-row md:items-baseline md:gap-[var(--spacing-system-xsf)]", children: [
+                  tab.sublabel ? /* @__PURE__ */ jsxs38("span", { className: "flex min-w-0 flex-col items-start text-left content-md:flex-row content-md:items-baseline content-md:gap-[var(--spacing-system-xsf)]", children: [
                     /* @__PURE__ */ jsx50(
                       "span",
                       {
@@ -6314,12 +6324,12 @@ function EmbedViewerFrame({
         isFullscreen && "overflow-auto bg-ods-bg p-[var(--spacing-system-mf)]"
       ),
       children: [
-        /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+        /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-3 content-sm:flex-row content-sm:items-center content-sm:justify-between", children: [
           /* @__PURE__ */ jsxs42("div", { className: "flex min-w-0 items-center gap-2", children: [
             icon,
             titleVariant === "h3" ? /* @__PURE__ */ jsx57("h2", { className: "truncate text-ods-text-primary text-h3", children: title }) : /* @__PURE__ */ jsx57("span", { className: "truncate font-semibold text-ods-text-primary text-h6", children: title })
           ] }),
-          fullscreenControl && src ? /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-[var(--spacing-system-xsf)] sm:flex-row sm:items-center", children: [
+          fullscreenControl && src ? /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-[var(--spacing-system-xsf)] content-sm:flex-row content-sm:items-center", children: [
             actions,
             /* @__PURE__ */ jsx57(
               Button,
@@ -6329,7 +6339,7 @@ function EmbedViewerFrame({
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
                 leftIcon: isFullscreen ? /* @__PURE__ */ jsx57(Minimize2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx57(Maximize2, { className: "h-4 w-4" }),
-                className: "w-full sm:w-auto",
+                className: "w-full content-sm:w-auto",
                 children: isFullscreen ? "Exit fullscreen" : "Fullscreen"
               }
             )
@@ -6404,7 +6414,7 @@ function ClaudeEmbed({ url, kind = "artifact", title, height, loading = "lazy" }
           openInNewTab: true,
           leftIcon: /* @__PURE__ */ jsx58(ClaudeIcon, { className: "h-4 w-4" }),
           rightIcon: /* @__PURE__ */ jsx58(ExternalLink, { className: "h-4 w-4" }),
-          className: "w-full sm:w-auto",
+          className: "w-full content-sm:w-auto",
           children: "Open in Claude"
         }
       ),
@@ -6483,7 +6493,7 @@ function FigmaEmbed({ url, title, height, loading = "lazy" }) {
       icon: /* @__PURE__ */ jsx59(FigmaIcon, { className: "h-5 w-5 shrink-0" }),
       title: heading,
       titleVariant: "h6",
-      actions: /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center", children: [
+      actions: /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-2 content-sm:flex-row content-sm:items-center", children: [
         isSlides && embedSrc && /* @__PURE__ */ jsx59(SlidesViewToggle, { view, onChange: setView }),
         originalUrl && /* @__PURE__ */ jsx59(
           Button,
@@ -6494,7 +6504,7 @@ function FigmaEmbed({ url, title, height, loading = "lazy" }) {
             openInNewTab: true,
             leftIcon: /* @__PURE__ */ jsx59(FigmaIcon, { className: "h-4 w-4" }),
             rightIcon: /* @__PURE__ */ jsx59(ExternalLink2, { className: "h-4 w-4" }),
-            className: "w-full sm:w-auto",
+            className: "w-full content-sm:w-auto",
             children: "Open in Figma"
           }
         )
@@ -7348,7 +7358,7 @@ var MediaCarousel = memo2(function MediaCarouselImpl({
               {
                 variant: "transparent",
                 onClick: prevSlide,
-                className: "absolute left-3 top-1/2 z-10 h-auto -translate-y-1/2 rounded-full bg-black/50 p-2 text-ods-text-on-dark opacity-0 transition-opacity duration-200 hover:bg-black/70 group-hover:opacity-100 md:h-auto",
+                className: "absolute left-3 top-1/2 z-10 h-auto -translate-y-1/2 rounded-full bg-black/50 p-2 text-ods-text-on-dark opacity-0 transition-opacity duration-200 hover:bg-black/70 group-hover:opacity-100 content-md:h-auto",
                 "aria-label": "Previous media",
                 children: /* @__PURE__ */ jsx64(ChevronLeftIcon, {})
               }
@@ -7358,7 +7368,7 @@ var MediaCarousel = memo2(function MediaCarouselImpl({
               {
                 variant: "transparent",
                 onClick: nextSlide,
-                className: "absolute right-3 top-1/2 z-10 h-auto -translate-y-1/2 rounded-full bg-black/50 p-2 text-ods-text-on-dark opacity-0 transition-opacity duration-200 hover:bg-black/70 group-hover:opacity-100 md:h-auto",
+                className: "absolute right-3 top-1/2 z-10 h-auto -translate-y-1/2 rounded-full bg-black/50 p-2 text-ods-text-on-dark opacity-0 transition-opacity duration-200 hover:bg-black/70 group-hover:opacity-100 content-md:h-auto",
                 "aria-label": "Next media",
                 children: /* @__PURE__ */ jsx64(ChevronRightIcon, {})
               }
@@ -7376,7 +7386,7 @@ var MediaCarousel = memo2(function MediaCarouselImpl({
           "aria-current": isActive ? "true" : void 0,
           "aria-label": `Go to slide ${index + 1}`,
           onClick: () => selectSlide(index),
-          className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full p-0 md:h-6",
+          className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full p-0 content-md:h-6",
           children: /* @__PURE__ */ jsx64(
             "span",
             {
@@ -8509,11 +8519,11 @@ var CELL_ITEMS_ALIGN = {
   right: "items-end"
 };
 var HIDE_CLASS = {
-  md: "hidden md:flex",
-  lg: "hidden lg:flex",
-  xl: "hidden xl:flex"
+  md: "hidden content-md:flex",
+  lg: "hidden content-lg:flex",
+  xl: "hidden content-xl:flex"
 };
-var ROW_CLASS = "flex items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] min-h-14 md:min-h-20 border-b border-ods-border last:border-b-0";
+var ROW_CLASS = "flex items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] min-h-14 content-md:min-h-20 border-b border-ods-border last:border-b-0";
 function CellValue({ column }) {
   const valueNode = /* @__PURE__ */ jsx70(
     "div",
@@ -9403,111 +9413,119 @@ function FilterModal({
   const hasFilterGroups = filterGroups.length > 0;
   const hasTagFilter = !!tagFilterKeys && tagFilterKeys.length > 0 && !!onTagsChange;
   const isEmpty = !isLoading && !hasSort && !hasFilterGroups && !hasTagFilter && !dateFilter;
-  return /* @__PURE__ */ jsxs60(Modal, { isOpen, onClose, className: cn("max-h-[90vh] max-w-none", className), children: [
-    /* @__PURE__ */ jsx79(ModalHeader, { children: /* @__PURE__ */ jsx79(ModalTitle, { children: title }) }),
-    /* @__PURE__ */ jsx79(
-      ModalContent,
-      {
-        className: cn(
-          "flex min-h-0 flex-1 flex-col",
-          !isEmpty && "md:rounded-md md:border md:border-ods-border md:bg-ods-bg md:px-3"
-        ),
-        children: /* @__PURE__ */ jsxs60("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx79(
-            "div",
-            {
-              ref: scrollRef,
-              onScroll: updateFade,
-              className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto md:py-3",
-              children: isLoading ? /* @__PURE__ */ jsx79(Fragment12, { children: [0, 1].map((group) => /* @__PURE__ */ jsxs60("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx79(Skeleton, { className: "h-5 w-24" }),
-                /* @__PURE__ */ jsx79("div", { className: "overflow-hidden rounded-md border border-ods-border", children: [0, 1, 2].map((row) => /* @__PURE__ */ jsxs60(
-                  "div",
-                  {
-                    className: "flex items-center gap-3 border-b border-ods-border bg-ods-card px-4 py-3 last:border-b-0",
-                    children: [
-                      /* @__PURE__ */ jsx79(Skeleton, { className: "h-6 w-6 shrink-0 rounded-[6px]" }),
-                      /* @__PURE__ */ jsx79(Skeleton, { className: "h-4 max-w-[60%] flex-1" }),
-                      /* @__PURE__ */ jsx79(Skeleton, { className: "h-4 w-10 shrink-0" })
-                    ]
-                  },
-                  row
-                )) })
-              ] }, group)) }) : isEmpty ? /* @__PURE__ */ jsxs60("div", { className: "flex h-[240px] flex-col items-center justify-center gap-6 p-6", children: [
-                /* @__PURE__ */ jsx79(Filter02Icon, { className: "text-ods-text-secondary", size: 24 }),
-                /* @__PURE__ */ jsxs60("div", { className: "flex flex-col items-center text-center text-ods-text-secondary", children: [
-                  /* @__PURE__ */ jsx79("p", { className: "text-h4", children: emptyStateTitle }),
-                  /* @__PURE__ */ jsx79("p", { className: "text-h6", children: emptyStateDescription })
-                ] })
-              ] }) : /* @__PURE__ */ jsxs60(Fragment12, { children: [
-                sortConfig && sortConfig.columns.length > 0 && /* @__PURE__ */ jsxs60("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx79("span", { className: "text-ods-text-secondary text-h5", children: sortConfig.title || "Sort By" }),
-                  /* @__PURE__ */ jsx79("div", { className: "overflow-hidden rounded-md border border-ods-border", children: sortConfig.columns.map((column) => /* @__PURE__ */ jsx79(
-                    SortColumnItem,
-                    {
-                      column,
-                      currentDirection: getColumnDirection(column.key),
-                      onSort: (direction) => onSort?.(column.key, direction),
-                      onClear: onSortClear ? () => onSortClear(column.key) : void 0
-                    },
-                    column.key
-                  )) })
-                ] }),
-                filterGroups.map((group) => {
-                  if (group.options.length === 0) return null;
-                  const groupSelection = selectedFilters[group.id] || [];
-                  return /* @__PURE__ */ jsxs60("div", { className: "flex flex-col gap-1", children: [
-                    /* @__PURE__ */ jsx79("span", { className: "text-ods-text-secondary text-h5", children: group.title }),
-                    /* @__PURE__ */ jsx79("div", { className: "overflow-hidden rounded-md border border-ods-border", children: group.options.map((option) => /* @__PURE__ */ jsx79(
-                      FilterCheckboxItem,
+  return /* @__PURE__ */ jsxs60(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      className: cn("max-h-[90vh] max-w-none md:max-w-[min(42rem,calc(100vw-2rem))]", className),
+      children: [
+        /* @__PURE__ */ jsx79(ModalHeader, { children: /* @__PURE__ */ jsx79(ModalTitle, { children: title }) }),
+        /* @__PURE__ */ jsx79(
+          ModalContent,
+          {
+            className: cn(
+              "flex min-h-0 flex-1 flex-col",
+              !isEmpty && "md:rounded-md md:border md:border-ods-border md:bg-ods-bg md:px-3"
+            ),
+            children: /* @__PURE__ */ jsxs60("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+              /* @__PURE__ */ jsx79(
+                "div",
+                {
+                  ref: scrollRef,
+                  onScroll: updateFade,
+                  className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto md:py-3",
+                  children: isLoading ? /* @__PURE__ */ jsx79(Fragment12, { children: [0, 1].map((group) => /* @__PURE__ */ jsxs60("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ jsx79(Skeleton, { className: "h-5 w-24" }),
+                    /* @__PURE__ */ jsx79("div", { className: "overflow-hidden rounded-md border border-ods-border", children: [0, 1, 2].map((row) => /* @__PURE__ */ jsxs60(
+                      "div",
                       {
-                        label: option.label,
-                        count: option.count,
-                        checked: groupSelection.includes(option.id),
-                        onChange: (checked) => handleFilterToggle(group.id, option.id, checked)
+                        className: "flex items-center gap-3 border-b border-ods-border bg-ods-card px-4 py-3 last:border-b-0",
+                        children: [
+                          /* @__PURE__ */ jsx79(Skeleton, { className: "h-6 w-6 shrink-0 rounded-[6px]" }),
+                          /* @__PURE__ */ jsx79(Skeleton, { className: "h-4 max-w-[60%] flex-1" }),
+                          /* @__PURE__ */ jsx79(Skeleton, { className: "h-4 w-10 shrink-0" })
+                        ]
                       },
-                      option.id
+                      row
                     )) })
-                  ] }, group.id);
-                }),
-                tagFilterKeys && tagFilterKeys.length > 0 && onTagsChange && /* @__PURE__ */ jsx79(
-                  TagKeyValueFilter,
-                  {
-                    keys: tagFilterKeys,
-                    selectedTags: pendingTags,
-                    onTagsChange: setPendingTags,
-                    keysTitle: tagFilterTitle
-                  }
-                ),
-                dateFilter && /* @__PURE__ */ jsxs60("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx79("span", { className: "text-ods-text-secondary text-h5", children: dateFilter.title ?? "Date" }),
-                  /* @__PURE__ */ jsx79(
-                    DateFilterPanel,
-                    {
-                      mode: "range",
-                      sort: draftDateSort,
-                      onSortChange: setDraftDateSort,
-                      selected: draftDateRange,
-                      onSelect: (value) => setDraftDateRange(value),
-                      fromDate: dateFilter.fromDate,
-                      toDate: dateFilter.toDate,
-                      className: "gap-[var(--spacing-system-xxs)]"
-                    }
-                  )
-                ] })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx79(ScrollFadeOverlay, { edge: "top", visible: fadeTop }),
-          /* @__PURE__ */ jsx79(ScrollFadeOverlay, { edge: "bottom", visible: fadeBottom })
+                  ] }, group)) }) : isEmpty ? /* @__PURE__ */ jsxs60("div", { className: "flex h-[240px] flex-col items-center justify-center gap-6 p-6", children: [
+                    /* @__PURE__ */ jsx79(Filter02Icon, { className: "text-ods-text-secondary", size: 24 }),
+                    /* @__PURE__ */ jsxs60("div", { className: "flex flex-col items-center text-center text-ods-text-secondary", children: [
+                      /* @__PURE__ */ jsx79("p", { className: "text-h4", children: emptyStateTitle }),
+                      /* @__PURE__ */ jsx79("p", { className: "text-h6", children: emptyStateDescription })
+                    ] })
+                  ] }) : /* @__PURE__ */ jsxs60(Fragment12, { children: [
+                    sortConfig && sortConfig.columns.length > 0 && /* @__PURE__ */ jsxs60("div", { className: "flex flex-col gap-1", children: [
+                      /* @__PURE__ */ jsx79("span", { className: "text-ods-text-secondary text-h5", children: sortConfig.title || "Sort By" }),
+                      /* @__PURE__ */ jsx79("div", { className: "overflow-hidden rounded-md border border-ods-border", children: sortConfig.columns.map((column) => /* @__PURE__ */ jsx79(
+                        SortColumnItem,
+                        {
+                          column,
+                          currentDirection: getColumnDirection(column.key),
+                          onSort: (direction) => onSort?.(column.key, direction),
+                          onClear: onSortClear ? () => onSortClear(column.key) : void 0
+                        },
+                        column.key
+                      )) })
+                    ] }),
+                    filterGroups.map((group) => {
+                      if (group.options.length === 0) return null;
+                      const groupSelection = selectedFilters[group.id] || [];
+                      return /* @__PURE__ */ jsxs60("div", { className: "flex flex-col gap-1", children: [
+                        /* @__PURE__ */ jsx79("span", { className: "text-ods-text-secondary text-h5", children: group.title }),
+                        /* @__PURE__ */ jsx79("div", { className: "overflow-hidden rounded-md border border-ods-border", children: group.options.map((option) => /* @__PURE__ */ jsx79(
+                          FilterCheckboxItem,
+                          {
+                            label: option.label,
+                            count: option.count,
+                            checked: groupSelection.includes(option.id),
+                            onChange: (checked) => handleFilterToggle(group.id, option.id, checked)
+                          },
+                          option.id
+                        )) })
+                      ] }, group.id);
+                    }),
+                    tagFilterKeys && tagFilterKeys.length > 0 && onTagsChange && /* @__PURE__ */ jsx79(
+                      TagKeyValueFilter,
+                      {
+                        keys: tagFilterKeys,
+                        selectedTags: pendingTags,
+                        onTagsChange: setPendingTags,
+                        keysTitle: tagFilterTitle
+                      }
+                    ),
+                    dateFilter && /* @__PURE__ */ jsxs60("div", { className: "flex flex-col gap-1", children: [
+                      /* @__PURE__ */ jsx79("span", { className: "text-ods-text-secondary text-h5", children: dateFilter.title ?? "Date" }),
+                      /* @__PURE__ */ jsx79(
+                        DateFilterPanel,
+                        {
+                          mode: "range",
+                          sort: draftDateSort,
+                          onSortChange: setDraftDateSort,
+                          selected: draftDateRange,
+                          onSelect: (value) => setDraftDateRange(value),
+                          fromDate: dateFilter.fromDate,
+                          toDate: dateFilter.toDate,
+                          className: "gap-[var(--spacing-system-xxs)]"
+                        }
+                      )
+                    ] })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx79(ScrollFadeOverlay, { edge: "top", visible: fadeTop }),
+              /* @__PURE__ */ jsx79(ScrollFadeOverlay, { edge: "bottom", visible: fadeBottom })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs60(ModalFooter, { children: [
+          /* @__PURE__ */ jsx79(Button, { variant: "outline", className: "h-11 flex-1", onClick: handleReset, children: resetButtonText }),
+          /* @__PURE__ */ jsx79(Button, { variant: "accent", className: "h-11 flex-1", onClick: handleApply, children: applyButtonText })
         ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs60(ModalFooter, { children: [
-      /* @__PURE__ */ jsx79(Button, { variant: "outline", className: "h-11 flex-1", onClick: handleReset, children: resetButtonText }),
-      /* @__PURE__ */ jsx79(Button, { variant: "accent", className: "h-11 flex-1", onClick: handleApply, children: applyButtonText })
-    ] })
-  ] });
+      ]
+    }
+  );
 }
 
 // src/components/ui/page-actions.tsx
@@ -9704,14 +9722,14 @@ function IconButtonsVariant({
   const mobileMenuGroups = [{ items: actions.flatMap(actionToMenuItems) }, ...menuActions ?? []];
   const hasMobileMenuItems = mobileMenuGroups.some((g) => g.items.length > 0);
   return /* @__PURE__ */ jsxs61(Fragment13, { children: [
-    /* @__PURE__ */ jsxs61("div", { className: cn("hidden items-center md:flex", ACTIONS_GAP, className), children: [
+    /* @__PURE__ */ jsxs61("div", { className: cn("hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
       selector,
       loading ? /* @__PURE__ */ jsx80(ActionSkeletons, { actions: desktopActions }) : /* @__PURE__ */ jsxs61(Fragment13, { children: [
         desktopActions.map((action, idx) => /* @__PURE__ */ jsx80(React6.Fragment, { children: renderActionButton(action) }, actionKey(action, idx))),
         hasMenuActions && /* @__PURE__ */ jsx80(ActionsMenuDropdown, { groups: menuActions })
       ] })
     ] }),
-    /* @__PURE__ */ jsx80("div", { className: cn("flex md:hidden", className), children: loading ? /* @__PURE__ */ jsx80(MobileTriggerSkeleton, {}) : useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true }) : hasMobileMenuItems ? /* @__PURE__ */ jsx80(ActionsMenuDropdown, { groups: mobileMenuGroups }) : null })
+    /* @__PURE__ */ jsx80("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx80(MobileTriggerSkeleton, {}) : useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true }) : hasMobileMenuItems ? /* @__PURE__ */ jsx80(ActionsMenuDropdown, { groups: mobileMenuGroups }) : null })
   ] });
 }
 function PrimaryButtonsVariant({
@@ -9726,11 +9744,12 @@ function PrimaryButtonsVariant({
   });
   const desktopActions = sortedActions.filter((a) => !a.showOnlyMobile);
   return /* @__PURE__ */ jsxs61(Fragment13, { children: [
-    /* @__PURE__ */ jsx80("div", { className: cn("hidden items-center md:flex", ACTIONS_GAP, className), children: loading ? (
+    /* @__PURE__ */ jsx80("div", { className: cn("hidden items-center md:content-md:flex", ACTIONS_GAP, className), children: loading ? (
       // No overflow trigger in this variant — an unknown action set settles
       // into a labelled button, not a square one.
       /* @__PURE__ */ jsx80(ActionSkeletons, { actions: desktopActions, emptyFallback: "label" })
     ) : desktopActions.map((action, idx) => /* @__PURE__ */ jsx80(React6.Fragment, { children: renderActionButton(action) }, `desktop-${actionKey(action, idx)}`)) }),
+    /* @__PURE__ */ jsx80("div", { className: cn("hidden items-center md:content-max-md:flex", ACTIONS_GAP, className), children: loading ? /* @__PURE__ */ jsx80(MobileTriggerSkeleton, {}) : /* @__PURE__ */ jsx80(CompactPrimaryActions, { actions: desktopActions }) }),
     /* @__PURE__ */ jsx80(MobileBottomActions, { actions: sortedActions, loading })
   ] });
 }
@@ -9746,14 +9765,14 @@ function MenuPrimaryVariant({
   const mobileMenuGroups = [{ items: actions.flatMap(actionToMenuItems) }, ...menuActions];
   const hasMobileMenuItems = mobileMenuGroups.some((g) => g.items.length > 0);
   return /* @__PURE__ */ jsxs61(Fragment13, { children: [
-    /* @__PURE__ */ jsxs61("div", { className: cn("hidden items-center md:flex", ACTIONS_GAP, className), children: [
+    /* @__PURE__ */ jsxs61("div", { className: cn("hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
       selector,
       loading ? /* @__PURE__ */ jsx80(ActionSkeletons, { actions: desktopActions }) : /* @__PURE__ */ jsxs61(Fragment13, { children: [
         hasMenuActions && /* @__PURE__ */ jsx80(ActionsMenuDropdown, { groups: menuActions }),
         desktopActions.map((action, idx) => /* @__PURE__ */ jsx80(React6.Fragment, { children: renderActionButton({ ...action, variant: action.variant || "accent" }) }, `desktop-${actionKey(action, idx)}`))
       ] })
     ] }),
-    /* @__PURE__ */ jsx80("div", { className: cn("flex md:hidden", className), children: loading ? /* @__PURE__ */ jsx80(MobileTriggerSkeleton, {}) : hasMobileMenuItems || selector ? (
+    /* @__PURE__ */ jsx80("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx80(MobileTriggerSkeleton, {}) : hasMobileMenuItems || selector ? (
       // The selector rides into the menu as its header row: on mobile the
       // title row has no room for it, and hiding it entirely (what
       // `icon-buttons` does) would leave no way to switch views at all.
@@ -9761,6 +9780,15 @@ function MenuPrimaryVariant({
     ) : null })
   ] });
 }
+function CompactPrimaryActions({ actions }) {
+  const foldable = actions.filter((action) => action.variant !== "accent" && !!action.label);
+  const fold = foldable.length > 1;
+  const inline = fold ? actions.filter((action) => !foldable.includes(action)) : actions;
+  return /* @__PURE__ */ jsxs61(Fragment13, { children: [
+    fold && /* @__PURE__ */ jsx80(ActionsMenuDropdown, { groups: [{ items: foldable.flatMap(actionToMenuItems) }] }),
+    inline.map((action, idx) => /* @__PURE__ */ jsx80(React6.Fragment, { children: renderActionButton(action) }, `compact-${actionKey(action, idx)}`))
+  ] });
+}
 function MobileBottomActions({ actions, loading }) {
   return /* @__PURE__ */ jsx80(
     "div",
@@ -9855,9 +9883,16 @@ function renderAdvancedPageContainer({
       return /* @__PURE__ */ jsx81("div", { className: cn("flex items-end justify-between gap-4"), children: headerContent });
     }
     if (variant === "detail") {
-      return /* @__PURE__ */ jsxs62("div", { className: "flex items-end justify-between gap-4 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-end lg:justify-between", children: [
+      return /* @__PURE__ */ jsxs62("div", { className: "flex items-end justify-between gap-4 content-md:flex-col content-md:items-start content-md:justify-start content-lg:flex-row content-lg:items-end content-lg:justify-between", children: [
         /* @__PURE__ */ jsxs62("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-          backButton && /* @__PURE__ */ jsx81(BackButton, { onClick: backButton.onClick, label: backButton.label, className: "hidden md:inline-flex" }),
+          backButton && /* @__PURE__ */ jsx81(
+            BackButton,
+            {
+              onClick: backButton.onClick,
+              label: backButton.label,
+              className: "hidden content-md:inline-flex"
+            }
+          ),
           title && /* @__PURE__ */ jsx81("h1", { className: "text-ods-text-primary text-h2", children: accentSentenceMarks(title) }),
           subtitle && /* @__PURE__ */ jsx81("div", { className: "text-ods-text-secondary text-h6", children: subtitle })
         ] }),
@@ -9868,9 +9903,16 @@ function renderAdvancedPageContainer({
       ] });
     }
     if (variant === "list") {
-      return /* @__PURE__ */ jsxs62("div", { className: "flex items-center justify-between gap-4 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center lg:justify-between", children: [
+      return /* @__PURE__ */ jsxs62("div", { className: "flex items-center justify-between gap-4 content-md:flex-col content-md:items-start content-md:justify-start content-lg:flex-row content-lg:items-center content-lg:justify-between", children: [
         /* @__PURE__ */ jsxs62("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-          backButton && /* @__PURE__ */ jsx81(BackButton, { onClick: backButton.onClick, label: backButton.label, className: "hidden md:inline-flex" }),
+          backButton && /* @__PURE__ */ jsx81(
+            BackButton,
+            {
+              onClick: backButton.onClick,
+              label: backButton.label,
+              className: "hidden content-md:inline-flex"
+            }
+          ),
           title && /* @__PURE__ */ jsx81("h1", { className: "text-ods-text-primary text-h2", children: accentSentenceMarks(title) }),
           subtitle && /* @__PURE__ */ jsx81("div", { className: "text-ods-text-secondary text-h6", children: subtitle })
         ] }),
@@ -9881,9 +9923,16 @@ function renderAdvancedPageContainer({
       ] });
     }
     if (variant === "form") {
-      return /* @__PURE__ */ jsxs62("div", { className: "flex items-end justify-between gap-4 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-end lg:justify-between", children: [
+      return /* @__PURE__ */ jsxs62("div", { className: "flex items-end justify-between gap-4 content-md:flex-col content-md:items-start content-md:justify-start content-lg:flex-row content-lg:items-end content-lg:justify-between", children: [
         /* @__PURE__ */ jsxs62("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-          backButton && /* @__PURE__ */ jsx81(BackButton, { onClick: backButton.onClick, label: backButton.label, className: "hidden md:inline-flex" }),
+          backButton && /* @__PURE__ */ jsx81(
+            BackButton,
+            {
+              onClick: backButton.onClick,
+              label: backButton.label,
+              className: "hidden content-md:inline-flex"
+            }
+          ),
           title && /* @__PURE__ */ jsx81("h1", { className: "text-ods-text-primary text-h2", children: accentSentenceMarks(title) })
         ] }),
         (headerActions || actions) && /* @__PURE__ */ jsxs62("div", { className: "flex shrink-0 items-center gap-4", children: [
@@ -9892,7 +9941,7 @@ function renderAdvancedPageContainer({
         ] })
       ] });
     }
-    return /* @__PURE__ */ jsxs62("div", { className: "flex items-center justify-between gap-4 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center lg:justify-between", children: [
+    return /* @__PURE__ */ jsxs62("div", { className: "flex items-center justify-between gap-4 content-md:flex-col content-md:items-start content-md:justify-start content-lg:flex-row content-lg:items-center content-lg:justify-between", children: [
       (title || subtitle) && /* @__PURE__ */ jsxs62("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
         title && /* @__PURE__ */ jsx81("h1", { className: "text-ods-text-primary text-h2", children: accentSentenceMarks(title) }),
         subtitle && /* @__PURE__ */ jsx81("div", { className: "text-ods-text-secondary text-h6", children: subtitle })
@@ -9907,25 +9956,25 @@ function renderAdvancedPageContainer({
     const baseClasses = ["flex flex-col w-full", backgroundClasses2[background], paddingClasses[padding]];
     switch (variant) {
       case "list":
-        return cn(baseClasses, "gap-4 md:gap-6", className);
+        return cn(baseClasses, "gap-4 content-md:gap-6", className);
       case "detail":
-        return cn(baseClasses, "gap-4 md:gap-6", className);
+        return cn(baseClasses, "gap-4 content-md:gap-6", className);
       case "form":
-        return cn(baseClasses, "gap-6 md:gap-10", className);
+        return cn(baseClasses, "gap-6 content-md:gap-10", className);
       case "content":
       default:
-        return cn(baseClasses, "gap-4 md:gap-6", className);
+        return cn(baseClasses, "gap-4 content-md:gap-6", className);
     }
   };
   const getContentClasses = () => {
-    const mobilePadding = needsBottomPadding ? "pb-28 md:pb-0" : "";
+    const mobilePadding = needsBottomPadding ? "pb-28 content-md:pb-0" : "";
     switch (variant) {
       case "detail":
         return cn("flex-1 overflow-auto", mobilePadding, contentClassName);
       case "list":
-        return cn("flex flex-col gap-4 md:gap-6", mobilePadding, contentClassName);
+        return cn("flex flex-col gap-4 content-md:gap-6", mobilePadding, contentClassName);
       case "form":
-        return cn("flex flex-col gap-4 md:gap-10", mobilePadding, contentClassName);
+        return cn("flex flex-col gap-4 content-md:gap-10", mobilePadding, contentClassName);
       case "content":
       default:
         return cn("flex-1", mobilePadding, contentClassName);
@@ -10006,7 +10055,7 @@ function ListPageLayout({
                   onChange: (e) => setLocalSearchValue(e.target.value),
                   value: localSearchValue,
                   className: "flex-1",
-                  startAdornment: /* @__PURE__ */ jsx82(SearchIcon, { className: "h-4 w-4 md:h-6 md:w-6" })
+                  startAdornment: /* @__PURE__ */ jsx82(SearchIcon, { className: "h-4 w-4 content-md:h-6 content-md:w-6" })
                 }
               ),
               hasMobileFilter && /* @__PURE__ */ jsx82(
@@ -10014,7 +10063,7 @@ function ListPageLayout({
                 {
                   variant: "outline",
                   size: "icon",
-                  className: "md:hidden",
+                  className: "content-md:hidden",
                   onClick: () => setMobileFilterOpen(true),
                   "aria-label": "Open filters",
                   children: /* @__PURE__ */ jsx82(Filter02Icon, {})
@@ -10046,7 +10095,7 @@ function ListPageLayout({
 // src/components/ui/entity-image.tsx
 import React7 from "react";
 import { jsx as jsx83 } from "react/jsx-runtime";
-var ENTITY_IMAGE_SIZE = "size-[52px] md:size-[60px]";
+var ENTITY_IMAGE_SIZE = "size-[52px] content-md:size-[60px]";
 function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
   const resolvedSrc = useAuthedImageSrc(src);
   const [failedSrc, setFailedSrc] = React7.useState(null);
@@ -10087,7 +10136,7 @@ function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
 
 // src/components/layout/title-block.tsx
 import { jsx as jsx84, jsxs as jsxs64 } from "react/jsx-runtime";
-var TITLE_BLOCK_MIN_HEIGHT = "min-h-11 md:min-h-12";
+var TITLE_BLOCK_MIN_HEIGHT = "min-h-11 content-md:min-h-12";
 function TitleTextSkeleton({ widthClass, heightClass }) {
   return /* @__PURE__ */ jsx84(
     "span",
@@ -10098,8 +10147,8 @@ function TitleTextSkeleton({ widthClass, heightClass }) {
   );
 }
 var TITLE_SKELETON_SIZE = {
-  h1: { width: "w-56 md:w-80 lg:w-96", height: "h-7 md:h-8 lg:h-9" },
-  h2: { width: "w-48 md:w-72", height: "h-4 md:h-6" }
+  h1: { width: "w-56 content-md:w-80 content-lg:w-96", height: "h-7 content-md:h-8 content-lg:h-9" },
+  h2: { width: "w-48 content-md:w-72", height: "h-4 content-md:h-6" }
 };
 function TitleBlock({
   title,
@@ -10137,14 +10186,14 @@ function TitleBlock({
         "flex items-end justify-between gap-[var(--spacing-system-m)]",
         // md+: one wrapping row — actions stay inline with a short title and
         // wrap to a second row only when the title overflows (ClickUp 86ahd6uy5).
-        "md:flex-wrap md:content-end",
+        "content-md:flex-wrap content-md:content-end",
         "pt-[var(--spacing-system-l)]",
         variant === "card" ? cn(
           "border-b border-ods-border bg-ods-card",
           "px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]",
-          "md:border-b-0 md:bg-transparent",
-          "md:px-0 md:pb-0",
-          "md:mb-[var(--spacing-system-l)]"
+          "content-md:border-b-0 content-md:bg-transparent",
+          "content-md:px-0 content-md:pb-0",
+          "content-md:mb-[var(--spacing-system-l)]"
         ) : "mb-[var(--spacing-system-l)]",
         className
       ),
@@ -10153,11 +10202,11 @@ function TitleBlock({
           "div",
           {
             className: cn(
-              "flex min-w-0 flex-1 flex-col justify-center gap-[var(--spacing-system-xs)] md:max-w-full md:flex-none",
+              "flex min-w-0 flex-1 flex-col justify-center gap-[var(--spacing-system-xs)] content-md:max-w-full content-md:flex-none",
               TITLE_BLOCK_MIN_HEIGHT
             ),
             children: [
-              backButton && /* @__PURE__ */ jsx84(BackButton, { onClick: backButton.onClick, label: backButton.label, className: "hidden md:inline-flex" }),
+              backButton && /* @__PURE__ */ jsx84(BackButton, { onClick: backButton.onClick, label: backButton.label, className: "hidden content-md:inline-flex" }),
               image || hasSubtitleRow || loading ? /* @__PURE__ */ jsxs64("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
                 image && /* @__PURE__ */ jsx84(EntityImage, { src: image.src, alt: image.alt, fallbackText: image.alt || title }),
                 /* @__PURE__ */ jsxs64("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [
@@ -10191,7 +10240,7 @@ function TitleBlock({
                       ref: subtitleRef,
                       className: "truncate text-ods-text-secondary text-h6",
                       "aria-hidden": !loading && !subtitle ? true : void 0,
-                      children: loading ? /* @__PURE__ */ jsx84(TitleTextSkeleton, { widthClass: "w-28 md:w-36", heightClass: "h-2.5 md:h-3" }) : subtitle || "\xA0"
+                      children: loading ? /* @__PURE__ */ jsx84(TitleTextSkeleton, { widthClass: "w-28 content-md:w-36", heightClass: "h-2.5 content-md:h-3" }) : subtitle || "\xA0"
                     }
                   ) })
                 ] })
@@ -10275,7 +10324,7 @@ function PageLayout({
       {
         className: cn(
           "flex flex-1 flex-col gap-[var(--spacing-system-l)]",
-          needsBottomPadding && "pb-28 md:pb-0",
+          needsBottomPadding && "pb-28 content-md:pb-0",
           contentClassName
         ),
         children
@@ -10295,7 +10344,7 @@ function PageShell({ children, schemas, contentClassName }) {
 function ArticleDetailLayout({ children, schemas, contentClassName }) {
   return /* @__PURE__ */ jsxs66("main", { className: "bg-ods-bg", children: [
     schemas,
-    /* @__PURE__ */ jsx86("div", { className: cn("mx-auto max-w-[1280px] px-6 py-6 md:px-20 md:py-10", contentClassName), children })
+    /* @__PURE__ */ jsx86("div", { className: cn("mx-auto max-w-[1280px] px-6 py-6 content-md:px-20 content-md:py-10", contentClassName), children })
   ] });
 }
 
@@ -12250,9 +12299,9 @@ var BenefitCard = ({
   const baseStyles = "flex items-start justify-start relative";
   const variantStyles2 = {
     default: {
-      container: "gap-[var(--spacing-system-xsf)] bg-ods-bg p-[var(--spacing-system-xsf)] md:p-[var(--spacing-system-mf)]",
-      title: "font-body font-bold text-body-md md:text-body-lg text-ods-text-primary",
-      description: "font-body font-medium text-body-sm md:text-body-md text-ods-text-secondary"
+      container: "gap-[var(--spacing-system-xsf)] bg-ods-bg p-[var(--spacing-system-xsf)] content-md:p-[var(--spacing-system-mf)]",
+      title: "font-body font-bold text-body-md content-md:text-body-lg text-ods-text-primary",
+      description: "font-body font-medium text-body-sm content-md:text-body-md text-ods-text-secondary"
     },
     dark: {
       container: "gap-[var(--spacing-system-xsf)] bg-transparent p-0 shadow-[0px_48px_80px_0px_rgba(0,0,0,0.24)]",
@@ -12280,9 +12329,9 @@ function benefitCardBorderClass(index, totalItems, columns) {
     const isLastInRow = (index + 1) % 4 === 0;
     const isInLastRow = index >= totalItems - 4;
     return cn(
-      !isLastInRow && "border-ods-border md:border-r",
-      !isInLastRow && "border-b md:border-b lg:border-b-0",
-      index < 2 && "lg:border-b-0"
+      !isLastInRow && "border-ods-border content-md:border-r",
+      !isInLastRow && "border-b content-md:border-b content-lg:border-b-0",
+      index < 2 && "content-lg:border-b-0"
     );
   } else if (columns === 3) {
     const isLastInMdRow = (index + 1) % 2 === 0;
@@ -12292,21 +12341,21 @@ function benefitCardBorderClass(index, totalItems, columns) {
     return cn(
       "border-ods-border",
       !isLastItem && "border-b",
-      isInLastMdRow && "md:border-b-0",
-      !isLastInMdRow && !isLastItem && "md:border-r",
-      isLastInMdRow && "md:border-r-0",
-      isInLastLgRow && "lg:border-b-0",
-      !isInLastMdRow && !isInLastLgRow && "lg:border-b",
-      !isLastInLgRow && !isLastItem && "lg:border-r",
-      isLastInLgRow && "lg:border-r-0"
+      isInLastMdRow && "content-md:border-b-0",
+      !isLastInMdRow && !isLastItem && "content-md:border-r",
+      isLastInMdRow && "content-md:border-r-0",
+      isInLastLgRow && "content-lg:border-b-0",
+      !isInLastMdRow && !isInLastLgRow && "content-lg:border-b",
+      !isLastInLgRow && !isLastItem && "content-lg:border-r",
+      isLastInLgRow && "content-lg:border-r-0"
     );
   } else {
-    return isLastItem ? "border-b-0" : "border-b md:border-b-0 md:border-r border-ods-border";
+    return isLastItem ? "border-b-0" : "border-b content-md:border-b-0 content-md:border-r border-ods-border";
   }
 }
 var BenefitCardGrid = ({ children, className = "", columns = 2 }) => {
   const childrenArray = React8.Children.toArray(children);
-  const gridClass = columns === 4 ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4" : columns === 3 ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "flex flex-col md:flex-row";
+  const gridClass = columns === 4 ? "grid grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4" : columns === 3 ? "grid grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-3" : "flex flex-col content-md:flex-row";
   return /* @__PURE__ */ jsx89(
     "div",
     {
@@ -12357,22 +12406,22 @@ function BrandAssociationGrid({
   className = "",
   cardClassName = "bg-ods-card border border-ods-border rounded-lg p-0 overflow-hidden"
 }) {
-  const gridCols = columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-3";
+  const gridCols = columns === 2 ? "grid-cols-1 content-md:grid-cols-2" : "grid-cols-1 content-md:grid-cols-3";
   const itemsPerRow = columns;
   const rows = Math.ceil(items.length / itemsPerRow);
   const getBorderClasses = (isLastRow, isLastInRow, globalIndex) => {
     let classes = "";
     if (!isLastInRow) {
-      classes += " md:border-r border-ods-border";
+      classes += " content-md:border-r border-ods-border";
     }
     const isLastItem = globalIndex === items.length - 1;
     if (!isLastItem) {
       classes += " border-b border-ods-border";
     }
     if (!isLastRow) {
-      classes += " md:border-b border-ods-border";
+      classes += " content-md:border-b border-ods-border";
     } else {
-      classes += " md:border-b-0";
+      classes += " content-md:border-b-0";
     }
     return classes;
   };
@@ -12647,17 +12696,21 @@ function DashboardInfoCard({
     const size = typeof progressSize === "number" ? { base: 24, md: progressSize } : progressSize ?? { base: 24, md: 56 };
     const { base, md, lg } = size;
     const rings = [
-      { key: "base", size: base, className: md !== void 0 ? "md:hidden" : lg !== void 0 ? "lg:hidden" : "" }
+      {
+        key: "base",
+        size: base,
+        className: md !== void 0 ? "content-md:hidden" : lg !== void 0 ? "content-lg:hidden" : ""
+      }
     ];
     if (md !== void 0) {
       rings.push({
         key: "md",
         size: md,
-        className: lg !== void 0 ? "hidden md:block lg:hidden" : "hidden md:block"
+        className: lg !== void 0 ? "hidden content-md:block content-lg:hidden" : "hidden content-md:block"
       });
     }
     if (lg !== void 0) {
-      rings.push({ key: "lg", size: lg, className: "hidden lg:block" });
+      rings.push({ key: "lg", size: lg, className: "hidden content-lg:block" });
     }
     return /* @__PURE__ */ jsx96(Fragment14, { children: rings.map((ring) => /* @__PURE__ */ jsx96(
       CircularProgress,
@@ -12671,14 +12724,14 @@ function DashboardInfoCard({
     )) });
   };
   const cardContent = /* @__PURE__ */ jsxs72(Fragment14, { children: [
-    icon && /* @__PURE__ */ jsx96("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-sm border border-ods-border bg-ods-bg p-[var(--spacing-system-xxs)] text-ods-text-primary md:size-14", children: /* @__PURE__ */ jsx96("span", { className: "flex size-4 items-center justify-center md:size-6 [&>*]:size-full", children: icon }) }),
+    icon && /* @__PURE__ */ jsx96("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-sm border border-ods-border bg-ods-bg p-[var(--spacing-system-xxs)] text-ods-text-primary content-md:size-14", children: /* @__PURE__ */ jsx96("span", { className: "flex size-4 items-center justify-center content-md:size-6 [&>*]:size-full", children: icon }) }),
     /* @__PURE__ */ jsxs72("div", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsxs72("div", { className: "flex items-center gap-[var(--spacing-system-xxs)]", children: [
         loading ? /* @__PURE__ */ jsx96("p", { className: "text-h5", children: /* @__PURE__ */ jsx96("span", { className: "block h-[1lh] w-20 animate-pulse rounded bg-ods-border" }) }) : titleSlot ?? (title !== void 0 && /* @__PURE__ */ jsx96("p", { className: "truncate text-ods-text-secondary text-h5", children: title })),
         titleTag
       ] }),
       /* @__PURE__ */ jsxs72("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ jsx96("p", { className: cn("truncate text-ods-text-primary text-h3 md:text-h2", valueClassName), children: loading ? /* @__PURE__ */ jsx96("span", { className: "block h-[1lh] w-24 animate-pulse rounded bg-ods-border" }) : formattedValue }),
+        /* @__PURE__ */ jsx96("p", { className: cn("truncate text-ods-text-primary text-h3 content-md:text-h2", valueClassName), children: loading ? /* @__PURE__ */ jsx96("span", { className: "block h-[1lh] w-24 animate-pulse rounded bg-ods-border" }) : formattedValue }),
         subValue && /* @__PURE__ */ jsx96("p", { className: "text-ods-text-secondary text-h6", children: subValue }),
         renderPercentage(),
         tooltip && /* @__PURE__ */ jsx96(FloatingTooltip, { content: tooltip, side: "top", children: /* @__PURE__ */ jsx96("span", { className: "cursor-help text-ods-text-secondary", children: /* @__PURE__ */ jsx96(QuestionCircleIcon, { size: 20 }) }) })
@@ -12687,8 +12740,8 @@ function DashboardInfoCard({
     ] }),
     renderProgress()
   ] });
-  const baseClassName = "bg-ods-card border border-ods-border rounded-md p-[var(--spacing-system-xsf)] md:p-[var(--spacing-system-m)] h-16 md:h-[104px] flex gap-[var(--spacing-system-s)] md:gap-[var(--spacing-system-m)] items-center transition-all";
-  const captionClassName = caption ? "h-auto md:h-auto" : void 0;
+  const baseClassName = "bg-ods-card border border-ods-border rounded-md p-[var(--spacing-system-xsf)] content-md:p-[var(--spacing-system-m)] h-16 content-md:h-[104px] flex gap-[var(--spacing-system-s)] content-md:gap-[var(--spacing-system-m)] items-center transition-all";
+  const captionClassName = caption ? "h-auto content-md:h-auto" : void 0;
   if (href) {
     return /* @__PURE__ */ jsx96(
       next_link_default,
@@ -12710,17 +12763,17 @@ function DashboardInfoCard({
 
 // src/components/ui/info-card-row.tsx
 import { jsx as jsx97, jsxs as jsxs73 } from "react/jsx-runtime";
-var CELL = "flex items-center gap-[var(--spacing-system-s)] min-w-0 p-[var(--spacing-system-xsf)] md:p-[var(--spacing-system-m)] min-h-[60px] md:min-h-[76px]";
+var CELL = "flex items-center gap-[var(--spacing-system-s)] min-w-0 p-[var(--spacing-system-xsf)] content-md:p-[var(--spacing-system-m)] min-h-[60px] content-md:min-h-[76px]";
 function StatCell({ section, className }) {
   return /* @__PURE__ */ jsxs73("div", { className: cn(CELL, "flex-1", className), children: [
     /* @__PURE__ */ jsxs73("div", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsx97("p", { className: "truncate uppercase text-ods-text-secondary text-h5", children: section.title }),
       /* @__PURE__ */ jsxs73("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-s)]", children: [
         /* @__PURE__ */ jsx97("p", { className: "min-w-0 flex-1 truncate text-ods-text-primary text-h3", children: section.caption }),
-        section.icon && /* @__PURE__ */ jsx97("div", { className: "flex size-6 shrink-0 items-center justify-center md:hidden", children: section.icon })
+        section.icon && /* @__PURE__ */ jsx97("div", { className: "flex size-6 shrink-0 items-center justify-center content-md:hidden", children: section.icon })
       ] })
     ] }),
-    section.icon && /* @__PURE__ */ jsx97("div", { className: "hidden size-6 shrink-0 items-center justify-center md:flex", children: section.icon })
+    section.icon && /* @__PURE__ */ jsx97("div", { className: "hidden size-6 shrink-0 items-center justify-center content-md:flex", children: section.icon })
   ] });
 }
 function InfoCardRow({ lead, stats, className }) {
@@ -12728,18 +12781,24 @@ function InfoCardRow({ lead, stats, className }) {
     "div",
     {
       className: cn(
-        "flex shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card md:flex-row",
+        "flex shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card content-md:flex-row",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs73("div", { className: cn(CELL, "border-b border-ods-border md:flex-1 md:border-b-0 md:border-r"), children: [
-          lead.icon && /* @__PURE__ */ jsx97("div", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-ods-border [&>*]:size-full [&_img]:object-cover", children: lead.icon }),
-          /* @__PURE__ */ jsxs73("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [
-            /* @__PURE__ */ jsx97("p", { className: "truncate text-ods-text-primary text-h3", children: lead.title }),
-            /* @__PURE__ */ jsx97("p", { className: "truncate text-ods-text-secondary text-h6", children: lead.caption })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs73("div", { className: "flex md:flex-1", children: [
+        /* @__PURE__ */ jsxs73(
+          "div",
+          {
+            className: cn(CELL, "border-b border-ods-border content-md:flex-1 content-md:border-b-0 content-md:border-r"),
+            children: [
+              lead.icon && /* @__PURE__ */ jsx97("div", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-ods-border [&>*]:size-full [&_img]:object-cover", children: lead.icon }),
+              /* @__PURE__ */ jsxs73("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [
+                /* @__PURE__ */ jsx97("p", { className: "truncate text-ods-text-primary text-h3", children: lead.title }),
+                /* @__PURE__ */ jsx97("p", { className: "truncate text-ods-text-secondary text-h6", children: lead.caption })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs73("div", { className: "flex content-md:flex-1", children: [
           /* @__PURE__ */ jsx97(StatCell, { section: stats[0], className: "border-r border-ods-border" }),
           /* @__PURE__ */ jsx97(StatCell, { section: stats[1] })
         ] })
@@ -12898,7 +12957,7 @@ function DeviceCardCompact({ deviceName, organization, className, ...props }) {
 // src/components/ui/data-attribution.tsx
 import { jsx as jsx101, jsxs as jsxs77 } from "react/jsx-runtime";
 function DataAttribution({ icon, source, lastUpdated }) {
-  return /* @__PURE__ */ jsxs77("div", { className: "flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h6 sm:flex-row sm:items-center sm:gap-[var(--spacing-system-sf)]", children: [
+  return /* @__PURE__ */ jsxs77("div", { className: "flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h6 content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]", children: [
     /* @__PURE__ */ jsxs77("div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
       icon,
       /* @__PURE__ */ jsxs77("span", { children: [
@@ -12906,7 +12965,7 @@ function DataAttribution({ icon, source, lastUpdated }) {
         source
       ] })
     ] }),
-    /* @__PURE__ */ jsx101("span", { className: "hidden text-ods-text-secondary sm:inline", "aria-hidden": "true", children: "\xB7" }),
+    /* @__PURE__ */ jsx101("span", { className: "hidden text-ods-text-secondary content-sm:inline", "aria-hidden": "true", children: "\xB7" }),
     /* @__PURE__ */ jsxs77("span", { className: "text-ods-text-secondary", children: [
       "Last updated: ",
       lastUpdated ? formatDate(lastUpdated) : "Never"
@@ -12991,19 +13050,19 @@ function ComplianceLogo({
 // src/components/ui/feature-card.tsx
 import { jsx as jsx103, jsxs as jsxs79 } from "react/jsx-runtime";
 var GRID_COLUMNS = {
-  2: "grid-cols-1 md:grid-cols-2",
-  3: "grid-cols-1 md:grid-cols-3",
-  4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+  2: "grid-cols-1 content-md:grid-cols-2",
+  3: "grid-cols-1 content-md:grid-cols-3",
+  4: "grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4"
 };
 function fourColumnBorders(index, count) {
   const classes = ["border-ods-border"];
   if (index < count - 1) classes.push("border-b");
   const mdRows = Math.ceil(count / 2);
   const lgRows = Math.ceil(count / 4);
-  classes.push(index % 2 === 0 && index < count - 1 ? "md:border-r" : "md:border-r-0");
-  classes.push(Math.floor(index / 2) < mdRows - 1 ? "md:border-b" : "md:border-b-0");
-  classes.push(index % 4 !== 3 && index < count - 1 ? "lg:border-r" : "lg:border-r-0");
-  classes.push(Math.floor(index / 4) < lgRows - 1 ? "lg:border-b" : "lg:border-b-0");
+  classes.push(index % 2 === 0 && index < count - 1 ? "content-md:border-r" : "content-md:border-r-0");
+  classes.push(Math.floor(index / 2) < mdRows - 1 ? "content-md:border-b" : "content-md:border-b-0");
+  classes.push(index % 4 !== 3 && index < count - 1 ? "content-lg:border-r" : "content-lg:border-r-0");
+  classes.push(Math.floor(index / 4) < lgRows - 1 ? "content-lg:border-b" : "content-lg:border-b-0");
   return ` ${classes.join(" ")}`;
 }
 function LineBar({ width }) {
@@ -13033,16 +13092,16 @@ function FeatureCardGrid({
     if (columns === 4) return fourColumnBorders(globalIndex, items.length);
     let classes = "";
     if (!isLastInRow) {
-      classes += " md:border-r border-ods-border";
+      classes += " content-md:border-r border-ods-border";
     }
     const isLastItem = globalIndex === items.length - 1;
     if (!isLastItem) {
       classes += " border-b border-ods-border";
     }
     if (!isLastRow) {
-      classes += " md:border-b border-ods-border";
+      classes += " content-md:border-b border-ods-border";
     } else {
-      classes += " md:border-b-0";
+      classes += " content-md:border-b-0";
     }
     return classes;
   };
@@ -13238,11 +13297,11 @@ import { jsx as jsx106, jsxs as jsxs82 } from "react/jsx-runtime";
 function HighlightCard({ item, className = "" }) {
   const mobileWidth = item.category.length * 12;
   const desktopWidth = item.category.length * 14;
-  return /* @__PURE__ */ jsx106("div", { className: `relative bg-ods-bg p-6 md:p-10 ${className}`, children: /* @__PURE__ */ jsxs82("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsx106("div", { className: `relative bg-ods-bg p-6 content-md:p-10 ${className}`, children: /* @__PURE__ */ jsxs82("div", { className: "relative", children: [
     /* @__PURE__ */ jsx106(
       "div",
       {
-        className: "absolute left-[80px] top-0 h-8 rounded-md md:hidden",
+        className: "absolute left-[80px] top-0 h-8 rounded-md content-md:hidden",
         style: {
           backgroundColor: item.highlightBg,
           width: `${mobileWidth}px`
@@ -13252,7 +13311,7 @@ function HighlightCard({ item, className = "" }) {
     /* @__PURE__ */ jsx106(
       "div",
       {
-        className: "absolute left-[95px] top-0 hidden h-10 rounded-md md:block",
+        className: "absolute left-[95px] top-0 hidden h-10 rounded-md content-md:block",
         style: {
           backgroundColor: item.highlightBg,
           width: `${desktopWidth}px`
@@ -13273,22 +13332,22 @@ function HighlightCardGrid({
   className = "",
   cardClassName = "bg-ods-card border border-ods-border rounded-lg p-0 overflow-hidden"
 }) {
-  const gridCols = columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-3";
+  const gridCols = columns === 2 ? "grid-cols-1 content-md:grid-cols-2" : "grid-cols-1 content-md:grid-cols-3";
   const itemsPerRow = columns;
   const rows = Math.ceil(items.length / itemsPerRow);
   const getBorderClasses = (isLastRow, isLastInRow, globalIndex) => {
     let classes = "";
     if (!isLastInRow) {
-      classes += " md:border-r border-ods-border";
+      classes += " content-md:border-r border-ods-border";
     }
     const isLastItem = globalIndex === items.length - 1;
     if (!isLastItem) {
       classes += " border-b border-ods-border";
     }
     if (!isLastRow) {
-      classes += " md:border-b border-ods-border";
+      classes += " content-md:border-b border-ods-border";
     } else {
-      classes += " md:border-b-0";
+      classes += " content-md:border-b-0";
     }
     return classes;
   };
@@ -13552,7 +13611,7 @@ function OrganizationCard({
           ] })
         ] }),
         organization.description && /* @__PURE__ */ jsx110("div", { className: "h-12 w-full overflow-hidden", children: /* @__PURE__ */ jsx110("p", { className: "line-clamp-2 text-ods-text-primary text-h4", title: organization.description, children: organization.description }) }),
-        customFooter ? customFooter : footerStats && footerStats.length > 0 ? /* @__PURE__ */ jsx110("div", { className: "flex w-full min-w-0 items-center justify-between gap-2", children: /* @__PURE__ */ jsx110("div", { className: "flex min-w-0 flex-shrink items-center gap-3 md:gap-4", children: footerStats.map((stat, index) => /* @__PURE__ */ jsxs84("div", { className: "flex flex-shrink-0 items-center gap-1", children: [
+        customFooter ? customFooter : footerStats && footerStats.length > 0 ? /* @__PURE__ */ jsx110("div", { className: "flex w-full min-w-0 items-center justify-between gap-2", children: /* @__PURE__ */ jsx110("div", { className: "flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4", children: footerStats.map((stat, index) => /* @__PURE__ */ jsxs84("div", { className: "flex flex-shrink-0 items-center gap-1", children: [
           stat.icon,
           /* @__PURE__ */ jsx110("span", { className: "text-ods-text-primary text-h6", children: typeof stat.value === "number" ? stat.value.toLocaleString() : stat.value }),
           stat.label && /* @__PURE__ */ jsx110("span", { className: "text-ods-text-secondary text-h6", children: stat.label })
@@ -13612,12 +13671,12 @@ function ServiceCardRowItem({ row }) {
     window.open(row.href, "_blank", "noopener,noreferrer");
   };
   return /* @__PURE__ */ jsxs85("div", { className: "flex min-w-0 items-center gap-3", children: [
-    row.label && /* @__PURE__ */ jsx111("div", { className: "w-20 shrink-0 text-ods-text-primary text-h6 md:w-24", children: row.label }),
+    row.label && /* @__PURE__ */ jsx111("div", { className: "w-20 shrink-0 text-ods-text-primary text-h6 content-md:w-24", children: row.label }),
     /* @__PURE__ */ jsxs85(
       "div",
       {
         className: cn(
-          "flex h-12 min-w-0 flex-1 items-center justify-between rounded-md border border-ods-border bg-ods-bg px-3 md:px-4",
+          "flex h-12 min-w-0 flex-1 items-center justify-between rounded-md border border-ods-border bg-ods-bg px-3 content-md:px-4",
           row.monospace ? "font-mono" : ""
         ),
         children: [
@@ -13858,7 +13917,7 @@ function ContentLoader({
   const renderCardSkeleton = () => /* @__PURE__ */ jsxs89("div", { className: "animate-pulse", children: [
     showTitle && /* @__PURE__ */ jsx116("div", { className: "mb-6 h-8 w-64 rounded bg-ods-skeleton" }),
     /* @__PURE__ */ jsxs89("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6", children: [
-      /* @__PURE__ */ jsx116("div", { className: "mb-6 grid grid-cols-1 gap-6 md:grid-cols-4", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs89("div", { children: [
+      /* @__PURE__ */ jsx116("div", { className: "mb-6 grid grid-cols-1 gap-6 content-md:grid-cols-4", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs89("div", { children: [
         /* @__PURE__ */ jsx116("div", { className: "mb-2 h-4 w-20 rounded bg-ods-skeleton" }),
         /* @__PURE__ */ jsx116("div", { className: "h-6 w-32 rounded bg-ods-skeleton" })
       ] }, i)) }),
@@ -13874,8 +13933,8 @@ function ContentLoader({
   ] });
   const renderDetailSkeleton = () => /* @__PURE__ */ jsxs89("div", { className: "animate-pulse", children: [
     showTitle && /* @__PURE__ */ jsx116("div", { className: "mb-6 h-8 w-64 rounded bg-ods-skeleton" }),
-    /* @__PURE__ */ jsx116("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6", children: /* @__PURE__ */ jsxs89("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-3", children: [
-      /* @__PURE__ */ jsxs89("div", { className: "lg:col-span-2", children: [
+    /* @__PURE__ */ jsx116("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6", children: /* @__PURE__ */ jsxs89("div", { className: "grid grid-cols-1 gap-6 content-lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsxs89("div", { className: "content-lg:col-span-2", children: [
         /* @__PURE__ */ jsx116("div", { className: "mb-4 h-64 rounded bg-ods-skeleton" }),
         /* @__PURE__ */ jsx116("div", { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx116("div", { className: "h-4 rounded bg-ods-skeleton" }, i)) })
       ] }),
@@ -13981,7 +14040,7 @@ function CursorPagination({
           className: cn(compact && "h-8 px-3"),
           leftIcon: /* @__PURE__ */ jsx117(ResetIcon, { className: "h-4 w-4" }),
           "aria-label": "Go to first page",
-          children: /* @__PURE__ */ jsx117("span", { className: compact ? "hidden md:inline" : "", children: resetButtonLabel })
+          children: /* @__PURE__ */ jsx117("span", { className: compact ? "hidden content-md:inline" : "", children: resetButtonLabel })
         }
       ) : hasPreviousPage !== void 0 && onPrevious && /* @__PURE__ */ jsx117(
         Button,
@@ -13993,7 +14052,7 @@ function CursorPagination({
           className: cn(compact && "h-8 px-3"),
           leftIcon: /* @__PURE__ */ jsx117(ChevronLeft2, { className: "h-4 w-4" }),
           "aria-label": "Go to previous page",
-          children: /* @__PURE__ */ jsx117("span", { className: compact ? "hidden md:inline" : "", children: "Previous" })
+          children: /* @__PURE__ */ jsx117("span", { className: compact ? "hidden content-md:inline" : "", children: "Previous" })
         }
       ),
       /* @__PURE__ */ jsx117(
@@ -14006,7 +14065,7 @@ function CursorPagination({
           className: cn(compact && "h-8 px-3"),
           rightIcon: /* @__PURE__ */ jsx117(ChevronRight4, { className: "h-4 w-4" }),
           "aria-label": "Go to next page",
-          children: /* @__PURE__ */ jsx117("span", { className: compact ? "hidden md:inline" : "", children: "Next" })
+          children: /* @__PURE__ */ jsx117("span", { className: compact ? "hidden content-md:inline" : "", children: "Next" })
         }
       )
     ] })
@@ -14134,29 +14193,29 @@ function DataTableRoot({ table, children, className }) {
 var BREAKPOINT_ORDER = ["md", "lg", "xl", "2xl"];
 function getHideClasses(hideAt) {
   if (!hideAt) return "";
-  const breakpoints = Array.isArray(hideAt) ? hideAt : [hideAt];
-  if (breakpoints.length === 1) {
-    return `hidden ${breakpoints[0]}:flex`;
+  const breakpoints2 = Array.isArray(hideAt) ? hideAt : [hideAt];
+  if (breakpoints2.length === 1) {
+    return `hidden content-${breakpoints2[0]}:flex`;
   }
-  const maxIdx = Math.max(...breakpoints.map((bp) => BREAKPOINT_ORDER.indexOf(bp)));
-  const hideClasses = breakpoints.map((bp) => `${bp}:hidden`).join(" ");
+  const maxIdx = Math.max(...breakpoints2.map((bp) => BREAKPOINT_ORDER.indexOf(bp)));
+  const hideClasses = breakpoints2.map((bp) => `content-${bp}:hidden`).join(" ");
   const showBreakpoint = BREAKPOINT_ORDER[maxIdx + 1];
-  return showBreakpoint ? `${hideClasses} ${showBreakpoint}:flex` : hideClasses;
+  return showBreakpoint ? `${hideClasses} content-${showBreakpoint}:flex` : hideClasses;
 }
 function getHideAtVisibility(hideAt) {
   const steps = BREAKPOINT_ORDER.length + 1;
   if (!hideAt) return Array.from({ length: steps }, () => true);
-  const breakpoints = Array.isArray(hideAt) ? hideAt : [hideAt];
-  if (breakpoints.length === 1) {
-    const showFrom = BREAKPOINT_ORDER.indexOf(breakpoints[0]) + 1;
+  const breakpoints2 = Array.isArray(hideAt) ? hideAt : [hideAt];
+  if (breakpoints2.length === 1) {
+    const showFrom = BREAKPOINT_ORDER.indexOf(breakpoints2[0]) + 1;
     return Array.from({ length: steps }, (_, step) => step >= showFrom);
   }
-  const maxIdx = Math.max(...breakpoints.map((bp) => BREAKPOINT_ORDER.indexOf(bp)));
+  const maxIdx = Math.max(...breakpoints2.map((bp) => BREAKPOINT_ORDER.indexOf(bp)));
   const showBreakpoint = BREAKPOINT_ORDER[maxIdx + 1];
   const visible = [true];
   for (const bp of BREAKPOINT_ORDER) {
     let state = visible[visible.length - 1];
-    if (breakpoints.includes(bp)) state = false;
+    if (breakpoints2.includes(bp)) state = false;
     if (bp === showBreakpoint) state = true;
     visible.push(state);
   }
@@ -14181,7 +14240,7 @@ var multiSelectFilterFn = (row, columnId, filterValue) => {
 
 // src/components/ui/data-table/data-table-skeleton.tsx
 import { Fragment as Fragment19, jsx as jsx119, jsxs as jsxs91 } from "react/jsx-runtime";
-var ROW_HEIGHT_DESKTOP = "h-[66px] md:h-[78px]";
+var ROW_HEIGHT_DESKTOP = "h-[66px] content-md:h-[78px]";
 var ROW_HEIGHT_MOBILE = "h-[66px]";
 var ROW_SHELL_CLASSES = "items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]";
 var ROW_STACK_CLASSES = "flex w-full flex-col gap-[var(--spacing-system-xsf)]";
@@ -14203,7 +14262,7 @@ function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeightClassN
           "div",
           {
             className: cn(
-              "hidden py-0 md:flex",
+              "hidden py-0 content-md:flex",
               ROW_SHELL_CLASSES,
               rowHeightClassName ? "h-full" : ROW_HEIGHT_DESKTOP,
               rowClassName
@@ -14237,7 +14296,7 @@ function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeightClassN
           "div",
           {
             className: cn(
-              "flex justify-start py-0 md:hidden",
+              "flex justify-start py-0 content-md:hidden",
               ROW_SHELL_CLASSES,
               rowHeightClassName ? "h-full" : ROW_HEIGHT_MOBILE,
               rowClassName
@@ -14294,7 +14353,7 @@ function PlaceholderRows({
           "div",
           {
             className: cn(
-              "hidden py-0 md:flex",
+              "hidden py-0 content-md:flex",
               ROW_SHELL_CLASSES,
               innerHeightClassName ?? (rowHeightClassName ? "h-full" : ROW_HEIGHT_DESKTOP)
             )
@@ -14304,7 +14363,7 @@ function PlaceholderRows({
           "div",
           {
             className: cn(
-              "flex justify-start py-0 md:hidden",
+              "flex justify-start py-0 content-md:hidden",
               ROW_SHELL_CLASSES,
               innerHeightClassName ?? (rowHeightClassName ? "h-full" : ROW_HEIGHT_MOBILE)
             )
@@ -14396,17 +14455,17 @@ function getHideClasses2(hideAt) {
   if (!hideAt) {
     return "";
   }
-  const breakpoints = Array.isArray(hideAt) ? hideAt : [hideAt];
+  const breakpoints2 = Array.isArray(hideAt) ? hideAt : [hideAt];
   const breakpointOrder = ["md", "lg", "xl", "2xl"];
-  const maxBreakpointIndex = Math.max(...breakpoints.map((bp) => breakpointOrder.indexOf(bp)));
-  if (breakpoints.length === 1) {
-    return `hidden ${breakpoints[0]}:flex`;
+  const maxBreakpointIndex = Math.max(...breakpoints2.map((bp) => breakpointOrder.indexOf(bp)));
+  if (breakpoints2.length === 1) {
+    return `hidden content-${breakpoints2[0]}:flex`;
   }
-  const hideClasses = breakpoints.map((bp) => `${bp}:hidden`).join(" ");
+  const hideClasses = breakpoints2.map((bp) => `content-${bp}:hidden`).join(" ");
   const nextBreakpointIndex = maxBreakpointIndex + 1;
   const showBreakpoint = breakpointOrder[nextBreakpointIndex];
   if (showBreakpoint) {
-    return `${hideClasses} ${showBreakpoint}:flex`;
+    return `${hideClasses} content-${showBreakpoint}:flex`;
   }
   return hideClasses;
 }
@@ -14458,12 +14517,12 @@ function TableHeader({
     }
     return sortDirection === "asc" ? /* @__PURE__ */ jsx122(Arrow01UpIcon, { className: "h-4 w-4 text-ods-accent" }) : /* @__PURE__ */ jsx122(Arrow01DownIcon, { className: "h-4 w-4 text-ods-accent" });
   };
-  const isLgUp = useLgUp() ?? false;
+  const isLgUp = useContentLgUp() ?? false;
   return /* @__PURE__ */ jsxs93(
     "div",
     {
       className: cn(
-        "relative hidden h-11 items-center gap-4 px-4 py-3 md:flex",
+        "relative hidden h-11 items-center gap-4 px-4 py-3 content-md:flex",
         stickyHeader && `sticky z-10 bg-ods-bg ${stickyHeaderOffset || "top-0"}`,
         className
       ),
@@ -14576,7 +14635,7 @@ function TableCell({ children, align = "left", className, width }) {
 
 // src/components/ui/table/table-skeleton.tsx
 import { Fragment as Fragment21, jsx as jsx124, jsxs as jsxs94 } from "react/jsx-runtime";
-var ROW_HEIGHT_DESKTOP2 = "h-[66px] md:h-[78px]";
+var ROW_HEIGHT_DESKTOP2 = "h-[66px] content-md:h-[78px]";
 var COMPACT_ROW_MIN_HEIGHT = "min-h-[56px]";
 var ROW_HEIGHT_MOBILE2 = "h-[66px]";
 function TableCardSkeleton({
@@ -14601,7 +14660,7 @@ function TableCardSkeleton({
           "div",
           {
             className: cn(
-              "hidden items-center gap-4 px-4 md:flex",
+              "hidden items-center gap-4 px-4 content-md:flex",
               compact ? cn("py-2", COMPACT_ROW_MIN_HEIGHT) : cn("py-0", ROW_HEIGHT_DESKTOP2),
               rowClassName
             ),
@@ -14622,7 +14681,7 @@ function TableCardSkeleton({
           "div",
           {
             className: cn(
-              "flex items-center justify-start gap-3 px-3 md:hidden",
+              "flex items-center justify-start gap-3 px-3 content-md:hidden",
               // Mirror the real row on mobile too: a compact row is
               // content-sized with a floor, a normal row a fixed height.
               // Hard-wiring ROW_HEIGHT_MOBILE made every COMPACT table jump
@@ -15335,7 +15394,7 @@ function QueryReportTable({
         showExport && data.length > 0 && /* @__PURE__ */ jsx132(
           Button,
           {
-            className: "bg-ods-card max-md:hidden",
+            className: "bg-ods-card content-max-md:hidden",
             variant: "outline",
             leftIcon: /* @__PURE__ */ jsx132(Download02Icon, { size: 18, className: "text-ods-text-secondary" }),
             onClick: handleExport,
@@ -15764,7 +15823,7 @@ function DataTableHeader({
     "div",
     {
       className: cn(
-        "hidden md:flex md:flex-col",
+        "hidden content-md:flex content-md:flex-col",
         stickyHeader && `sticky z-10 bg-ods-bg ${stickyHeaderOffset ?? "top-0"}`,
         className
       ),
@@ -15782,7 +15841,7 @@ function DataTableHeader({
                 // the absolute placement. Safe as a `max-lg:` override: nothing
                 // else in this string sets margin or height, so it competes only
                 // with unprefixed defaults, never with a `md:`/`lg:` class.
-                "max-lg:ml-auto max-lg:h-12 lg:absolute lg:inset-y-0 lg:right-[var(--spacing-system-mf)]"
+                "content-max-lg:ml-auto content-max-lg:h-12 content-lg:absolute content-lg:inset-y-0 content-lg:right-[var(--spacing-system-mf)]"
               )
             ),
             children: rightSlot
@@ -15796,16 +15855,16 @@ function keepsCellOnTablet(meta) {
   return Boolean(meta?.filter) || meta?.sortable === true || meta?.alwaysShowHeader === true;
 }
 var SHOW_FROM = {
-  md: "md:flex",
-  lg: "lg:flex",
-  xl: "xl:flex",
-  "2xl": "2xl:flex"
+  md: "content-md:flex",
+  lg: "content-lg:flex",
+  xl: "content-xl:flex",
+  "2xl": "content-2xl:flex"
 };
 var HIDE_FROM = {
-  md: "md:hidden",
-  lg: "lg:hidden",
-  xl: "xl:hidden",
-  "2xl": "2xl:hidden"
+  md: "content-md:hidden",
+  lg: "content-lg:hidden",
+  xl: "content-xl:hidden",
+  "2xl": "content-2xl:hidden"
 };
 var LG_STEP = BREAKPOINT_ORDER.indexOf("lg") + 1;
 function getCellVisibilityClasses(keepOnTablet, hideAt) {
@@ -15862,7 +15921,7 @@ function HeaderCell({ header, sort, onSortChange }) {
         //
         // `[&&]` doubles the class in the selector (`.cls.cls`, specificity 0-2-0),
         // and it is load-bearing: consumers routinely write a RESPONSIVE width
-        // (`w-[80px] md:w-1/5` is the common shape), and between md and lg that
+        // (`w-[80px] content-md:w-1/5` is the common shape), and between md and lg that
         // `md:` rule and this `max-lg:` one both match. At equal specificity source
         // order decides, and Tailwind emits the `max-lg` block BEFORE the `md` one
         // — the same ordering documented for visibility above — so the tablet would
@@ -15873,7 +15932,7 @@ function HeaderCell({ header, sort, onSortChange }) {
         // consumer that genuinely needs a tablet width can still take it back with a
         // more specific rule — `!important` could only be answered with another one.
         meta?.width || "min-w-0 flex-1",
-        keepOnTablet && "max-lg:[&&]:w-auto max-lg:[&&]:flex-none max-lg:[&&]:basis-auto",
+        keepOnTablet && "content-max-lg:[&&]:w-auto content-max-lg:[&&]:flex-none content-max-lg:[&&]:basis-auto",
         meta?.headerClassName
       ),
       children: filterTrigger ? (
@@ -15893,7 +15952,7 @@ function HeaderCell({ header, sort, onSortChange }) {
             "flex h-12 w-full select-none items-center gap-[var(--spacing-system-xsf)] rounded-sm transition-colors duration-200",
             // Same "always, neutralized below lg" shape as the width above.
             alignJustify(align),
-            keepOnTablet && "max-lg:justify-start",
+            keepOnTablet && "content-max-lg:justify-start",
             canSort && "group cursor-pointer"
           ),
           onClick: canSort ? () => onSortChange?.(column.id) : void 0,
@@ -16230,7 +16289,7 @@ import {
 import { jsx as jsx142, jsxs as jsxs109 } from "react/jsx-runtime";
 var containerStyles = cn(
   // Layout & spacing — matches lib Input component
-  "flex h-11 cursor-text items-center gap-2 rounded-[6px] border px-3 md:h-12",
+  "flex h-11 cursor-text items-center gap-2 rounded-[6px] border px-3 content-md:h-12",
   "has-[:focus-visible]:outline-none",
   "group",
   "transition-colors duration-200",
@@ -16491,7 +16550,7 @@ function SearchInput({
             setIsOpen(true);
           },
           children: [
-            /* @__PURE__ */ jsx142("span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 group-has-[:focus]:text-ods-accent [&_svg]:size-4 md:[&_svg]:size-6", children: startAdornment !== void 0 ? startAdornment : /* @__PURE__ */ jsx142(SearchIcon, {}) }),
+            /* @__PURE__ */ jsx142("span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 group-has-[:focus]:text-ods-accent [&_svg]:size-4 content-md:[&_svg]:size-6", children: startAdornment !== void 0 ? startAdornment : /* @__PURE__ */ jsx142(SearchIcon, {}) }),
             /* @__PURE__ */ jsxs109("div", { ref: middleRef, className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [
               visibleChips.map((chip) => /* @__PURE__ */ jsx142(
                 Tag,
@@ -16801,7 +16860,7 @@ function TagSearchInput({
       "div",
       {
         className: cn(
-          "flex h-11 cursor-text items-center rounded-[6px] border md:h-12",
+          "flex h-11 cursor-text items-center rounded-[6px] border content-md:h-12",
           "transition-colors duration-200",
           "border-ods-border bg-ods-card",
           "has-[:focus]:border-ods-accent",
@@ -16820,7 +16879,7 @@ function TagSearchInput({
           if (!disabled) inputRef.current?.focus();
         },
         children: [
-          /* @__PURE__ */ jsx144("div", { className: "flex shrink-0 items-center pl-3", children: /* @__PURE__ */ jsx144(SearchIcon, { className: "size-4 text-ods-text-secondary md:size-6" }) }),
+          /* @__PURE__ */ jsx144("div", { className: "flex shrink-0 items-center pl-3", children: /* @__PURE__ */ jsx144(SearchIcon, { className: "size-4 text-ods-text-secondary content-md:size-6" }) }),
           /* @__PURE__ */ jsxs111("div", { ref: middleRef, className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2", children: [
             visibleTags.map((tag) => /* @__PURE__ */ jsx144(
               Tag,
@@ -16877,7 +16936,7 @@ function TagSearchInput({
               onClick: handleClearAll,
               className: "flex shrink-0 cursor-pointer items-center justify-center pr-3 transition-opacity hover:opacity-70",
               "aria-label": "Clear all",
-              children: /* @__PURE__ */ jsx144(XmarkCircleIcon, { className: "size-4 text-ods-text-secondary md:size-6" })
+              children: /* @__PURE__ */ jsx144(XmarkCircleIcon, { className: "size-4 text-ods-text-secondary content-md:size-6" })
             }
           )
         ]
@@ -18086,7 +18145,7 @@ function TicketStatusConfigRow({
     {
       className: cn(
         // Transparent background — only the border outlines the row.
-        "flex w-full items-start gap-3 rounded-md border border-ods-border md:gap-[var(--spacing-system-m)]",
+        "flex w-full items-start gap-3 rounded-md border border-ods-border content-md:gap-[var(--spacing-system-m)]",
         "p-[var(--spacing-system-m)]",
         // The dragged row travels over its siblings, so it needs an opaque back.
         isDragging && "bg-ods-bg opacity-70 shadow-lg"
@@ -18096,7 +18155,7 @@ function TicketStatusConfigRow({
           "div",
           {
             className: cn(
-              "flex h-11 w-8 shrink-0 items-center justify-center text-ods-text-secondary md:h-12",
+              "flex h-11 w-8 shrink-0 items-center justify-center text-ods-text-secondary content-md:h-12",
               fieldRowOffset
             ),
             children: isSystem ? /* @__PURE__ */ jsx150(DraggerIcon, { size: 24, "aria-hidden": true, className: "opacity-40" }) : /* @__PURE__ */ jsx150(
@@ -18115,13 +18174,13 @@ function TicketStatusConfigRow({
           "div",
           {
             className: cn(
-              "min-w-0 flex-1 items-start gap-x-3 gap-y-[var(--spacing-system-m)] md:gap-x-[var(--spacing-system-m)]",
+              "min-w-0 flex-1 items-start gap-x-3 gap-y-[var(--spacing-system-m)] content-md:gap-x-[var(--spacing-system-m)]",
               isSystem ? "flex flex-wrap" : (
                 // Mobile custom rows are a strict two-column grid, per the mock:
                 // fields (name / color / hex, all one width) on the left, the
                 // controls and the chip stacked in the right column. From md up
                 // the same children flow as a wrapping flex row.
-                "grid grid-cols-[minmax(0,1fr)_auto] md:flex md:flex-wrap"
+                "grid grid-cols-[minmax(0,1fr)_auto] content-md:flex content-md:flex-wrap"
               )
             ),
             children: [
@@ -18139,17 +18198,17 @@ function TicketStatusConfigRow({
                   }
                 )
               ] }),
-              showColorPicker ? /* @__PURE__ */ jsxs116("div", { className: "order-3 flex min-w-0 grow basis-full flex-col gap-[var(--spacing-system-xxs)] md:order-2 md:basis-0", children: [
+              showColorPicker ? /* @__PURE__ */ jsxs116("div", { className: "order-3 flex min-w-0 grow basis-full flex-col gap-[var(--spacing-system-xxs)] content-md:order-2 content-md:basis-0", children: [
                 /* @__PURE__ */ jsx150(Label, { variant: "large", children: "Color" }),
                 /* @__PURE__ */ jsx150(ColorPresetSelect, { value: color, presetKey, onChange: onColorChange }),
                 isCustomColor && /* @__PURE__ */ jsx150("div", { className: "mt-[var(--spacing-system-xxs)] flex min-w-0", children: /* @__PURE__ */ jsx150(ColorPickerInput, { value: color, onChange: (next) => onColorChange({ color: next, preset: void 0 }) }) })
-              ] }) : /* @__PURE__ */ jsx150("div", { "aria-hidden": true, className: "hidden min-w-0 grow basis-0 lg:order-2 lg:block" }),
-              /* @__PURE__ */ jsx150("div", { "aria-hidden": true, className: "hidden min-w-0 grow basis-0 lg:order-3 lg:block" }),
+              ] }) : /* @__PURE__ */ jsx150("div", { "aria-hidden": true, className: "hidden min-w-0 grow basis-0 content-lg:order-2 content-lg:block" }),
+              /* @__PURE__ */ jsx150("div", { "aria-hidden": true, className: "hidden min-w-0 grow basis-0 content-lg:order-3 content-lg:block" }),
               isSystem ? /* @__PURE__ */ jsx150(
                 "div",
                 {
                   className: cn(
-                    "order-2 flex h-11 min-w-0 grow basis-0 items-center justify-end md:h-12 lg:order-4",
+                    "order-2 flex h-11 min-w-0 grow basis-0 items-center justify-end content-md:h-12 content-lg:order-4",
                     fieldRowOffset
                   ),
                   children: chip
@@ -18159,26 +18218,26 @@ function TicketStatusConfigRow({
                   "div",
                   {
                     className: cn(
-                      "hidden h-12 min-w-0 grow basis-0 items-center justify-end lg:order-4 lg:flex",
+                      "hidden h-12 min-w-0 grow basis-0 items-center justify-end content-lg:order-4 content-lg:flex",
                       fieldRowOffset
                     ),
                     children: chip
                   }
                 ),
-                /* @__PURE__ */ jsx150("div", { className: "hidden min-w-0 basis-full items-center justify-end md:order-4 md:flex lg:hidden", children: chip }),
-                /* @__PURE__ */ jsx150("div", { className: cn("order-4 flex h-11 min-w-0 items-center md:hidden", fieldRowOffset), children: chip })
+                /* @__PURE__ */ jsx150("div", { className: "hidden min-w-0 basis-full items-center justify-end content-md:order-4 content-md:flex content-lg:hidden", children: chip }),
+                /* @__PURE__ */ jsx150("div", { className: cn("order-4 flex h-11 min-w-0 items-center content-md:hidden", fieldRowOffset), children: chip })
               ] }),
               /* @__PURE__ */ jsxs116(
                 "div",
                 {
                   className: cn(
-                    "flex h-11 shrink-0 items-center justify-end gap-[var(--spacing-system-s)] md:h-12 lg:order-5",
-                    isSystem ? "order-3" : "order-2 md:order-3",
+                    "flex h-11 shrink-0 items-center justify-end gap-[var(--spacing-system-s)] content-md:h-12 content-lg:order-5",
+                    isSystem ? "order-3" : "order-2 content-md:order-3",
                     fieldRowOffset
                   ),
                   children: [
                     !isSystem && moveButtons,
-                    isSystem ? /* @__PURE__ */ jsx150("div", { className: "flex w-11 justify-center md:w-12", children: /* @__PURE__ */ jsx150(TouchFriendlyTooltip, { content: systemTooltip, children: /* @__PURE__ */ jsx150(
+                    isSystem ? /* @__PURE__ */ jsx150("div", { className: "flex w-11 justify-center content-md:w-12", children: /* @__PURE__ */ jsx150(TouchFriendlyTooltip, { content: systemTooltip, children: /* @__PURE__ */ jsx150(
                       "button",
                       {
                         type: "button",
@@ -18195,7 +18254,7 @@ function TicketStatusConfigRow({
                         "aria-label": "Delete status",
                         disabled: deleteDisabled,
                         onClick: deleteDisabled ? void 0 : onDelete,
-                        className: cn("size-11 md:size-12", deleteDisabled && "pointer-events-none"),
+                        className: cn("size-11 content-md:size-12", deleteDisabled && "pointer-events-none"),
                         children: /* @__PURE__ */ jsx150(TrashIcon, { className: "text-ods-error" })
                       }
                     ) }) })
@@ -18225,7 +18284,7 @@ var SKELETON_COLUMNS = 6;
 function TestResultsSkeleton() {
   return /* @__PURE__ */ jsx151(ScrollShadow, { axis: "horizontal", children: /* @__PURE__ */ jsxs117("div", { className: "flex w-max min-w-full flex-col", children: [
     /* @__PURE__ */ jsx151("div", { className: "flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]", children: Array.from({ length: SKELETON_COLUMNS }).map((_, i) => /* @__PURE__ */ jsx151("div", { className: "flex h-12 w-[160px] shrink-0 items-center", children: /* @__PURE__ */ jsx151("div", { className: "h-4 w-3/4 animate-pulse rounded-sm bg-ods-bg-surface" }) }, `skeleton-header-${i}`)) }),
-    /* @__PURE__ */ jsx151("div", { className: "animate-pulse overflow-hidden rounded-[6px] border border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx151("div", { className: "flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] md:h-[78px]", children: Array.from({ length: SKELETON_COLUMNS }).map((_, i) => /* @__PURE__ */ jsx151("div", { className: "w-[160px] shrink-0", children: /* @__PURE__ */ jsx151("div", { className: "h-5 w-3/4 rounded-sm bg-ods-bg-surface" }) }, `skeleton-cell-${i}`)) }) })
+    /* @__PURE__ */ jsx151("div", { className: "animate-pulse overflow-hidden rounded-[6px] border border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx151("div", { className: "flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] content-md:h-[78px]", children: Array.from({ length: SKELETON_COLUMNS }).map((_, i) => /* @__PURE__ */ jsx151("div", { className: "w-[160px] shrink-0", children: /* @__PURE__ */ jsx151("div", { className: "h-5 w-3/4 rounded-sm bg-ods-bg-surface" }) }, `skeleton-cell-${i}`)) }) })
   ] }) });
 }
 function TestResultsTable({ rows, loading }) {
@@ -18605,7 +18664,7 @@ function TicketNotesSection({
           onClick: handleSend,
           disabled: !noteText.trim() || isAddingNote,
           className: cn(
-            "flex h-11 w-11 shrink-0 items-center justify-center rounded-[6px] md:h-12 md:w-12",
+            "flex h-11 w-11 shrink-0 items-center justify-center rounded-[6px] content-md:h-12 content-md:w-12",
             "border border-ods-border bg-ods-card",
             "transition-colors hover:bg-ods-bg-hover",
             "disabled:cursor-not-allowed disabled:opacity-50"
@@ -18669,7 +18728,7 @@ function TicketInfoSection({
   isAddingNote
 }) {
   return /* @__PURE__ */ jsxs122("div", { className: cn("overflow-hidden rounded-[6px] border border-ods-border", className), children: [
-    /* @__PURE__ */ jsxs122("div", { className: "grid grid-cols-2 items-center gap-4 border-b border-ods-border bg-ods-card px-4 py-3 lg:grid-cols-[1fr_1fr_1fr_auto]", children: [
+    /* @__PURE__ */ jsxs122("div", { className: "grid grid-cols-2 items-center gap-4 border-b border-ods-border bg-ods-card px-4 py-3 content-lg:grid-cols-[1fr_1fr_1fr_auto]", children: [
       /* @__PURE__ */ jsxs122("div", { className: "flex min-w-0 items-center gap-2", children: [
         /* @__PURE__ */ jsx156(
           SquareAvatar,
@@ -21092,7 +21151,7 @@ function ProviderButton({ provider, onClick, disabled = false, loading = false }
       variant: "outline",
       size: "default",
       leftIcon: isLoading ? null : /* @__PURE__ */ jsx191(IconComponent, { className: "h-5 w-5" }),
-      className: `h-[56px] w-full !font-bold !text-h6 hover:bg-ods-bg-hover md:!w-full ${isLoading ? "cursor-wait" : "cursor-pointer"} `,
+      className: `h-[56px] w-full !font-bold !text-h6 hover:bg-ods-bg-hover content-md:!w-full ${isLoading ? "cursor-wait" : "cursor-pointer"} `,
       "aria-label": config.displayName,
       children: isLoading ? "Signing in..." : config.displayName
     }
@@ -21461,7 +21520,7 @@ function CommandBox({
           }
         )
       ] }) : commandText,
-      (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs153("div", { className: "mt-4 flex flex-col gap-3 md:flex-row md:justify-end", children: [
+      (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs153("div", { className: "mt-4 flex flex-col gap-3 content-md:flex-row content-md:justify-end", children: [
         secondaryAction && /* @__PURE__ */ jsx196(
           Button,
           {
@@ -21470,7 +21529,7 @@ function CommandBox({
             onClick: secondaryAction.onClick,
             disabled: secondaryAction.disabled,
             loading: secondaryAction.loading,
-            className: "w-full md:w-auto",
+            className: "w-full content-md:w-auto",
             children: secondaryAction.label
           }
         ),
@@ -21482,7 +21541,7 @@ function CommandBox({
             onClick: primaryAction.onClick,
             disabled: primaryAction.disabled,
             loading: primaryAction.loading,
-            className: "w-full md:w-auto",
+            className: "w-full content-md:w-auto",
             children: primaryAction.label
           }
         )
@@ -21583,7 +21642,7 @@ var SectionButton = ({
         isActive && activeButtonClassName,
         layout === "vertical" ? (
           // Strip below lg: a compact, non-shrinking tab. Side list from lg: the full card.
-          "!h-auto !min-h-12 shrink-0 !px-[var(--spacing-system-mf)] !py-[var(--spacing-system-sf)] lg:!min-h-[var(--section-min-height)] lg:shrink lg:!py-[var(--spacing-system-mf)]"
+          "!h-auto !min-h-12 shrink-0 !px-[var(--spacing-system-mf)] !py-[var(--spacing-system-sf)] content-lg:!min-h-[var(--section-min-height)] content-lg:shrink content-lg:!py-[var(--spacing-system-mf)]"
         ) : "!h-auto !min-h-[76px] !whitespace-normal !text-left"
       ),
       style: {
@@ -21603,7 +21662,16 @@ var SectionButton = ({
           section.number && /* @__PURE__ */ jsx198("span", { className: cn(numberClasses, "shrink-0 text-h3"), children: section.number }),
           /* @__PURE__ */ jsxs155("div", { className: "min-w-0 flex-1 text-left", children: [
             /* @__PURE__ */ jsxs155("div", { className: "flex flex-wrap items-center gap-2", children: [
-              /* @__PURE__ */ jsx198("p", { className: cn(titleClasses, "whitespace-nowrap text-h4 lg:whitespace-normal lg:break-words"), children: section.title }),
+              /* @__PURE__ */ jsx198(
+                "p",
+                {
+                  className: cn(
+                    titleClasses,
+                    "whitespace-nowrap text-h4 content-lg:whitespace-normal content-lg:break-words"
+                  ),
+                  children: section.title
+                }
+              ),
               section.badge && /* @__PURE__ */ jsx198(
                 StatusBadge,
                 {
@@ -21613,7 +21681,7 @@ var SectionButton = ({
                 }
               )
             ] }),
-            section.description && showDescription && /* @__PURE__ */ jsx198("p", { className: cn(subtitleClasses, "mt-1 hidden whitespace-normal break-words text-h6 lg:block"), children: section.description })
+            section.description && showDescription && /* @__PURE__ */ jsx198("p", { className: cn(subtitleClasses, "mt-1 hidden whitespace-normal break-words text-h6 content-lg:block"), children: section.description })
           ] })
         ] })
       ) : (
@@ -21653,7 +21721,7 @@ var SectionSelector = ({
   showDescription = true
 }) => {
   const containerClasses = cn(
-    layout === "wrap" ? "flex flex-wrap gap-2 md:gap-4 lg:gap-6" : "flex flex-row gap-[var(--spacing-system-xsf)] overflow-x-auto [scrollbar-width:none] lg:flex-col lg:overflow-visible [&::-webkit-scrollbar]:hidden",
+    layout === "wrap" ? "flex flex-wrap gap-2 content-md:gap-4 content-lg:gap-6" : "flex flex-row gap-[var(--spacing-system-xsf)] overflow-x-auto [scrollbar-width:none] content-lg:flex-col content-lg:overflow-visible [&::-webkit-scrollbar]:hidden",
     className
   );
   const listRef = useRef29(null);
@@ -21686,7 +21754,7 @@ var SectionSelector = ({
       case "full":
         return "w-full";
       case "responsive":
-        return "w-full md:w-[calc(50%-8px)] lg:w-auto";
+        return "w-full content-md:w-[calc(50%-8px)] content-lg:w-auto";
       default:
         return "";
     }
@@ -21846,7 +21914,10 @@ function UnifiedUI({ state, handlers, config, iframeRef }) {
   return /* @__PURE__ */ jsxs156(
     "div",
     {
-      className: cn(config.hideControls ? "" : "grid grid-cols-1 gap-10 lg:grid-cols-[296px_1fr]", config.className),
+      className: cn(
+        config.hideControls ? "" : "grid grid-cols-1 gap-10 content-lg:grid-cols-[296px_1fr]",
+        config.className
+      ),
       children: [
         showSectionSelector && !config.hideControls && /* @__PURE__ */ jsx199("div", { style: { zIndex: 10 }, children: /* @__PURE__ */ jsx199(
           SectionSelector,
@@ -22904,90 +22975,96 @@ function MediaGalleryManager({
         ] }),
         /* @__PURE__ */ jsx204("p", { className: "text-ods-text-secondary text-h6", children: "Drag to reorder" })
       ] }),
-      /* @__PURE__ */ jsxs159("div", { className: cn("grid grid-cols-1 gap-4 md:grid-cols-2", columns === 3 && "lg:grid-cols-3"), children: [
-        media.map((item, index) => /* @__PURE__ */ jsxs159(
-          Card,
-          {
-            className: "group relative border-ods-border transition-colors hover:border-ods-accent/30",
-            draggable: true,
-            onDragStart: () => setDraggedIndex(index),
-            onDragOver: (event) => {
-              if (!isFileDrag(event)) event.preventDefault();
-            },
-            onDrop: (event) => handleTileDrop(event, index),
-            children: [
-              /* @__PURE__ */ jsx204("div", { className: "absolute left-2 top-2 z-10 cursor-move opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ jsx204(GripVertical, { className: "h-4 w-4 text-ods-text-on-dark drop-shadow" }) }),
-              /* @__PURE__ */ jsx204("div", { className: "absolute right-2 top-2 z-10 opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ jsx204(
-                Button,
-                {
-                  type: "button",
-                  variant: "outline",
-                  size: "small-legacy",
-                  "aria-label": `Remove ${item.title || "media"}`,
-                  onClick: () => onChange(media.filter((_, i) => i !== index)),
-                  className: "h-8 w-8 border-ods-error bg-ods-error p-0 hover:bg-ods-error-hover",
-                  children: /* @__PURE__ */ jsx204(Trash23, { className: "h-4 w-4 text-ods-text-on-dark" })
-                }
-              ) }),
-              /* @__PURE__ */ jsx204("div", { className: "relative aspect-video overflow-hidden rounded-lg bg-ods-bg", children: isVideoItem(item) ? (
-                // <Video> SSOT (MuxPlayer): plays Mux HLS and MP4 alike; fit="cover" crops to the cell.
-                /* @__PURE__ */ jsx204(Video, { kind: "file", url: item.media_url, fit: "cover", className: "h-full w-full" })
-              ) : /* @__PURE__ */ jsx204(
-                next_image_default,
-                {
-                  src: item.media_url,
-                  alt: item.title || "Media",
-                  fill: true,
-                  className: "object-cover",
-                  sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                }
-              ) }),
-              editableDetails ? /* @__PURE__ */ jsxs159("div", { className: "space-y-2 p-3", children: [
-                /* @__PURE__ */ jsxs159("div", { className: "flex items-center gap-2", children: [
-                  isVideoItem(item) ? /* @__PURE__ */ jsx204(VideoIcon, { className: "h-5 w-5 text-ods-text-secondary" }) : /* @__PURE__ */ jsx204(ImageIcon2, { className: "h-5 w-5 text-ods-text-secondary" }),
-                  /* @__PURE__ */ jsxs159(
-                    Select,
+      /* @__PURE__ */ jsxs159(
+        "div",
+        {
+          className: cn("grid grid-cols-1 gap-4 content-md:grid-cols-2", columns === 3 && "content-lg:grid-cols-3"),
+          children: [
+            media.map((item, index) => /* @__PURE__ */ jsxs159(
+              Card,
+              {
+                className: "group relative border-ods-border transition-colors hover:border-ods-accent/30",
+                draggable: true,
+                onDragStart: () => setDraggedIndex(index),
+                onDragOver: (event) => {
+                  if (!isFileDrag(event)) event.preventDefault();
+                },
+                onDrop: (event) => handleTileDrop(event, index),
+                children: [
+                  /* @__PURE__ */ jsx204("div", { className: "absolute left-2 top-2 z-10 cursor-move opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ jsx204(GripVertical, { className: "h-4 w-4 text-ods-text-on-dark drop-shadow" }) }),
+                  /* @__PURE__ */ jsx204("div", { className: "absolute right-2 top-2 z-10 opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ jsx204(
+                    Button,
                     {
-                      value: item.media_type,
-                      onValueChange: (value) => update(index, { media_type: value }),
-                      children: [
-                        /* @__PURE__ */ jsx204(SelectTrigger, { className: "h-8 bg-ods-bg text-h6", children: /* @__PURE__ */ jsx204(SelectValue, {}) }),
-                        /* @__PURE__ */ jsxs159(SelectContent, { className: "bg-ods-card", children: [
-                          /* @__PURE__ */ jsx204(SelectItem, { value: "image", children: "Image" }),
-                          /* @__PURE__ */ jsx204(SelectItem, { value: "video", children: "Video" }),
-                          /* @__PURE__ */ jsx204(SelectItem, { value: "screenshot", children: "Screenshot" }),
-                          /* @__PURE__ */ jsx204(SelectItem, { value: "demo", children: "Demo" })
-                        ] })
-                      ]
+                      type: "button",
+                      variant: "outline",
+                      size: "small-legacy",
+                      "aria-label": `Remove ${item.title || "media"}`,
+                      onClick: () => onChange(media.filter((_, i) => i !== index)),
+                      className: "h-8 w-8 border-ods-error bg-ods-error p-0 hover:bg-ods-error-hover",
+                      children: /* @__PURE__ */ jsx204(Trash23, { className: "h-4 w-4 text-ods-text-on-dark" })
                     }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx204(
-                  Input,
-                  {
-                    placeholder: "Title (optional)",
-                    value: item.title ?? "",
-                    onChange: (event) => update(index, { title: event.target.value }),
-                    onKeyDown: (event) => event.key === "Enter" && event.preventDefault(),
-                    className: "h-8 bg-ods-bg text-h6"
-                  }
-                )
-              ] }) : /* @__PURE__ */ jsxs159("div", { className: "p-3", children: [
-                /* @__PURE__ */ jsxs159("div", { className: "mb-1 flex items-center gap-2", children: [
-                  isVideoItem(item) ? /* @__PURE__ */ jsx204(VideoIcon, { className: "h-4 w-4 text-ods-text-secondary" }) : /* @__PURE__ */ jsx204(ImageIcon2, { className: "h-4 w-4 text-ods-text-secondary" }),
-                  /* @__PURE__ */ jsx204("span", { className: "capitalize text-ods-text-primary text-h6", children: item.media_type })
-                ] }),
-                item.title && /* @__PURE__ */ jsx204("p", { className: "truncate text-ods-text-secondary text-h6", children: item.title })
-              ] })
-            ]
-          },
-          item.id ?? `${item.media_url}-${index}`
-        )),
-        pending.map((name, index) => /* @__PURE__ */ jsxs159(Card, { className: "border-ods-border", "aria-busy": "true", children: [
-          /* @__PURE__ */ jsx204("div", { className: "flex aspect-video items-center justify-center rounded-lg bg-ods-bg", children: /* @__PURE__ */ jsx204(Loader26, { className: "h-8 w-8 animate-spin text-ods-accent" }) }),
-          /* @__PURE__ */ jsx204("p", { className: "truncate p-3 text-ods-text-secondary text-h6", children: name })
-        ] }, `pending-${name}-${index}`))
-      ] })
+                  ) }),
+                  /* @__PURE__ */ jsx204("div", { className: "relative aspect-video overflow-hidden rounded-lg bg-ods-bg", children: isVideoItem(item) ? (
+                    // <Video> SSOT (MuxPlayer): plays Mux HLS and MP4 alike; fit="cover" crops to the cell.
+                    /* @__PURE__ */ jsx204(Video, { kind: "file", url: item.media_url, fit: "cover", className: "h-full w-full" })
+                  ) : /* @__PURE__ */ jsx204(
+                    next_image_default,
+                    {
+                      src: item.media_url,
+                      alt: item.title || "Media",
+                      fill: true,
+                      className: "object-cover",
+                      sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                    }
+                  ) }),
+                  editableDetails ? /* @__PURE__ */ jsxs159("div", { className: "space-y-2 p-3", children: [
+                    /* @__PURE__ */ jsxs159("div", { className: "flex items-center gap-2", children: [
+                      isVideoItem(item) ? /* @__PURE__ */ jsx204(VideoIcon, { className: "h-5 w-5 text-ods-text-secondary" }) : /* @__PURE__ */ jsx204(ImageIcon2, { className: "h-5 w-5 text-ods-text-secondary" }),
+                      /* @__PURE__ */ jsxs159(
+                        Select,
+                        {
+                          value: item.media_type,
+                          onValueChange: (value) => update(index, { media_type: value }),
+                          children: [
+                            /* @__PURE__ */ jsx204(SelectTrigger, { className: "h-8 bg-ods-bg text-h6", children: /* @__PURE__ */ jsx204(SelectValue, {}) }),
+                            /* @__PURE__ */ jsxs159(SelectContent, { className: "bg-ods-card", children: [
+                              /* @__PURE__ */ jsx204(SelectItem, { value: "image", children: "Image" }),
+                              /* @__PURE__ */ jsx204(SelectItem, { value: "video", children: "Video" }),
+                              /* @__PURE__ */ jsx204(SelectItem, { value: "screenshot", children: "Screenshot" }),
+                              /* @__PURE__ */ jsx204(SelectItem, { value: "demo", children: "Demo" })
+                            ] })
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx204(
+                      Input,
+                      {
+                        placeholder: "Title (optional)",
+                        value: item.title ?? "",
+                        onChange: (event) => update(index, { title: event.target.value }),
+                        onKeyDown: (event) => event.key === "Enter" && event.preventDefault(),
+                        className: "h-8 bg-ods-bg text-h6"
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxs159("div", { className: "p-3", children: [
+                    /* @__PURE__ */ jsxs159("div", { className: "mb-1 flex items-center gap-2", children: [
+                      isVideoItem(item) ? /* @__PURE__ */ jsx204(VideoIcon, { className: "h-4 w-4 text-ods-text-secondary" }) : /* @__PURE__ */ jsx204(ImageIcon2, { className: "h-4 w-4 text-ods-text-secondary" }),
+                      /* @__PURE__ */ jsx204("span", { className: "capitalize text-ods-text-primary text-h6", children: item.media_type })
+                    ] }),
+                    item.title && /* @__PURE__ */ jsx204("p", { className: "truncate text-ods-text-secondary text-h6", children: item.title })
+                  ] })
+                ]
+              },
+              item.id ?? `${item.media_url}-${index}`
+            )),
+            pending.map((name, index) => /* @__PURE__ */ jsxs159(Card, { className: "border-ods-border", "aria-busy": "true", children: [
+              /* @__PURE__ */ jsx204("div", { className: "flex aspect-video items-center justify-center rounded-lg bg-ods-bg", children: /* @__PURE__ */ jsx204(Loader26, { className: "h-8 w-8 animate-spin text-ods-accent" }) }),
+              /* @__PURE__ */ jsx204("p", { className: "truncate p-3 text-ods-text-secondary text-h6", children: name })
+            ] }, `pending-${name}-${index}`))
+          ]
+        }
+      )
     ] })
   ] });
 }
@@ -23099,7 +23176,7 @@ var ParallaxImageShowcase = ({
   const centerImage = images.find((img) => img.position === "center");
   const rightImage = images.find((img) => img.position === "right");
   if (layout === "grid") {
-    return /* @__PURE__ */ jsx207("div", { ref: componentRef, className: `relative flex h-full w-full items-center ${className}`, children: /* @__PURE__ */ jsxs161("div", { className: "grid w-full grid-cols-1 gap-4 md:grid-cols-3", children: [
+    return /* @__PURE__ */ jsx207("div", { ref: componentRef, className: `relative flex h-full w-full items-center ${className}`, children: /* @__PURE__ */ jsxs161("div", { className: "grid w-full grid-cols-1 gap-4 content-md:grid-cols-3", children: [
       leftImage && /* @__PURE__ */ jsx207(
         motion.div,
         {
@@ -23172,23 +23249,30 @@ var ParallaxImageShowcase = ({
     return /* @__PURE__ */ jsxs161("div", { ref: componentRef, className: `relative h-full w-full overflow-hidden ${className}`, children: [
       logoElement && /* @__PURE__ */ jsx207("div", { className: "absolute left-1/2 top-4 z-30 -translate-x-1/2 scale-50", children: logoElement }),
       /* @__PURE__ */ jsxs161("div", { className: "absolute inset-x-0 top-32 h-80", children: [
-        leftImage && /* @__PURE__ */ jsxs161(motion.div, { className: "absolute left-20 z-10 h-full w-full lg:w-1/2", style: { x, y, rotate }, children: [
-          /* @__PURE__ */ jsx207(
-            next_image_default,
-            {
-              src: leftImage.src,
-              alt: leftImage.alt,
-              fill: true,
-              sizes: "50vw",
-              className: "ods-card/50 border border-ods-border object-cover object-[left_top]"
-            }
-          ),
-          /* @__PURE__ */ jsx207("div", { className: "absolute inset-0 shadow-2xl" })
-        ] }),
+        leftImage && /* @__PURE__ */ jsxs161(
+          motion.div,
+          {
+            className: "absolute left-20 z-10 h-full w-full content-lg:w-1/2",
+            style: { x, y, rotate },
+            children: [
+              /* @__PURE__ */ jsx207(
+                next_image_default,
+                {
+                  src: leftImage.src,
+                  alt: leftImage.alt,
+                  fill: true,
+                  sizes: "50vw",
+                  className: "ods-card/50 border border-ods-border object-cover object-[left_top]"
+                }
+              ),
+              /* @__PURE__ */ jsx207("div", { className: "absolute inset-0 shadow-2xl" })
+            ]
+          }
+        ),
         centerImage && /* @__PURE__ */ jsxs161(
           motion.div,
           {
-            className: "absolute right-20 top-20 z-20 h-full w-full lg:w-1/2",
+            className: "absolute right-20 top-20 z-20 h-full w-full content-lg:w-1/2",
             style: { x, y, rotate },
             children: [
               /* @__PURE__ */ jsx207(
@@ -23212,7 +23296,7 @@ var ParallaxImageShowcase = ({
     rightImage && /* @__PURE__ */ jsx207(
       motion.div,
       {
-        className: "absolute right-[5%] top-[5%] z-[1] h-[60%] w-[80%] lg:right-[-15%] lg:top-[-10%] lg:h-[85%] lg:w-[120%]",
+        className: "absolute right-[5%] top-[5%] z-[1] h-[60%] w-[80%] content-lg:right-[-15%] content-lg:top-[-10%] content-lg:h-[85%] content-lg:w-[120%]",
         style: {
           x,
           y,
@@ -23233,7 +23317,7 @@ var ParallaxImageShowcase = ({
     centerImage && /* @__PURE__ */ jsx207(
       motion.div,
       {
-        className: "absolute bottom-[10%] right-[0%] z-[2] h-[55%] w-[75%] lg:bottom-[-15%] lg:right-[-20%] lg:h-[80%] lg:w-[100%]",
+        className: "absolute bottom-[10%] right-[0%] z-[2] h-[55%] w-[75%] content-lg:bottom-[-15%] content-lg:right-[-20%] content-lg:h-[80%] content-lg:w-[100%]",
         style: {
           x,
           y,
@@ -23254,7 +23338,7 @@ var ParallaxImageShowcase = ({
     leftImage && /* @__PURE__ */ jsx207(
       motion.div,
       {
-        className: "absolute left-[-5%] top-[10%] z-[3] h-[65%] w-[85%] lg:left-[-25%] lg:top-[0%] lg:h-[90%] lg:w-[110%]",
+        className: "absolute left-[-5%] top-[10%] z-[3] h-[65%] w-[85%] content-lg:left-[-25%] content-lg:top-[0%] content-lg:h-[90%] content-lg:w-[110%]",
         style: {
           x,
           y,
@@ -23426,7 +23510,7 @@ function VendorCardContent({ showMetadata }) {
       /* @__PURE__ */ jsx210(TextSkeleton.Body, { className: "w-2/3" })
     ] }) }),
     showMetadata && /* @__PURE__ */ jsxs164("div", { className: "flex w-full min-w-0 items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs164("div", { className: "flex min-w-0 flex-shrink items-center gap-3 md:gap-4", children: [
+      /* @__PURE__ */ jsxs164("div", { className: "flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4", children: [
         /* @__PURE__ */ jsxs164("div", { className: "flex flex-shrink-0 items-center gap-1", children: [
           /* @__PURE__ */ jsx210(MediaSkeleton.Icon, { size: "sm", className: "h-5 w-5" }),
           /* @__PURE__ */ jsx210(TextSkeleton.Caption, { className: "w-8" })
@@ -23447,7 +23531,7 @@ function BlogCardContent({ showActions, showMetadata }) {
   return /* @__PURE__ */ jsxs164(Fragment36, { children: [
     /* @__PURE__ */ jsx210("div", { className: "blog-card-image-container relative aspect-[1200/630] w-full overflow-hidden bg-ods-bg", children: /* @__PURE__ */ jsx210(MediaSkeleton.CardImage, {}) }),
     /* @__PURE__ */ jsxs164("div", { className: "flex flex-grow flex-col p-4", children: [
-      /* @__PURE__ */ jsx210("div", { className: "mb-3 flex min-h-[50.4px] items-center md:min-h-[56px] lg:min-h-[61.6px]", children: /* @__PURE__ */ jsxs164("div", { className: "w-full space-y-1", children: [
+      /* @__PURE__ */ jsx210("div", { className: "mb-3 flex min-h-[50.4px] items-center content-md:min-h-[56px] content-lg:min-h-[61.6px]", children: /* @__PURE__ */ jsxs164("div", { className: "w-full space-y-1", children: [
         /* @__PURE__ */ jsx210(TextSkeleton.Subheading, { className: "w-full" }),
         /* @__PURE__ */ jsx210(TextSkeleton.Subheading, { className: "w-3/4" })
       ] }) }),
@@ -23455,7 +23539,7 @@ function BlogCardContent({ showActions, showMetadata }) {
         /* @__PURE__ */ jsx210(InteractiveSkeleton.Chip, { className: "w-16" }),
         /* @__PURE__ */ jsx210(InteractiveSkeleton.Chip, { className: "w-12" })
       ] }),
-      /* @__PURE__ */ jsx210("div", { className: "mb-3 flex min-h-[42px] items-center md:min-h-[45px] lg:min-h-[48px]", children: /* @__PURE__ */ jsxs164("div", { className: "w-full space-y-1", children: [
+      /* @__PURE__ */ jsx210("div", { className: "mb-3 flex min-h-[42px] items-center content-md:min-h-[45px] content-lg:min-h-[48px]", children: /* @__PURE__ */ jsxs164("div", { className: "w-full space-y-1", children: [
         /* @__PURE__ */ jsx210(TextSkeleton.Body, { className: "w-full" }),
         /* @__PURE__ */ jsx210(TextSkeleton.Body, { className: "w-1/2" })
       ] }) }),
@@ -23475,19 +23559,19 @@ function BlogCardContent({ showActions, showMetadata }) {
   ] });
 }
 function CategoryCardContent() {
-  return /* @__PURE__ */ jsxs164("div", { className: "space-y-4 p-4 md:p-6", children: [
-    /* @__PURE__ */ jsx210("div", { className: "flex gap-2 md:gap-3", children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx210(MediaSkeleton.Icon, { size: "lg", className: "flex-shrink-0" }, index)) }),
+  return /* @__PURE__ */ jsxs164("div", { className: "space-y-4 p-4 content-md:p-6", children: [
+    /* @__PURE__ */ jsx210("div", { className: "flex gap-2 content-md:gap-3", children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx210(MediaSkeleton.Icon, { size: "lg", className: "flex-shrink-0" }, index)) }),
     /* @__PURE__ */ jsxs164("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxs164("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsx210(TextSkeleton.Subheading, { className: "w-3/4" }),
         /* @__PURE__ */ jsx210(TextSkeleton.Caption, { className: "w-1/2" })
       ] }),
-      /* @__PURE__ */ jsxs164("div", { className: "flex items-start justify-between gap-4 md:items-end md:gap-6", children: [
+      /* @__PURE__ */ jsxs164("div", { className: "flex items-start justify-between gap-4 content-md:items-end content-md:gap-6", children: [
         /* @__PURE__ */ jsxs164("div", { className: "flex-1 space-y-2", children: [
           /* @__PURE__ */ jsx210(TextSkeleton.Body, { className: "w-full" }),
           /* @__PURE__ */ jsx210(TextSkeleton.Body, { className: "w-2/3" })
         ] }),
-        /* @__PURE__ */ jsx210(InteractiveSkeleton.Button, { className: "h-10 w-10 flex-shrink-0 md:h-12 md:w-12" })
+        /* @__PURE__ */ jsx210(InteractiveSkeleton.Button, { className: "h-10 w-10 flex-shrink-0 content-md:h-12 content-md:w-12" })
       ] })
     ] })
   ] });
@@ -23519,11 +23603,11 @@ function CardSkeletonGrid({
     "div",
     {
       className: cn(
-        "grid gap-4 md:gap-6",
+        "grid gap-4 content-md:gap-6",
         // Responsive grid based on card type
-        variant === "vendor" && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-        variant === "blog" && "grid-cols-1 md:grid-cols-2",
-        variant === "category" && "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+        variant === "vendor" && "grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-3",
+        variant === "blog" && "grid-cols-1 content-md:grid-cols-2",
+        variant === "category" && "grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4",
         variant === "alternative" && "grid-cols-1",
         className
       ),
@@ -23537,11 +23621,11 @@ function CardSkeletonGrid({
 // src/components/loading/page-layout-skeleton.tsx
 import { Fragment as Fragment37, jsx as jsx211, jsxs as jsxs165 } from "react/jsx-runtime";
 function AnnouncementBarSkeleton() {
-  return /* @__PURE__ */ jsx211("div", { className: "relative w-full animate-pulse bg-ods-skeleton", children: /* @__PURE__ */ jsx211("div", { className: "relative flex w-full flex-row items-center", children: /* @__PURE__ */ jsxs165("div", { className: "relative box-border flex w-full flex-row items-center justify-start gap-4 py-3 pl-4 pr-12 md:gap-6 md:py-4 md:pl-6 md:pr-16", children: [
-    /* @__PURE__ */ jsx211("div", { className: "relative h-6 w-6 shrink-0 rounded bg-ods-border md:h-8 md:w-8" }),
-    /* @__PURE__ */ jsxs165("div", { className: "min-w-0 flex-1 space-y-1 md:space-y-2", children: [
-      /* @__PURE__ */ jsx211("div", { className: "h-[14px] w-3/4 max-w-md rounded bg-ods-border md:h-[18px]" }),
-      /* @__PURE__ */ jsx211("div", { className: "hidden h-[12px] w-full max-w-lg rounded bg-ods-border md:block md:h-[18px]" })
+  return /* @__PURE__ */ jsx211("div", { className: "relative w-full animate-pulse bg-ods-skeleton", children: /* @__PURE__ */ jsx211("div", { className: "relative flex w-full flex-row items-center", children: /* @__PURE__ */ jsxs165("div", { className: "relative box-border flex w-full flex-row items-center justify-start gap-4 py-3 pl-4 pr-12 content-md:gap-6 content-md:py-4 content-md:pl-6 content-md:pr-16", children: [
+    /* @__PURE__ */ jsx211("div", { className: "relative h-6 w-6 shrink-0 rounded bg-ods-border content-md:h-8 content-md:w-8" }),
+    /* @__PURE__ */ jsxs165("div", { className: "min-w-0 flex-1 space-y-1 content-md:space-y-2", children: [
+      /* @__PURE__ */ jsx211("div", { className: "h-[14px] w-3/4 max-w-md rounded bg-ods-border content-md:h-[18px]" }),
+      /* @__PURE__ */ jsx211("div", { className: "hidden h-[12px] w-full max-w-lg rounded bg-ods-border content-md:block content-md:h-[18px]" })
     ] }),
     /* @__PURE__ */ jsx211("div", { className: "absolute right-2 top-2 h-6 w-6 rounded bg-ods-border" })
   ] }) }) });
@@ -23550,17 +23634,17 @@ function HeroSkeleton() {
   return /* @__PURE__ */ jsxs165(
     "section",
     {
-      className: "flex w-full animate-pulse flex-col items-center justify-center px-4 py-12 text-center md:px-8 md:py-20",
+      className: "flex w-full animate-pulse flex-col items-center justify-center px-4 py-12 text-center content-md:px-8 content-md:py-20",
       style: {
         background: "radial-gradient(circle at 50% 0%, #242323 0%, #1A1A1A 100%)"
       },
       children: [
-        /* @__PURE__ */ jsx211(TextSkeleton.Heading, { className: "mb-4 h-12 w-full max-w-4xl md:mb-6 md:h-20 lg:h-24" }),
-        /* @__PURE__ */ jsxs165("div", { className: "mb-8 w-full max-w-4xl space-y-3 px-2 md:mb-10", children: [
-          /* @__PURE__ */ jsx211(TextSkeleton.Body, { className: "h-5 md:h-7" }),
-          /* @__PURE__ */ jsx211(TextSkeleton.Body, { className: "mx-auto h-5 w-3/4 md:h-7" })
+        /* @__PURE__ */ jsx211(TextSkeleton.Heading, { className: "mb-4 h-12 w-full max-w-4xl content-md:mb-6 content-md:h-20 content-lg:h-24" }),
+        /* @__PURE__ */ jsxs165("div", { className: "mb-8 w-full max-w-4xl space-y-3 px-2 content-md:mb-10", children: [
+          /* @__PURE__ */ jsx211(TextSkeleton.Body, { className: "h-5 content-md:h-7" }),
+          /* @__PURE__ */ jsx211(TextSkeleton.Body, { className: "mx-auto h-5 w-3/4 content-md:h-7" })
         ] }),
-        /* @__PURE__ */ jsx211(InteractiveSkeleton.Button, { className: "h-12 w-full md:w-64" })
+        /* @__PURE__ */ jsx211(InteractiveSkeleton.Button, { className: "h-12 w-full content-md:w-64" })
       ]
     }
   );
@@ -23570,9 +23654,9 @@ function SearchContainerSkeleton({
   showFilters = true
 }) {
   return /* @__PURE__ */ jsxs165("div", { className: cn("space-y-4", className || ""), children: [
-    /* @__PURE__ */ jsxs165("div", { className: "flex gap-2 md:gap-4", children: [
+    /* @__PURE__ */ jsxs165("div", { className: "flex gap-2 content-md:gap-4", children: [
       /* @__PURE__ */ jsx211(InteractiveSkeleton.Input, { className: "flex-1" }),
-      /* @__PURE__ */ jsx211(InteractiveSkeleton.Button, { className: "w-32 md:w-40" })
+      /* @__PURE__ */ jsx211(InteractiveSkeleton.Button, { className: "w-32 content-md:w-40" })
     ] }),
     showFilters && /* @__PURE__ */ jsxs165("div", { className: "flex flex-wrap gap-2", children: [
       /* @__PURE__ */ jsx211(InteractiveSkeleton.Chip, {}),
@@ -23596,7 +23680,7 @@ function CategorySidebarSkeleton({ className }) {
     { type: "file", width: "w-28" },
     { type: "file", width: "w-36" }
   ];
-  return /* @__PURE__ */ jsxs165("div", { className: cn("w-full lg:w-[320px]", className), children: [
+  return /* @__PURE__ */ jsxs165("div", { className: cn("w-full content-lg:w-[320px]", className), children: [
     /* @__PURE__ */ jsx211(UnifiedSkeleton, { className: "mb-4 h-[14px] w-24 rounded" }),
     /* @__PURE__ */ jsx211("div", { className: "space-y-1.5", children: items.map((item, index) => /* @__PURE__ */ jsxs165(
       "div",
@@ -23632,7 +23716,16 @@ function BreadcrumbSkeleton({ className }) {
   ] });
 }
 function ResultsHeaderSkeleton({ className }) {
-  return /* @__PURE__ */ jsx211("div", { className: cn("mb-6 flex flex-col items-start justify-between gap-4 md:flex-row md:items-center", className), children: /* @__PURE__ */ jsx211("div", { className: "space-y-1", children: /* @__PURE__ */ jsx211(TextSkeleton.Body, { className: "w-48" }) }) });
+  return /* @__PURE__ */ jsx211(
+    "div",
+    {
+      className: cn(
+        "mb-6 flex flex-col items-start justify-between gap-4 content-md:flex-row content-md:items-center",
+        className
+      ),
+      children: /* @__PURE__ */ jsx211("div", { className: "space-y-1", children: /* @__PURE__ */ jsx211(TextSkeleton.Body, { className: "w-48" }) })
+    }
+  );
 }
 function TwoColumnLayoutSkeleton({
   className,
@@ -23646,13 +23739,13 @@ function TwoColumnLayoutSkeleton({
     "div",
     {
       className: cn(
-        "grid grid-cols-1 gap-6 lg:grid-cols-[320px_1fr] lg:gap-8",
-        sidebarPosition === "right" && "lg:grid-cols-[1fr_320px]",
+        "grid grid-cols-1 gap-6 content-lg:grid-cols-[320px_1fr] content-lg:gap-8",
+        sidebarPosition === "right" && "content-lg:grid-cols-[1fr_320px]",
         className
       ),
       children: sidebarPosition === "left" ? /* @__PURE__ */ jsxs165(Fragment37, { children: [
-        /* @__PURE__ */ jsx211("aside", { className: "order-2 lg:order-1", children: sidebar }),
-        /* @__PURE__ */ jsx211("main", { className: "order-1 lg:order-2", children: main })
+        /* @__PURE__ */ jsx211("aside", { className: "order-2 content-lg:order-1", children: sidebar }),
+        /* @__PURE__ */ jsx211("main", { className: "order-1 content-lg:order-2", children: main })
       ] }) : /* @__PURE__ */ jsxs165(Fragment37, { children: [
         /* @__PURE__ */ jsx211("main", { className: "order-1", children: main }),
         /* @__PURE__ */ jsx211("aside", { className: "order-2", children: sidebar })
@@ -23662,7 +23755,7 @@ function TwoColumnLayoutSkeleton({
 }
 function ArticleLayoutSkeleton({ className }) {
   return /* @__PURE__ */ jsxs165("article", { className: cn("mx-auto max-w-4xl", className), children: [
-    /* @__PURE__ */ jsxs165("header", { className: "mb-8 space-y-4 md:mb-12 md:space-y-6", children: [
+    /* @__PURE__ */ jsxs165("header", { className: "mb-8 space-y-4 content-md:mb-12 content-md:space-y-6", children: [
       /* @__PURE__ */ jsxs165("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsx211(InteractiveSkeleton.Chip, {}),
         /* @__PURE__ */ jsx211(InteractiveSkeleton.Chip, { className: "w-16" })
@@ -23680,7 +23773,7 @@ function ArticleLayoutSkeleton({ className }) {
         /* @__PURE__ */ jsx211(TextSkeleton.Caption, { className: "w-16" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx211("div", { className: "mb-8 md:mb-12", children: /* @__PURE__ */ jsx211(MediaSkeleton.CardImage, { className: "h-64 w-full md:h-96" }) }),
+    /* @__PURE__ */ jsx211("div", { className: "mb-8 content-md:mb-12", children: /* @__PURE__ */ jsx211(MediaSkeleton.CardImage, { className: "h-64 w-full content-md:h-96" }) }),
     /* @__PURE__ */ jsxs165("div", { className: "prose prose-invert max-w-none space-y-6", children: [
       Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsxs165("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx211(TextSkeleton.Body, { className: "w-full" }),
@@ -23699,17 +23792,17 @@ function ArticleLayoutSkeleton({ className }) {
   ] });
 }
 function VendorDetailLayoutSkeleton({ className }) {
-  return /* @__PURE__ */ jsx211("main", { className: cn("min-h-screen bg-ods-bg", className), children: /* @__PURE__ */ jsxs165("div", { className: "mx-auto max-w-[1920px] px-6 py-6 md:px-20 md:py-10", children: [
+  return /* @__PURE__ */ jsx211("main", { className: cn("min-h-screen bg-ods-bg", className), children: /* @__PURE__ */ jsxs165("div", { className: "mx-auto max-w-[1920px] px-6 py-6 content-md:px-20 content-md:py-10", children: [
     /* @__PURE__ */ jsx211(BreadcrumbSkeleton, { className: "mb-6" }),
-    /* @__PURE__ */ jsxs165("div", { className: "flex flex-col lg:flex-row lg:gap-10", children: [
+    /* @__PURE__ */ jsxs165("div", { className: "flex flex-col content-lg:flex-row content-lg:gap-10", children: [
       /* @__PURE__ */ jsxs165("div", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ jsxs165("div", { className: "mb-10", children: [
           /* @__PURE__ */ jsxs165("div", { className: "mb-6 flex gap-6", children: [
             /* @__PURE__ */ jsx211("div", { className: "h-20 w-20 flex-shrink-0 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
             /* @__PURE__ */ jsxs165("div", { className: "flex flex-col gap-3", children: [
               /* @__PURE__ */ jsxs165("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsx211("div", { className: "h-12 w-80 max-w-full animate-pulse rounded bg-ods-skeleton md:h-16 lg:h-20" }),
-                /* @__PURE__ */ jsx211("div", { className: "h-5 w-32 animate-pulse rounded bg-ods-skeleton md:h-6" })
+                /* @__PURE__ */ jsx211("div", { className: "h-12 w-80 max-w-full animate-pulse rounded bg-ods-skeleton content-md:h-16 content-lg:h-20" }),
+                /* @__PURE__ */ jsx211("div", { className: "h-5 w-32 animate-pulse rounded bg-ods-skeleton content-md:h-6" })
               ] }),
               /* @__PURE__ */ jsxs165("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx211("div", { className: "h-8 w-20 animate-pulse rounded bg-ods-skeleton" }),
@@ -23717,10 +23810,10 @@ function VendorDetailLayoutSkeleton({ className }) {
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx211("div", { className: "mb-2 h-[300px] w-full animate-pulse rounded-lg border border-ods-border bg-ods-card md:h-[400px] lg:h-[500px]" }),
+          /* @__PURE__ */ jsx211("div", { className: "mb-2 h-[300px] w-full animate-pulse rounded-lg border border-ods-border bg-ods-card content-md:h-[400px] content-lg:h-[500px]" }),
           /* @__PURE__ */ jsx211("div", { className: "text-center", children: /* @__PURE__ */ jsx211("div", { className: "mx-auto h-4 w-24 animate-pulse rounded bg-ods-skeleton" }) })
         ] }),
-        /* @__PURE__ */ jsx211("div", { className: "mb-10 lg:hidden", children: /* @__PURE__ */ jsxs165("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx211("div", { className: "mb-10 content-lg:hidden", children: /* @__PURE__ */ jsxs165("div", { className: "space-y-4", children: [
           /* @__PURE__ */ jsx211("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
           /* @__PURE__ */ jsxs165("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx211("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
@@ -23749,7 +23842,7 @@ function VendorDetailLayoutSkeleton({ className }) {
           ] })
         ] }) }),
         /* @__PURE__ */ jsxs165("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx211("div", { className: "h-8 w-48 animate-pulse rounded bg-ods-skeleton md:h-10" }),
+          /* @__PURE__ */ jsx211("div", { className: "h-8 w-48 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
           /* @__PURE__ */ jsxs165("div", { className: "flex flex-col gap-4", children: [
             /* @__PURE__ */ jsx211("div", { className: "h-5 w-48 animate-pulse rounded bg-ods-skeleton" }),
             /* @__PURE__ */ jsx211("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx211(
@@ -23772,8 +23865,8 @@ function VendorDetailLayoutSkeleton({ className }) {
           ] })
         ] }),
         /* @__PURE__ */ jsxs165("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx211("div", { className: "h-8 w-64 animate-pulse rounded bg-ods-skeleton md:h-10" }),
-          /* @__PURE__ */ jsx211("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6 md:p-8", children: /* @__PURE__ */ jsxs165("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx211("div", { className: "h-8 w-64 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
+          /* @__PURE__ */ jsx211("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6 content-md:p-8", children: /* @__PURE__ */ jsxs165("div", { className: "space-y-4", children: [
             /* @__PURE__ */ jsx211("div", { className: "h-6 animate-pulse rounded bg-ods-skeleton" }),
             /* @__PURE__ */ jsx211("div", { className: "h-6 animate-pulse rounded bg-ods-skeleton" }),
             /* @__PURE__ */ jsx211("div", { className: "h-6 w-5/6 animate-pulse rounded bg-ods-skeleton" }),
@@ -23781,8 +23874,8 @@ function VendorDetailLayoutSkeleton({ className }) {
           ] }) })
         ] }),
         /* @__PURE__ */ jsxs165("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx211("div", { className: "h-8 w-72 animate-pulse rounded bg-ods-skeleton md:h-10" }),
-          /* @__PURE__ */ jsx211("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs165("div", { className: "flex gap-4 rounded-lg border border-ods-border bg-ods-card p-4", children: [
+          /* @__PURE__ */ jsx211("div", { className: "h-8 w-72 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
+          /* @__PURE__ */ jsx211("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs165("div", { className: "flex gap-4 rounded-lg border border-ods-border bg-ods-card p-4", children: [
             /* @__PURE__ */ jsx211("div", { className: "h-12 w-12 flex-shrink-0 animate-pulse rounded bg-ods-skeleton" }),
             /* @__PURE__ */ jsxs165("div", { className: "flex-1 space-y-2", children: [
               /* @__PURE__ */ jsx211("div", { className: "h-5 w-3/4 animate-pulse rounded bg-ods-skeleton" }),
@@ -23791,8 +23884,8 @@ function VendorDetailLayoutSkeleton({ className }) {
           ] }, i)) })
         ] }),
         /* @__PURE__ */ jsxs165("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx211("div", { className: "h-8 w-80 animate-pulse rounded bg-ods-skeleton md:h-10" }),
-          /* @__PURE__ */ jsxs165("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsx211("div", { className: "h-8 w-80 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
+          /* @__PURE__ */ jsxs165("div", { className: "grid grid-cols-1 gap-6 content-lg:grid-cols-2", children: [
             /* @__PURE__ */ jsxs165("div", { className: "flex flex-col gap-6", children: [
               /* @__PURE__ */ jsx211("div", { className: "h-5 w-16 animate-pulse rounded bg-ods-skeleton" }),
               Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs165("div", { className: "flex gap-3 rounded-lg border border-ods-border bg-ods-card p-4", children: [
@@ -23816,8 +23909,8 @@ function VendorDetailLayoutSkeleton({ className }) {
           ] })
         ] }),
         /* @__PURE__ */ jsxs165("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx211("div", { className: "h-8 w-72 animate-pulse rounded bg-ods-skeleton md:h-10" }),
-          /* @__PURE__ */ jsx211("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs165("div", { className: "space-y-4 rounded-lg border border-ods-border bg-ods-card p-6", children: [
+          /* @__PURE__ */ jsx211("div", { className: "h-8 w-72 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
+          /* @__PURE__ */ jsx211("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs165("div", { className: "space-y-4 rounded-lg border border-ods-border bg-ods-card p-6", children: [
             /* @__PURE__ */ jsxs165("div", { className: "flex items-start gap-4", children: [
               /* @__PURE__ */ jsx211("div", { className: "h-16 w-16 flex-shrink-0 animate-pulse rounded-lg border border-ods-border bg-ods-bg" }),
               /* @__PURE__ */ jsxs165("div", { className: "flex-1 space-y-2", children: [
@@ -23839,7 +23932,7 @@ function VendorDetailLayoutSkeleton({ className }) {
           /* @__PURE__ */ jsx211("div", { className: "h-12 animate-pulse rounded-md bg-ods-skeleton" })
         ] }),
         /* @__PURE__ */ jsxs165("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx211("div", { className: "h-8 w-64 animate-pulse rounded bg-ods-skeleton md:h-10" }),
+          /* @__PURE__ */ jsx211("div", { className: "h-8 w-64 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
           /* @__PURE__ */ jsx211("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs165("div", { className: "flex gap-3", children: [
             /* @__PURE__ */ jsxs165("div", { className: "flex-1 overflow-hidden rounded-lg border border-ods-border bg-ods-bg", children: [
               /* @__PURE__ */ jsxs165("div", { className: "border-b border-ods-border p-3", children: [
@@ -23876,7 +23969,7 @@ function VendorDetailLayoutSkeleton({ className }) {
           ] }, i)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx211("div", { className: "hidden w-[290px] flex-shrink-0 lg:block", children: /* @__PURE__ */ jsxs165("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx211("div", { className: "hidden w-[290px] flex-shrink-0 content-lg:block", children: /* @__PURE__ */ jsxs165("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsx211("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
         /* @__PURE__ */ jsxs165("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx211("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
@@ -23912,9 +24005,9 @@ function StatsSectionSkeleton({ className, columns = 3 }) {
     "div",
     {
       className: cn(
-        "mb-12 grid gap-6 md:mb-16",
-        columns === 3 && "grid-cols-1 md:grid-cols-3",
-        columns === 4 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+        "mb-12 grid gap-6 content-md:mb-16",
+        columns === 3 && "grid-cols-1 content-md:grid-cols-3",
+        columns === 4 && "grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4",
         className
       ),
       children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx211("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6", children: /* @__PURE__ */ jsxs165("div", { className: "space-y-4", children: [
@@ -23929,66 +24022,80 @@ function StatsSectionSkeleton({ className, columns = 3 }) {
   );
 }
 function BlogCardGridSkeleton({ className }) {
-  return /* @__PURE__ */ jsx211("div", { className: cn("space-y-6", className), children: /* @__PURE__ */ jsx211(CardSkeletonGrid, { count: 4, variant: "blog", className: "grid-cols-1 md:grid-cols-2" }) });
+  return /* @__PURE__ */ jsx211("div", { className: cn("space-y-6", className), children: /* @__PURE__ */ jsx211(CardSkeletonGrid, { count: 4, variant: "blog", className: "grid-cols-1 content-md:grid-cols-2" }) });
 }
 function VendorGridSkeleton({ className }) {
-  return /* @__PURE__ */ jsx211("div", { className: cn("space-y-6", className), children: /* @__PURE__ */ jsx211(CardSkeletonGrid, { count: 12, variant: "vendor", className: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" }) });
+  return /* @__PURE__ */ jsx211("div", { className: cn("space-y-6", className), children: /* @__PURE__ */ jsx211(
+    CardSkeletonGrid,
+    {
+      count: 12,
+      variant: "vendor",
+      className: "grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-3"
+    }
+  ) });
 }
 function SlackCommunitySkeleton() {
-  return /* @__PURE__ */ jsx211("section", { className: "w-full bg-ods-bg px-4 py-12 md:px-20 md:py-20 lg:px-20", "aria-label": "Slack Community Loading", children: /* @__PURE__ */ jsxs165("div", { className: "flex w-full flex-col gap-4 md:gap-6", children: [
-    /* @__PURE__ */ jsx211("div", { className: "w-full", children: /* @__PURE__ */ jsx211("div", { className: "h-8 max-w-md animate-pulse rounded-lg bg-ods-skeleton md:h-12 lg:h-14" }) }),
-    /* @__PURE__ */ jsxs165("div", { className: "flex w-full min-w-0 flex-col gap-4 md:gap-6 lg:flex-row lg:items-start lg:justify-end", children: [
-      /* @__PURE__ */ jsx211("div", { className: "flex w-full flex-shrink-0 animate-pulse flex-col overflow-hidden rounded border border-ods-border bg-ods-bg lg:w-[290px] lg:max-w-[290px]", children: /* @__PURE__ */ jsxs165("div", { className: "space-y-4 p-4", children: [
-        /* @__PURE__ */ jsxs165("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs165("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx211("div", { className: "h-4 w-24 rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsx211("div", { className: "h-3 w-16 rounded bg-ods-skeleton" })
-          ] }),
-          /* @__PURE__ */ jsx211("div", { className: "h-3 w-32 rounded bg-ods-skeleton" })
-        ] }),
-        /* @__PURE__ */ jsxs165("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx211("div", { className: "mb-2 h-3 w-16 rounded bg-ods-skeleton" }),
-          Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs165("div", { className: "flex min-h-[48px] items-center gap-2 px-2 py-3", children: [
-            /* @__PURE__ */ jsx211("div", { className: "h-4 w-4 rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsxs165("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx211("div", { className: "mb-1 h-3 w-24 rounded bg-ods-skeleton" }),
-              /* @__PURE__ */ jsx211("div", { className: "h-2 w-16 rounded bg-ods-skeleton" })
-            ] })
-          ] }, i))
-        ] }),
-        /* @__PURE__ */ jsx211("div", { className: "mt-2 border-t border-ods-border pt-3", children: /* @__PURE__ */ jsxs165("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs165("div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ jsx211("div", { className: "h-3 w-16 rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsx211("div", { className: "h-3 w-8 rounded bg-ods-skeleton" })
-          ] }),
-          /* @__PURE__ */ jsxs165("div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ jsx211("div", { className: "h-3 w-20 rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsx211("div", { className: "h-3 w-8 rounded bg-ods-skeleton" })
-          ] })
-        ] }) })
-      ] }) }),
-      /* @__PURE__ */ jsxs165("div", { className: "flex h-[450px] min-h-[450px] min-w-0 flex-1 animate-pulse flex-col rounded-lg border border-ods-border bg-ods-card md:h-[500px] md:min-h-[500px] lg:h-[600px] lg:min-h-[600px]", children: [
-        /* @__PURE__ */ jsxs165("div", { className: "flex h-[56px] flex-shrink-0 items-center justify-between border-b border-ods-border bg-ods-bg p-4 md:h-[60px] md:p-6", children: [
-          /* @__PURE__ */ jsxs165("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx211("div", { className: "h-3 w-3 rounded bg-ods-skeleton md:h-4 md:w-4" }),
-            /* @__PURE__ */ jsx211("div", { className: "h-3 w-24 rounded bg-ods-skeleton md:h-4 md:w-32" })
-          ] }),
-          /* @__PURE__ */ jsx211("div", { className: "h-3 w-12 rounded bg-ods-skeleton md:w-16" })
-        ] }),
-        /* @__PURE__ */ jsx211("div", { className: "min-h-[280px] flex-1 space-y-3 overflow-hidden bg-ods-bg p-4 md:min-h-[320px] md:space-y-4 md:p-6 lg:min-h-[420px]", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs165("div", { className: "flex gap-2 md:gap-3", children: [
-          /* @__PURE__ */ jsx211("div", { className: "h-10 w-10 flex-shrink-0 rounded-lg bg-ods-skeleton md:h-12 md:w-12" }),
-          /* @__PURE__ */ jsxs165("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxs165("div", { className: "mb-1 flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx211("div", { className: "h-3 w-16 rounded bg-ods-skeleton md:w-20" }),
-              /* @__PURE__ */ jsx211("div", { className: "h-3 w-12 rounded bg-ods-skeleton md:w-16" })
+  return /* @__PURE__ */ jsx211(
+    "section",
+    {
+      className: "w-full bg-ods-bg px-4 py-12 content-md:px-20 content-md:py-20 content-lg:px-20",
+      "aria-label": "Slack Community Loading",
+      children: /* @__PURE__ */ jsxs165("div", { className: "flex w-full flex-col gap-4 content-md:gap-6", children: [
+        /* @__PURE__ */ jsx211("div", { className: "w-full", children: /* @__PURE__ */ jsx211("div", { className: "h-8 max-w-md animate-pulse rounded-lg bg-ods-skeleton content-md:h-12 content-lg:h-14" }) }),
+        /* @__PURE__ */ jsxs165("div", { className: "flex w-full min-w-0 flex-col gap-4 content-md:gap-6 content-lg:flex-row content-lg:items-start content-lg:justify-end", children: [
+          /* @__PURE__ */ jsx211("div", { className: "flex w-full flex-shrink-0 animate-pulse flex-col overflow-hidden rounded border border-ods-border bg-ods-bg content-lg:w-[290px] content-lg:max-w-[290px]", children: /* @__PURE__ */ jsxs165("div", { className: "space-y-4 p-4", children: [
+            /* @__PURE__ */ jsxs165("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxs165("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx211("div", { className: "h-4 w-24 rounded bg-ods-skeleton" }),
+                /* @__PURE__ */ jsx211("div", { className: "h-3 w-16 rounded bg-ods-skeleton" })
+              ] }),
+              /* @__PURE__ */ jsx211("div", { className: "h-3 w-32 rounded bg-ods-skeleton" })
+            ] }),
+            /* @__PURE__ */ jsxs165("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx211("div", { className: "mb-2 h-3 w-16 rounded bg-ods-skeleton" }),
+              Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs165("div", { className: "flex min-h-[48px] items-center gap-2 px-2 py-3", children: [
+                /* @__PURE__ */ jsx211("div", { className: "h-4 w-4 rounded bg-ods-skeleton" }),
+                /* @__PURE__ */ jsxs165("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsx211("div", { className: "mb-1 h-3 w-24 rounded bg-ods-skeleton" }),
+                  /* @__PURE__ */ jsx211("div", { className: "h-2 w-16 rounded bg-ods-skeleton" })
+                ] })
+              ] }, i))
             ] }),
-            /* @__PURE__ */ jsx211("div", { className: "h-3 w-full rounded bg-ods-skeleton md:h-4" })
+            /* @__PURE__ */ jsx211("div", { className: "mt-2 border-t border-ods-border pt-3", children: /* @__PURE__ */ jsxs165("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs165("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx211("div", { className: "h-3 w-16 rounded bg-ods-skeleton" }),
+                /* @__PURE__ */ jsx211("div", { className: "h-3 w-8 rounded bg-ods-skeleton" })
+              ] }),
+              /* @__PURE__ */ jsxs165("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx211("div", { className: "h-3 w-20 rounded bg-ods-skeleton" }),
+                /* @__PURE__ */ jsx211("div", { className: "h-3 w-8 rounded bg-ods-skeleton" })
+              ] })
+            ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsxs165("div", { className: "flex h-[450px] min-h-[450px] min-w-0 flex-1 animate-pulse flex-col rounded-lg border border-ods-border bg-ods-card content-md:h-[500px] content-md:min-h-[500px] content-lg:h-[600px] content-lg:min-h-[600px]", children: [
+            /* @__PURE__ */ jsxs165("div", { className: "flex h-[56px] flex-shrink-0 items-center justify-between border-b border-ods-border bg-ods-bg p-4 content-md:h-[60px] content-md:p-6", children: [
+              /* @__PURE__ */ jsxs165("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx211("div", { className: "h-3 w-3 rounded bg-ods-skeleton content-md:h-4 content-md:w-4" }),
+                /* @__PURE__ */ jsx211("div", { className: "h-3 w-24 rounded bg-ods-skeleton content-md:h-4 content-md:w-32" })
+              ] }),
+              /* @__PURE__ */ jsx211("div", { className: "h-3 w-12 rounded bg-ods-skeleton content-md:w-16" })
+            ] }),
+            /* @__PURE__ */ jsx211("div", { className: "min-h-[280px] flex-1 space-y-3 overflow-hidden bg-ods-bg p-4 content-md:min-h-[320px] content-md:space-y-4 content-md:p-6 content-lg:min-h-[420px]", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs165("div", { className: "flex gap-2 content-md:gap-3", children: [
+              /* @__PURE__ */ jsx211("div", { className: "h-10 w-10 flex-shrink-0 rounded-lg bg-ods-skeleton content-md:h-12 content-md:w-12" }),
+              /* @__PURE__ */ jsxs165("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsxs165("div", { className: "mb-1 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx211("div", { className: "h-3 w-16 rounded bg-ods-skeleton content-md:w-20" }),
+                  /* @__PURE__ */ jsx211("div", { className: "h-3 w-12 rounded bg-ods-skeleton content-md:w-16" })
+                ] }),
+                /* @__PURE__ */ jsx211("div", { className: "h-3 w-full rounded bg-ods-skeleton content-md:h-4" })
+              ] })
+            ] }, i)) }),
+            /* @__PURE__ */ jsx211("div", { className: "h-[72px] flex-shrink-0 border-t border-ods-border bg-ods-card p-4 content-md:h-[80px] content-md:p-6", children: /* @__PURE__ */ jsx211("div", { className: "flex items-end justify-center gap-3 content-md:justify-end", children: /* @__PURE__ */ jsx211("div", { className: "h-10 w-28 rounded-lg bg-ods-skeleton content-md:h-12 content-md:w-32" }) }) })
           ] })
-        ] }, i)) }),
-        /* @__PURE__ */ jsx211("div", { className: "h-[72px] flex-shrink-0 border-t border-ods-border bg-ods-card p-4 md:h-[80px] md:p-6", children: /* @__PURE__ */ jsx211("div", { className: "flex items-end justify-center gap-3 md:justify-end", children: /* @__PURE__ */ jsx211("div", { className: "h-10 w-28 rounded-lg bg-ods-skeleton md:h-12 md:w-32" }) }) })
+        ] })
       ] })
-    ] })
-  ] }) });
+    }
+  );
 }
 
 // src/components/content-loading-container.tsx
@@ -23998,7 +24105,7 @@ function ContentLoadingContainer({
   children,
   skeletonComponent,
   className,
-  minHeight = "min-h-[300px] md:min-h-[800px]",
+  minHeight = "min-h-[300px] content-md:min-h-[800px]",
   loadingOpacity = 1,
   transitionDuration = 300
 }) {
@@ -24050,7 +24157,7 @@ function useContentLoading(isLoading) {
     return contentType === "vendor" ? 12 : 6;
   };
   const getMinHeight = (contentType) => {
-    return contentType === "vendor" ? "min-h-[400px] md:min-h-[900px]" : "min-h-[300px] md:min-h-[800px]";
+    return contentType === "vendor" ? "min-h-[400px] content-md:min-h-[900px]" : "min-h-[300px] content-md:min-h-[800px]";
   };
   return {
     containerProps,
@@ -24074,7 +24181,7 @@ function ListSkeleton({
   return /* @__PURE__ */ jsx213("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxs167("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsxs167("div", { className: "flex items-center gap-3", children: [
       showIcons && /* @__PURE__ */ jsx213(MediaSkeleton.Icon, { size: "sm" }),
-      /* @__PURE__ */ jsx213(TextSkeleton.Body, { className: "w-32 md:w-48" })
+      /* @__PURE__ */ jsx213(TextSkeleton.Body, { className: "w-32 content-md:w-48" })
     ] }),
     showActions && /* @__PURE__ */ jsxs167("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx213(TextSkeleton.Caption, { className: "w-8" }),
@@ -24121,10 +24228,10 @@ function NavigationSkeleton({
   return /* @__PURE__ */ jsx213(
     "nav",
     {
-      className: cn("flex gap-4 md:gap-6", !horizontal && "flex-col", className),
+      className: cn("flex gap-4 content-md:gap-6", !horizontal && "flex-col", className),
       role: "status",
       "aria-label": "Loading navigation",
-      children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx213(TextSkeleton.Body, { className: "w-16 md:w-20" }, index))
+      children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx213(TextSkeleton.Body, { className: "w-16 content-md:w-20" }, index))
     }
   );
 }
@@ -24242,9 +24349,9 @@ function PricingSkeleton({ className, plans = 3 }) {
     {
       className: cn(
         "grid gap-6",
-        plans === 2 && "grid-cols-1 md:grid-cols-2",
-        plans === 3 && "grid-cols-1 md:grid-cols-3",
-        plans === 4 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+        plans === 2 && "grid-cols-1 content-md:grid-cols-2",
+        plans === 3 && "grid-cols-1 content-md:grid-cols-3",
+        plans === 4 && "grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4",
         className
       ),
       children: Array.from({ length: plans }).map((_, index) => /* @__PURE__ */ jsx213("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6", children: /* @__PURE__ */ jsxs167("div", { className: "space-y-4", children: [
@@ -24288,15 +24395,15 @@ function MspProfileFormSkeleton({ className, fields = 4 }) {
   return /* @__PURE__ */ jsxs169(
     "div",
     {
-      className: cn("grid grid-cols-1 items-stretch gap-6 md:grid-cols-2", className),
+      className: cn("grid grid-cols-1 items-stretch gap-6 content-md:grid-cols-2", className),
       role: "status",
       "aria-label": "Loading MSP profile form",
       children: [
         /* @__PURE__ */ jsxs169("div", { className: "flex h-full flex-col space-y-2", children: [
           /* @__PURE__ */ jsx215(TextSkeleton.Body, { className: "w-28" }),
-          /* @__PURE__ */ jsx215("div", { className: "min-h-[180px] flex-1 md:min-h-full", children: /* @__PURE__ */ jsx215(UnifiedSkeleton, { className: "h-full w-full rounded-lg", "aria-label": "Loading company logo" }) })
+          /* @__PURE__ */ jsx215("div", { className: "min-h-[180px] flex-1 content-md:min-h-full", children: /* @__PURE__ */ jsx215(UnifiedSkeleton, { className: "h-full w-full rounded-lg", "aria-label": "Loading company logo" }) })
         ] }),
-        /* @__PURE__ */ jsx215("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: Array.from({ length: fields }).map((_, idx) => /* @__PURE__ */ jsxs169("div", { className: "flex flex-col space-y-2", children: [
+        /* @__PURE__ */ jsx215("div", { className: "grid grid-cols-1 gap-4 content-md:grid-cols-2", children: Array.from({ length: fields }).map((_, idx) => /* @__PURE__ */ jsxs169("div", { className: "flex flex-col space-y-2", children: [
           /* @__PURE__ */ jsx215(TextSkeleton.Body, { className: "w-40" }),
           /* @__PURE__ */ jsx215(InteractiveSkeleton.Input, {})
         ] }, idx)) })
@@ -24346,7 +24453,7 @@ function CategoryVendorSelectorSkeleton({ subcategories = 3, className }) {
         ] }),
         /* @__PURE__ */ jsx217("div", { className: "space-y-6", children: Array.from({ length: subcategories }).map((_, idx) => /* @__PURE__ */ jsxs171("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx217(TextSkeleton.Subheading, { className: "w-1/3" }),
-          /* @__PURE__ */ jsx217("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3", children: Array.from({ length: 2 }).map((__, j) => /* @__PURE__ */ jsx217(UnifiedSkeleton, { className: "h-20 rounded-lg" }, j)) })
+          /* @__PURE__ */ jsx217("div", { className: "grid grid-cols-2 gap-4 content-md:grid-cols-3", children: Array.from({ length: 2 }).map((__, j) => /* @__PURE__ */ jsx217(UnifiedSkeleton, { className: "h-20 rounded-lg" }, j)) })
         ] }, idx)) })
       ]
     }
@@ -24373,13 +24480,13 @@ function WizardLayoutSkeleton({ steps = 6, className }) {
 import { jsx as jsx219, jsxs as jsxs173 } from "react/jsx-runtime";
 function MarginReportSkeleton({ animate = true, description, overlayContent }) {
   return /* @__PURE__ */ jsxs173("main", { className: `bg-ods-bg ${animate ? "animate-pulse" : ""} relative min-h-screen`, children: [
-    /* @__PURE__ */ jsxs173("div", { className: "mx-auto max-w-[1920px] space-y-10 px-6 py-6 md:px-20 md:py-10", children: [
+    /* @__PURE__ */ jsxs173("div", { className: "mx-auto max-w-[1920px] space-y-10 px-6 py-6 content-md:px-20 content-md:py-10", children: [
       /* @__PURE__ */ jsxs173("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx219("div", { className: "h-10 w-72 rounded bg-ods-skeleton" }),
         /* @__PURE__ */ jsx219("div", { className: "h-4 w-80 rounded bg-ods-skeleton" })
       ] }),
-      /* @__PURE__ */ jsx219("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx219("div", { className: "h-32 rounded border border-ods-border bg-ods-card" }, i)) }),
-      /* @__PURE__ */ jsxs173("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx219("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx219("div", { className: "h-32 rounded border border-ods-border bg-ods-card" }, i)) }),
+      /* @__PURE__ */ jsxs173("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2", children: [
         /* @__PURE__ */ jsxs173("div", { className: "flex animate-pulse items-center gap-4 rounded-lg border border-ods-border bg-ods-card p-6", children: [
           /* @__PURE__ */ jsx219("div", { className: "h-14 w-14 rounded-lg bg-ods-skeleton" }),
           /* @__PURE__ */ jsxs173("div", { className: "flex-1 space-y-2", children: [
@@ -24401,7 +24508,7 @@ function MarginReportSkeleton({ animate = true, description, overlayContent }) {
           /* @__PURE__ */ jsx219("div", { className: "mt-4 h-4 w-40 rounded bg-ods-skeleton" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx219("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: ["Commercial Stack", "Open-Source Stack"].map((label, idx) => /* @__PURE__ */ jsxs173(
+      /* @__PURE__ */ jsx219("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2", children: ["Commercial Stack", "Open-Source Stack"].map((label, idx) => /* @__PURE__ */ jsxs173(
         "div",
         {
           className: "flex animate-pulse flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-card",
@@ -24422,7 +24529,7 @@ function MarginReportSkeleton({ animate = true, description, overlayContent }) {
                     /* @__PURE__ */ jsx219("div", { className: "h-12 w-12 flex-shrink-0 rounded-lg bg-ods-skeleton" }),
                     /* @__PURE__ */ jsxs173("div", { className: "flex min-w-0 flex-col", children: [
                       /* @__PURE__ */ jsx219("div", { className: "h-4 w-32 rounded bg-ods-skeleton" }),
-                      /* @__PURE__ */ jsx219("div", { className: "mt-1 hidden h-3 w-24 rounded bg-ods-skeleton md:block" })
+                      /* @__PURE__ */ jsx219("div", { className: "mt-1 hidden h-3 w-24 rounded bg-ods-skeleton content-md:block" })
                     ] })
                   ] }),
                   /* @__PURE__ */ jsxs173("div", { className: "flex flex-shrink-0 items-center gap-1", children: [
@@ -24438,7 +24545,7 @@ function MarginReportSkeleton({ animate = true, description, overlayContent }) {
         idx
       )) }),
       /* @__PURE__ */ jsx219("div", { className: "h-6 w-60 rounded bg-ods-skeleton" }),
-      /* @__PURE__ */ jsx219("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx219("div", { className: "h-48 rounded border border-ods-border bg-ods-card" }, i)) }),
+      /* @__PURE__ */ jsx219("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx219("div", { className: "h-48 rounded border border-ods-border bg-ods-card" }, i)) }),
       /* @__PURE__ */ jsxs173("div", { className: "space-y-6 rounded-3xl border border-ods-border p-8", children: [
         /* @__PURE__ */ jsxs173("div", { className: "flex items-start gap-6", children: [
           /* @__PURE__ */ jsxs173("div", { className: "min-w-0 flex-1 space-y-2", children: [
@@ -24447,7 +24554,7 @@ function MarginReportSkeleton({ animate = true, description, overlayContent }) {
           ] }),
           /* @__PURE__ */ jsx219("div", { className: "h-12 w-12 shrink-0 rounded-md bg-ods-skeleton" })
         ] }),
-        /* @__PURE__ */ jsx219("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx219("div", { className: "h-32 rounded border border-ods-border bg-ods-card" }, i)) })
+        /* @__PURE__ */ jsx219("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx219("div", { className: "h-32 rounded border border-ods-border bg-ods-card" }, i)) })
       ] })
     ] }),
     overlayContent && /* @__PURE__ */ jsx219("div", { className: "pointer-events-none absolute inset-0 z-10 rounded-lg bg-ods-card/80", children: /* @__PURE__ */ jsxs173("div", { className: "pointer-events-auto fixed left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-4 px-4 text-center", children: [
@@ -24627,7 +24734,7 @@ var SkeletonPresets = {
   /**
    * Vendor grid skeleton (specific to the app)
    */
-  VendorGrid: ({ items = 6 }) => /* @__PURE__ */ jsx221("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs175("div", { className: "space-y-3 rounded-lg border border-ods-border bg-ods-card p-4", children: [
+  VendorGrid: ({ items = 6 }) => /* @__PURE__ */ jsx221("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs175("div", { className: "space-y-3 rounded-lg border border-ods-border bg-ods-card p-4", children: [
     /* @__PURE__ */ jsxs175("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx221(DynamicSkeleton, { variant: "avatar", size: "md" }),
       /* @__PURE__ */ jsxs175("div", { className: "flex-1", children: [
@@ -24765,7 +24872,7 @@ function OrganizationCardSkeleton({
           /* @__PURE__ */ jsx223(TextSkeleton.Body, { className: "w-2/3" })
         ] }) }),
         showFooter && /* @__PURE__ */ jsxs176("div", { className: "flex w-full min-w-0 items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsxs176("div", { className: "flex min-w-0 flex-shrink items-center gap-3 md:gap-4", children: [
+          /* @__PURE__ */ jsxs176("div", { className: "flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4", children: [
             /* @__PURE__ */ jsxs176("div", { className: "flex flex-shrink-0 items-center gap-1", children: [
               /* @__PURE__ */ jsx223(MediaSkeleton.Icon, { size: "sm", className: "h-5 w-5" }),
               /* @__PURE__ */ jsx223(TextSkeleton.Caption, { className: "w-8" })
@@ -24794,7 +24901,7 @@ function OrganizationCardSkeletonGrid({
   return /* @__PURE__ */ jsx223(
     "div",
     {
-      className: cn("grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3", className),
+      className: cn("grid grid-cols-1 gap-4 content-md:grid-cols-2 content-md:gap-6 content-lg:grid-cols-3", className),
       role: "status",
       "aria-label": `Loading ${count} organization cards`,
       children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx223(
@@ -24842,7 +24949,7 @@ function DeviceCardSkeletonGrid({ count = 12, className }) {
   return /* @__PURE__ */ jsx224(
     "div",
     {
-      className: cn("grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4", className),
+      className: cn("grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-4", className),
       role: "status",
       "aria-label": `Loading ${count} device cards`,
       children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx224(DeviceCardSkeleton, {}, index))
@@ -25088,7 +25195,7 @@ var SelectButton = React12.forwardRef(
         disabled,
         onClick,
         className: cn(
-          "group flex h-11 items-center gap-1 rounded-[6px] border px-3 py-3 transition-colors duration-200 md:h-16 md:gap-2 md:px-4",
+          "group flex h-11 items-center gap-1 rounded-[6px] border px-3 py-3 transition-colors duration-200 content-md:h-16 content-md:gap-2 content-md:px-4",
           "w-full text-left font-body",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
           "disabled:pointer-events-none disabled:opacity-50",
@@ -25103,7 +25210,7 @@ var SelectButton = React12.forwardRef(
             "span",
             {
               className: cn(
-                "flex size-4 shrink-0 items-center justify-center md:size-6",
+                "flex size-4 shrink-0 items-center justify-center content-md:size-6",
                 selected ? "text-ods-accent" : "text-ods-text-secondary"
               ),
               children: icon
@@ -25126,7 +25233,7 @@ var SelectButton = React12.forwardRef(
               "span",
               {
                 className: cn(
-                  "hidden truncate text-h6 md:flex",
+                  "hidden truncate text-h6 content-md:flex",
                   selected ? "text-ods-accent" : "text-ods-text-secondary"
                 ),
                 title: description,
@@ -25135,7 +25242,7 @@ var SelectButton = React12.forwardRef(
             )
           ] }),
           tag && /* @__PURE__ */ jsx226(Tag, { variant: tagVariant, className: "shrink-0", label: tag }),
-          selected && /* @__PURE__ */ jsx226(CheckCircleIcon, { className: "size-4 shrink-0 text-ods-accent md:size-6" })
+          selected && /* @__PURE__ */ jsx226(CheckCircleIcon, { className: "size-4 shrink-0 text-ods-accent content-md:size-6" })
         ]
       }
     );
@@ -25243,7 +25350,7 @@ function SEOEditorPreview({
   };
   return /* @__PURE__ */ jsxs181("div", { className: cn("space-y-6 rounded-lg border border-ods-border bg-ods-card p-6", className), children: [
     /* @__PURE__ */ jsx228("h3", { className: "text-ods-text-primary text-h5", children: "SEO & Open Graph" }),
-    /* @__PURE__ */ jsxs181("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs181("div", { className: "grid grid-cols-1 gap-4 content-lg:grid-cols-2", children: [
       /* @__PURE__ */ jsxs181("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx228(
           Field,
@@ -25315,7 +25422,7 @@ function SEOEditorPreview({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs181("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs181("div", { className: "grid grid-cols-1 gap-4 content-lg:grid-cols-2", children: [
       /* @__PURE__ */ jsxs181("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx228(
           Field,
@@ -28089,12 +28196,12 @@ var PolicyRow = ({ policy, categoryId, editMode, onPermissionChange }) => {
   const handleChange = (level) => {
     if (level) onPermissionChange(categoryId, policy.id, level);
   };
-  return /* @__PURE__ */ jsxs202("div", { className: "flex items-start gap-[var(--spacing-system-m)] border-b border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] last:border-b-0 md:items-center", children: [
+  return /* @__PURE__ */ jsxs202("div", { className: "flex items-start gap-[var(--spacing-system-m)] border-b border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] last:border-b-0 content-md:items-center", children: [
     /* @__PURE__ */ jsx255("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-bg", children: /* @__PURE__ */ jsx255(ToolIcon, { toolType: policy.toolName, size: 16 }) }),
     /* @__PURE__ */ jsxs202("div", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsx255("p", { className: "truncate text-ods-text-primary text-h4", title: policy.name, children: policy.name }),
       /* @__PURE__ */ jsx255("p", { className: "break-all text-ods-text-secondary text-h6", children: policy.commandPattern }),
-      editMode ? /* @__PURE__ */ jsx255("div", { className: "mt-[var(--spacing-system-xsf)] md:hidden", children: /* @__PURE__ */ jsx255(
+      editMode ? /* @__PURE__ */ jsx255("div", { className: "mt-[var(--spacing-system-xsf)] content-md:hidden", children: /* @__PURE__ */ jsx255(
         ApprovalLevelDropdown,
         {
           value: policy.approvalLevel,
@@ -28102,9 +28209,9 @@ var PolicyRow = ({ policy, categoryId, editMode, onPermissionChange }) => {
           triggerClassName: "w-full",
           contentClassName: POLICY_LEVEL_WIDTH
         }
-      ) }) : policy.approvalLevel ? /* @__PURE__ */ jsx255("span", { className: "text-ods-text-primary text-h4 md:hidden", children: getApprovalLevelLabel(policy.approvalLevel) }) : null
+      ) }) : policy.approvalLevel ? /* @__PURE__ */ jsx255("span", { className: "text-ods-text-primary text-h4 content-md:hidden", children: getApprovalLevelLabel(policy.approvalLevel) }) : null
     ] }),
-    /* @__PURE__ */ jsx255("div", { className: "hidden shrink-0 md:block", children: editMode ? /* @__PURE__ */ jsx255(
+    /* @__PURE__ */ jsx255("div", { className: "hidden shrink-0 content-md:block", children: editMode ? /* @__PURE__ */ jsx255(
       ApprovalLevelDropdown,
       {
         value: policy.approvalLevel,
@@ -28132,7 +28239,7 @@ var CategorySection = ({ category, editMode, isExpanded, bulkLevel, onToggle, on
               category.policies.length,
               " Configurations"
             ] }),
-            editMode && /* @__PURE__ */ jsx255("div", { className: "mt-[var(--spacing-system-xsf)] md:hidden", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx255(
+            editMode && /* @__PURE__ */ jsx255("div", { className: "mt-[var(--spacing-system-xsf)] content-md:hidden", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx255(
               ApprovalLevelDropdown,
               {
                 value: bulkLevel,
@@ -28143,7 +28250,7 @@ var CategorySection = ({ category, editMode, isExpanded, bulkLevel, onToggle, on
               }
             ) })
           ] }),
-          editMode ? /* @__PURE__ */ jsx255("div", { className: "hidden shrink-0 md:block", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx255(
+          editMode ? /* @__PURE__ */ jsx255("div", { className: "hidden shrink-0 content-md:block", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx255(
             ApprovalLevelDropdown,
             {
               value: bulkLevel,
@@ -28156,7 +28263,7 @@ var CategorySection = ({ category, editMode, isExpanded, bulkLevel, onToggle, on
             "div",
             {
               className: cn(
-                "hidden shrink-0 px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] md:block",
+                "hidden shrink-0 px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] content-md:block",
                 CATEGORY_LEVEL_WIDTH
               )
             }
@@ -28452,7 +28559,7 @@ function WaitlistForm({
               disabled: isSubmitting,
               leftIcon: /* @__PURE__ */ jsx256(OpenFrameLogo, {}),
               onClick: handleSubmit,
-              className: "w-full md:w-auto",
+              className: "w-full content-md:w-auto",
               children: isSuccess ? successLabel : submitLabel
             }
           )
@@ -28823,15 +28930,7 @@ var appLayoutDrawerPanelVariants = cva7(
 );
 var HORIZONTAL_SIDES = /* @__PURE__ */ new Set(["left", "right"]);
 var PERSIST_CLOSED_HOLD = "data-[state=closed]:fill-mode-forwards";
-function useContainedResizableSize({
-  enabled,
-  isHorizontal,
-  minSize,
-  maxSize,
-  defaultSize,
-  storageKey,
-  container
-}) {
+function useContainerExtent(enabled, isHorizontal, container) {
   const [available, setAvailable] = useState69(0);
   useEffect39(() => {
     if (!enabled || !container) return void 0;
@@ -28843,147 +28942,7 @@ function useContainedResizableSize({
     ro.observe(container);
     return () => ro.disconnect();
   }, [enabled, container, isHorizontal]);
-  const clampToContainer = useCallback24(
-    (value) => {
-      const effectiveMax = available > 0 ? Math.min(maxSize, available - 40) : maxSize;
-      return clamp(value, minSize, Math.max(minSize, effectiveMax));
-    },
-    [available, minSize, maxSize]
-  );
-  const readInitial = useCallback24(() => {
-    if (!enabled) return defaultSize;
-    if (typeof window === "undefined") return defaultSize;
-    if (!storageKey) return defaultSize;
-    try {
-      const raw = window.localStorage.getItem(storageKey);
-      if (!raw) return defaultSize;
-      const parsed = parseFloat(raw);
-      if (!Number.isFinite(parsed)) return defaultSize;
-      return parsed;
-    } catch {
-      return defaultSize;
-    }
-  }, [enabled, storageKey, defaultSize]);
-  const [rawSize, setSizeRaw] = useState69(readInitial);
-  const size = enabled ? clampToContainer(rawSize) : rawSize;
-  const setSize = useCallback24((next) => setSizeRaw(clampToContainer(next)), [clampToContainer]);
-  useEffect39(() => {
-    if (!enabled || !storageKey || typeof window === "undefined") return;
-    try {
-      window.localStorage.setItem(storageKey, String(Math.round(size)));
-    } catch {
-    }
-  }, [enabled, size, storageKey]);
-  return { size, setSize, clampSize: clampToContainer };
-}
-function finishDrag(startRef, dragSizeRef, commit) {
-  if (!startRef.current) return;
-  startRef.current = null;
-  if (dragSizeRef.current !== null) commit(dragSizeRef.current);
-  dragSizeRef.current = null;
-  document.body.style.cursor = "";
-  document.body.style.userSelect = "";
-}
-function AppLayoutDrawerResizeHandle({
-  side,
-  size,
-  minSize,
-  maxSize,
-  onSize,
-  clampSize,
-  panelRef,
-  ariaLabel
-}) {
-  const isHorizontal = HORIZONTAL_SIDES.has(side);
-  const startRef = useRef37(null);
-  const dragSizeRef = useRef37(null);
-  const onSizeRef = useRef37(onSize);
-  useEffect39(() => {
-    onSizeRef.current = onSize;
-  }, [onSize]);
-  useEffect39(() => () => finishDrag(startRef, dragSizeRef, onSizeRef.current), []);
-  const direction = side === "right" || side === "bottom" ? -1 : 1;
-  const handlePointerDown = (e) => {
-    if (e.button !== 0 && e.pointerType === "mouse") return;
-    e.preventDefault();
-    startRef.current = { x: e.clientX, y: e.clientY, size };
-    e.currentTarget.setPointerCapture(e.pointerId);
-    document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
-    document.body.style.userSelect = "none";
-  };
-  const handlePointerMove = (e) => {
-    const start = startRef.current;
-    const panel = panelRef.current;
-    if (!start || !panel) return;
-    const delta = isHorizontal ? e.clientX - start.x : e.clientY - start.y;
-    const next = clampSize(start.size + delta * direction);
-    dragSizeRef.current = next;
-    panel.style[isHorizontal ? "width" : "height"] = `${next}px`;
-    e.currentTarget.setAttribute("aria-valuenow", String(Math.round(next)));
-  };
-  const endDrag = (e) => {
-    if (!startRef.current) return;
-    finishDrag(startRef, dragSizeRef, onSize);
-    try {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    } catch {
-    }
-  };
-  const handleKeyDown = (e) => {
-    const step = e.shiftKey ? 40 : 16;
-    if (isHorizontal) {
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        onSize(size + step * (side === "right" ? 1 : -1));
-      } else if (e.key === "ArrowRight") {
-        e.preventDefault();
-        onSize(size + step * (side === "right" ? -1 : 1));
-      }
-    } else {
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        onSize(size + step * (side === "bottom" ? 1 : -1));
-      } else if (e.key === "ArrowDown") {
-        e.preventDefault();
-        onSize(size + step * (side === "bottom" ? -1 : 1));
-      }
-    }
-    if (e.key === "Home") {
-      e.preventDefault();
-      onSize(minSize);
-    } else if (e.key === "End") {
-      e.preventDefault();
-      onSize(maxSize);
-    }
-  };
-  const trackPosition = side === "right" ? "right-full top-4 bottom-4 w-6 items-center justify-end pr-1" : side === "left" ? "left-full top-4 bottom-4 w-6 items-center justify-start pl-1" : side === "bottom" ? "bottom-full left-4 right-4 h-6 justify-center items-end pb-1" : "top-full left-4 right-4 h-6 justify-center items-start pt-1";
-  const cursorClass = isHorizontal ? "cursor-col-resize" : "cursor-row-resize";
-  const gripClass = isHorizontal ? "h-10 w-1" : "w-10 h-1";
-  return /* @__PURE__ */ jsx258(
-    "div",
-    {
-      role: "separator",
-      tabIndex: 0,
-      "aria-orientation": isHorizontal ? "vertical" : "horizontal",
-      "aria-valuenow": Math.round(size),
-      "aria-valuemin": minSize,
-      "aria-valuemax": maxSize,
-      "aria-label": ariaLabel ?? (isHorizontal ? "Resize panel width" : "Resize panel height"),
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: endDrag,
-      onPointerCancel: endDrag,
-      onLostPointerCapture: endDrag,
-      onKeyDown: handleKeyDown,
-      className: cn(
-        "group absolute z-20 flex touch-none select-none",
-        "outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0",
-        trackPosition,
-        cursorClass
-      ),
-      children: /* @__PURE__ */ jsx258("div", { "aria-hidden": true, className: cn("rounded-full bg-ods-border", gripClass) })
-    }
-  );
+  return available;
 }
 var AppLayoutDrawerContent = forwardRef30(
   ({
@@ -29078,14 +29037,15 @@ var AppLayoutDrawerContent = forwardRef30(
       return () => mq.removeEventListener("change", update);
     }, [mobileBreakpoint]);
     const panelRef = useRef37(null);
-    const { size, setSize, clampSize } = useContainedResizableSize({
+    const available = useContainerExtent(resizable, isHorizontal, portalContainer);
+    const { size, setSize, clampSize } = useResizablePanelSize({
       enabled: resizable,
-      isHorizontal,
       minSize,
       maxSize,
       defaultSize: initialSize,
-      storageKey,
-      container: portalContainer
+      available,
+      reserve: 40,
+      storageKey
     });
     const applyInlineSize = resizable && !isMobile;
     const sizeStyle = applyInlineSize ? isHorizontal ? { width: size } : { height: size } : {};
@@ -29139,8 +29099,9 @@ var AppLayoutDrawerContent = forwardRef30(
           ...props,
           children: [
             applyInlineSize && (!persist || open) ? /* @__PURE__ */ jsx258(
-              AppLayoutDrawerResizeHandle,
+              PanelResizeHandle,
               {
+                variant: "inLayout",
                 side: resolvedSide,
                 size,
                 minSize,
@@ -31438,7 +31399,7 @@ function BoardColumnHeader({
   const count = column.total ?? column.tickets.length;
   const tagStatus = column.statusKey ?? column.id;
   const useStatusVariant = resolveTicketStatus(tagStatus) !== null;
-  const actionClass = "h-8 w-8 p-0 md:h-8 md:w-8";
+  const actionClass = "h-8 w-8 p-0 content-md:h-8 content-md:w-8";
   if (collapsed) {
     return /* @__PURE__ */ jsxs221("div", { className: "flex h-full flex-col items-center gap-[var(--spacing-system-xsf)]", children: [
       onToggleCollapse && /* @__PURE__ */ jsx278(