@the-portland-company/shell 0.68.0 → 0.69.0

package/dist/app-chrome.cjs

@@ -59,6 +59,21 @@ function resolveBrandGlyph(name) {
   return GLYPHS[name.trim().toLowerCase()] ?? null;
 }
 
+// src/lib/deprecation.ts
+var warned = /* @__PURE__ */ new Set();
+function isDev() {
+  try {
+    return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+function warnDeprecated(key, message) {
+  if (!isDev() || warned.has(key)) return;
+  warned.add(key);
+  console.warn(`[@the-portland-company/shell] ${message}`);
+}
+
 // src/native/orgFilter.ts
 var ORG_FILTER_THRESHOLD = 8;
 function filterOrgs(orgs, query) {
@@ -215,7 +230,7 @@ function useAnyTopBarPanelOpen() {
 }
 function TopBarCountBadge({ count }) {
   if (!(count > 0)) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-[5px] -right-[5px] flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--chrome-danger)] px-1 text-[10px] font-bold leading-4 text-white", children: count > 99 ? "99+" : count });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-[5px] -right-[5px] flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--chrome-danger)] px-1 text-[10px] font-bold leading-4 text-[#FFFFFF]", children: count > 99 ? "99+" : count });
 }
 function TopBarTooltip({
   title,
@@ -285,7 +300,7 @@ function NavThemeControl({
             onClick: () => onChange(opt.value),
             className: [
               "flex-1 px-3 py-1.5 text-xs font-semibold transition",
-              value === opt.value ? "bg-[color:var(--color-accent)] text-white" : "text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]"
+              value === opt.value ? "bg-[color:var(--color-accent)] text-[#FFFFFF]" : "text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]"
             ].join(" "),
             children: opt.label
           },
@@ -629,7 +644,7 @@ function LowFuelHint({ lowFuel, orgId }) {
     "div",
     {
       role: "status",
-      className: "absolute right-0 top-[calc(100%+10px)] z-50 w-60 rounded-lg border border-[color:var(--chrome-danger)] bg-[color:var(--chrome-danger)] px-3 py-2 text-white shadow-[var(--shadow-soft)]",
+      className: "absolute right-0 top-[calc(100%+10px)] z-50 w-60 rounded-lg border border-[color:var(--chrome-danger)] bg-[color:var(--chrome-danger)] px-3 py-2 text-[#FFFFFF] shadow-[var(--shadow-soft)]",
       onClick: (e) => e.stopPropagation(),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -657,7 +672,7 @@ function LowFuelHint({ lowFuel, orgId }) {
               type: "button",
               "aria-label": "Dismiss low fuel notice",
               onClick: dismiss,
-              className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-white/90 transition hover:bg-white/20",
+              className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[#FFFFFF]/90 transition hover:bg-[#FFFFFF]/20",
               children: /* @__PURE__ */ jsxRuntime.jsx(XGlyph, {})
             }
           )
@@ -841,7 +856,7 @@ function NewReplyToast({
           activate();
         }
       },
-      className: "absolute right-[-6px] top-[calc(100%+12px)] z-50 min-w-[240px] max-w-[320px] cursor-pointer rounded-xl bg-[#161616] px-4 py-3 text-white shadow-[var(--shadow-soft)]",
+      className: "absolute right-[-6px] top-[calc(100%+12px)] z-50 min-w-[240px] max-w-[320px] cursor-pointer rounded-xl bg-[#161616] px-4 py-3 text-[#FFFFFF] shadow-[var(--shadow-soft)]",
       style: {
         opacity: visible ? 1 : 0,
         transform: visible ? "translateY(0px)" : "translateY(-4px)",
@@ -865,7 +880,7 @@ function NewReplyToast({
               setVisible(false);
               onClose();
             },
-            className: "absolute right-2 top-2 flex h-5 w-5 items-center justify-center rounded-full text-white opacity-60 transition hover:bg-white/10 hover:opacity-100",
+            className: "absolute right-2 top-2 flex h-5 w-5 items-center justify-center rounded-full text-[#FFFFFF] opacity-60 transition hover:bg-[#FFFFFF]/10 hover:opacity-100",
             children: /* @__PURE__ */ jsxRuntime.jsx(XGlyph, { size: 12 })
           }
         ),
@@ -880,7 +895,7 @@ function NewReplyToast({
               setVisible(false);
               onSilence();
             },
-            className: "mt-2 inline-flex items-center gap-1 text-[11px] font-semibold text-white opacity-60 transition hover:opacity-100",
+            className: "mt-2 inline-flex items-center gap-1 text-[11px] font-semibold text-[#FFFFFF] opacity-60 transition hover:opacity-100",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(BellOffGlyph, { size: 12 }),
               "Silence notifications"
@@ -1253,7 +1268,7 @@ function SupportAction({ orgId } = {}) {
                 {
                   type: "button",
                   onClick: close,
-                  className: "rounded-full bg-[color:var(--color-accent)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90",
+                  className: "rounded-full bg-[color:var(--color-accent)] px-4 py-2 text-sm font-semibold text-[#FFFFFF] hover:opacity-90",
                   children: "Done"
                 }
               ) })
@@ -1313,7 +1328,7 @@ function SupportAction({ orgId } = {}) {
                     type: "button",
                     onClick: submit,
                     disabled: !message.trim() || state === "sending",
-                    className: "rounded-full bg-[color:var(--color-accent)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
+                    className: "rounded-full bg-[color:var(--color-accent)] px-4 py-2 text-sm font-semibold text-[#FFFFFF] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
                     children: state === "sending" ? "Sending\u2026" : "Send request"
                   }
                 )
@@ -1549,7 +1564,7 @@ function SpecOverlayAction({ orgId, orgName } = {}) {
             "span",
             {
               className: [
-                "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-normal leading-none text-white",
+                "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-normal leading-none text-[#FFFFFF]",
                 status && status.matched ? status.passed ? "bg-[color:var(--chrome-success,#2f855a)]" : "bg-[color:var(--chrome-danger)]" : "bg-[color:var(--muted)]"
               ].join(" "),
               children: badgeLabel
@@ -2150,6 +2165,24 @@ function envChipClasses(label) {
   return "bg-[rgba(107,114,128,0.16)] text-[#6b7280]";
 }
 var ORG_PILL_DEFAULT = "var(--color-accent)";
+var RailCollapsibleContext = react.createContext(false);
+function useRailCollapse() {
+  const collapsible = react.useContext(RailCollapsibleContext);
+  return (cls) => collapsible ? cls : "";
+}
+function OrgIconMark({ org, logoSrc }) {
+  const rc = useRailCollapse();
+  const src = resolveOrgLogoUrl(org.iconUrl) ?? logoSrc;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-rail-org-mark": "",
+      className: `hidden h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-[5px] bg-[#FFFFFF] text-[11px] font-bold text-neutral-800 ${rc("max-md:flex")}`,
+      children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", className: "max-h-full max-w-full object-contain" }) : (org.name ?? "Org").slice(0, 2).toUpperCase()
+    }
+  );
+}
 function NavSidebar({
   pathname,
   brand,
@@ -2162,6 +2195,8 @@ function NavSidebar({
   onClose
 }) {
   const Link = linkComponent ?? DefaultLink;
+  const collapsible = !open;
+  const rc = (cls) => collapsible ? cls : "";
   const asideRef = react.useRef(null);
   const closeButtonRef = react.useRef(null);
   const previouslyFocusedRef = react.useRef(null);
@@ -2228,12 +2263,12 @@ function NavSidebar({
     setOpenGroup(activeGroupKey);
   }, [activeGroupKey]);
   const toggleGroup = (key) => setOpenGroup((prev) => prev === key ? null : key);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(RailCollapsibleContext.Provider, { value: collapsible, children: [
     open ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         "aria-hidden": true,
-        className: "fixed inset-0 z-40 bg-black/40 lg:hidden",
+        className: "fixed inset-0 z-40 bg-black/40 md:hidden",
         onClick: onClose
       }
     ) : null,
@@ -2246,8 +2281,10 @@ function NavSidebar({
         "aria-modal": open ? "true" : void 0,
         "aria-label": open ? "Navigation" : void 0,
         className: clsx__default.default(
-          "fixed inset-y-0 left-0 w-[var(--sidebar-width,236px)] flex-col border-r border-[color:var(--sidebar-line,var(--line))] bg-[color:var(--sidebar-bg,var(--nav-surface))] lg:flex",
-          open ? "flex z-50" : "hidden z-30"
+          "fixed inset-y-0 left-0 flex flex-col border-r border-[color:var(--sidebar-line,var(--line))] bg-[color:var(--sidebar-bg,var(--nav-surface))]",
+          // Never hidden: the 64px icon rail below `md`, the full rail from
+          // `md` up, and the full rail as a drawer when expanded below `md`.
+          open ? "z-50 w-[var(--sidebar-width,236px)]" : "z-30 w-[var(--sidebar-collapsed-width,64px)] md:w-[var(--sidebar-width,236px)]"
         ),
         style: { fontFamily: 'var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif)' },
         onKeyDown: trapTab,
@@ -2262,36 +2299,62 @@ function NavSidebar({
               ref: closeButtonRef,
               onClick: onClose,
               "aria-label": "Close menu",
-              className: "absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full text-[color:var(--muted)] transition hover:bg-[color:var(--panel-elevated)] hover:text-[color:var(--foreground)] lg:hidden",
+              className: "absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full text-[color:var(--muted)] transition hover:bg-[color:var(--panel-elevated)] hover:text-[color:var(--foreground)] md:hidden",
               children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
             }
           ) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 flex-col gap-[14px] border-b border-[color:var(--sidebar-line,var(--line))] px-[18px] py-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-shrink-0 flex-col gap-[14px] border-b border-[color:var(--sidebar-line,var(--line))] px-[18px] py-4 ${rc("max-md:items-center max-md:px-[10px]")}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
               Link,
               {
                 href: brand.homeHref ?? "/",
-                className: "flex items-center gap-2.5",
-                children: brand.logoSrc ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: brand.logoSrc,
-                    alt: brand.logoAlt ?? brand.title,
-                    draggable: false,
-                    className: "h-[var(--sidebar-brand-logo-height,24px)] w-auto object-contain"
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--color-accent)] text-base font-black text-white shadow-sm", children: brand.badgeLabel }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col leading-tight", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-accent)]", children: brand.title }),
-                    brand.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]", children: brand.subtitle }) : null
+                "aria-label": brand.logoAlt ?? brand.title,
+                className: `flex items-center gap-2.5 ${rc("max-md:justify-center")}`,
+                children: [
+                  brand.logoSquareSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: brand.logoSquareSrc,
+                      alt: "",
+                      draggable: false,
+                      "data-rail-logo": "square",
+                      className: `hidden h-8 w-8 object-contain ${rc("max-md:block")}`
+                    }
+                  ) : brand.logoPending ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: `hidden h-8 w-8 ${rc("max-md:block")}` }) : null,
+                  brand.logoSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: brand.logoSrc,
+                      alt: brand.logoAlt ?? brand.title,
+                      draggable: false,
+                      "data-rail-logo": "horizontal",
+                      className: `h-[var(--sidebar-brand-logo-height,24px)] w-auto object-contain ${rc("max-md:hidden")}`
+                    }
+                  ) : brand.logoPending ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: `block h-[var(--sidebar-brand-logo-height,24px)] ${rc("max-md:hidden")}`
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: `flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--color-accent)] text-base font-black text-[#FFFFFF] shadow-sm ${brand.logoSquareSrc ? rc("max-md:hidden") : ""}`,
+                        children: brand.badgeLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex flex-col leading-tight ${rc("max-md:hidden")}`, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-accent)]", children: brand.title }),
+                      brand.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]", children: brand.subtitle }) : null
+                    ] })
                   ] })
-                ] })
+                ]
               }
             ),
-            org ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-[7px] flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
-              org.loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2.5 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 shadow-sm", children: [
+            org ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rc("max-md:flex max-md:justify-center"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mb-[7px] flex items-center justify-between ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
+              org.loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex w-full items-center gap-2.5 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 shadow-sm ${rc("max-md:w-auto max-md:border-0 max-md:bg-transparent max-md:p-0 max-md:shadow-none")}`, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
@@ -2303,7 +2366,7 @@ function NavSidebar({
                   "span",
                   {
                     "aria-hidden": true,
-                    className: "h-4 flex-1 animate-pulse rounded bg-[color:var(--panel)]"
+                    className: `h-4 flex-1 animate-pulse rounded bg-[color:var(--panel)] ${rc("max-md:hidden")}`
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading organization" })
@@ -2312,9 +2375,11 @@ function NavSidebar({
                   "summary",
                   {
                     style: orgCardStyle,
-                    className: "flex w-full cursor-pointer list-none flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))] [&::-webkit-details-marker]:hidden",
+                    title: org.name ?? void 0,
+                    className: `flex w-full cursor-pointer list-none flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))] [&::-webkit-details-marker]:hidden ${rc("max-md:w-auto max-md:items-center max-md:overflow-visible max-md:border-0 max-md:bg-transparent")}`,
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-white px-3 py-[7px]", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(OrgIconMark, { org, logoSrc: orgLogoSrc }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
                         orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsxRuntime.jsx(
                           "a",
                           {
@@ -2326,7 +2391,7 @@ function NavSidebar({
                         ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
                       ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2 ${rc("max-md:hidden")}`, children: [
                         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             "span",
@@ -2343,7 +2408,7 @@ function NavSidebar({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 right-0 z-40 mt-1 max-h-[min(60vh,520px)] overflow-y-auto rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute left-0 right-0 z-40 mt-1 max-h-[min(60vh,520px)] overflow-y-auto rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)] ${rc("max-md:right-auto max-md:w-[236px]")}`, children: [
                   shouldShowOrgFilter(org.organizations.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-[color:var(--panel-elevated)] px-2 pb-1 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                     "input",
                     {
@@ -2388,7 +2453,7 @@ function NavSidebar({
                             "span",
                             {
                               style: { backgroundColor: o.brandColor || ORG_PILL_DEFAULT },
-                              className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-full text-[10px] font-bold text-white",
+                              className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-full text-[10px] font-bold text-[#FFFFFF]",
                               children: resolveOrgLogoUrl(o.logoUrl) ? /* @__PURE__ */ jsxRuntime.jsx(
                                 "img",
                                 {
@@ -2412,9 +2477,11 @@ function NavSidebar({
                   type: "button",
                   onClick: org.onClick,
                   style: orgCardStyle,
-                  className: "flex w-full flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))]",
+                  title: org.name ?? void 0,
+                  className: `flex w-full flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))] ${rc("max-md:w-auto max-md:items-center max-md:overflow-visible max-md:border-0 max-md:bg-transparent")}`,
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-white px-3 py-[7px]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(OrgIconMark, { org, logoSrc: orgLogoSrc }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
                       orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsxRuntime.jsx(
                         "a",
                         {
@@ -2426,7 +2493,7 @@ function NavSidebar({
                       ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2 ${rc("max-md:hidden")}`, children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "span",
@@ -2444,13 +2511,13 @@ function NavSidebar({
                 }
               )
             ] }) : null,
-            mode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            mode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rc("max-md:w-full"), children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   role: "radiogroup",
                   "aria-label": "Mode",
-                  className: "flex w-full items-center gap-1 rounded-lg border border-[color:var(--border-inverse,var(--sidebar-line,var(--line)))] bg-[color:var(--mode-track-bg,var(--panel-elevated))] p-[3px]",
+                  className: `flex w-full items-center gap-1 rounded-lg border border-[color:var(--border-inverse,var(--sidebar-line,var(--line)))] bg-[color:var(--mode-track-bg,var(--panel-elevated))] p-[3px] ${rc("max-md:flex-col max-md:items-stretch")}`,
                   children: (mode.options && mode.options.length > 0 ? mode.options : [{ id: mode.label, label: mode.label, icon: ModeIcon }]).map(
                     (opt) => {
                       const selected = opt.label === mode.label;
@@ -2472,7 +2539,7 @@ function NavSidebar({
                           disabled: !available,
                           className: [
                             "flex flex-1 items-center justify-center rounded-[5px] px-[9px] py-[6px] transition",
-                            !available ? "cursor-not-allowed text-[color:var(--sidebar-text-muted,var(--muted))] opacity-35" : selected ? "bg-[color:var(--sidebar-mode-selected-bg,var(--mode-accent,var(--color-accent)))] text-[color:var(--mode-on-accent,white)]" : "text-[color:var(--sidebar-text-muted,var(--muted))] hover:bg-white/5 hover:text-[color:var(--sidebar-text,var(--foreground))]"
+                            !available ? "cursor-not-allowed text-[color:var(--sidebar-text-muted,var(--muted))] opacity-35" : selected ? "bg-[color:var(--sidebar-mode-selected-bg,var(--mode-accent,var(--color-accent)))] text-[color:var(--mode-on-accent,white)]" : "text-[color:var(--sidebar-text-muted,var(--muted))] hover:bg-[#FFFFFF]/5 hover:text-[color:var(--sidebar-text,var(--foreground))]"
                           ].join(" "),
                           children: OptIcon ? /* @__PURE__ */ jsxRuntime.jsx(OptIcon, { size: 15, className: "shrink-0" }) : null
                         },
@@ -2482,11 +2549,11 @@ function NavSidebar({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-left text-[11px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: modeCaption(mode.label) })
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mt-1.5 text-left text-[11px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] ${rc("max-md:hidden")}`, children: modeCaption(mode.label) })
             ] }) : null
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col overflow-y-auto px-[10px] py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-0.5", children: [
-            nav.groupLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${NAV_EYEBROW_CLASS} px-2 pb-1.5 pt-1`, children: nav.groupLabel }) : null,
+            nav.groupLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${NAV_EYEBROW_CLASS} px-2 pb-1.5 pt-1 ${rc("max-md:hidden")}`, children: nav.groupLabel }) : null,
             nav.items.map((item, idx) => {
               if (item.kind === "section") {
                 return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2552,7 +2619,7 @@ function NavSidebar({
               );
             })
           ] }) }),
-          footer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0 border-t border-[color:var(--sidebar-line,var(--line))] px-[14px] py-3", children: [
+          footer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex-shrink-0 border-t border-[color:var(--sidebar-line,var(--line))] px-[14px] py-3 ${rc("max-md:px-[10px]")}`, children: [
             footer.user ? /* @__PURE__ */ jsxRuntime.jsx(
               NavSidebarUserCard,
               {
@@ -2561,7 +2628,7 @@ function NavSidebar({
                 onSignOut: footer.onSignOut
               }
             ) : null,
-            footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-wrap items-center gap-[10px] text-[11px] leading-[1.2] ${footer.user ? "mt-3" : ""}`, children: footer.links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
+            footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-wrap items-center gap-[10px] text-[11px] leading-[1.2] ${footer.user ? "mt-3" : ""} ${rc("max-md:hidden")}`, children: footer.links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
               "a",
               {
                 href: safeHref(l.href),
@@ -2574,7 +2641,7 @@ function NavSidebar({
               "div",
               {
                 "data-shell-meta": true,
-                className: "mt-1.5 flex flex-col items-start gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--sidebar-meta-text,var(--sidebar-text))]",
+                className: `mt-1.5 flex flex-col items-start gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--sidebar-meta-text,var(--sidebar-text))] ${rc("max-md:hidden")}`,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2737,21 +2804,27 @@ function NavActiveRail() {
   );
 }
 function NavRowBadge({ value }) {
+  const rc = useRailCollapse();
   if (value === void 0 || value === null || value === "") return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: value });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `ml-auto shrink-0 font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] ${rc("max-md:hidden")}`, children: value });
 }
 function NavSectionRow({
   label,
   first,
   variant = "top"
 }) {
+  const rc = useRailCollapse();
+  const collapsed = variant === "sub" ? "" : first ? rc("max-md:sr-only") : rc(
+    "max-md:mx-2 max-md:my-2 max-md:h-px max-md:overflow-hidden max-md:bg-[color:var(--sidebar-line,var(--line))] max-md:p-0 max-md:text-transparent"
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
       className: [
         NAV_EYEBROW_CLASS,
         variant === "sub" ? "px-3 pb-0.5" : "px-2 pb-1.5 pt-1",
-        first ? "" : variant === "sub" ? "mt-3" : "mt-[14px]"
+        first ? "" : variant === "sub" ? "mt-3" : "mt-[14px]",
+        collapsed
       ].join(" "),
       children: label
     }
@@ -2763,6 +2836,7 @@ function NavRow({
   Link,
   variant = "top"
 }) {
+  const rc = useRailCollapse();
   const Icon = item.icon;
   const isSub = variant === "sub";
   const washActive = variant !== "top";
@@ -2770,7 +2844,7 @@ function NavRow({
   const wrapperClasses = [
     "group relative block overflow-hidden transition",
     isSub ? "rounded-md" : "rounded-[5px]",
-    active ? activeClasses : isSub ? "text-[color:var(--sidebar-text,var(--muted))] hover:text-white" : NAV_TOP_INACTIVE_CLASS
+    active ? activeClasses : isSub ? "text-[color:var(--sidebar-text,var(--muted))] hover:text-[#FFFFFF]" : NAV_TOP_INACTIVE_CLASS
   ].join(" ");
   const rowPadding = isSub ? "gap-3 px-3 py-1.5 text-[13px] font-semibold" : NAV_TOP_ROW_CLASS(active);
   const iconSize = isSub ? 16 : NAV_TOP_ICON_SIZE;
@@ -2788,9 +2862,12 @@ function NavRow({
         }
       ) : null
     ) : /* @__PURE__ */ jsxRuntime.jsx(NavActiveRail, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative z-10 flex items-center ${rowPadding}`, children: [
-      Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconSize, className: `shrink-0 ${iconClass}` }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative z-10 flex items-center ${rowPadding} ${rc("max-md:justify-center max-md:px-0")}`, children: [
+      Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconSize, className: `shrink-0 ${iconClass}` }) : (
+        // A row with no glyph still needs something on the icon rail.
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: `hidden text-[11px] font-semibold uppercase ${rc("max-md:inline")}`, children: item.label.slice(0, 2) })
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `min-w-0 flex-1 truncate ${rc("max-md:hidden")}`, children: item.label }),
       /* @__PURE__ */ jsxRuntime.jsx(NavRowBadge, { value: item.badge })
     ] })
   ] });
@@ -2799,20 +2876,30 @@ function NavRow({
       "span",
       {
         "aria-disabled": "true",
-        title: item.disabledTitle,
+        title: item.disabledTitle ?? item.label,
         className: `${wrapperClasses} cursor-not-allowed opacity-50`,
         children: inner
       }
     );
   }
   if (item.onClick && !item.href) {
-    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: item.onClick, className: `w-full text-left ${wrapperClasses}`, children: inner });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: item.onClick,
+        title: item.label,
+        className: `w-full text-left ${wrapperClasses}`,
+        children: inner
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     Link,
     {
       href: item.href ?? "#",
       "aria-current": active ? "page" : void 0,
+      title: item.label,
       className: wrapperClasses,
       children: inner
     }
@@ -2827,6 +2914,7 @@ function NavGroup({
   activeFn,
   Link
 }) {
+  const rc = useRailCollapse();
   const Icon = item.icon;
   const headerClasses = [
     "group relative block w-full overflow-hidden text-left transition",
@@ -2843,19 +2931,21 @@ function NavGroup({
           item.onClick?.();
         },
         "aria-expanded": open,
+        title: item.label,
         className: headerClasses,
         children: [
           active ? /* @__PURE__ */ jsxRuntime.jsx(NavActiveRail, {}) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative z-10 flex items-center ${NAV_TOP_ROW_CLASS(active)}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative z-10 flex items-center ${NAV_TOP_ROW_CLASS(active)} ${rc("max-md:justify-center max-md:px-0")}`, children: [
             Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: NAV_TOP_ICON_SIZE, className: "shrink-0 text-current" }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `min-w-0 flex-1 truncate ${rc("max-md:hidden")}`, children: item.label }),
             /* @__PURE__ */ jsxRuntime.jsx(NavRowBadge, { value: item.badge }),
             /* @__PURE__ */ jsxRuntime.jsx(
               ChevronDown,
               {
                 className: [
                   "shrink-0 opacity-80 transition-transform duration-200",
-                  open ? "rotate-180" : ""
+                  open ? "rotate-180" : "",
+                  rc("max-md:hidden")
                 ].join(" ")
               }
             )
@@ -2863,7 +2953,7 @@ function NavGroup({
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-b-md bg-[color:var(--nav-submenu-bg)] p-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children: item.children.map((child, i) => {
+    open ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `overflow-hidden rounded-b-md bg-[color:var(--nav-submenu-bg)] p-1 ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children: item.children.map((child, i) => {
       if (child.kind === "section") {
         return /* @__PURE__ */ jsxRuntime.jsx(
           NavSectionRow,
@@ -3002,7 +3092,7 @@ function NavTopBar({
           "aria-label": "Open menu",
           "aria-expanded": navOpen ?? false,
           "aria-controls": "politogy-nav-drawer",
-          className: `${topBarIconButtonClass("default")} mr-1 shrink-0 lg:hidden`,
+          className: `${topBarIconButtonClass("default")} mr-1 shrink-0 md:hidden`,
           children: /* @__PURE__ */ jsxRuntime.jsx(HamburgerIcon, {})
         }
       ) : null,
@@ -3049,7 +3139,7 @@ function NavTopBar({
         themeToggle,
         accountMenu === "topbar" ? /* @__PURE__ */ jsxRuntime.jsxs("details", { "data-nav-details": true, className: "group/acct relative", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "group/tbtip relative flex cursor-pointer list-none items-center gap-2.5 rounded-full py-1 pl-1 pr-2 transition hover:bg-[color:var(--panel-elevated)] [&::-webkit-details-marker]:hidden", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-[var(--topbar-icon-button-size,32px)] w-[var(--topbar-icon-button-size,32px)] items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-accent)] text-xs font-bold text-white", children: user?.avatarUrl || user?.memojiUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-[var(--topbar-icon-button-size,32px)] w-[var(--topbar-icon-button-size,32px)] items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-accent)] text-xs font-bold text-[#FFFFFF]", children: user?.avatarUrl || user?.memojiUrl ? /* @__PURE__ */ jsxRuntime.jsx(
               "img",
               {
                 src: user.avatarUrl || user.memojiUrl,
@@ -3100,7 +3190,8 @@ function NavAccountMenuPanel({
   onSignOut,
   placement
 }) {
-  const wrapper = placement === "above" ? "absolute bottom-full left-0 right-0 z-40 mb-2 flex max-h-[calc(100vh-5rem)] flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 text-[color:var(--foreground)] shadow-[var(--shadow-soft)]" : "absolute right-0 z-30 mt-2 flex max-h-[calc(100vh-5rem)] w-72 flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]";
+  const rc = useRailCollapse();
+  const wrapper = placement === "above" ? rc("max-md:right-auto max-md:w-64") + " absolute bottom-full left-0 right-0 z-40 mb-2 flex max-h-[calc(100vh-5rem)] flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 text-[color:var(--foreground)] shadow-[var(--shadow-soft)]" : "absolute right-0 z-30 mt-2 flex max-h-[calc(100vh-5rem)] w-72 flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapper, children: [
     placement === "below" ? /* @__PURE__ */ jsxRuntime.jsx(TopBarPanelArrow, {}) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: [
@@ -3148,7 +3239,7 @@ function NavAccountMenuPanel({
               },
               className: "flex min-w-0 flex-1 items-center gap-2.5 rounded-lg px-1 py-1 text-left hover:bg-[color:var(--panel)]",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-accent)] text-[11px] font-bold text-white", children: a.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: a.avatarUrl, alt: "", className: "h-full w-full object-cover" }) : (a.name ?? a.email ?? "?").slice(0, 2).toUpperCase() }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-accent)] text-[11px] font-bold text-[#FFFFFF]", children: a.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: a.avatarUrl, alt: "", className: "h-full w-full object-cover" }) : (a.name ?? a.email ?? "?").slice(0, 2).toUpperCase() }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col leading-tight", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
@@ -3252,19 +3343,20 @@ function NavSidebarUserCard({
   const displayName = hasRealName ? rawName : user.email ?? "Signed in";
   const initials = (hasRealName ? rawName : user.email ?? "P").slice(0, 2).toUpperCase();
   const secondary = hasRealName ? user.email || [user.tier, user.role].filter(Boolean).join(" \xB7 ") || "member" : [user.tier, user.role].filter(Boolean).join(" \xB7 ") || "member";
+  const rc = useRailCollapse();
   return /* @__PURE__ */ jsxRuntime.jsxs("details", { "data-nav-details": true, className: "group/acct relative", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "summary",
       {
         "aria-label": "My Account",
-        className: "flex w-full cursor-pointer list-none items-center gap-[9px] rounded-[5px] px-1 py-1 text-left transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel-elevated))] [&::-webkit-details-marker]:hidden",
+        className: `flex w-full cursor-pointer list-none items-center gap-[9px] rounded-[5px] px-1 py-1 text-left transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel-elevated))] [&::-webkit-details-marker]:hidden ${rc("max-md:justify-center max-md:px-0")}`,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--sidebar-avatar-bg,var(--color-accent))] text-[11px] font-bold text-white", children: user.avatarUrl || user.memojiUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: user.avatarUrl || user.memojiUrl, alt: "", className: "h-full w-full object-cover" }) : initials }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--sidebar-avatar-bg,var(--color-accent))] text-[11px] font-bold text-[#FFFFFF]", children: user.avatarUrl || user.memojiUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: user.avatarUrl || user.memojiUrl, alt: "", className: "h-full w-full object-cover" }) : initials }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex min-w-0 flex-1 flex-col ${rc("max-md:hidden")}`, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[12px] font-semibold leading-[1.2] text-[color:var(--sidebar-text,var(--foreground))]", children: displayName }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[11px] leading-[1.3] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: secondary })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 14, className: "shrink-0 rotate-180 text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] transition group-open/acct:rotate-0" })
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 14, className: `shrink-0 rotate-180 text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] transition group-open/acct:rotate-0 ${rc("max-md:hidden")}` })
         ]
       }
     ),
@@ -3309,7 +3401,7 @@ function NamePromptBubble({ profileHref, placement = "below" }) {
             "a",
             {
               href: safeHref(profileHref),
-              className: "rounded-full bg-[color:var(--color-accent)] px-3 py-1 text-xs font-semibold text-white hover:opacity-90",
+              className: "rounded-full bg-[color:var(--color-accent)] px-3 py-1 text-xs font-semibold text-[#FFFFFF] hover:opacity-90",
               children: "Set name"
             }
           ) : null,
@@ -3393,7 +3485,7 @@ function NavTopBarActionButton({ action }) {
   const Glyph = BrandGlyph ?? Icon;
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Glyph, { size: TOPBAR_GLYPH_SIZE, className: "text-current" }),
-    typeof action.badge === "number" && action.badge > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-[5px] -right-[5px] flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--chrome-danger,var(--color-accent))] px-1 text-[10px] font-bold leading-4 text-white", children: action.badge }) : null,
+    typeof action.badge === "number" && action.badge > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-[5px] -right-[5px] flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--chrome-danger,var(--color-accent))] px-1 text-[10px] font-bold leading-4 text-[#FFFFFF]", children: action.badge }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title: action.label, description: action.description })
   ] });
   const isExternal = action.href ? /^https?:\/\//.test(action.href) : false;
@@ -3525,6 +3617,12 @@ function NavAppShell({
   children
 }) {
   useCloseNavDetailsOnOutsideClick();
+  if (contentWrapper === "bare") {
+    warnDeprecated(
+      "contentWrapper",
+      "`contentWrapper: 'bare'` is deprecated: the frame's <main> is fluid and apps must not emit their own page container. Remove the app's PageContainer and drop the prop."
+    );
+  }
   const [navOpen, setNavOpen] = react.useState(false);
   react.useEffect(() => {
     setNavOpen(false);
@@ -3550,7 +3648,7 @@ function NavAppShell({
       className: "min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(NavSidebar, { ...sidebar, footer: sidebarFooter, open: navOpen, onClose: () => setNavOpen(false) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pl-[var(--sidebar-width,236px)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-[var(--sidebar-collapsed-width,64px)] md:pl-[var(--sidebar-width,236px)]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             NavTopBar,
             {
@@ -3561,19 +3659,21 @@ function NavAppShell({
             }
           ),
           betaBanner ? /* @__PURE__ */ jsxRuntime.jsx(NavBetaBanner, { ...betaBanner }) : null,
-          topBar.title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "px-6 pt-7 text-xl font-semibold text-[color:var(--foreground)]", children: topBar.title }) : null,
+          topBar.title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "px-4 pt-7 text-xl font-semibold text-[color:var(--foreground)] md:px-6", children: topBar.title }) : null,
           contentWrapper === "bare" ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-content": "", className: topBar.title ? "mt-[22px]" : void 0, children }) : (
-            // Claude Design: "a rounded, inset frame on a light-grey page
-            // background" — the shell owns the page background and the
-            // gutter; it does not draw a hard border/box around the content
-            // (that reads as a second frame on top of the page header). An
-            // app's own cards are its own furniture and stay app-owned.
+            // Brand guidelines "Content width is fluid" + "Content body
+            // padding": `<main>` fills the space beside the rail with ONE
+            // gutter — 24px, or 16px below `md`, horizontally and vertically —
+            // and has no max-width and no centered container. Form and settings
+            // pages constrain themselves with <FormColumn> (960px, left-aligned).
+            // The shell owns the page background and the gutter; an app's own
+            // cards are its own furniture and stay app-owned.
             /* @__PURE__ */ jsxRuntime.jsx(
               "main",
               {
                 "data-shell-content": "",
-                className: `min-h-[calc(100vh-63px)] bg-[color:var(--chrome-page-bg,#F4F5F7)] px-6 ${topBar.title ? "pb-7 pt-[22px]" : "py-7"}`,
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl", children })
+                className: `min-h-[calc(100vh-63px)] bg-[color:var(--chrome-page-bg,#F4F5F7)] px-4 pb-4 md:px-6 md:pb-6 ${topBar.title ? "pt-[22px]" : "pt-4 md:pt-6"}`,
+                children
               }
             )
           )
@@ -4228,13 +4328,54 @@ function LoadingScreen({
     }
   );
 }
+function parseCssUrl(value) {
+  if (!value) return null;
+  const m = /^url\(\s*(['"]?)(.*?)\1\s*\)$/i.exec(value.trim());
+  const url = m?.[2]?.trim();
+  return url && /^https:\/\//i.test(url) ? url : null;
+}
+function readBrandAsset(kind) {
+  if (typeof document === "undefined") return null;
+  try {
+    return parseCssUrl(
+      window.getComputedStyle(document.documentElement).getPropertyValue(`--asset-${kind}`)
+    );
+  } catch {
+    return null;
+  }
+}
+var EMPTY = { logoHorizontal: null, logoSquare: null };
+var RETRY_MS = [0, 250, 1e3, 3e3];
+function useBrandAssets() {
+  const [assets, setAssets] = react.useState(EMPTY);
+  react.useEffect(() => {
+    let done = false;
+    const read = () => {
+      if (done) return;
+      const next = {
+        logoHorizontal: readBrandAsset("logo-horizontal"),
+        logoSquare: readBrandAsset("logo-square")
+      };
+      setAssets(
+        (prev) => prev.logoHorizontal === next.logoHorizontal && prev.logoSquare === next.logoSquare ? prev : next
+      );
+    };
+    const links = Array.from(
+      document.querySelectorAll('link[rel="stylesheet"][href*="api/tokens"]')
+    );
+    links.forEach((l) => l.addEventListener("load", read));
+    const timers = RETRY_MS.map((ms) => window.setTimeout(read, ms));
+    read();
+    return () => {
+      done = true;
+      links.forEach((l) => l.removeEventListener("load", read));
+      timers.forEach((t) => window.clearTimeout(t));
+    };
+  }, []);
+  return assets;
+}
 var CORE_APP = "vrm";
 var DEFAULT_SIGN_OUT_URL = "/auth/signout";
-var DEFAULT_BRAND_LOGO = "/brand/logos/relationship-mode-logo.png";
-var MODE_BRAND_LOGOS = {
-  petition: "/brand/logos/petition-mode-logo.svg"
-};
-var modeBrandLogo = (mode) => mode && MODE_BRAND_LOGOS[mode] || DEFAULT_BRAND_LOGO;
 var POLITOGY_APPS = {
   vrm: { title: "Politogy VRM", origin: "https://app.politogyvrm.com", storagePrefix: "vrm" },
   contacts: {
@@ -4252,13 +4393,12 @@ var POLITOGY_APPS = {
     origin: "https://petition-mode.politogyvrm.com",
     storagePrefix: "petitions",
     mode: "petition",
-    // Petitions wraps every page in its own PageContainer (which emits its own
-    // <main>), and its adjudication case is addressed per sheet and per line —
-    // a trail derived from the nav tree reads "Dashboard › Adjudication" on
-    // every one of those URLs and cannot name the record you are actually on.
-    // 'title' for the same reason: its pages have real names ("Batches"),
-    // where the registry can only say "Petitions".
-    grants: ["contentWrapper", "breadcrumbs", "title"],
+    // Its adjudication case is addressed per sheet and per line — a trail
+    // derived from the nav tree reads "Dashboard › Adjudication" on every one
+    // of those URLs and cannot name the record you are actually on. 'title'
+    // for the same reason: its pages have real names ("Batches"), where the
+    // registry can only say "Petitions".
+    grants: ["breadcrumbs", "title"],
     navShape: "flat",
     beta: false
   },
@@ -4350,6 +4490,19 @@ function FrameBody({
 }) {
   const meta = POLITOGY_APPS[app];
   const chrome = useChromeState();
+  const brandAssets = useBrandAssets();
+  if (data?.frame?.contentWrapper !== void 0) {
+    warnDeprecated(
+      "frame.contentWrapper",
+      "`data.frame.contentWrapper` is retired and ignored: the frame's <main> is fluid. Remove the app's own page container and drop the prop."
+    );
+  }
+  if (data?.core?.brandLogoSrc !== void 0) {
+    warnDeprecated(
+      "core.brandLogoSrc",
+      "`data.core.brandLogoSrc` is ignored: the rail logo is read at runtime from Brand `assets.logoHorizontal`."
+    );
+  }
   const bootAppMode = meta.mode;
   const bootOrgId = chrome?.orgId ?? null;
   const [bootVisible, setBootVisible] = react.useState(true);
@@ -4488,7 +4641,11 @@ function FrameBody({
         sidebar: {
           pathname,
           brand: {
-            logoSrc: core?.brandLogoSrc ?? modeBrandLogo(appMode),
+            logoSrc: brandAssets.logoHorizontal ?? void 0,
+            logoSquareSrc: brandAssets.logoSquare ?? void 0,
+            // Reserve the logo's box while the token sheet loads; never draw a
+            // stand-in.
+            logoPending: true,
             logoAlt: "Politogy",
             badgeLabel: "P",
             title: "Politogy"
@@ -4520,7 +4677,7 @@ function FrameBody({
         },
         betaBanner: meta.beta === true ? {} : void 0,
         modeId: appMode,
-        contentWrapper: core?.contentWrapper ?? granted("contentWrapper"),
+        contentWrapper: core?.contentWrapper,
         topBar: {
           // Core's pages publish their own identity; every other app is one
           // product surface and takes its registry title.