@campminder/components 0.2.0 → 0.3.0

package/dist/side-nav.js

@@ -1,11 +1,11 @@
-import { A as I, b as o, i as f, n as c, a as m, t as b } from "./property-B5JHHBCF.js";
-import { r as S } from "./state-Ns9O6R8g.js";
+import { A, b as n, S as C, i as b, n as h, a as w, t as y } from "./shell-tokens-BjECzZvL.js";
+import { r as m } from "./state-BvQoY71J.js";
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const x = (e) => e ?? I, Z = o` <svg
+const v = (e) => e ?? A, R = n` <svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -16,7 +16,7 @@ const x = (e) => e ?? I, Z = o` <svg
     d="M15 1.6665H5.00001C4.08334 1.6665 3.33334 2.4165 3.33334 3.33317V16.6665C3.33334 17.5832 4.08334 18.3332 5.00001 18.3332H15C15.9167 18.3332 16.6667 17.5832 16.6667 16.6665V3.33317C16.6667 2.4165 15.9167 1.6665 15 1.6665ZM5.00001 3.33317H9.16668V9.99984L7.08334 8.74984L5.00001 9.99984V3.33317Z"
     fill="white"
   />
-</svg>`, T = o`<svg
+</svg>`, D = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -27,7 +27,7 @@ const x = (e) => e ?? I, Z = o` <svg
     d="M15.95 10.7833C15.9833 10.5333 16 10.275 16 10C16 9.73333 15.9833 9.46667 15.9417 9.21667L17.6333 7.9C17.7833 7.78333 17.825 7.55833 17.7333 7.39167L16.1333 4.625C16.0333 4.44167 15.825 4.38333 15.6417 4.44167L13.65 5.24167C13.2333 4.925 12.7917 4.65833 12.3 4.45833L12 2.34167C11.9667 2.14167 11.8 2 11.6 2H8.39999C8.19999 2 8.04166 2.14167 8.00832 2.34167L7.70832 4.45833C7.21666 4.65833 6.76666 4.93333 6.35832 5.24167L4.36666 4.44167C4.18332 4.375 3.97499 4.44167 3.87499 4.625L2.28332 7.39167C2.18332 7.56667 2.21666 7.78333 2.38332 7.9L4.07499 9.21667C4.03332 9.46667 3.99999 9.74167 3.99999 10C3.99999 10.2583 4.01666 10.5333 4.05832 10.7833L2.36666 12.1C2.21666 12.2167 2.17499 12.4417 2.26666 12.6083L3.86666 15.375C3.96666 15.5583 4.17499 15.6167 4.35832 15.5583L6.34999 14.7583C6.76666 15.075 7.20832 15.3417 7.69999 15.5417L7.99999 17.6583C8.04166 17.8583 8.19999 18 8.39999 18H11.6C11.8 18 11.9667 17.8583 11.9917 17.6583L12.2917 15.5417C12.7833 15.3417 13.2333 15.075 13.6417 14.7583L15.6333 15.5583C15.8167 15.625 16.025 15.5583 16.125 15.375L17.725 12.6083C17.825 12.425 17.7833 12.2167 17.625 12.1L15.95 10.7833ZM9.99999 13C8.34999 13 6.99999 11.65 6.99999 10C6.99999 8.35 8.34999 7 9.99999 7C11.65 7 13 8.35 13 10C13 11.65 11.65 13 9.99999 13Z"
     fill="white"
   />
-</svg> `, E = o`<svg
+</svg> `, _ = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -38,7 +38,7 @@ const x = (e) => e ?? I, Z = o` <svg
     d="M4.16668 10.9833V14.3167L10 17.5L15.8333 14.3167V10.9833L10 14.1667L4.16668 10.9833ZM10 2.5L0.833344 7.5L10 12.5L17.5 8.40833V14.1667H19.1667V7.5L10 2.5Z"
     fill="white"
   />
-</svg> `, $ = o`<svg
+</svg> `, F = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -49,7 +49,7 @@ const x = (e) => e ?? I, Z = o` <svg
     d="M9.99999 1.6665C5.39999 1.6665 1.66666 5.39984 1.66666 9.99984C1.66666 14.5998 5.39999 18.3332 9.99999 18.3332C14.6 18.3332 18.3333 14.5998 18.3333 9.99984C18.3333 5.39984 14.6 1.6665 9.99999 1.6665ZM9.99999 4.1665C11.3833 4.1665 12.5 5.28317 12.5 6.6665C12.5 8.04984 11.3833 9.1665 9.99999 9.1665C8.61666 9.1665 7.49999 8.04984 7.49999 6.6665C7.49999 5.28317 8.61666 4.1665 9.99999 4.1665ZM9.99999 15.9998C7.91666 15.9998 6.07499 14.9332 4.99999 13.3165C5.02499 11.6582 8.33332 10.7498 9.99999 10.7498C11.6583 10.7498 14.975 11.6582 15 13.3165C13.925 14.9332 12.0833 15.9998 9.99999 15.9998Z"
     fill="white"
   />
-</svg>`, B = o`<svg
+</svg>`, P = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -60,8 +60,7 @@ const x = (e) => e ?? I, Z = o` <svg
     d="M16.6667 15.4167C17.5833 15.4167 18.325 14.6667 18.325 13.7501L18.3333 4.58341C18.3333 3.66675 17.5833 2.91675 16.6667 2.91675H3.33333C2.41667 2.91675 1.66667 3.66675 1.66667 4.58341V13.7501C1.66667 14.6667 2.41667 15.4167 3.33333 15.4167H0C0 16.3334 0.75 17.0834 1.66667 17.0834H18.3333C19.25 17.0834 20 16.3334 20 15.4167H16.6667ZM3.33333 4.58341H16.6667V13.7501H3.33333V4.58341ZM10 16.2501C9.54167 16.2501 9.16667 15.8751 9.16667 15.4167C9.16667 14.9584 9.54167 14.5834 10 14.5834C10.4583 14.5834 10.8333 14.9584 10.8333 15.4167C10.8333 15.8751 10.4583 16.2501 10 16.2501Z"
     fill="white"
   />
-</svg>`;
-o`<svg
+</svg>`, $ = n`<svg
   width="8"
   height="12"
   viewBox="0 0 8 12"
@@ -72,8 +71,7 @@ o`<svg
     d="M1.70687 0L0.296875 1.41L4.87687 6L0.296875 10.59L1.70687 12L7.70687 6L1.70687 0Z"
     fill="white"
   />
-</svg>`;
-const k = (e = "#505050") => o`<svg
+</svg>`, z = (e = "#505050") => n`<svg
     width="14"
     height="14"
     viewBox="0 0 14 14"
@@ -84,7 +82,7 @@ const k = (e = "#505050") => o`<svg
       d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
       fill="${e}"
     />
-  </svg>`, A = o`<svg
+  </svg>`, G = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -95,7 +93,7 @@ const k = (e = "#505050") => o`<svg
     d="M15 9.16683V10.8335H18.3333V9.16683H15ZM13.3333 14.6752C14.1333 15.2668 15.175 16.0502 16 16.6668C16.3333 16.2252 16.6667 15.7752 17 15.3335C16.175 14.7168 15.1333 13.9335 14.3333 13.3335C14 13.7835 13.6667 14.2335 13.3333 14.6752ZM17 4.66683C16.6667 4.22516 16.3333 3.77516 16 3.3335C15.175 3.95016 14.1333 4.7335 13.3333 5.3335C13.6667 5.77516 14 6.22516 14.3333 6.66683C15.1333 6.06683 16.175 5.29183 17 4.66683ZM3.33332 7.50016C2.41666 7.50016 1.66666 8.25016 1.66666 9.16683V10.8335C1.66666 11.7502 2.41666 12.5002 3.33332 12.5002H4.16666V15.8335H5.83332V12.5002H6.66666L10.8333 15.0002V5.00016L6.66666 7.50016H3.33332ZM12.9167 10.0002C12.9167 8.89183 12.4333 7.89183 11.6667 7.2085V12.7835C12.4333 12.1085 12.9167 11.1085 12.9167 10.0002Z"
     fill="white"
   />
-</svg> `, v = o`<svg
+</svg> `, H = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -106,7 +104,7 @@ const k = (e = "#505050") => o`<svg
     d="M15.95 10.7833C15.9833 10.5333 16 10.275 16 10C16 9.73333 15.9833 9.46667 15.9417 9.21667L17.6333 7.9C17.7833 7.78333 17.825 7.55833 17.7333 7.39167L16.1333 4.625C16.0333 4.44167 15.825 4.38333 15.6417 4.44167L13.65 5.24167C13.2333 4.925 12.7917 4.65833 12.3 4.45833L12 2.34167C11.9667 2.14167 11.8 2 11.6 2H8.39999C8.19999 2 8.04166 2.14167 8.00832 2.34167L7.70832 4.45833C7.21666 4.65833 6.76666 4.93333 6.35832 5.24167L4.36666 4.44167C4.18332 4.375 3.97499 4.44167 3.87499 4.625L2.28332 7.39167C2.18332 7.56667 2.21666 7.78333 2.38332 7.9L4.07499 9.21667C4.03332 9.46667 3.99999 9.74167 3.99999 10C3.99999 10.2583 4.01666 10.5333 4.05832 10.7833L2.36666 12.1C2.21666 12.2167 2.17499 12.4417 2.26666 12.6083L3.86666 15.375C3.96666 15.5583 4.17499 15.6167 4.35832 15.5583L6.34999 14.7583C6.76666 15.075 7.20832 15.3417 7.69999 15.5417L7.99999 17.6583C8.04166 17.8583 8.19999 18 8.39999 18H11.6C11.8 18 11.9667 17.8583 11.9917 17.6583L12.2917 15.5417C12.7833 15.3417 13.2333 15.075 13.6417 14.7583L15.6333 15.5583C15.8167 15.625 16.025 15.5583 16.125 15.375L17.725 12.6083C17.825 12.425 17.7833 12.2167 17.625 12.1L15.95 10.7833ZM9.99999 13C8.34999 13 6.99999 11.65 6.99999 10C6.99999 8.35 8.34999 7 9.99999 7C11.65 7 13 8.35 13 10C13 11.65 11.65 13 9.99999 13Z"
     fill="white"
   />
-</svg> `, N = o`<svg
+</svg> `, U = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -117,7 +115,7 @@ const k = (e = "#505050") => o`<svg
     d="M9.99999 1.6665C5.39999 1.6665 1.66666 5.39984 1.66666 9.99984C1.66666 14.5998 5.39999 18.3332 9.99999 18.3332C14.6 18.3332 18.3333 14.5998 18.3333 9.99984C18.3333 5.39984 14.6 1.6665 9.99999 1.6665ZM10.7333 14.7998V15.8332H9.27499V14.7582C8.65832 14.6082 7.28332 14.1165 6.75832 12.2915L8.13332 11.7332C8.18332 11.9165 8.61666 13.4748 10.1333 13.4748C10.9083 13.4748 11.7833 13.0748 11.7833 12.1332C11.7833 11.3332 11.2 10.9165 9.88332 10.4415C8.96666 10.1165 7.09166 9.58317 7.09166 7.68317C7.09166 7.59984 7.09999 5.68317 9.27499 5.2165V4.1665H10.7333V5.19984C12.2667 5.4665 12.825 6.6915 12.95 7.05817L11.6333 7.6165C11.5417 7.32484 11.1417 6.49984 10.05 6.49984C9.46666 6.49984 8.54166 6.80817 8.54166 7.65817C8.54166 8.44984 9.25832 8.74984 10.7417 9.2415C12.7417 9.93317 13.25 10.9498 13.25 12.1165C13.25 14.3082 11.1667 14.7248 10.7333 14.7998Z"
     fill="white"
   />
-</svg>`, H = o`<svg
+</svg>`, Z = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -128,7 +126,7 @@ const k = (e = "#505050") => o`<svg
     d="M8.33332 17.0832V12.0832H11.6667V17.0832H15.8333V10.4165H18.3333L9.99999 2.9165L1.66666 10.4165H4.16666V17.0832H8.33332Z"
     fill="white"
   />
-</svg>`, O = o`<svg
+</svg>`, K = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -139,7 +137,7 @@ const k = (e = "#505050") => o`<svg
     d="M16.6667 4.99984H13.3333V3.33317C13.3333 2.4165 12.5833 1.6665 11.6667 1.6665H8.33332C7.41666 1.6665 6.66666 2.4165 6.66666 3.33317V4.99984H3.33332C2.41666 4.99984 1.66666 5.74984 1.66666 6.6665V16.6665C1.66666 17.5832 2.41666 18.3332 3.33332 18.3332H16.6667C17.5833 18.3332 18.3333 17.5832 18.3333 16.6665V6.6665C18.3333 5.74984 17.5833 4.99984 16.6667 4.99984ZM8.33332 3.33317H11.6667V4.99984H8.33332V3.33317ZM13.3333 12.4998H10.8333V14.9998H9.16666V12.4998H6.66666V10.8332H9.16666V8.33317H10.8333V10.8332H13.3333V12.4998Z"
     fill="white"
   />
-</svg> `, R = o` <svg
+</svg> `, j = n` <svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -150,7 +148,7 @@ const k = (e = "#505050") => o`<svg
     d="M3 18H16V16H3V18ZM3 13H13V11H3V13ZM3 6V8H16V6H3ZM21 15.59L17.42 12L21 8.41L19.59 7L14.59 12L19.59 17L21 15.59Z"
     fill="white"
   />
-</svg>`, z = o`<svg
+</svg>`, L = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -158,7 +156,7 @@ const k = (e = "#505050") => o`<svg
   xmlns="http://www.w3.org/2000/svg"
 >
   <path d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z" fill="white" />
-</svg>`, _ = o`<svg
+</svg>`, q = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -169,7 +167,7 @@ const k = (e = "#505050") => o`<svg
     d="M12.5 2.5H4.16667C3.25 2.5 2.50833 3.25 2.50833 4.16667L2.5 15.8333C2.5 16.75 3.24167 17.5 4.15833 17.5H15.8333C16.75 17.5 17.5 16.75 17.5 15.8333V7.5L12.5 2.5ZM6.66667 14.1667C6.20833 14.1667 5.83333 13.7917 5.83333 13.3333C5.83333 12.875 6.20833 12.5 6.66667 12.5C7.125 12.5 7.5 12.875 7.5 13.3333C7.5 13.7917 7.125 14.1667 6.66667 14.1667ZM6.66667 10.8333C6.20833 10.8333 5.83333 10.4583 5.83333 10C5.83333 9.54167 6.20833 9.16667 6.66667 9.16667C7.125 9.16667 7.5 9.54167 7.5 10C7.5 10.4583 7.125 10.8333 6.66667 10.8333ZM6.66667 7.5C6.20833 7.5 5.83333 7.125 5.83333 6.66667C5.83333 6.20833 6.20833 5.83333 6.66667 5.83333C7.125 5.83333 7.5 6.20833 7.5 6.66667C7.5 7.125 7.125 7.5 6.66667 7.5ZM11.6667 8.33333V3.75L16.25 8.33333H11.6667Z"
     fill="white"
   />
-</svg>`, G = o`<svg
+</svg>`, Y = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -180,7 +178,7 @@ const k = (e = "#505050") => o`<svg
     d="M14.1667 10.8332H10V14.9998H14.1667V10.8332ZM13.3333 1.6665V3.33317H6.66667V1.6665H5V3.33317H4.16667C3.24167 3.33317 2.50833 4.08317 2.50833 4.99984L2.5 16.6665C2.5 17.5832 3.24167 18.3332 4.16667 18.3332H15.8333C16.75 18.3332 17.5 17.5832 17.5 16.6665V4.99984C17.5 4.08317 16.75 3.33317 15.8333 3.33317H15V1.6665H13.3333ZM15.8333 16.6665H4.16667V7.49984H15.8333V16.6665Z"
     fill="white"
   />
-</svg> `, P = o`<svg
+</svg> `, Q = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -191,7 +189,7 @@ const k = (e = "#505050") => o`<svg
     d="M16.6667 5.83317H12.5V3.33317C12.5 2.4165 11.75 1.6665 10.8333 1.6665H9.16666C8.24999 1.6665 7.49999 2.4165 7.49999 3.33317V5.83317H3.33332C2.41666 5.83317 1.66666 6.58317 1.66666 7.49984V16.6665C1.66666 17.5832 2.41666 18.3332 3.33332 18.3332H16.6667C17.5833 18.3332 18.3333 17.5832 18.3333 16.6665V7.49984C18.3333 6.58317 17.5833 5.83317 16.6667 5.83317ZM7.49999 9.99984C8.19166 9.99984 8.74999 10.5582 8.74999 11.2498C8.74999 11.9415 8.19166 12.4998 7.49999 12.4998C6.80832 12.4998 6.24999 11.9415 6.24999 11.2498C6.24999 10.5582 6.80832 9.99984 7.49999 9.99984ZM9.99999 14.9998H4.99999V14.3748C4.99999 13.5415 6.66666 13.1248 7.49999 13.1248C8.33332 13.1248 9.99999 13.5415 9.99999 14.3748V14.9998ZM10.8333 7.49984H9.16666V3.33317H10.8333V7.49984ZM15 13.7498H11.6667V12.4998H15V13.7498ZM15 11.2498H11.6667V9.99984H15V11.2498Z"
     fill="white"
   />
-</svg> `, D = o`<svg
+</svg> `, W = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -202,7 +200,183 @@ const k = (e = "#505050") => o`<svg
     d="M10 2.0835C6.66668 2.0835 3.33334 2.50016 3.33334 5.41683V13.3335C3.33334 14.1252 3.65001 14.8418 4.16668 15.3668V17.0835C4.16668 17.5418 4.54168 17.9168 5.00001 17.9168H5.83334C6.29168 17.9168 6.66668 17.5418 6.66668 17.0835V16.2502H13.3333V17.0835C13.3333 17.5418 13.7083 17.9168 14.1667 17.9168H15C15.4583 17.9168 15.8333 17.5418 15.8333 17.0835V15.3668C16.35 14.8418 16.6667 14.1252 16.6667 13.3335V5.41683C16.6667 2.50016 13.6833 2.0835 10 2.0835ZM7.08334 13.7502C6.39168 13.7502 5.83334 13.1918 5.83334 12.5002C5.83334 11.8085 6.39168 11.2502 7.08334 11.2502C7.77501 11.2502 8.33334 11.8085 8.33334 12.5002C8.33334 13.1918 7.77501 13.7502 7.08334 13.7502ZM12.9167 13.7502C12.225 13.7502 11.6667 13.1918 11.6667 12.5002C11.6667 11.8085 12.225 11.2502 12.9167 11.2502C13.6083 11.2502 14.1667 11.8085 14.1667 12.5002C14.1667 13.1918 13.6083 13.7502 12.9167 13.7502ZM15 8.75016H5.00001V6.25016H15V8.75016Z"
     fill="white"
   />
-</svg> `, F = o`<svg
+</svg> `, E = 248, T = 16, f = 530, X = b`
+  /* ===== HOST-LEVEL CUSTOM PROPERTIES ===== */
+  :host {
+    /* '--cm-side-nav-width' is set on 'campminder-app-shell''s ':host'
+     * (packages/campminder/src/layout.ts is the source of truth) and
+     * pierces the shadow boundary, so it's readable here even though this
+     * package is portal-agnostic. It also switches to the collapsed
+     * width, which a literal '168px' can't — the fallback below is only
+     * for standalone rendering with no shell present.
+     * '100vw' is correct for production, where the shell fills the
+     * viewport and the nav starts at x=0; it reads over-wide in this
+     * harness only because the harness page has a 24px inset the shell
+     * doesn't have — a harness-geometry artifact, not a formula bug. */
+    --cm-mega-menu-max-width: calc(100vw - var(--cm-side-nav-width, 168px));
+
+    /* Redeclared even though it would be inherited anyway. Unlike the top bar
+     * and the banner, '<cm-mega-menu>' is NOT a sibling shadow root: 'SideNav.ts'
+     * renders it inside the side nav's own shadow root (deliberately, rather than
+     * through a slot — see the note at that call site), so it is a descendant in
+     * the flattened tree and custom properties already reach it.
+     *
+     * Declaring it regardless keeps the flyout's typeface a property of the
+     * flyout, so it survives being reparented or slotted later, and means all
+     * four chrome stylesheets read the same way. It cannot drift from the side
+     * nav's value because both resolve the one 'SHELL_FONT_FAMILY' constant;
+     * an inherited-only version would quietly start differing the moment either
+     * file stopped doing that. Rationale for the chain: '../shell-tokens.ts'. */
+    --font-family: ${C};
+  }
+
+  /* ===== CSS RESET ===== */
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* ===== ANIMATIONS ===== */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* ===== MEGA MENU CONTAINER ===== */
+  .mega-menu {
+    position: absolute;
+    left: 100%;
+    top: 0;
+    max-width: var(--cm-mega-menu-max-width);
+    height: 100%;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.12);
+    animation: fadeIn 0.5s ease;
+  }
+
+  /* ===== HEADER SECTION ===== */
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #505050;
+    border-bottom: 1px solid rgba(160, 160, 160, 1);
+    margin: 0 16px;
+    height: 56px;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .header-title {
+    display: grid;
+    place-content: center;
+  }
+
+  .header-icon {
+    margin-right: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  /* ===== CLOSE BUTTON ===== */
+  .close-button {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+
+  .close-button:hover {
+    background: rgba(119, 61, 189, 0.12);
+  }
+
+  /* ===== TYPOGRAPHY ===== */
+  .title-text {
+    color: #505050;
+    font-family: var(--font-family);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    letter-spacing: 0.0025em;
+  }
+
+  /* ===== MENU ITEMS CONTAINER ===== */
+  .menu-items {
+    height: calc(100% - 56px);
+    max-width: var(--cm-mega-menu-max-width);
+    display: flex;
+    flex-flow: column wrap;
+    padding: 10px 16px 10px 0px;
+    overflow: auto;
+  }
+
+  /* ===== MENU ITEM ===== */
+  .menu-item {
+    width: ${E}px;
+    margin-left: ${T}px;
+    margin-bottom: 12px;
+    font-family: var(--font-family);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: -0.001em;
+  }
+
+  .menu-title {
+    display: flex;
+    width: 248px;
+    padding: 4px 12px;
+    align-items: center;
+    gap: 8px;
+  }
+
+  /* ===== MENU LINKS ===== */
+  .menu-url {
+    display: flex;
+    align-items: center;
+    width: 248px;
+    min-height: 32px;
+    padding: 6px 12px;
+    border-radius: 4px;
+    text-decoration: none;
+    color: #380f8c;
+    transition: background 0.2s ease;
+  }
+
+  .menu-url:hover,
+  .menu-url:focus {
+    background: rgba(119, 61, 189, 0.12);
+    outline: none;
+    cursor: pointer;
+  }
+
+  .new-tab-icon {
+    margin-left: 4px;
+    display: grid;
+    place-content: center;
+  }
+
+  /* ===== RESPONSIVE ===== */
+  @media (max-width: 1150px) {
+    .menu-items {
+      flex-wrap: nowrap;
+    }
+  }
+`, J = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -213,7 +387,7 @@ const k = (e = "#505050") => o`<svg
     d="M18 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V4C20 2.9 19.1 2 18 2ZM6 4H11V12L8.5 10.5L6 12V4Z"
     fill="#505050"
   />
-</svg>`, U = o`<svg
+</svg>`, ee = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -224,7 +398,7 @@ const k = (e = "#505050") => o`<svg
     d="M19.1401 12.9399C19.1801 12.6399 19.2001 12.3299 19.2001 11.9999C19.2001 11.6799 19.1801 11.3599 19.1301 11.0599L21.1601 9.4799C21.3401 9.3399 21.3901 9.0699 21.2801 8.8699L19.3601 5.5499C19.2401 5.3299 18.9901 5.2599 18.7701 5.3299L16.3801 6.2899C15.8801 5.9099 15.3501 5.5899 14.7601 5.3499L14.4001 2.8099C14.3601 2.5699 14.1601 2.3999 13.9201 2.3999H10.0801C9.84011 2.3999 9.65011 2.5699 9.61011 2.8099L9.25011 5.3499C8.66011 5.5899 8.12011 5.9199 7.63011 6.2899L5.24011 5.3299C5.02011 5.2499 4.77011 5.3299 4.65011 5.5499L2.74011 8.8699C2.62011 9.0799 2.66011 9.3399 2.86011 9.4799L4.89011 11.0599C4.84011 11.3599 4.80011 11.6899 4.80011 11.9999C4.80011 12.3099 4.82011 12.6399 4.87011 12.9399L2.84011 14.5199C2.66011 14.6599 2.61011 14.9299 2.72011 15.1299L4.64011 18.4499C4.76011 18.6699 5.01011 18.7399 5.23011 18.6699L7.62011 17.7099C8.12011 18.0899 8.65011 18.4099 9.24011 18.6499L9.60011 21.1899C9.65011 21.4299 9.84011 21.5999 10.0801 21.5999H13.9201C14.1601 21.5999 14.3601 21.4299 14.3901 21.1899L14.7501 18.6499C15.3401 18.4099 15.8801 18.0899 16.3701 17.7099L18.7601 18.6699C18.9801 18.7499 19.2301 18.6699 19.3501 18.4499L21.2701 15.1299C21.3901 14.9099 21.3401 14.6599 21.1501 14.5199L19.1401 12.9399ZM12.0001 15.5999C10.0201 15.5999 8.40011 13.9799 8.40011 11.9999C8.40011 10.0199 10.0201 8.3999 12.0001 8.3999C13.9801 8.3999 15.6001 10.0199 15.6001 11.9999C15.6001 13.9799 13.9801 15.5999 12.0001 15.5999Z"
     fill="#505050"
   />
-</svg>`, j = o`<svg
+</svg>`, te = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -235,7 +409,7 @@ const k = (e = "#505050") => o`<svg
     d="M5 13.18V17.18L12 21L19 17.18V13.18L12 17L5 13.18ZM12 3L1 9L12 15L21 10.09V17H23V9L12 3Z"
     fill="#505050"
   />
-</svg>`, K = o`<svg
+</svg>`, oe = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -246,7 +420,7 @@ const k = (e = "#505050") => o`<svg
     d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z"
     fill="#505050"
   />
-</svg>`, Y = o`<svg
+</svg>`, ie = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -257,7 +431,7 @@ const k = (e = "#505050") => o`<svg
     d="M16.6667 15.4167C17.5833 15.4167 18.325 14.6667 18.325 13.7501L18.3333 4.58341C18.3333 3.66675 17.5833 2.91675 16.6667 2.91675H3.33333C2.41667 2.91675 1.66667 3.66675 1.66667 4.58341V13.7501C1.66667 14.6667 2.41667 15.4167 3.33333 15.4167H0C0 16.3334 0.75 17.0834 1.66667 17.0834H18.3333C19.25 17.0834 20 16.3334 20 15.4167H16.6667ZM3.33333 4.58341H16.6667V13.7501H3.33333V4.58341ZM10 16.2501C9.54167 16.2501 9.16667 15.8751 9.16667 15.4167C9.16667 14.9584 9.54167 14.5834 10 14.5834C10.4583 14.5834 10.8333 14.9584 10.8333 15.4167C10.8333 15.8751 10.4583 16.2501 10 16.2501Z"
     fill="#505050"
   />
-</svg>`, q = o`<svg
+</svg>`, ne = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -268,7 +442,7 @@ const k = (e = "#505050") => o`<svg
     d="M18 11V13H22V11H18ZM16 17.61C16.96 18.32 18.21 19.26 19.2 20C19.6 19.47 20 18.93 20.4 18.4C19.41 17.66 18.16 16.72 17.2 16C16.8 16.54 16.4 17.08 16 17.61ZM20.4 5.6C20 5.07 19.6 4.53 19.2 4C18.21 4.74 16.96 5.68 16 6.4C16.4 6.93 16.8 7.47 17.2 8C18.16 7.28 19.41 6.35 20.4 5.6ZM4 9C2.9 9 2 9.9 2 11V13C2 14.1 2.9 15 4 15H5V19H7V15H8L13 18V6L8 9H4ZM15.5 12C15.5 10.67 14.92 9.47 14 8.65V15.34C14.92 14.53 15.5 13.33 15.5 12Z"
     fill="#505050"
   />
-</svg> `, p = o`<svg
+</svg> `, V = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -279,7 +453,7 @@ const k = (e = "#505050") => o`<svg
     d="M19.1401 12.9399C19.1801 12.6399 19.2001 12.3299 19.2001 11.9999C19.2001 11.6799 19.1801 11.3599 19.1301 11.0599L21.1601 9.4799C21.3401 9.3399 21.3901 9.0699 21.2801 8.8699L19.3601 5.5499C19.2401 5.3299 18.9901 5.2599 18.7701 5.3299L16.3801 6.2899C15.8801 5.9099 15.3501 5.5899 14.7601 5.3499L14.4001 2.8099C14.3601 2.5699 14.1601 2.3999 13.9201 2.3999H10.0801C9.84011 2.3999 9.65011 2.5699 9.61011 2.8099L9.25011 5.3499C8.66011 5.5899 8.12011 5.9199 7.63011 6.2899L5.24011 5.3299C5.02011 5.2499 4.77011 5.3299 4.65011 5.5499L2.74011 8.8699C2.62011 9.0799 2.66011 9.3399 2.86011 9.4799L4.89011 11.0599C4.84011 11.3599 4.80011 11.6899 4.80011 11.9999C4.80011 12.3099 4.82011 12.6399 4.87011 12.9399L2.84011 14.5199C2.66011 14.6599 2.61011 14.9299 2.72011 15.1299L4.64011 18.4499C4.76011 18.6699 5.01011 18.7399 5.23011 18.6699L7.62011 17.7099C8.12011 18.0899 8.65011 18.4099 9.24011 18.6499L9.60011 21.1899C9.65011 21.4299 9.84011 21.5999 10.0801 21.5999H13.9201C14.1601 21.5999 14.3601 21.4299 14.3901 21.1899L14.7501 18.6499C15.3401 18.4099 15.8801 18.0899 16.3701 17.7099L18.7601 18.6699C18.9801 18.7499 19.2301 18.6699 19.3501 18.4499L21.2701 15.1299C21.3901 14.9099 21.3401 14.6599 21.1501 14.5199L19.1401 12.9399ZM12.0001 15.5999C10.0201 15.5999 8.40011 13.9799 8.40011 11.9999C8.40011 10.0199 10.0201 8.3999 12.0001 8.3999C13.9801 8.3999 15.6001 10.0199 15.6001 11.9999C15.6001 13.9799 13.9801 15.5999 12.0001 15.5999Z"
     fill="#505050"
   />
-</svg>`, W = o`<svg
+</svg>`, ae = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -290,7 +464,7 @@ const k = (e = "#505050") => o`<svg
     d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12.88 17.76V19H11.13V17.71C10.39 17.53 8.74 16.94 8.11 14.75L9.76 14.08C9.82 14.3 10.34 16.17 12.16 16.17C13.09 16.17 14.14 15.69 14.14 14.56C14.14 13.6 13.44 13.1 11.86 12.53C10.76 12.14 8.51 11.5 8.51 9.22C8.51 9.12 8.52 6.82 11.13 6.26V5H12.88V6.24C14.72 6.56 15.39 8.03 15.54 8.47L13.96 9.14C13.85 8.79 13.37 7.8 12.06 7.8C11.36 7.8 10.25 8.17 10.25 9.19C10.25 10.14 11.11 10.5 12.89 11.09C15.29 11.92 15.9 13.14 15.9 14.54C15.9 17.17 13.4 17.67 12.88 17.76Z"
     fill="#505050"
   />
-</svg> `, X = o`<svg
+</svg> `, se = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -301,7 +475,7 @@ const k = (e = "#505050") => o`<svg
     d="M20 6H16V4C16 2.9 15.1 2 14 2H10C8.9 2 8 2.9 8 4V6H4C2.9 6 2 6.9 2 8V20C2 21.1 2.9 22 4 22H20C21.1 22 22 21.1 22 20V8C22 6.9 21.1 6 20 6ZM10 4H14V6H10V4ZM16 15H13V18H11V15H8V13H11V10H13V13H16V15Z"
     fill="#505050"
   />
-</svg> `, w = o`<svg
+</svg> `, I = n`<svg
   width="16"
   height="16"
   viewBox="0 0 16 16"
@@ -312,7 +486,7 @@ const k = (e = "#505050") => o`<svg
     d="M12.6667 12.6667H3.33333V3.33333H8V2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.59333 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V8H12.6667V12.6667ZM9.33333 2V3.33333H11.7267L5.17333 9.88667L6.11333 10.8267L12.6667 4.27333V6.66667H14V2H9.33333Z"
     fill="#282828"
   />
-</svg> `, J = o`<svg
+</svg> `, re = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -323,7 +497,7 @@ const k = (e = "#505050") => o`<svg
     d="M15 3H5C3.9 3 3.01 3.9 3.01 5L3 19C3 20.1 3.89 21 4.99 21H19C20.1 21 21 20.1 21 19V9L15 3ZM8 17C7.45 17 7 16.55 7 16C7 15.45 7.45 15 8 15C8.55 15 9 15.45 9 16C9 16.55 8.55 17 8 17ZM8 13C7.45 13 7 12.55 7 12C7 11.45 7.45 11 8 11C8.55 11 9 11.45 9 12C9 12.55 8.55 13 8 13ZM8 9C7.45 9 7 8.55 7 8C7 7.45 7.45 7 8 7C8.55 7 9 7.45 9 8C9 8.55 8.55 9 8 9ZM14 10V4.5L19.5 10H14Z"
     fill="#505050"
   />
-</svg> `, Q = o`<svg
+</svg> `, le = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -334,7 +508,7 @@ const k = (e = "#505050") => o`<svg
     d="M17 13H12V18H17V13ZM16 2V4H8V2H6V4H5C3.89 4 3.01 4.9 3.01 6L3 20C3 21.1 3.89 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4H18V2H16ZM19 20H5V9H19V20Z"
     fill="#505050"
   />
-</svg> `, e1 = o`<svg
+</svg> `, ce = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -345,7 +519,7 @@ const k = (e = "#505050") => o`<svg
     d="M20 7H15V4C15 2.9 14.1 2 13 2H11C9.9 2 9 2.9 9 4V7H4C2.9 7 2 7.9 2 9V20C2 21.1 2.9 22 4 22H20C21.1 22 22 21.1 22 20V9C22 7.9 21.1 7 20 7ZM9 12C9.83 12 10.5 12.67 10.5 13.5C10.5 14.33 9.83 15 9 15C8.17 15 7.5 14.33 7.5 13.5C7.5 12.67 8.17 12 9 12ZM12 18H6V17.25C6 16.25 8 15.75 9 15.75C10 15.75 12 16.25 12 17.25V18ZM13 9H11V4H13V9ZM18 16.5H14V15H18V16.5ZM18 13.5H14V12H18V13.5Z"
     fill="#505050"
   />
-</svg> `, t1 = o`<svg
+</svg> `, he = n`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -356,122 +530,275 @@ const k = (e = "#505050") => o`<svg
     d="M12 2.5C8 2.5 4 3 4 6.5V16C4 16.95 4.38 17.81 5 18.44V20.5C5 21.05 5.45 21.5 6 21.5H7C7.55 21.5 8 21.05 8 20.5V19.5H16V20.5C16 21.05 16.45 21.5 17 21.5H18C18.55 21.5 19 21.05 19 20.5V18.44C19.62 17.81 20 16.95 20 16V6.5C20 3 16.42 2.5 12 2.5ZM8.5 16.5C7.67 16.5 7 15.83 7 15C7 14.17 7.67 13.5 8.5 13.5C9.33 13.5 10 14.17 10 15C10 15.83 9.33 16.5 8.5 16.5ZM15.5 16.5C14.67 16.5 14 15.83 14 15C14 14.17 14.67 13.5 15.5 13.5C16.33 13.5 17 14.17 17 15C17 15.83 16.33 16.5 15.5 16.5ZM18 10.5H6V7.5H18V10.5Z"
     fill="#505050"
   />
-</svg>`, M = 248, y = 16, o1 = f`
-  /* ===== HOST-LEVEL CUSTOM PROPERTIES ===== */
-  :host {
-    /* '--cm-side-nav-width' is set on 'campminder-app-shell''s ':host'
-     * (packages/campminder/src/layout.ts is the source of truth) and
-     * pierces the shadow boundary, so it's readable here even though this
-     * package is portal-agnostic. It also switches to the collapsed
-     * width, which a literal '168px' can't — the fallback below is only
-     * for standalone rendering with no shell present.
-     * '100vw' is correct for production, where the shell fills the
-     * viewport and the nav starts at x=0; it reads over-wide in this
-     * harness only because the harness page has a 24px inset the shell
-     * doesn't have — a harness-geometry artifact, not a formula bug. */
-    --cm-mega-menu-max-width: calc(100vw - var(--cm-side-nav-width, 168px));
+</svg>`, O = {
+  AccountsSvgIcon: J,
+  AdminSvgIcon: ee,
+  AlumniSvgIcon: te,
+  CamperSvgIcon: oe,
+  CommunicationSvgIcon: ne,
+  CampInTouchSvgIcon: ie,
+  FinancialSvgIcon: ae,
+  MedicalSvgIcon: se,
+  ReportingSvgIcon: re,
+  SchedulingSvgIcon: le,
+  StaffSvgIcon: ce,
+  TravelSvgIcon: he
+};
+function de(e) {
+  return e ? e.id === "home" ? Z : O[`${e.label}SvgIcon`] ?? V : V;
+}
+function Le(e) {
+  return e ? e.id === "home" ? !0 : `${e.label}SvgIcon` in O : !1;
+}
+function p(e) {
+  return e.startsWith("http") ? new URL(e).pathname + new URL(e).search : e;
+}
+function ge(e, t) {
+  const i = p(t);
+  for (const o of e) {
+    if (o.href && p(o.href) === i)
+      return o.id;
+    for (const a of o.subCategories)
+      if (a.href && p(a.href) === i || a.items.find((r) => p(r.href) === i)) return o.id;
+  }
+}
+function ue(e) {
+  return e.items.length > 0 || !!e.href;
+}
+function d(e) {
+  return e.subCategories.filter(ue);
+}
+function S(e, t) {
+  const i = e.find((o) => o.id === t);
+  return !!i && d(i).length > 0;
+}
+function pe(e, t) {
+  return t === "/" ? "home" : ge(e, t) ?? "";
+}
+function B(e) {
+  return e.popup ? n`
+      <a
+        class="menu-url"
+        href="#nowhere"
+        @click=${() => {
+    const t = window.open(e.href, "", e.popupProperties);
+    return t && (t.opener = null), !1;
+  }}
+        target="_top"
+      >
+        ${e.label}
+        <span class="new-tab-icon">${I}</span>
+      </a>
+    ` : n`
+    <a
+      class="menu-url"
+      href="${e.href}"
+      target=${e.newTab ? "_blank" : "_self"}
+      rel=${v(e.newTab ? "noopener noreferrer" : void 0)}
+    >
+      ${e.label} ${e.newTab ? n`<span class="new-tab-icon">${I}</span>` : null}
+    </a>
+  `;
+}
+var me = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, x = (e, t, i, o) => {
+  for (var a = o > 1 ? void 0 : o ? ve(t, i) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (a = (o ? r(t, i, a) : r(a)) || a);
+  return o && a && me(t, i, a), a;
+};
+let g = class extends w {
+  constructor() {
+    super(...arguments), this.tree = [], this.categoryId = "", this.handleKeyDown = (e) => {
+      var t, i;
+      if (e.key === "Escape")
+        this.handleCloseMegaMenu(!0);
+      else if (e.key === "Tab") {
+        const o = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("a.menu-title, .menu-url");
+        if (!o || o.length === 0) return;
+        const a = (i = this.shadowRoot) == null ? void 0 : i.activeElement;
+        e.shiftKey && a === o[0] ? (e.preventDefault(), this.handleCloseMegaMenu(!0)) : !e.shiftKey && a === o[o.length - 1] && (e.preventDefault(), o[0].focus());
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  get categoryData() {
+    return this.tree.find((e) => e.id === this.categoryId);
+  }
+  /**
+   * The close event keeps its name, `bubbles` and `composed` flags; `detail` is
+   * new and carries the caller's focus intent onward to `<cm-side-nav>`'s
+   * `dismissFlyout()`, which is the one place the focus rule is applied. Both
+   * keyboard paths ask for restoration — they are the paths where focus is inside
+   * the flyout and would otherwise be dropped on the document body. The close
+   * button asks too; it is harmless when focus is not inside, because
+   * `dismissFlyout` only moves focus that actually sits in the flyout.
+   */
+  handleCloseMegaMenu(e = !0) {
+    this.dispatchEvent(
+      new CustomEvent("cm-mega-menu-close", {
+        detail: { restoreFocus: e },
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+  }
+  /**
+   * Packs menu items into as many 248px columns as the container's own
+   * measured height allows. The `getBoundingClientRect()` calls below are
+   * this component measuring its own shadow root, not a sibling, so they
+   * don't trip the one rule. The `window.innerWidth <= 1150` gate is a
+   * different thing and does not get the same pass: it's a page-viewport
+   * read uncorrelated with this component's actual available width, kept
+   * only because it's what upstream gated on. `window.innerWidth` is 1024
+   * under jsdom, so this early return fires on every test run and the
+   * packing logic below it was, until the test added for this floor,
+   * unexercised by the suite.
+   */
+  setMenuItemsContainerWidth() {
+    var a;
+    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".menu-items");
+    if (!e || window.innerWidth <= 1150) return;
+    const t = e.getBoundingClientRect().height - 20;
+    let i = 1, o = 0;
+    for (const s of e.children)
+      o + s.getBoundingClientRect().height + 12 > // 12 for bottom margin on item
+      t && (i += 1, o = 0), o += s.getBoundingClientRect().height + 12;
+    e.style.width = `${i * E + (i + 1) * T}px`;
+  }
+  updated(e) {
+    super.updated(e), this.setMenuItemsContainerWidth();
+  }
+  render() {
+    const e = this.categoryData, t = e ? d(e) : [];
+    return !e || t.length === 0 ? null : n`
+      <section class="mega-menu">
+        <div class="header">
+          <div class="header-left">
+            <div class="header-icon">${de(e)}</div>
+            <p class="header-title title-text">${e.label}</p>
+          </div>
+          <p class="close-button" @click=${() => this.handleCloseMegaMenu(!0)}>
+            ${z()}
+          </p>
+        </div>
+        <div class="menu-items">
+          ${t.map(
+      (i) => n`
+              <div class="menu-item">
+                ${// Deliberate addition, not upstream parity — core-js's
+      // `sub_categories[]` never carried a `url`, so there's no parity to
+      // break. `MenuSubCategory.href?` lets a sub-category be a direct
+      // link, and `isRenderableSubCategory` (`Utils/helpers.ts`) already
+      // keeps such a node alive when it has no items. Rendering only
+      // `sub.items` left that node's header going nowhere — no live case
+      // in `campminder.json` today, but Floor 6's visibility filter can
+      // produce one: an `href`-bearing sub-category whose every leaf is
+      // gated off for the viewer.
+      i.href ? n`<a class="title-text menu-title" href="${i.href}">${i.label}</a>` : n`<p class="title-text menu-title">${i.label}</p>`}
+                ${i.items.map((o) => B(o))}
+              </div>
+            `
+    )}
+        </div>
+      </section>
+    `;
+  }
+};
+g.styles = [X];
+x([
+  h({ attribute: !1 })
+], g.prototype, "tree", 2);
+x([
+  h({ type: String, attribute: "category-id" })
+], g.prototype, "categoryId", 2);
+g = x([
+  y("cm-mega-menu")
+], g);
+const fe = b`
+  :host {
+    /* The mobile drill-down is rendered inside '<cm-side-nav>'s shadow root, so
+     * it would inherit this anyway. Declaring it keeps the panel's typeface a
+     * property of the panel — it survives being reparented or slotted later —
+     * and cannot drift from the side nav's value, because both resolve the one
+     * 'SHELL_FONT_FAMILY' constant. Rationale: '../shell-tokens.ts'. */
+    --font-family: ${C};
   }
 
-  /* ===== CSS RESET ===== */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
 
-  /* ===== ANIMATIONS ===== */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  /* ===== MEGA MENU CONTAINER ===== */
-  .mega-menu {
-    position: absolute;
-    left: 100%;
-    top: 0;
-    max-width: var(--cm-mega-menu-max-width);
+  .mega-menu-mobile {
     height: 100%;
-    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
     background: #fff;
-    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.12);
-    animation: fadeIn 0.5s ease;
   }
 
-  /* ===== HEADER SECTION ===== */
   .header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    gap: 8px;
     color: #505050;
     border-bottom: 1px solid rgba(160, 160, 160, 1);
-    margin: 0 16px;
+    padding: 0 16px;
     height: 56px;
+    flex-shrink: 0;
   }
 
-  .header-left {
-    display: flex;
-    align-items: center;
-  }
-
-  .header-title {
-    display: grid;
-    place-content: center;
-  }
-
-  .header-icon {
-    margin-right: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  /* ===== CLOSE BUTTON ===== */
-  .close-button {
+  .back-button {
     display: flex;
     width: 24px;
     height: 24px;
     justify-content: center;
     align-items: center;
+    border: none;
+    background: transparent;
     border-radius: 4px;
     cursor: pointer;
     transition: background 0.2s ease;
   }
 
-  .close-button:hover {
+  .back-button:hover,
+  .back-button:focus-visible {
     background: rgba(119, 61, 189, 0.12);
   }
 
-  /* ===== TYPOGRAPHY ===== */
+  .back-icon {
+    display: flex;
+    transform: rotate(180deg);
+  }
+
+  .header-title {
+    display: grid;
+    place-content: center;
+  }
+
   .title-text {
     color: #505050;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family);
     font-size: 16px;
     font-weight: 600;
     line-height: 24px;
     letter-spacing: 0.0025em;
   }
 
-  /* ===== MENU ITEMS CONTAINER ===== */
   .menu-items {
-    height: calc(100% - 56px);
-    max-width: var(--cm-mega-menu-max-width);
-    display: flex;
-    flex-flow: column wrap;
-    padding: 10px 16px 10px 0px;
+    flex: 1;
     overflow: auto;
+    padding: 10px 16px;
   }
 
-  /* ===== MENU ITEM ===== */
   .menu-item {
-    width: ${M}px;
-    margin-left: ${y}px;
     margin-bottom: 12px;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family);
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
@@ -480,17 +807,19 @@ const k = (e = "#505050") => o`<svg
 
   .menu-title {
     display: flex;
-    width: 248px;
-    padding: 4px 12px;
+    width: 100%;
+    padding: 8px 12px;
     align-items: center;
     gap: 8px;
+    background: var(--color-section-bg, rgba(0, 0, 0, 0.04));
+    border-radius: 4px;
+    margin-bottom: 4px;
   }
 
-  /* ===== MENU LINKS ===== */
   .menu-url {
     display: flex;
     align-items: center;
-    width: 248px;
+    width: 100%;
     min-height: 32px;
     padding: 6px 12px;
     border-radius: 4px;
@@ -511,74 +840,23 @@ const k = (e = "#505050") => o`<svg
     display: grid;
     place-content: center;
   }
-
-  /* ===== RESPONSIVE ===== */
-  @media (max-width: 1150px) {
-    .menu-items {
-      flex-wrap: nowrap;
-    }
-  }
-`, V = {
-  AccountsSvgIcon: F,
-  AdminSvgIcon: U,
-  AlumniSvgIcon: j,
-  CamperSvgIcon: K,
-  CommunicationSvgIcon: q,
-  CampInTouchSvgIcon: Y,
-  FinancialSvgIcon: W,
-  MedicalSvgIcon: X,
-  ReportingSvgIcon: J,
-  SchedulingSvgIcon: Q,
-  StaffSvgIcon: e1,
-  TravelSvgIcon: t1
-};
-function i1(e) {
-  return e ? e.id === "home" ? H : V[`${e.label}SvgIcon`] ?? p : p;
-}
-function p1(e) {
-  return e ? e.id === "home" ? !0 : `${e.label}SvgIcon` in V : !1;
-}
-function d(e) {
-  return e.startsWith("http") ? new URL(e).pathname + new URL(e).search : e;
-}
-function n1(e, t) {
-  const i = d(t);
-  for (const n of e) {
-    if (n.href && d(n.href) === i)
-      return n.id;
-    for (const s of n.subCategories)
-      if (s.href && d(s.href) === i || s.items.find((a) => d(a.href) === i)) return n.id;
-  }
-}
-function s1(e) {
-  return e.items.length > 0 || !!e.href;
-}
-function C(e) {
-  return e.subCategories.filter(s1);
-}
-function r1(e, t) {
-  const i = e.find((n) => n.id === t);
-  return !!i && C(i).length > 0;
-}
-function a1(e, t) {
-  return t === "/" ? "home" : n1(e, t) ?? "";
-}
-var l1 = Object.defineProperty, h1 = Object.getOwnPropertyDescriptor, u = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? h1(t, i) : t, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (s = (n ? a(t, i, s) : a(s)) || s);
-  return n && s && l1(t, i, s), s;
+`;
+var Ce = Object.defineProperty, be = Object.getOwnPropertyDescriptor, M = (e, t, i, o) => {
+  for (var a = o > 1 ? void 0 : o ? be(t, i) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (a = (o ? r(t, i, a) : r(a)) || a);
+  return o && a && Ce(t, i, a), a;
 };
-let h = class extends m {
+let u = class extends w {
   constructor() {
     super(...arguments), this.tree = [], this.categoryId = "", this.handleKeyDown = (e) => {
       var t, i;
       if (e.key === "Escape")
-        this.handleCloseMegaMenu(!0);
+        e.stopPropagation(), this.handleBack();
       else if (e.key === "Tab") {
-        const n = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("a.menu-title, .menu-url");
-        if (!n || n.length === 0) return;
-        const s = (i = this.shadowRoot) == null ? void 0 : i.activeElement;
-        e.shiftKey && s === n[0] ? (e.preventDefault(), this.handleCloseMegaMenu(!0)) : !e.shiftKey && s === n[n.length - 1] && (e.preventDefault(), n[0].focus());
+        const o = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll(".back-button, a.menu-title, .menu-url");
+        if (!o || o.length === 0) return;
+        const a = (i = this.shadowRoot) == null ? void 0 : i.activeElement;
+        e.shiftKey && a === o[0] ? (e.preventDefault(), e.stopPropagation(), this.handleBack()) : !e.shiftKey && a === o[o.length - 1] && (e.preventDefault(), e.stopPropagation(), o[0].focus());
       }
     };
   }
@@ -592,108 +870,43 @@ let h = class extends m {
     return this.tree.find((e) => e.id === this.categoryId);
   }
   /**
-   * The close event keeps its name, `bubbles` and `composed` flags; `detail` is
-   * new and carries the caller's focus intent onward to `<cm-side-nav>`'s
-   * `dismissFlyout()`, which is the one place the focus rule is applied. Both
-   * keyboard paths ask for restoration — they are the paths where focus is inside
-   * the flyout and would otherwise be dropped on the document body. The close
-   * button asks too; it is harmless when focus is not inside, because
-   * `dismissFlyout` only moves focus that actually sits in the flyout.
+   * Requests the host go back to the main mobile menu list. Named `-back`, not
+   * `-close`, because it does not dismiss the mobile overlay itself — only
+   * `<cm-side-nav>`'s own toggle/backdrop does that (see its doc comment).
    */
-  handleCloseMegaMenu(e = !0) {
+  handleBack() {
     this.dispatchEvent(
-      new CustomEvent("cm-mega-menu-close", {
-        detail: { restoreFocus: e },
+      new CustomEvent("cm-mega-menu-mobile-back", {
         bubbles: !0,
-        composed: !0,
-        cancelable: !0
+        composed: !0
       })
     );
   }
   /**
-   * Packs menu items into as many 248px columns as the container's own
-   * measured height allows. The `getBoundingClientRect()` calls below are
-   * this component measuring its own shadow root, not a sibling, so they
-   * don't trip the one rule. The `window.innerWidth <= 1150` gate is a
-   * different thing and does not get the same pass: it's a page-viewport
-   * read uncorrelated with this component's actual available width, kept
-   * only because it's what upstream gated on. `window.innerWidth` is 1024
-   * under jsdom, so this early return fires on every test run and the
-   * packing logic below it was, until the test added for this floor,
-   * unexercised by the suite.
+   * Required, not decorative: drilling in removes the category button focus
+   * was on from the DOM (it belonged to the main list, now unmounted), so
+   * without this, focus is dropped onto the document body.
    */
-  setMenuItemsContainerWidth() {
-    var s;
-    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".menu-items");
-    if (!e || window.innerWidth <= 1150) return;
-    const t = e.getBoundingClientRect().height - 20;
-    let i = 1, n = 0;
-    for (const r of e.children)
-      n + r.getBoundingClientRect().height + 12 > // 12 for bottom margin on item
-      t && (i += 1, n = 0), n += r.getBoundingClientRect().height + 12;
-    e.style.width = `${i * M + (i + 1) * y}px`;
-  }
-  updated(e) {
-    super.updated(e), this.setMenuItemsContainerWidth();
-  }
-  // 2026-09-04: `label` may carry an unresolved `{{Bunk:Proper:Default}}`-style
-  // terminology token, on both a sub-category header and a leaf. Rendered
-  // verbatim below on purpose — see AGENTS.md's "Never resolve a terminology
-  // token."
-  renderLeaf(e) {
-    return e.popup ? o`
-        <a
-          class="menu-url"
-          href="#nowhere"
-          @click=${() => {
-      const t = window.open(e.href, "", e.popupProperties);
-      return t && (t.opener = null), !1;
-    }}
-          target="_top"
-        >
-          ${e.label}
-          <span class="new-tab-icon">${w}</span>
-        </a>
-      ` : o`
-      <a
-        class="menu-url"
-        href="${e.href}"
-        target=${e.newTab ? "_blank" : "_self"}
-        rel=${x(e.newTab ? "noopener noreferrer" : void 0)}
-      >
-        ${e.label}
-        ${e.newTab ? o`<span class="new-tab-icon">${w}</span>` : null}
-      </a>
-    `;
+  firstUpdated() {
+    var e, t;
+    (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".back-button")) == null || t.focus();
   }
   render() {
-    const e = this.categoryData, t = e ? C(e) : [];
-    return !e || t.length === 0 ? null : o`
-      <section class="mega-menu">
+    const e = this.categoryData, t = e ? d(e) : [];
+    return !e || t.length === 0 ? null : n`
+      <section class="mega-menu-mobile">
         <div class="header">
-          <div class="header-left">
-            <div class="header-icon">${i1(e)}</div>
-            <p class="header-title title-text">${e.label}</p>
-          </div>
-          <p class="close-button" @click=${() => this.handleCloseMegaMenu(!0)}>
-            ${k()}
-          </p>
+          <button class="back-button" @click=${() => this.handleBack()} aria-label="Back">
+            <span class="back-icon">${$}</span>
+          </button>
+          <p class="header-title title-text">${e.label}</p>
         </div>
         <div class="menu-items">
           ${t.map(
-      (i) => o`
+      (i) => n`
               <div class="menu-item">
-                ${// Deliberate addition, not upstream parity — core-js's
-      // `sub_categories[]` never carried a `url`, so there's no parity to
-      // break. `MenuSubCategory.href?` lets a sub-category be a direct
-      // link, and `isRenderableSubCategory` (`Utils/helpers.ts`) already
-      // keeps such a node alive when it has no items. Rendering only
-      // `sub.items` left that node's header going nowhere — no live case
-      // in `campminder.json` today, but Floor 6's visibility filter can
-      // produce one: an `href`-bearing sub-category whose every leaf is
-      // gated off for the viewer.
-      i.href ? o`<a class="title-text menu-title" href="${i.href}">${i.label}</a>` : o`<p class="title-text menu-title">${i.label}</p>`}
-                ${i.items.map((n) => this.renderLeaf(n))}
+                ${i.href ? n`<a class="title-text menu-title" href="${i.href}">${i.label}</a>` : n`<p class="title-text menu-title">${i.label}</p>`}
+                ${i.items.map((o) => B(o))}
               </div>
             `
     )}
@@ -702,17 +915,17 @@ let h = class extends m {
     `;
   }
 };
-h.styles = [o1];
-u([
-  c({ attribute: !1 })
-], h.prototype, "tree", 2);
-u([
-  c({ type: String, attribute: "category-id" })
-], h.prototype, "categoryId", 2);
-h = u([
-  b("cm-mega-menu")
-], h);
-const c1 = f`
+u.styles = [fe];
+M([
+  h({ attribute: !1 })
+], u.prototype, "tree", 2);
+M([
+  h({ type: String, attribute: "category-id" })
+], u.prototype, "categoryId", 2);
+u = M([
+  y("cm-mega-menu-mobile")
+], u);
+const we = b`
   /* ===== CSS CUSTOM PROPERTIES (DESIGN TOKENS) ===== */
   :host {
     display: block;
@@ -746,7 +959,12 @@ const c1 = f`
     --easing-exit: cubic-bezier(0.4, 0, 0.2, 1);
 
     /* Typography tokens */
-    --font-family: 'Inter', sans-serif;
+    /* Every text rule below reads this. The shell hardcoded 'Inter' until
+     * AB#27079 while nothing in this repo ever loaded Inter, so the chrome
+     * silently rendered in the browser's default sans-serif next to a host
+     * showing General Sans. The fallback chain and why it must stay a read-only
+     * var() live on 'SHELL_FONT_FAMILY' in '../shell-tokens.ts'. */
+    --font-family: ${C};
     --font-size-base: 14px;
     --font-size-medium: 15px;
     --font-size-large: 16px;
@@ -778,13 +996,13 @@ const c1 = f`
     box-sizing: border-box;
   }
 
-  /* ===== MENU TOGGLE BUTTON (mobile; unused until Floor 5D, kept for parity) ===== */
+  /* ===== MENU TOGGLE BUTTON (mobile) ===== */
   .menu-toggle {
     width: var(--sidebar-header-height);
     height: var(--sidebar-header-height);
     cursor: pointer;
     display: none;
-    background: white;
+    background: var(--color-bg-gradient);
     border: none;
     border-bottom: 1px solid var(--color-border-gray);
     justify-content: center;
@@ -796,6 +1014,74 @@ const c1 = f`
     height: var(--icon-size-base);
   }
 
+  /* ===== MOBILE NAV (Floor 5D) ===== */
+  .mobile-nav {
+    display: none;
+    position: relative;
+  }
+
+  .mobile-overlay-backdrop {
+    position: fixed;
+    inset: 0;
+    background: var(--color-backdrop);
+  }
+
+  .mobile-overlay-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: var(--overlay-menu-width);
+    max-width: var(--overlay-menu-max-width);
+    height: 100%;
+    background: var(--color-bg-gradient);
+    color: var(--color-text);
+    /* Deliberately not a scroll-lock on document.body (banned, see AGENTS.md's
+     * one rule) — this is the panel's own scroll boundary staying put under
+     * background touch-scroll, the plan's declared, narrower substitute. */
+    overscroll-behavior: contain;
+    overflow: auto;
+  }
+
+  .mobile-categories-container,
+  .mobile-categories-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .mobile-categories-list li {
+    display: contents;
+  }
+
+  .mobile-category {
+    width: 100%;
+    height: var(--category-height);
+    display: flex;
+    align-items: center;
+    border: none;
+    border-bottom: 1px solid var(--color-border);
+    background: transparent;
+    text-decoration: none;
+    padding: var(--spacing-md);
+    color: var(--color-text);
+    cursor: pointer;
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    font-weight: 400;
+    line-height: var(--line-height-base);
+    letter-spacing: -0.001em;
+    text-align: left;
+  }
+
+  .mobile-category.selected {
+    background: var(--color-selected);
+  }
+
+  .mobile-category:hover,
+  .mobile-category:focus {
+    background: var(--color-hover);
+  }
+
   /* ===== NAVIGATION CONTAINER ===== */
   .nav-container {
     display: flex;
@@ -990,9 +1276,10 @@ const c1 = f`
     text-align: left;
   }
 
-  /* Unused on desktop: upstream gates the chevron behind deviceCSS.isMobile,
-     and the mobile menu is deferred to AB#26231 (Floor 5D). Kept so that
-     work does not have to re-derive this rule. */
+  /* Rendered only by the mobile category list (Floor 5D, AB#26231) — the
+     desktop .category button never emits this markup (see side-nav.test.ts's
+     "no chevron on desktop" regression); the desktop indicator stays
+     .category-hovered::after. */
   .chevron-right {
     margin-left: auto;
     display: flex;
@@ -1008,35 +1295,62 @@ const c1 = f`
       animation-iteration-count: 1 !important;
     }
   }
-`, L = {
-  AccountsSvgIcon: Z,
-  AdminSvgIcon: T,
-  AlumniSvgIcon: E,
-  CamperSvgIcon: $,
-  CommunicationSvgIcon: A,
-  CampInTouchSvgIcon: B,
-  FinancialSvgIcon: N,
-  HomeSvgIcon: H,
-  MedicalSvgIcon: O,
-  ReportingSvgIcon: _,
-  SchedulingSvgIcon: G,
-  StaffSvgIcon: P,
-  TravelSvgIcon: D
+
+  /* ===== MOBILE / DESKTOP VARIANT SWITCH (Floor 5D) =====
+   * Deliberately LAST in this stylesheet. A media query adds no specificity —
+   * it only groups rules that still compete on source order at equal
+   * specificity with anything outside it. This block was originally placed
+   * right after the mobile-only rules it complements (before ".nav-container"'s
+   * own base rule), which put it BEFORE that base rule in source order; the
+   * base rule then won the cascade for ".nav-container" at every viewport,
+   * silently no-opping this block's "display: none" for it. Caught by live
+   * browser measurement 2026-09-17 — see the evidence doc. Keeping this block
+   * last guarantees it wins the cascade against every base rule above,
+   * including any added later; do not insert a new base rule after this one. */
+  @media (max-width: ${f}px) {
+    .nav-container {
+      display: none;
+    }
+
+    .mobile-nav {
+      display: block;
+    }
+
+    .menu-toggle {
+      display: flex;
+    }
+  }
+`, N = {
+  AccountsSvgIcon: R,
+  AdminSvgIcon: D,
+  AlumniSvgIcon: _,
+  CamperSvgIcon: F,
+  CommunicationSvgIcon: G,
+  CampInTouchSvgIcon: P,
+  FinancialSvgIcon: U,
+  HomeSvgIcon: Z,
+  MedicalSvgIcon: K,
+  ReportingSvgIcon: q,
+  SchedulingSvgIcon: Y,
+  StaffSvgIcon: Q,
+  TravelSvgIcon: W
 };
-function g1(e) {
-  return e ? L[`${e}SvgIcon`] ?? v : v;
+function k(e) {
+  return e ? N[`${e}SvgIcon`] ?? H : H;
 }
-function w1(e) {
-  return !!e && `${e}SvgIcon` in L;
+function Ve(e) {
+  return !!e && `${e}SvgIcon` in N;
 }
-var d1 = Object.defineProperty, C1 = Object.getOwnPropertyDescriptor, g = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? C1(t, i) : t, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (s = (n ? a(t, i, s) : a(s)) || s);
-  return n && s && d1(t, i, s), s;
+var ye = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, c = (e, t, i, o) => {
+  for (var a = o > 1 ? void 0 : o ? xe(t, i) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (a = (o ? r(t, i, a) : r(a)) || a);
+  return o && a && ye(t, i, a), a;
 };
-let l = class extends m {
+let l = class extends w {
   constructor() {
-    super(...arguments), this.hoveredCategory = "", this.collapsed = !1, this.currentPath = "", this.tree = [], this.toggleSidenav = () => {
+    super(...arguments), this.hoveredCategory = "", this.mobileMenuOpen = !1, this.activeMobileCategoryId = "", this.isNarrowViewport = l.readViewportWidthFallback(), this.collapsed = !1, this.currentPath = "", this.tree = [], this.handleMobileMediaChange = (e) => {
+      this.isNarrowViewport = e.matches;
+    }, this.toggleSidenav = () => {
       this.dispatchEvent(
         new CustomEvent("cm-side-nav-toggle", {
           detail: { collapsed: !this.collapsed },
@@ -1044,6 +1358,18 @@ let l = class extends m {
           composed: !0
         })
       );
+    }, this.handleMobileOverlayKeyDown = (e) => {
+      var t, i;
+      if (!this.openMobileCategory) {
+        if (e.key === "Escape")
+          this.dismissMobileMenu(!0);
+        else if (e.key === "Tab") {
+          const o = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll(".mobile-overlay-menu .mobile-category");
+          if (!o || o.length === 0) return;
+          const a = (i = this.shadowRoot) == null ? void 0 : i.activeElement;
+          e.shiftKey && a === o[0] ? (e.preventDefault(), o[o.length - 1].focus()) : !e.shiftKey && a === o[o.length - 1] && (e.preventDefault(), o[0].focus());
+        }
+      }
     };
   }
   /**
@@ -1056,10 +1382,24 @@ let l = class extends m {
    * getter needs to cache.
    */
   get selectedCategory() {
-    return a1(this.tree, this.currentPath);
+    return pe(this.tree, this.currentPath);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.initMobileMediaQuery();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.clearHoverTimeout();
+    super.disconnectedCallback(), this.clearHoverTimeout(), this.teardownMobileMediaQuery();
+  }
+  /** The fallback used where `matchMedia` is unavailable — see the class doc comment. */
+  static readViewportWidthFallback() {
+    return window.innerWidth <= f;
+  }
+  initMobileMediaQuery() {
+    typeof window.matchMedia == "function" && (this.mobileMediaQuery = window.matchMedia(`(max-width: ${f}px)`), this.isNarrowViewport = this.mobileMediaQuery.matches, this.mobileMediaQuery.addEventListener("change", this.handleMobileMediaChange));
+  }
+  teardownMobileMediaQuery() {
+    var e;
+    (e = this.mobileMediaQuery) == null || e.removeEventListener("change", this.handleMobileMediaChange), this.mobileMediaQuery = void 0;
   }
   setSelectedCategory(e) {
     this.handleMenuItemHover(e);
@@ -1116,7 +1456,7 @@ let l = class extends m {
   }
   // Utility Methods
   get hamburgerIcon() {
-    return this.collapsed ? z : R;
+    return this.collapsed ? L : j;
   }
   /**
    * The category the mega-menu flyout is open for, or `undefined` when none
@@ -1128,61 +1468,173 @@ let l = class extends m {
    */
   get openCategory() {
     const e = this.tree.find((t) => t.id === this.hoveredCategory);
-    if (!(!e || C(e).length === 0))
+    if (!(!e || d(e).length === 0))
       return e;
   }
   buildCategoryClass(e) {
     const t = ["category"];
     return e.id === this.selectedCategory && t.push("selected"), e.id === this.hoveredCategory && t.push("category-hovered"), t.join(" ");
   }
+  /** The category the mobile drill-down is showing, mirroring `openCategory`. */
+  get openMobileCategory() {
+    const e = this.tree.find((t) => t.id === this.activeMobileCategoryId);
+    if (!(!e || d(e).length === 0))
+      return e;
+  }
+  toggleMobileMenu() {
+    if (this.mobileMenuOpen) {
+      this.dismissMobileMenu(!1);
+      return;
+    }
+    this.mobileMenuOpen = !0;
+  }
+  /**
+   * The single dismissal entry point for the mobile overlay — every trigger
+   * (the backdrop click, `.menu-toggle`, the overlay's own Escape) routes
+   * through here, mirroring `dismissFlyout`'s reasoning, so the focus rule is
+   * applied in exactly one place and no trigger can bypass it.
+   *
+   * `restoreFocus` is the caller's intent; focus only actually moves when it is
+   * also true that focus is currently inside the overlay. The target is read
+   * BEFORE state is cleared, same load-bearing order as `dismissFlyout` — the
+   * restore target is `.menu-toggle`, which stays in the DOM regardless of
+   * `mobileMenuOpen`, but focus-inside-overlay is only answerable while the
+   * overlay is still open.
+   */
+  dismissMobileMenu(e) {
+    var i;
+    if (!this.mobileMenuOpen) return;
+    const t = e && this.focusIsInsideMobileOverlay() ? (i = this.shadowRoot) == null ? void 0 : i.querySelector(".menu-toggle") : null;
+    this.mobileMenuOpen = !1, this.activeMobileCategoryId = "", t == null || t.focus();
+  }
+  focusIsInsideMobileOverlay() {
+    var t, i, o, a;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".mobile-overlay-menu");
+    if (!e) return !1;
+    if (this.openMobileCategory) {
+      const s = (i = this.shadowRoot) == null ? void 0 : i.querySelector("cm-mega-menu-mobile");
+      return ((o = s == null ? void 0 : s.shadowRoot) == null ? void 0 : o.activeElement) != null;
+    }
+    return e.contains(((a = this.shadowRoot) == null ? void 0 : a.activeElement) ?? null);
+  }
+  openMobileSubmenu(e) {
+    this.activeMobileCategoryId = e;
+  }
+  async closeMobileSubmenu() {
+    var o;
+    const e = this.activeMobileCategoryId;
+    if (this.activeMobileCategoryId = "", await this.updateComplete, !this.mobileMenuOpen || this.activeMobileCategoryId !== "") return;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelectorAll(".mobile-category"), i = Array.from(t ?? []).find(
+      (a) => a.dataset.categoryId === e
+    );
+    i == null || i.focus();
+  }
+  buildMobileCategoryClass(e) {
+    const t = ["mobile-category"];
+    return e.id === this.selectedCategory && t.push("selected"), t.join(" ");
+  }
+  // 2026-09-17: `category.label` may carry an unresolved `{{Bunk:Proper:Default}}`-style
+  // terminology token — rendered verbatim, same rule as the desktop list above.
+  getMobileCategoryHtml(e) {
+    const t = this.buildMobileCategoryClass(e), i = S(this.tree, e.id), o = k(e.label);
+    return i ? n`
+          <button
+            class="${t}"
+            data-category-id=${e.id}
+            @click=${() => this.openMobileSubmenu(e.id)}
+          >
+            <div class="category-icon">${o}</div>
+            <div class="category-name">${e.label}</div>
+            <span class="chevron-right">${$}</span>
+          </button>
+        ` : n`
+          <a
+            class="${t}"
+            data-category-id=${e.id}
+            href="${v(e.href)}"
+          >
+            <div class="category-icon">${o}</div>
+            <div class="category-name">${e.label}</div>
+          </a>
+        `;
+  }
+  renderMobileMainMenu() {
+    return n`
+      <nav class="mobile-categories-container" role="navigation" aria-label="Main categories">
+        <ul class="mobile-categories-list" role="list">
+          ${this.tree.map(
+      (e) => n` <li role="listitem">${this.getMobileCategoryHtml(e)}</li> `
+    )}
+        </ul>
+      </nav>
+    `;
+  }
+  /**
+   * The mobile overlay's body — either the main category list, or the
+   * drill-down for whichever category is active. `cm-mega-menu-mobile-back`
+   * is the drill-down asking to return to the list; it does not close the
+   * overlay (that's `.menu-toggle` / the backdrop), so it only clears
+   * `activeMobileCategoryId`.
+   */
+  renderMobileOverlayBody() {
+    const e = this.openMobileCategory;
+    return e ? n`
+          <cm-mega-menu-mobile
+            .tree=${this.tree}
+            category-id=${e.id}
+            @cm-mega-menu-mobile-back=${() => this.closeMobileSubmenu()}
+          ></cm-mega-menu-mobile>
+        ` : this.renderMobileMainMenu();
+  }
   // 2026-09-02: `category.label` may still carry an unresolved `{{Bunk:Proper:Default}}`-style
   // terminology token — per-client substitution is a host concern, deferred by the plan (see
   // AGENTS.md's "Never resolve a terminology token"). Rendered verbatim below on purpose. A
   // future truncation, tooltip reformat, or `.trim()`/regex touch-up to `category.label` must
   // not assume it is plain text.
   getCategoryHtml(e) {
-    const t = this.buildCategoryClass(e), i = r1(this.tree, e.id), n = g1(e.label);
-    return i ? o`
+    const t = this.buildCategoryClass(e), i = S(this.tree, e.id), o = k(e.label);
+    return i ? n`
           <button
             class="${t}"
             @mouseenter=${() => this.handleMouseEnter(e.id)}
             @mouseleave=${() => this.handleMouseLeave()}
             @click=${() => this.handleMenuItemHover(e.id)}
           >
-            <div class="category-icon">${n}</div>
+            <div class="category-icon">${o}</div>
             <div class="category-name">${e.label}</div>
           </button>
-        ` : o`
+        ` : n`
           <a
             class="${t}"
             @mouseenter=${() => this.handleMouseEnter(e.id)}
             @mouseleave=${() => this.handleMouseLeave()}
             @click=${() => this.setSelectedCategory(e.id)}
-            href="${x(e.href)}"
+            href="${v(e.href)}"
           >
-            <div class="category-icon">${n}</div>
+            <div class="category-icon">${o}</div>
             <div class="category-name">${e.label}</div>
           </a>
         `;
   }
   renderMainMenu() {
-    return o`
+    return n`
       <nav class="categories-container" role="navigation" aria-label="Main categories">
         <ul class="categories-list" role="list">
           ${this.tree.map(
-      (e) => o` <li role="listitem">${this.getCategoryHtml(e)}</li> `
+      (e) => n` <li role="listitem">${this.getCategoryHtml(e)}</li> `
     )}
         </ul>
       </nav>
     `;
   }
   render() {
-    const e = this.openCategory;
-    return o`
+    const e = this.openCategory, t = this.isNarrowViewport;
+    return n`
       <nav
         class="nav-container"
         role="navigation"
         aria-label="Main navigation"
+        aria-hidden=${t ? "true" : "false"}
         @mouseleave=${() => this.dismissFlyout(!1)}
       >
         <aside
@@ -1217,39 +1669,84 @@ let l = class extends m {
           — it is the derived openCategory getter above, not hoveredCategory
           itself, that becomes undefined.
         -->
-        ${e ? o`
+        ${e ? n`
                 <cm-mega-menu
                   .tree=${this.tree}
                   category-id=${e.id}
-                  @cm-mega-menu-close=${(t) => {
-      var i;
-      return this.dismissFlyout(((i = t.detail) == null ? void 0 : i.restoreFocus) ?? !1);
+                  @cm-mega-menu-close=${(i) => {
+      var o;
+      return this.dismissFlyout(((o = i.detail) == null ? void 0 : o.restoreFocus) ?? !1);
     }}
                 ></cm-mega-menu>
               ` : null}
       </nav>
+
+      <!--
+        Floor 5D's mobile variant — a second, always-rendered DOM tree, per the
+        plan's ruling: both variants render and SideNavStyles's
+        @media (max-width: 530px) picks which is displayed. aria-hidden above
+        mirrors that same breakpoint so the inactive tree is hidden from
+        assistive technology too, not just visually — see this file's header.
+      -->
+      <div class="mobile-nav" aria-hidden=${t ? "false" : "true"}>
+        <button
+          class="menu-toggle"
+          @click=${() => this.toggleMobileMenu()}
+          aria-label="Toggle menu"
+          aria-expanded=${this.mobileMenuOpen ? "true" : "false"}
+        >
+          <span class="toggle-mobile-btn">${L}</span>
+        </button>
+
+        ${this.mobileMenuOpen ? n`
+                <div
+                  class="mobile-overlay-backdrop"
+                  @click=${() => this.dismissMobileMenu(!1)}
+                ></div>
+                <!--
+                  Focus is deliberately NOT moved into the overlay here when it
+                  first opens. .menu-toggle stays in the DOM and keeps focus,
+                  and this overlay renders after the toggle in DOM order, so Tab
+                  reaches the list naturally — nothing is lost, so moving focus
+                  would be unsolicited. Leaving this note so the next person
+                  does not "fix" it.
+                -->
+                <div class="mobile-overlay-menu" @keydown=${this.handleMobileOverlayKeyDown}>
+                  ${this.renderMobileOverlayBody()}
+                </div>
+              ` : null}
+      </div>
     `;
   }
 };
-l.styles = [c1];
-g([
-  S()
+l.styles = [we];
+c([
+  m()
 ], l.prototype, "hoveredCategory", 2);
-g([
-  c({ type: Boolean, reflect: !0 })
+c([
+  m()
+], l.prototype, "mobileMenuOpen", 2);
+c([
+  m()
+], l.prototype, "activeMobileCategoryId", 2);
+c([
+  m()
+], l.prototype, "isNarrowViewport", 2);
+c([
+  h({ type: Boolean, reflect: !0 })
 ], l.prototype, "collapsed", 2);
-g([
-  c({ type: String, attribute: "current-path" })
+c([
+  h({ type: String, attribute: "current-path" })
 ], l.prototype, "currentPath", 2);
-g([
-  c({ attribute: !1 })
+c([
+  h({ attribute: !1 })
 ], l.prototype, "tree", 2);
-l = g([
-  b("cm-side-nav")
+l = c([
+  y("cm-side-nav")
 ], l);
 export {
-  h as MegaMenu,
+  g as MegaMenu,
   l as SideNav,
-  w1 as hasIconFor,
-  p1 as hasMegaMenuIconFor
+  Ve as hasIconFor,
+  Le as hasMegaMenuIconFor
 };