@getvitops/generator 2.1.0 → 4.0.0

package/assets/css/patterns/sitenav.css

@@ -17,10 +17,32 @@
  * OR click (native `[open]` pins it). Top-level submenus drop below their item;
  * deeper (megamenu) submenus fly out to the inline-end side.
  *
- * `.sitenav__disclosure` is `display: contents` so the `<summary>` (caret) and the
- * submenu `<ul>` participate directly in the branch item's grid — that is what lets
- * the caret sit inline with the link while the submenu spans full width on its own
- * row. Native `[open]` toggling is unaffected by `display: contents`.
+ * The `<details>` is grid-placed at column 2 and the submenu `<ul>` is its SIBLING,
+ * a real grid child of the branch item — that is what lets the caret sit inline with
+ * the link while the submenu spans full width on its own row.
+ *
+ * ── TWO BRANCHES, NOT BASE-PLUS-OVERRIDE ──
+ *
+ * `@container` contributes ZERO specificity, so a rule inside the wide block competes
+ * at its bare selector weight. A bare `.sitenav--drawer-end .sitenav__panel` (0,2,0)
+ * therefore beat the wide block's `.sitenav__panel` (0,1,0) reset *in the wide state*:
+ * the promoted navbar shipped translated a full panel-width off-screen, and the
+ * accordion's `overflow: hidden` clipped away every third-level megamenu. Before the
+ * four per-breakpoint blocks were folded into one style query, those resets carried a
+ * `.sitenav--bp-*` class and won the tie on source order; folding them removed it.
+ *
+ * So the rule is: **a narrow-state rule that is MORE SPECIFIC than its wide-state
+ * counterpart lives inside `@container style(--_sitenav-wide: 0)`.** Rules at (0,1,0)
+ * — the panel's box, the lists, the links — stay unscoped, because that same work is
+ * what neutralises the UA `[popover]` sheet, which applies in BOTH states; scoping it
+ * would mean writing it twice. `src/css/state-branch.test.ts` asserts the invariant.
+ *
+ * Both branches read an INHERITED flag, so every part must live inside `.sitenav`,
+ * which declares it. Note the file mixes two unnamed query kinds that resolve against
+ * DIFFERENT containers: `style()` against the nearest ancestor ELEMENT (every element
+ * is a style container — no `container-type` needed, and it resolves for a panel
+ * promoted to the top layer), the `(min-width:)` queries below against `body`
+ * (layout.css). That asymmetry is why the flag has to be a custom property.
  *
  * Per-breakpoint depth caps come pre-resolved from PHP as item classes:
  *   `.sitenav__item--desktop-branch` — caret + submenu shown only ≥ breakpoint;
@@ -30,6 +52,10 @@
 
 /* ── Container + mobile chrome ─────────────────────────────────────────────── */
 .sitenav {
+  /* Reset first — the flag inherits, so a nested sitenav must resolve against
+     itself rather than an outer instance's promoted state. */
+  --_sitenav-wide: 0;
+
   display: flex;
   align-items: center;
 }
@@ -71,6 +97,19 @@
   inset-block: 0;
   inline-size: min(100dvw, var(--sitenav-drawer-size, 20rem));
   max-inline-size: 100dvw;
+
+  /* The UA `[popover]` sheet supplies `margin: auto` and `height: fit-content`, and
+     neither was being undone — so `inset-block: 0` bought nothing and the "drawer"
+     rendered as a content-height card floating in the vertical centre, while at
+     width the auto margins absorbed the free space of any stretched `.sitenav`.
+     `drawer.css` resets margin for exactly this reason; this panel doesn't compose
+     it. Both live in the base block because the UA sheet applies in BOTH states:
+     against `position: fixed` + `inset-block: 0` an auto block-size stretches to
+     the drawer's full height, and against the wide branch's `position: static` the
+     same declaration sizes the navbar to its content. */
+  margin: 0;
+  block-size: auto;
+
   padding: 1.5rem;
   padding-block-start: 3.5rem; /* clearance for the close button */
   background: var(--color-bg-surface);
@@ -102,30 +141,42 @@
   }
 }
 
-/* Slide from the chosen edge (default inline-end). */
-.sitenav--drawer-end .sitenav__panel {
-  inset-inline-end: 0;
-  inset-inline-start: auto;
-  translate: 100% 0;
-}
-.sitenav--drawer-start .sitenav__panel {
-  inset-inline-start: 0;
-  inset-inline-end: auto;
-  translate: -100% 0;
-}
-.sitenav__panel:popover-open {
-  opacity: 1;
-  translate: 0 0;
-}
-@starting-style {
-  .sitenav--drawer-end .sitenav__panel:popover-open {
-    opacity: 0;
+/* ── Drawer geometry + transition — NARROW ONLY ─────────────────────────────
+   Scoped rather than bare because these are (0,2,0)/(0,3,0) and would outrank the
+   wide block's (0,1,0) panel reset. `:popover-open` and the `@starting-style`
+   pair are one transition system with the edge modifiers, so they travel with
+   them: both are inert at width only by coincidence (the panel is always
+   displayed there, and their values happen to match the reset's), which is the
+   same shape of accident as the bug itself. ── */
+@container style(--_sitenav-wide: 0) {
+  /* Slide from the chosen edge (default inline-end). The insets also undo the UA
+     `[popover] { inset: 0 }`; the wide branch does that job with `inset: auto`. */
+  .sitenav--drawer-end .sitenav__panel {
+    inset-inline-end: 0;
+    inset-inline-start: auto;
     translate: 100% 0;
   }
-  .sitenav--drawer-start .sitenav__panel:popover-open {
-    opacity: 0;
+  .sitenav--drawer-start .sitenav__panel {
+    inset-inline-start: 0;
+    inset-inline-end: auto;
     translate: -100% 0;
   }
+
+  .sitenav__panel:popover-open {
+    opacity: 1;
+    translate: 0 0;
+  }
+
+  @starting-style {
+    .sitenav--drawer-end .sitenav__panel:popover-open {
+      opacity: 0;
+      translate: 100% 0;
+    }
+    .sitenav--drawer-start .sitenav__panel:popover-open {
+      opacity: 0;
+      translate: -100% 0;
+    }
+  }
 }
 
 /* ── Lists + links ─────────────────────────────────────────────────────────── */
@@ -163,31 +214,7 @@
   font-style: italic;
 }
 
-/* ── Branch item — mobile accordion ────────────────────────────────────────
-   The item is a grid: [link | caret] on row 1, the submenu spanning row 2. The
-   <details> holds only the caret <summary>; the submenu <ul> is its sibling and a
-   real grid child of the item. The row-2 track animates 0fr→1fr when the details is
-   open (the classic no-JS accordion, driven by `:has`), so the submenu pushes the
-   content below rather than overlaying it. */
-.sitenav__item--branch {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto 0fr;
-  align-items: center;
-  column-gap: 0.5rem;
-  transition: grid-template-rows 0.25s ease;
-}
-
-.sitenav__item--branch > .split-link__link {
-  grid-column: 1;
-  grid-row: 1;
-}
-
-/* <details> is only the caret; keep its box out of the flow's height. */
-.sitenav__disclosure {
-  grid-column: 2;
-  grid-row: 1;
-}
+/* ── Branch item — the two rules both presentations share ──────────────────── */
 
 /* The <summary>. `.split-link__toggle` supplies the flush look, hover + focus, and
    the caret transition; only the disclosure-marker reset is added here. */
@@ -200,383 +227,201 @@
   }
 }
 
-.sitenav__item--branch > .sitenav__submenu {
-  grid-column: 1 / -1;
-  grid-row: 2;
-  /* Stretch to the row-2 track (not content-sized) so the 0fr collapsed state
-     actually clips to 0 — the item's own align-self must beat the grid's
-     `align-items: center`, or overflow:hidden has nothing to clip against. */
-  align-self: stretch;
-  min-block-size: 0;
-  overflow: hidden;
-  padding-inline-start: 1rem;
-}
-
-.sitenav__item--branch:has(> .sitenav__disclosure[open]) {
-  grid-template-rows: auto 1fr;
-}
-
-/* Caret flips while the disclosure is open (summary carries no aria-expanded). */
+/* Caret flips while the disclosure is open (summary carries no aria-expanded).
+   Unscoped: at width the same native `[open]` pins a dropdown, so the flip is
+   wanted in both states. */
 .sitenav__disclosure[open] > .sitenav__subtoggle .split-link__caret {
   rotate: 180deg;
 }
 
-/* Depth cap (mobile side): a desktop-only branch shows just its parent link. */
-.sitenav__item--desktop-branch > .sitenav__disclosure,
-.sitenav__item--desktop-branch > .sitenav__submenu {
-  display: none;
-}
+/* ── Mobile accordion — NARROW ONLY ─────────────────────────────────────────
+   The item is a grid: [link | caret] on row 1, the submenu spanning row 2. The
+   <details> holds only the caret <summary>; the submenu <ul> is its sibling and a
+   real grid child of the item. The row-2 track animates 0fr→1fr when the details is
+   open (the classic no-JS accordion, driven by `:has`), so the submenu pushes the
+   content below rather than overlaying it.
+
+   Scoped because these selectors are (0,2,0)/(0,3,0). Most of what is in here is
+   inert at width anyway — grid placement on a flex item, `align-self` on an
+   absolutely positioned box, `min-block-size: 0` where `auto` already computes to
+   0 — but `overflow: hidden` and `padding-inline-start` are NOT, and leaking them
+   into the navbar is what clipped the megamenus. ── */
+@container style(--_sitenav-wide: 0) {
+  .sitenav__item--branch {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 0fr;
+    align-items: center;
+    column-gap: 0.5rem;
+    transition: grid-template-rows 0.25s ease;
+  }
+
+  .sitenav__item--branch > .split-link__link {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  /* <details> is only the caret; keep its box out of the flow's height. */
+  .sitenav__disclosure {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .sitenav__item--branch > .sitenav__submenu {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    /* Stretch to the row-2 track (not content-sized) so the 0fr collapsed state
+       actually clips to 0 — the item's own align-self must beat the grid's
+       `align-items: center`, or overflow:hidden has nothing to clip against. */
+    align-self: stretch;
+    min-block-size: 0;
+    overflow: hidden;
+    padding-inline-start: 1rem;
+  }
+
+  .sitenav__item--branch:has(> .sitenav__disclosure[open]) {
+    grid-template-rows: auto 1fr;
+  }
 
-/* ── Desktop promotion — one block per framework breakpoint ─────────────────
-   Only the min-width threshold + `.sitenav--bp-*` scope differ; the nested ruleset
-   is identical. CSS has no mixins, so the four blocks are intentionally parallel —
-   edit them together. Each: hide the mobile chrome, force the [popover] panel back
-   inline as a navbar, turn the list horizontal, and promote submenus to dropdowns. */
+  /* Depth cap (mobile side): a desktop-only branch shows just its parent link.
+     Scoped, so the wide branch needs no counter-rule — it simply stops applying. */
+  .sitenav__item--desktop-branch > .sitenav__disclosure,
+  .sitenav__item--desktop-branch > .sitenav__submenu {
+    display: none;
+  }
+}
+/* ── Desktop promotion.
+ *
+ * Four thresholds, ONE ruleset. This used to be four ~86-line blocks that had to
+ * be kept in step by hand, and the file said so: "CSS has no mixins, so the four
+ * blocks are intentionally parallel — edit them together."
+ *
+ * They were not in step. `md`, `lg` and `xl` were byte-identical; `sm` had drifted
+ * onto an older markup shape, selecting `.sitenav__disclosure > .sitenav__submenu`
+ * where the submenu is actually the disclosure's SIBLING (see the accordion
+ * comment above, and bricks/elements/sitenav.php). So `.sitenav--bp-sm` shipped a
+ * navbar whose dropdowns could never open, and nothing failed loudly enough to
+ * notice. One shared block makes that class of drift unrepresentable.
+ *
+ * The mechanism is a style query on an inherited flag, the same one
+ * patterns/navshell.css uses. `.sitenav` resets the flag so a nested sitenav
+ * resolves against ITSELF rather than inheriting an outer instance's "I'm wide".
+ *
+ * Note the wide state is a navbar in everything but name — a horizontal row of
+ * links. It does not literally compose `patterns/navbar.css`, because the panel
+ * has to be a COLUMN in its drawer state, and a class can't be conditional; the
+ * flip would have to be undone at mobile, which costs more than the two
+ * declarations it saves. Use `.navbar` directly for a link row that is only ever
+ * a row.
+ * ── */
 @container (min-width: 30rem) {
   .sitenav--bp-sm {
-    & > .sitenav__toggle,
-    & .sitenav__close {
-      display: none;
-    }
-    /* [popover] is UA/polyfill display:none while closed; !important forces the
-       navbar body back inline (the hamburger is gone, so it never re-hides). */
-    & .sitenav__panel {
-      display: flex !important;
-      flex-direction: row;
-      align-items: center;
-      position: static;
-      inset: auto;
-      inline-size: auto;
-      max-inline-size: none;
-      block-size: auto;
-      padding: 0;
-      translate: none;
-      opacity: 1;
-      overflow: visible;
-      background: none;
-      color: inherit;
-      box-shadow: none;
-      z-index: auto;
-    }
-    & .sitenav__panel::backdrop {
-      display: none;
-    }
-    & .sitenav__list {
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-    & .sitenav__item--branch {
-      position: relative;
-      display: flex;
-      align-items: center;
-      grid-template-columns: none;
-      grid-template-rows: none;
-    }
-    & .sitenav__submenu {
-      position: absolute;
-      inset-block-start: 100%;
-      inset-inline-start: 0;
-      min-inline-size: 13rem;
-      padding: 0.5rem;
-      overflow: visible;
-      background: var(--color-bg-surface);
-      color: var(--color-text-surface);
-      border: var(--b-panel);
-      border-radius: var(--br-panel);
-      box-shadow: var(--ds-panel);
-      z-index: var(--z-tier-overlay);
-      opacity: 0;
-      visibility: hidden;
-      pointer-events: none;
-      translate: 0 0.25rem;
-      transition:
-        opacity 0.15s ease,
-        translate 0.15s ease,
-        visibility 0.15s allow-discrete;
-    }
-    /* deeper submenus (inside a panel) fly out to the side, not downward */
-    & .sitenav__submenu .sitenav__item--branch > .sitenav__disclosure > .sitenav__submenu {
-      inset-block-start: 0;
-      inset-inline-start: 100%;
-      translate: 0.25rem 0;
-    }
-    & .sitenav__item--branch:hover > .sitenav__disclosure > .sitenav__submenu,
-    & .sitenav__item--branch:focus-within > .sitenav__disclosure > .sitenav__submenu,
-    & .sitenav__item--branch > .sitenav__disclosure[open] > .sitenav__submenu {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-      translate: 0 0;
-    }
-    /* depth caps flip at the breakpoint */
-    & .sitenav__item--desktop-branch > .sitenav__disclosure > .sitenav__subtoggle {
-      display: inline-flex;
-    }
-    & .sitenav__item--mobile-branch > .sitenav__disclosure > .sitenav__subtoggle,
-    & .sitenav__item--mobile-branch > .sitenav__disclosure > .sitenav__submenu {
-      display: none;
-    }
+    --_sitenav-wide: 1;
   }
 }
-
 @container (min-width: 48rem) {
   .sitenav--bp-md {
-    & > .sitenav__toggle,
-    & .sitenav__close {
-      display: none;
-    }
-    & .sitenav__panel {
-      display: flex !important;
-      flex-direction: row;
-      align-items: center;
-      position: static;
-      inset: auto;
-      inline-size: auto;
-      max-inline-size: none;
-      block-size: auto;
-      padding: 0;
-      translate: none;
-      opacity: 1;
-      overflow: visible;
-      background: none;
-      color: inherit;
-      box-shadow: none;
-      z-index: auto;
-    }
-    & .sitenav__panel::backdrop {
-      display: none;
-    }
-    & .sitenav__list {
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-    & .sitenav__item--branch {
-      position: relative;
-      display: flex;
-      align-items: center;
-      grid-template-columns: none;
-      grid-template-rows: none;
-    }
-    & .sitenav__submenu {
-      position: absolute;
-      inset-block-start: 100%;
-      inset-inline-start: 0;
-      min-inline-size: 13rem;
-      padding: 0.5rem;
-      overflow: visible;
-      background: var(--color-bg-surface);
-      color: var(--color-text-surface);
-      border: var(--b-panel);
-      border-radius: var(--br-panel);
-      box-shadow: var(--ds-panel);
-      z-index: var(--z-tier-overlay);
-      opacity: 0;
-      visibility: hidden;
-      pointer-events: none;
-      translate: 0 0.25rem;
-      transition:
-        opacity 0.15s ease,
-        translate 0.15s ease,
-        visibility 0.15s allow-discrete;
-    }
-    & .sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
-      inset-block-start: 0;
-      inset-inline-start: 100%;
-      translate: 0.25rem 0;
-    }
-    & .sitenav__item--branch:hover > .sitenav__submenu,
-    & .sitenav__item--branch:focus-within > .sitenav__submenu,
-    & .sitenav__item--branch:has(> .sitenav__disclosure[open]) > .sitenav__submenu {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-      translate: 0 0;
-    }
-    /* depth caps flip at the breakpoint: desktop-only branches reveal their caret +
-       dropdown; mobile-only branches collapse to a plain link. */
-    & .sitenav__item--desktop-branch > .sitenav__disclosure,
-    & .sitenav__item--desktop-branch > .sitenav__submenu {
-      display: block;
-    }
-    & .sitenav__item--mobile-branch > .sitenav__disclosure,
-    & .sitenav__item--mobile-branch > .sitenav__submenu {
-      display: none;
-    }
+    --_sitenav-wide: 1;
   }
 }
-
 @container (min-width: 64rem) {
   .sitenav--bp-lg {
-    & > .sitenav__toggle,
-    & .sitenav__close {
-      display: none;
-    }
-    & .sitenav__panel {
-      display: flex !important;
-      flex-direction: row;
-      align-items: center;
-      position: static;
-      inset: auto;
-      inline-size: auto;
-      max-inline-size: none;
-      block-size: auto;
-      padding: 0;
-      translate: none;
-      opacity: 1;
-      overflow: visible;
-      background: none;
-      color: inherit;
-      box-shadow: none;
-      z-index: auto;
-    }
-    & .sitenav__panel::backdrop {
-      display: none;
-    }
-    & .sitenav__list {
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-    & .sitenav__item--branch {
-      position: relative;
-      display: flex;
-      align-items: center;
-      grid-template-columns: none;
-      grid-template-rows: none;
-    }
-    & .sitenav__submenu {
-      position: absolute;
-      inset-block-start: 100%;
-      inset-inline-start: 0;
-      min-inline-size: 13rem;
-      padding: 0.5rem;
-      overflow: visible;
-      background: var(--color-bg-surface);
-      color: var(--color-text-surface);
-      border: var(--b-panel);
-      border-radius: var(--br-panel);
-      box-shadow: var(--ds-panel);
-      z-index: var(--z-tier-overlay);
-      opacity: 0;
-      visibility: hidden;
-      pointer-events: none;
-      translate: 0 0.25rem;
-      transition:
-        opacity 0.15s ease,
-        translate 0.15s ease,
-        visibility 0.15s allow-discrete;
-    }
-    & .sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
-      inset-block-start: 0;
-      inset-inline-start: 100%;
-      translate: 0.25rem 0;
-    }
-    & .sitenav__item--branch:hover > .sitenav__submenu,
-    & .sitenav__item--branch:focus-within > .sitenav__submenu,
-    & .sitenav__item--branch:has(> .sitenav__disclosure[open]) > .sitenav__submenu {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-      translate: 0 0;
-    }
-    /* depth caps flip at the breakpoint: desktop-only branches reveal their caret +
-       dropdown; mobile-only branches collapse to a plain link. */
-    & .sitenav__item--desktop-branch > .sitenav__disclosure,
-    & .sitenav__item--desktop-branch > .sitenav__submenu {
-      display: block;
-    }
-    & .sitenav__item--mobile-branch > .sitenav__disclosure,
-    & .sitenav__item--mobile-branch > .sitenav__submenu {
-      display: none;
-    }
+    --_sitenav-wide: 1;
   }
 }
-
 @container (min-width: 80rem) {
   .sitenav--bp-xl {
-    & > .sitenav__toggle,
-    & .sitenav__close {
-      display: none;
-    }
-    & .sitenav__panel {
-      display: flex !important;
-      flex-direction: row;
-      align-items: center;
-      position: static;
-      inset: auto;
-      inline-size: auto;
-      max-inline-size: none;
-      block-size: auto;
-      padding: 0;
-      translate: none;
-      opacity: 1;
-      overflow: visible;
-      background: none;
-      color: inherit;
-      box-shadow: none;
-      z-index: auto;
-    }
-    & .sitenav__panel::backdrop {
-      display: none;
-    }
-    & .sitenav__list {
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-    & .sitenav__item--branch {
-      position: relative;
-      display: flex;
-      align-items: center;
-      grid-template-columns: none;
-      grid-template-rows: none;
-    }
-    & .sitenav__submenu {
-      position: absolute;
-      inset-block-start: 100%;
-      inset-inline-start: 0;
-      min-inline-size: 13rem;
-      padding: 0.5rem;
-      overflow: visible;
-      background: var(--color-bg-surface);
-      color: var(--color-text-surface);
-      border: var(--b-panel);
-      border-radius: var(--br-panel);
-      box-shadow: var(--ds-panel);
-      z-index: var(--z-tier-overlay);
-      opacity: 0;
-      visibility: hidden;
-      pointer-events: none;
-      translate: 0 0.25rem;
-      transition:
-        opacity 0.15s ease,
-        translate 0.15s ease,
-        visibility 0.15s allow-discrete;
-    }
-    & .sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
-      inset-block-start: 0;
-      inset-inline-start: 100%;
-      translate: 0.25rem 0;
-    }
-    & .sitenav__item--branch:hover > .sitenav__submenu,
-    & .sitenav__item--branch:focus-within > .sitenav__submenu,
-    & .sitenav__item--branch:has(> .sitenav__disclosure[open]) > .sitenav__submenu {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-      translate: 0 0;
-    }
-    /* depth caps flip at the breakpoint: desktop-only branches reveal their caret +
-       dropdown; mobile-only branches collapse to a plain link. */
-    & .sitenav__item--desktop-branch > .sitenav__disclosure,
-    & .sitenav__item--desktop-branch > .sitenav__submenu {
-      display: block;
-    }
-    & .sitenav__item--mobile-branch > .sitenav__disclosure,
-    & .sitenav__item--mobile-branch > .sitenav__submenu {
-      display: none;
-    }
+    --_sitenav-wide: 1;
+  }
+}
+
+@container style(--_sitenav-wide: 1) {
+  .sitenav > .sitenav__toggle,
+  .sitenav__close {
+    display: none;
+  }
+  .sitenav__panel {
+    display: flex !important;
+    flex-direction: row;
+    align-items: center;
+    position: static;
+    inset: auto;
+    inline-size: auto;
+    max-inline-size: none;
+    block-size: auto;
+    padding: 0;
+    translate: none;
+    opacity: 1;
+    overflow: visible;
+    background: none;
+    color: inherit;
+    box-shadow: none;
+    z-index: auto;
+  }
+  .sitenav__panel::backdrop {
+    display: none;
+  }
+  .sitenav__list {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .sitenav__item--branch {
+    position: relative;
+    display: flex;
+    align-items: center;
+    /* Restated, not inherited: this used to leak in from the accordion rule, which
+       is now narrow-scoped. Without it the caret hugs the link at width. */
+    column-gap: 0.5rem;
+  }
+  .sitenav__submenu {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    min-inline-size: 13rem;
+    padding: 0.5rem;
+    background: var(--color-bg-surface);
+    color: var(--color-text-surface);
+    border: var(--b-panel);
+    border-radius: var(--br-panel);
+    box-shadow: var(--ds-panel);
+    z-index: var(--z-tier-overlay);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    translate: 0 0.25rem;
+    transition:
+      opacity 0.15s ease,
+      translate 0.15s ease,
+      visibility 0.15s allow-discrete;
+  }
+  /* Third level (megamenu) flies out to the inline-end side. Its containing block
+     is the inner `.sitenav__item--branch` (position: relative, above), which sits
+     INSIDE the parent submenu — so nothing between the two may clip. The
+     accordion's `overflow: hidden` used to leak in here at (0,2,0) and beat this
+     branch's (0,1,0) reset, and every megamenu was invisible at width. It is now
+     scoped to `style(--_sitenav-wide: 0)` and cannot. */
+  .sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
+    inset-block-start: 0;
+    inset-inline-start: 100%;
+    translate: 0.25rem 0;
+  }
+  .sitenav__item--branch:hover > .sitenav__submenu,
+  .sitenav__item--branch:focus-within > .sitenav__submenu,
+  .sitenav__item--branch:has(> .sitenav__disclosure[open]) > .sitenav__submenu {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    translate: 0 0;
+  }
+  /* Depth cap (desktop side): a mobile-only branch collapses to a plain link. Its
+     mirror — hiding a DESKTOP-only branch below the breakpoint — lives in the
+     narrow branch, so there is nothing to undo here. A `display: block`
+     counter-rule used to sit alongside this one and, at (0,2,0), beat the base
+     `.sitenav__submenu`'s `display: flex` (0,1,0) — costing every desktop-only
+     dropdown its column direction and gap. */
+  .sitenav__item--mobile-branch > .sitenav__disclosure,
+  .sitenav__item--mobile-branch > .sitenav__submenu {
+    display: none;
   }
 }