@the-portland-company/shell 0.68.1 → 0.70.0

package/dist/app-chrome.cjs

@@ -7,6 +7,7 @@ var fi = require('react-icons/fi');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 var devnotes = require('@the-portland-company/devnotes');
+var lu = require('react-icons/lu');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -59,6 +60,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) {
@@ -73,13 +89,111 @@ function normalize(s) {
   return s.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
 }
 
+// src/nav-preference.ts
+var NAV_DISPLAY_STORAGE_KEY = "politogy_nav_display";
+var NAV_DISPLAY_COOKIE = "politogy_nav_display";
+var LEGACY_NAV_DISPLAY_KEY = "vrm.navDisplay";
+var NAV_DISPLAY_DEFAULT = "both";
+var VALID = ["menu", "tabs", "both"];
+function isNavDisplayPreference(v) {
+  return typeof v === "string" && VALID.includes(v);
+}
+function readNavDisplayCookie() {
+  if (typeof document === "undefined") return null;
+  try {
+    const m = document.cookie.match(
+      new RegExp(`(?:^|;\\s*)${NAV_DISPLAY_COOKIE}=([^;]+)`)
+    );
+    const v = m ? decodeURIComponent(m[1]) : null;
+    return isNavDisplayPreference(v) ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeNavDisplayCookie(pref) {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
+  const host = window.location.hostname;
+  const domainAttr = /(^|\.)politogyvrm\.com$/i.test(host) ? "; Domain=.politogyvrm.com" : "";
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${NAV_DISPLAY_COOKIE}=${encodeURIComponent(
+    pref
+  )}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`;
+}
+function readNavDisplayLocal() {
+  if (typeof localStorage === "undefined") return null;
+  try {
+    const current = localStorage.getItem(NAV_DISPLAY_STORAGE_KEY);
+    if (isNavDisplayPreference(current)) return current;
+    const legacy = localStorage.getItem(LEGACY_NAV_DISPLAY_KEY);
+    return isNavDisplayPreference(legacy) ? legacy : null;
+  } catch {
+    return null;
+  }
+}
+function writeNavDisplayLocal(pref) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(NAV_DISPLAY_STORAGE_KEY, pref);
+  } catch {
+  }
+}
+function resolveNavDisplay() {
+  return readNavDisplayCookie() ?? readNavDisplayLocal() ?? NAV_DISPLAY_DEFAULT;
+}
+`(function(){try{
+var KEY=${JSON.stringify(NAV_DISPLAY_STORAGE_KEY)};
+var VALID=["menu","tabs","both"];
+function fromCookie(){try{var m=document.cookie.match(/(?:^|;\\s*)${NAV_DISPLAY_COOKIE}=([^;]+)/);return m?decodeURIComponent(m[1]):null;}catch(e){return null;}}
+var cookie=fromCookie();
+if(cookie&&VALID.indexOf(cookie)!==-1){var ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}
+if(cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}}
+}catch(e){}})();`;
+var RAIL_STORAGE_KEY = "politogy_rail";
+var RAIL_COOKIE = "politogy_rail";
+var RAIL_DEFAULT = "collapsed";
+function isRailPreference(v) {
+  return v === "expanded" || v === "collapsed";
+}
+function readRailPreference() {
+  if (typeof document !== "undefined") {
+    try {
+      const m = document.cookie.match(new RegExp(`(?:^|;\\s*)${RAIL_COOKIE}=([^;]+)`));
+      const v = m ? decodeURIComponent(m[1]) : null;
+      if (isRailPreference(v)) return v;
+    } catch {
+    }
+  }
+  if (typeof localStorage !== "undefined") {
+    try {
+      const v = localStorage.getItem(RAIL_STORAGE_KEY);
+      if (isRailPreference(v)) return v;
+    } catch {
+    }
+  }
+  return RAIL_DEFAULT;
+}
+function writeRailPreference(pref) {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
+  const host = window.location.hostname;
+  const domainAttr = /(^|\.)politogyvrm\.com$/i.test(host) ? "; Domain=.politogyvrm.com" : "";
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  try {
+    document.cookie = `${RAIL_COOKIE}=${pref}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`;
+  } catch {
+  }
+  try {
+    localStorage.setItem(RAIL_STORAGE_KEY, pref);
+  } catch {
+  }
+}
+
 // src/theme-preference.ts
 var THEME_STORAGE_KEY = "politogy_theme";
 var THEME_COOKIE = "politogy_theme";
 var THEME_PENDING_COOKIE = "politogy_theme_pending";
-var VALID = ["light", "dark", "system"];
+var VALID2 = ["light", "dark", "system"];
 function isThemePreference(v) {
-  return typeof v === "string" && VALID.includes(v);
+  return typeof v === "string" && VALID2.includes(v);
 }
 function readThemeCookie() {
   if (typeof document === "undefined") return null;
@@ -1832,7 +1946,6 @@ var PHONEBANK_ORIGIN = "https://phonebank.politogyvrm.com/";
 var CANVASS_ORIGIN = "https://canvass.politogyvrm.com/";
 var SIGNS_ORIGIN = "https://signs.politogyvrm.com/";
 var POLLS_ORIGIN = "https://polls.politogyvrm.com/";
-var CONTACTS_TRIBES = "https://contacts.politogyvrm.com/tribes";
 var PETITION_MODE_ORIGIN = "https://petition-mode.politogyvrm.com/";
 function applyHiddenItems(items, hidden) {
   if (!hidden || hidden.length === 0) return items;
@@ -1902,10 +2015,6 @@ var APP_POLLS_CHILDREN = [
   { label: "Command Center", icon: "grid", href: "https://polls.politogyvrm.com/" },
   { label: "New Poll", icon: "edit", href: "https://polls.politogyvrm.com/polls/new" }
 ];
-var APP_CTAS_CHILDREN = [
-  { label: "CTAs", icon: "list", href: "https://ctas.politogyvrm.com/" },
-  { label: "Canvas", icon: "edit", href: "https://ctas.politogyvrm.com/?tab=canvas" }
-];
 var APP_A2P_CHILDREN = [
   { label: "Dashboard", icon: "grid", path: "dashboard" },
   { label: "Compose", icon: "edit", path: "compose" },
@@ -1953,16 +2062,27 @@ function standardPolitogyNav(opts) {
       return { label: c.label, icon: icon(c.icon), href: withOrg(withMode) };
     });
   };
+  const accountRows = () => [
+    { kind: "section", label: "Account" },
+    // My Profile is global — NOT org-suffixed (main-app ShellChromeBridge).
+    { label: "My profile", icon: icon("circleUser"), href: withOrg(abs("/my-profile")) },
+    {
+      label: "Organization settings",
+      icon: icon("settings"),
+      href: withOrg(abs("/organization-settings")),
+      children: branches(ORG_SETTINGS_CHILDREN)
+    }
+  ];
   const buildRelationship = () => {
     const contacts = opts.contactsItem ? {
       label: "Contacts",
-      icon: icon("users"),
+      icon: icon("usersRound"),
       href: opts.contactsItem.href,
       children: opts.contactsItem.children,
       badge: opts.contactsItem.count ?? void 0
     } : {
       label: "Contacts",
-      icon: icon("users"),
+      icon: icon("usersRound"),
       href: withOrg(`${CONTACTS_APP}/`),
       children: APP_CONTACTS_CHILDREN.map((c) => ({
         label: c.label,
@@ -1972,7 +2092,7 @@ function standardPolitogyNav(opts) {
     };
     return [
       { kind: "section", label: "Relationship" },
-      { label: "Dashboard", icon: icon("home"), href: withOrg(abs("/relationship/dashboard")) },
+      { label: "Dashboard", icon: icon("layoutDashboard"), href: withOrg(abs("/relationship/dashboard")) },
       contacts,
       {
         label: "Email broadcast",
@@ -1995,40 +2115,20 @@ function standardPolitogyNav(opts) {
       },
       { kind: "section", label: "Collect" },
       // Carries no top-level href in VRM core (parent row only toggles).
-      { label: "Calls to action", icon: icon("layout"), children: leaves(CTA_CHILDREN) },
+      { label: "Calls to action", icon: icon("mousePointerClick"), children: leaves(CTA_CHILDREN) },
       {
         label: "Forms",
-        icon: icon("activity"),
+        icon: icon("fileText"),
         href: withOrg("https://forms.politogyvrm.com/"),
         children: APP_FORMS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) }))
       },
       {
         label: "Surveys",
-        icon: icon("fileText"),
+        icon: icon("clipboardList"),
         href: withOrg("https://surveys.politogyvrm.com/surveys"),
         children: APP_SURVEYS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) }))
       },
-      {
-        label: "Polls",
-        icon: icon("barChart"),
-        href: withOrg("https://polls.politogyvrm.com/"),
-        children: APP_POLLS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) }))
-      },
-      {
-        label: "CTAs",
-        icon: icon("layout"),
-        href: withOrg("https://ctas.politogyvrm.com/"),
-        children: APP_CTAS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) }))
-      },
-      { kind: "section", label: "Account" },
-      // My Profile is global — NOT org-suffixed (main-app ShellChromeBridge).
-      { label: "My profile", icon: icon("user"), href: withOrg(abs("/my-profile")) },
-      {
-        label: "Organization settings",
-        icon: icon("settings"),
-        href: withOrg(abs("/organization-settings")),
-        children: branches(ORG_SETTINGS_CHILDREN)
-      }
+      ...accountRows()
     ];
   };
   const buildCampaign = () => {
@@ -2037,40 +2137,57 @@ function standardPolitogyNav(opts) {
       ...opts.campaignAvailability
     };
     const rows = [
-      { label: "Dashboard", icon: icon("home"), href: withOrg(abs("/campaign/dashboard")) },
-      { label: "Voter Contact", icon: icon("target"), href: withOrg(abs("/campaign/campaigns")) },
+      // Left-Navigation §9.2: Race data -> Research -> GOTV -> Account.
+      // Battleground is the Campaign landing page; there is no Campaign
+      // Dashboard row, and Voter Contact and Tribes have no row.
+      { kind: "section", label: "Race data" },
+      { label: "Battleground", icon: icon("crosshair"), href: withOrg(abs("/campaign/battleground")) },
+      { label: "District data", icon: icon("landmark"), href: withOrg(abs("/campaign/districts")) },
+      { kind: "section", label: "Research" },
       {
-        label: "A2P",
-        icon: icon("messageSquare"),
-        href: withOrg(A2P_ORIGIN),
-        children: appLeaves(A2P_ORIGIN, APP_A2P_CHILDREN),
-        flag: "a2p"
+        label: "Polling",
+        icon: icon("chartNoAxes"),
+        href: withOrg(POLLS_ORIGIN),
+        children: APP_POLLS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) })),
+        flag: "polling"
+      },
+      { kind: "section", label: "GOTV" },
+      {
+        label: "Field canvassing",
+        icon: icon("doorOpen"),
+        href: withOrg(CANVASS_ORIGIN),
+        children: appLeaves(CANVASS_ORIGIN, APP_CANVASS_CHILDREN),
+        flag: "canvass"
       },
       {
-        label: "Phone Banking",
+        label: "Phone banking",
         icon: icon("phone"),
         href: withOrg(PHONEBANK_ORIGIN),
         children: appLeaves(PHONEBANK_ORIGIN, APP_PHONEBANK_CHILDREN),
         flag: "phonebank"
       },
       {
-        label: "Field Canvassing",
-        icon: icon("map"),
-        href: withOrg(CANVASS_ORIGIN),
-        children: appLeaves(CANVASS_ORIGIN, APP_CANVASS_CHILDREN),
-        flag: "canvass"
+        label: "A2P texting",
+        icon: icon("messageSquare"),
+        href: withOrg(A2P_ORIGIN),
+        children: appLeaves(A2P_ORIGIN, APP_A2P_CHILDREN),
+        flag: "a2p"
       },
       {
-        label: "Sign Mapping",
-        icon: icon("mapPin"),
+        label: "Sign mapping",
+        icon: icon("signpost"),
         href: withOrg(SIGNS_ORIGIN),
         children: appLeaves(SIGNS_ORIGIN, APP_SIGNS_CHILDREN),
         flag: "signs"
       },
-      { label: "Tribes", icon: icon("users"), href: withOrg(CONTACTS_TRIBES), flag: "tribes" },
-      { label: "Polling Engine", icon: icon("barChart"), href: withOrg(POLLS_ORIGIN), flag: "polling" }
+      ...accountRows()
     ];
-    return rows.filter((r) => !r.flag || avail[r.flag]).map(({ flag: _flag, ...item }) => item);
+    const kept = rows.filter((r) => !r.flag || avail[r.flag]).map(({ flag: _flag, ...item }) => item);
+    return kept.filter((item, idx) => {
+      if (item.kind !== "section") return true;
+      const next = kept[idx + 1];
+      return !!next && next.kind !== "section";
+    });
   };
   const buildPetition = () => [
     opts.petitionsItem ? {
@@ -2150,6 +2267,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,
@@ -2159,9 +2294,13 @@ function NavSidebar({
   footer,
   linkComponent,
   open,
-  onClose
+  onClose,
+  onOpen,
+  onNavigate
 }) {
   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 +2367,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,13 +2385,15 @@ 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,
         onClick: (e) => {
-          if (open && e.target.closest("a[href]")) onClose?.();
+          if (open && e.target.closest("a[href]")) (onNavigate ?? onClose)?.();
         },
         children: [
           open ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -2261,37 +2402,75 @@ function NavSidebar({
               type: "button",
               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",
+              "aria-label": "Collapse navigation",
+              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: [
+            onOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onOpen,
+                "aria-label": "Expand navigation",
+                "aria-expanded": open ?? false,
+                "data-rail-toggle": "expand",
+                className: `hidden h-8 w-8 items-center justify-center rounded-lg ${rc("max-md:flex")}`,
+                children: brand.logoSquareSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: brand.logoSquareSrc, alt: "", draggable: false, className: "h-8 w-8 object-contain" }) : brand.logoPending ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "block h-8 w-8" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-xl bg-[color:var(--color-accent)] text-sm font-black text-[#FFFFFF]", children: brand.badgeLabel })
+              }
+            ) : null,
+            /* @__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-[#FFFFFF] 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")} ${onOpen ? rc("max-md:hidden") : ""}`,
+                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 +2482,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 +2491,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-[#FFFFFF] 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 +2507,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 +2524,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",
                     {
@@ -2412,9 +2593,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-[#FFFFFF] 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 +2609,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 +2627,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;
@@ -2482,11 +2665,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 +2735,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 +2744,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 +2757,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 +2920,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 +2952,7 @@ function NavRow({
   Link,
   variant = "top"
 }) {
+  const rc = useRailCollapse();
   const Icon = item.icon;
   const isSub = variant === "sub";
   const washActive = variant !== "top";
@@ -2788,9 +2978,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 +2992,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 +3030,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 +3047,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 +3069,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,
@@ -2993,7 +3199,7 @@ function NavTopBar({
   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";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex h-[var(--topbar-height,60px)] items-center justify-between gap-[14px] border-b border-[color:var(--line)] bg-[color:var(--panel)] px-[var(--topbar-padding-x,20px)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex min-w-0 h-[var(--topbar-height,60px)] items-center justify-between gap-[8px] md:gap-[14px] border-b border-[color:var(--line)] bg-[color:var(--panel)] px-[var(--topbar-padding-x,20px)]", children: [
       onOpenNav ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -3002,11 +3208,11 @@ 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,
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "relative flex h-9 w-[320px] max-w-full shrink-0 items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "relative flex h-9 w-[320px] min-w-0 max-w-full shrink items-center md:shrink-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "pointer-events-none absolute left-[10px] h-[15px] w-[15px] text-[color:var(--muted)]" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -3026,13 +3232,13 @@ function NavTopBar({
           "kbd",
           {
             "aria-hidden": true,
-            className: "pointer-events-none absolute right-[10px] rounded-[3px] border border-[color:var(--line)] px-[5px] py-px font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] text-[color:var(--muted)]",
+            className: "pointer-events-none absolute right-[10px] hidden md:block rounded-[3px] border border-[color:var(--line)] px-[5px] py-px font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] text-[color:var(--muted)]",
             children: "/"
           }
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative ml-auto flex shrink-0 items-center gap-[var(--topbar-icon-gap,8px)]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        buildNotes ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -3043,7 +3249,7 @@ function NavTopBar({
               buildNotes?.label ?? "Build notes"
             ]
           }
-        ),
+        ) : null,
         actionsList && actionsList.length > 0 ? actionsList.map((action) => /* @__PURE__ */ jsxRuntime.jsx(NavTopBarActionButton, { action }, action.key)) : null,
         actions,
         themeToggle,
@@ -3100,7 +3306,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: [
@@ -3252,19 +3459,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-[#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", children: [
+          /* @__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")}` })
         ]
       }
     ),
@@ -3525,10 +3733,29 @@ 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);
+  const expandRail = () => {
+    writeRailPreference("expanded");
+    setNavOpen(true);
+  };
+  const collapseRail = () => {
+    writeRailPreference("collapsed");
+    setNavOpen(false);
+  };
   react.useEffect(() => {
     setNavOpen(false);
   }, [sidebar.pathname]);
+  react.useEffect(() => {
+    if (readRailPreference() !== "expanded") return;
+    const narrow = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(max-width: 767.98px)").matches : false;
+    if (narrow) setNavOpen(true);
+  }, []);
   react.useEffect(() => {
     if (!navOpen) return;
     const previous = document.body.style.overflow;
@@ -3549,31 +3776,41 @@ function NavAppShell({
       "data-politogy-mode": modeId,
       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.jsx(
+          NavSidebar,
+          {
+            ...sidebar,
+            footer: sidebarFooter,
+            open: navOpen,
+            onClose: collapseRail,
+            onOpen: expandRail,
+            onNavigate: () => setNavOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-[var(--sidebar-collapsed-width,64px)] md:pl-[var(--sidebar-width,236px)]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             NavTopBar,
             {
               ...topBar,
-              accountMenu: topBar.accountMenu ?? (accountMenuPlacement === "sidebar" ? "sidebar" : "topbar"),
-              onOpenNav: () => setNavOpen(true),
-              navOpen
+              accountMenu: topBar.accountMenu ?? (accountMenuPlacement === "sidebar" ? "sidebar" : "topbar")
             }
           ),
           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
               }
             )
           )
@@ -3630,66 +3867,6 @@ function resolveActiveOrg(search) {
   return readActiveOrgCookie();
 }
 
-// src/nav-preference.ts
-var NAV_DISPLAY_STORAGE_KEY = "politogy_nav_display";
-var NAV_DISPLAY_COOKIE = "politogy_nav_display";
-var LEGACY_NAV_DISPLAY_KEY = "vrm.navDisplay";
-var NAV_DISPLAY_DEFAULT = "both";
-var VALID2 = ["menu", "tabs", "both"];
-function isNavDisplayPreference(v) {
-  return typeof v === "string" && VALID2.includes(v);
-}
-function readNavDisplayCookie() {
-  if (typeof document === "undefined") return null;
-  try {
-    const m = document.cookie.match(
-      new RegExp(`(?:^|;\\s*)${NAV_DISPLAY_COOKIE}=([^;]+)`)
-    );
-    const v = m ? decodeURIComponent(m[1]) : null;
-    return isNavDisplayPreference(v) ? v : null;
-  } catch {
-    return null;
-  }
-}
-function writeNavDisplayCookie(pref) {
-  if (typeof document === "undefined" || typeof window === "undefined") return;
-  const host = window.location.hostname;
-  const domainAttr = /(^|\.)politogyvrm\.com$/i.test(host) ? "; Domain=.politogyvrm.com" : "";
-  const secure = window.location.protocol === "https:" ? "; Secure" : "";
-  document.cookie = `${NAV_DISPLAY_COOKIE}=${encodeURIComponent(
-    pref
-  )}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`;
-}
-function readNavDisplayLocal() {
-  if (typeof localStorage === "undefined") return null;
-  try {
-    const current = localStorage.getItem(NAV_DISPLAY_STORAGE_KEY);
-    if (isNavDisplayPreference(current)) return current;
-    const legacy = localStorage.getItem(LEGACY_NAV_DISPLAY_KEY);
-    return isNavDisplayPreference(legacy) ? legacy : null;
-  } catch {
-    return null;
-  }
-}
-function writeNavDisplayLocal(pref) {
-  if (typeof localStorage === "undefined") return;
-  try {
-    localStorage.setItem(NAV_DISPLAY_STORAGE_KEY, pref);
-  } catch {
-  }
-}
-function resolveNavDisplay() {
-  return readNavDisplayCookie() ?? readNavDisplayLocal() ?? NAV_DISPLAY_DEFAULT;
-}
-`(function(){try{
-var KEY=${JSON.stringify(NAV_DISPLAY_STORAGE_KEY)};
-var VALID=["menu","tabs","both"];
-function fromCookie(){try{var m=document.cookie.match(/(?:^|;\\s*)${NAV_DISPLAY_COOKIE}=([^;]+)/);return m?decodeURIComponent(m[1]):null;}catch(e){return null;}}
-var cookie=fromCookie();
-if(cookie&&VALID.indexOf(cookie)!==-1){var ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}
-if(cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}}
-}catch(e){}})();`;
-
 // src/lib/breadcrumbs.ts
 function deriveBreadcrumbs(items, pathname, opts) {
   const search = opts?.search ?? (typeof window !== "undefined" ? window.location.search : "");
@@ -4228,13 +4405,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 +4470,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 +4567,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 +4718,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 +4754,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.
@@ -4541,10 +4775,7 @@ function FrameBody({
           // search yet, so this stays decorative (`NavTopBarProps.search` — "an
           // app that has not wired search yet still gets the correct chrome").
           search: { placeholder: data?.searchPlaceholder ?? DEFAULT_SEARCH_PLACEHOLDER[app] ?? "Search" },
-          // "Build notes" — a quiet text button that starts the right-hand
-          // group. The spec names the element and its position but not its
-          // destination content; `onOpen` is left unset until that is defined.
-          buildNotes: {},
+          // No Build notes control (Reference/UI-Platform, decided 2026-10-03).
           // The action cluster is IDENTICAL everywhere — core included. Page
           // actions sit BEFORE it, never inside it, so the Alerts bell keeps its
           // required position: farthest right, immediately before My Account.
@@ -4559,33 +4790,43 @@ function FrameBody({
   ] });
 }
 var standardNavIcons = {
-  home: fi.FiHome,
-  users: fi.FiUsers,
-  mail: fi.FiMail,
-  messageSquare: fi.FiMessageSquare,
-  layout: fi.FiLayout,
-  activity: fi.FiActivity,
-  lifeBuoy: fi.FiLifeBuoy,
-  grid: fi.FiGrid,
-  list: fi.FiList,
-  upload: fi.FiUpload,
-  edit: fi.FiEdit3,
-  fileText: fi.FiFileText,
-  send: fi.FiSend,
-  clock: fi.FiClock,
-  user: fi.FiUser,
-  barChart: fi.FiBarChart2,
-  briefcase: fi.FiBriefcase,
-  settings: fi.FiSettings,
-  creditCard: fi.FiCreditCard,
-  dollarSign: fi.FiDollarSign,
-  share: fi.FiShare2,
+  home: lu.LuHouse,
+  users: lu.LuUsers,
+  mail: lu.LuMail,
+  messageSquare: lu.LuMessageSquare,
+  layout: lu.LuLayoutDashboard,
+  activity: lu.LuActivity,
+  lifeBuoy: lu.LuLifeBuoy,
+  grid: lu.LuLayoutGrid,
+  list: lu.LuList,
+  upload: lu.LuUpload,
+  edit: lu.LuPencil,
+  fileText: lu.LuFileText,
+  send: lu.LuSend,
+  clock: lu.LuClock,
+  user: lu.LuUser,
+  barChart: lu.LuChartColumn,
+  briefcase: lu.LuBriefcase,
+  settings: lu.LuSettings,
+  creditCard: lu.LuCreditCard,
+  dollarSign: lu.LuDollarSign,
+  share: lu.LuShare2,
   // Campaign / Petition mode slots.
-  phone: fi.FiPhone,
-  map: fi.FiMap,
-  mapPin: fi.FiMapPin,
-  target: fi.FiTarget,
-  flag: fi.FiFlag
+  phone: lu.LuPhone,
+  map: lu.LuMap,
+  mapPin: lu.LuMapPin,
+  target: lu.LuTarget,
+  flag: lu.LuFlag,
+  layoutDashboard: lu.LuLayoutDashboard,
+  usersRound: lu.LuUsersRound,
+  mousePointerClick: lu.LuMousePointerClick,
+  clipboardList: lu.LuClipboardList,
+  circleUser: lu.LuCircleUser,
+  crosshair: lu.LuCrosshair,
+  landmark: lu.LuLandmark,
+  chartNoAxes: lu.LuChartNoAxesColumn,
+  doorOpen: lu.LuDoorOpen,
+  signpost: lu.LuSignpost
 };
 var ORG_STORAGE_KEY = "vrm.activeOrg";
 var MODE_STORAGE_KEY = "vrm.activeMode";
@@ -5012,14 +5253,14 @@ var MODE_DEFS = [
   {
     id: "relationship",
     label: "Relationship Mode",
-    icon: fi.FiUsers,
+    icon: lu.LuContactRound,
     href: `${CORE_BASE_URL}/relationship/dashboard`,
     orgQuery: true
   },
   {
     id: "campaign",
     label: "Campaign Mode",
-    icon: fi.FiBarChart2,
+    icon: lu.LuMegaphone,
     href: `${CORE_BASE_URL}/campaign/dashboard`,
     orgQuery: true
   },
@@ -5028,7 +5269,7 @@ var MODE_DEFS = [
     // petitions repo deploys production to petition-mode.politogyvrm.com.
     id: "petition",
     label: "Petition Mode",
-    icon: fi.FiFlag,
+    icon: lu.LuFilePenLine,
     href: "https://petition-mode.politogyvrm.com/",
     orgQuery: true
   }