fold-ng 0.27.2 → 0.28.1

package/fesm2022/fold-ng.mjs

@@ -310,9 +310,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], propDecorators: { foldSurface: [{ type: i0.Input, args: [{ isSignal: true, alias: "foldSurface", required: false }] }] } });
 
-/** Width (px) at or below which the rails collapse and the primary rail becomes
- *  a mobile drawer. Kept in lockstep with the `@media`/`@container` breakpoint
- *  in the stylesheet. */
+/**
+ * Named media queries for {@link FoldAppShellComponent}'s `mobileQuery` input —
+ * the common answers to "when should the shell switch to its single-column,
+ * drawer layout?". Pass a key (`mobileQuery="phoneOrTablet"`) or a raw query built with
+ * {@link foldMediaQuery}.
+ *
+ * - `phone` (default) — viewport ≤768px. The historical behaviour.
+ * - `touchLandscape` — any device with a touch (coarse) pointer held in landscape, regardless
+ *   of width (a phone or tablet on its side), plus `phone`.
+ * - `phoneOrTablet` — `phone`, plus any viewport with a touch (coarse) pointer up to 1366px:
+ *   an iPad in either orientation, including a 12.9" in landscape. A desktop
+ *   with a mouse keeps the rails at the same width.
+ *
+ * The touch presets test `any-pointer: coarse`, not `pointer: coarse`: an iPad
+ * with a trackpad / Magic Keyboard attached can report a FINE primary pointer
+ * while its screen is still touched. The trade-off: a touch-screen laptop
+ * ≤1366px also matches `phoneOrTablet` — pick `phone` or a raw query if that matters.
+ */
+const FOLD_MOBILE_QUERIES = {
+    phone: "(max-width: 768px)",
+    touchLandscape: "(max-width: 768px), (any-pointer: coarse) and (orientation: landscape)",
+    phoneOrTablet: "(max-width: 768px), (any-pointer: coarse) and (max-width: 1366px)",
+};
+/** Marks a raw media query as intended for `mobileQuery`. */
+function foldMediaQuery(query) {
+    // The brand is type-only: every string is a valid carrier at runtime.
+    if (!isBranded(query)) {
+        throw new Error("unreachable");
+    }
+    return query;
+}
+function isBranded(query) {
+    return typeof query === "string";
+}
+function isPresetName(query) {
+    return Object.hasOwn(FOLD_MOBILE_QUERIES, query);
+}
+/** Resolves a named query to its media query; a raw query passes through. */
+function resolveFoldMobileQuery(query) {
+    return isPresetName(query) ? FOLD_MOBILE_QUERIES[query] : query;
+}
+
+/** Shell width (px) at or below which the shell is mobile whatever
+ *  `mobileQuery` says — an embedded/narrow shell (the gallery preview) collapses
+ *  on its own width. Kept in lockstep with the `@container` breakpoint in the
+ *  stylesheet. */
 const MOBILE_BREAKPOINT = 768;
 /**
  * `<fold-app-shell>` — the responsive application skeleton.
@@ -344,7 +387,7 @@ const MOBILE_BREAKPOINT = 768;
  * └────────┴──────────────┴─────────────────────┘
  * ```
  *
- * At ≤768px it becomes a single header + content + footer column and the rails
+ * In the mobile layout (`mobileQuery`, ≤768px by default) it becomes a single header + content + footer column and the rails
  * drop out. How the nav comes back is `mobileNav`:
  * - `"drawer"` (default) — the **primary** rail turns into an off-canvas drawer;
  *   bind `[(mobileNavOpen)]` and give the app a mobile-only hamburger to slide
@@ -357,7 +400,7 @@ const MOBILE_BREAKPOINT = 768;
  * ## Slots
  * | Attribute        | Region                                    |
  * |------------------|-------------------------------------------|
- * | `railPrimary`    | Left rail (intrinsic width — the rail component sizes itself; `railWidth` sets its base via `--fold-shell-rail-width`). At ≤768px it becomes the mobile drawer (see `mobileNavOpen`). |
+ * | `railPrimary`    | Left rail (intrinsic width — the rail component sizes itself; `railWidth` sets its base via `--fold-shell-rail-width`). In the mobile layout (`mobileQuery`, ≤768px by default) it becomes the mobile drawer (see `mobileNavOpen`). |
  * | `railSecondary`  | Second rail (intrinsic width; a component that collapses to `0` hides itself). |
  * | `subheader`      | The band **under** the header — a nav sub-bar, a filter strip, a context ribbon. Same placement rule as the header (`subheaderLayout`: over the content column, or full width above the rails), and like the footer it is **self-collapsing**: an empty slot claims no row. Rendered as a plain `<div>`, so the band brings its own semantics (a `<nav>`, a toolbar). |
  * | `header`         | Top bar (content column, or full-width — see `headerLayout`). Rendered as `<header>` — project plain elements into it, not another `<header>`. |
@@ -369,9 +412,9 @@ const MOBILE_BREAKPOINT = 768;
  * |----------------------|------------------------------------|---------|----------------------------|
  * | `railWidth`          | `--fold-shell-rail-width`           | `64px`  | Base width the primary rail reads (column is intrinsic). |
  * | `headerHeight`       | `--fold-shell-header-height`        | `56px`  | Header row height.         |
- * | `headerHeightMobile` | `--fold-shell-header-height-mobile` | `52px`  | Header height at ≤768px.    |
+ * | `headerHeightMobile` | `--fold-shell-header-height-mobile` | `52px`  | Header height in the mobile layout.    |
  * | `subheaderHeight`    | `--fold-shell-subheader-height`     | `52px`  | Subheader band height.     |
- * | `subheaderHeightMobile` | `--fold-shell-subheader-height-mobile` | `48px` | Subheader height at ≤768px. |
+ * | `subheaderHeightMobile` | `--fold-shell-subheader-height-mobile` | `48px` | Subheader height in the mobile layout. |
  *
  * ## Layout knobs
  * | Input          | Values                | Default   | Meaning                                    |
@@ -381,6 +424,7 @@ const MOBILE_BREAKPOINT = 768;
  * | `footerLayout` | `"inset" \| "full"`   | `"inset"` | `inset` = footer sits under the content column (rails climb its side); `full` = footer spans the full width, below the rails (the usual player-bar look). Ignored when `footerBehavior="scroll"`. |
  * | `footerBehavior`| `"pinned" \| "scroll"`| `"pinned"`| `pinned` = the footer is a fixed row, **always in sight** (a player / status bar) — supports `inset` and `full`. `scroll` = the footer flows at the **end of the content**, revealed when you scroll to the bottom (a legal / support footer) — it lives in the content column (inset). A short page still pushes it to the bottom (the content grows to fill), and a tall page reveals it below the fold; you never manage that. |
  * | `scroll`       | `"scroll" \| "stage"` | `"scroll"`| **Who owns the content scroll.** `scroll` (default) = the shell's content region owns the scroll; pages flow inside it (`fold-page-layout scroll="flow"`), the chrome stays put, a `scroll` footer sits at the true end. `stage` = the content region is a fixed-height stage that does *not* scroll — the page fills it and scrolling happens inside `[foldScrollRegion]` areas (a mail-style split view). See `docs/scroll.md`. |
+ * | `mobileQuery`  | `FoldMobileQuery` | `"phone"` | **When the shell turns mobile.** A key of `FOLD_MOBILE_QUERIES` (`"phone"` ≤768px, `"phoneOrTablet"` adds touch screens up to 1366px — an iPad in landscape —, `"touchLandscape"`) or `foldMediaQuery("<raw query>")`. Followed live; the state is readable as `shell.isMobile()` and on the host as `.is-mobile` / `[data-mobile]`. A shell whose own width is ≤768px is mobile regardless. |
  *
  * ## Elevation (the floating look)
  * The shell owns **structure**, not skin — it drives no `floating` flag. To lift
@@ -440,7 +484,7 @@ const MOBILE_BREAKPOINT = 768;
  * >
  *   <app-menu railPrimary foldElevated /><!-- a floating rail; drop it for flat -->
  *   <app-workspace-rail railSecondary />
- *   <app-header header /><!-- its hamburger toggles navOpen at ≤768px -->
+ *   <app-header header /><!-- its hamburger toggles navOpen when shell.isMobile() -->
  *   <app-nav-bar subheader /><!-- optional; omit it and the band collapses -->
  *   <router-outlet />
  *   <!-- panels / overlays / banners also go in the default slot -->
@@ -456,13 +500,13 @@ class FoldAppShellComponent {
     /** Header row height in px. Omit to inherit `--fold-shell-header-height` (56). */
     headerHeight = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "headerHeight" }] : /* istanbul ignore next */ []));
-    /** Header height at ≤768px in px. Omit to inherit `--fold-shell-header-height-mobile` (52). */
+    /** Header height in the mobile layout in px. Omit to inherit `--fold-shell-header-height-mobile` (52). */
     headerHeightMobile = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "headerHeightMobile" }] : /* istanbul ignore next */ []));
     /** Subheader band height in px. Omit to inherit `--fold-shell-subheader-height` (52). */
     subheaderHeight = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "subheaderHeight" }] : /* istanbul ignore next */ []));
-    /** Subheader band height at ≤768px in px. Omit to inherit `--fold-shell-subheader-height-mobile` (48). */
+    /** Subheader band height in the mobile layout, in px. Omit to inherit `--fold-shell-subheader-height-mobile` (48). */
     subheaderHeightMobile = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "subheaderHeightMobile" }] : /* istanbul ignore next */ []));
     /** `"full"` spans the header across every column, above the rails; `"inset"` (default) keeps it over the content column. */
@@ -529,7 +573,7 @@ class FoldAppShellComponent {
     /**
      * Two-way: is the mobile nav open?
      *
-     * Below the mobile breakpoint the rails drop out; instead of vanishing, the
+     * In the mobile layout (see `mobileQuery`) the rails drop out; instead of vanishing, the
      * **primary** rail becomes an off-canvas drawer this flag slides in. The app
      * owns the trigger — a mobile-only hamburger in its header, bound
      * `[(mobileNavOpen)]` — and typically flips it back to `false` on navigation;
@@ -540,6 +584,20 @@ class FoldAppShellComponent {
      */
     mobileNavOpen = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mobileNavOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * When the shell switches to its mobile layout (single column, rails out,
+     * primary rail as a drawer): a key of `FOLD_MOBILE_QUERIES` — `"phone"`
+     * (default, ≤768px), `"phoneOrTablet"` (also touch screens up to 1366px, an iPad in
+     * landscape), `"touchLandscape"` — or a raw media query wrapped in
+     * `foldMediaQuery(...)`. Followed live through `matchMedia`; SSR / no
+     * `matchMedia` reads as not matching (wide first paint). A shell whose own
+     * width is ≤768px is mobile regardless (an embedded preview).
+     */
+    mobileQuery = input("phone", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileQuery" }] : /* istanbul ignore next */ []));
+    /** Live result of `matchMedia(mobileQuery)`. */
+    queryMatches = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queryMatches" }] : /* istanbul ignore next */ []));
     /** The shell's own width, kept live by a shared `ResizeObserver` primitive. */
     width = observeElementWidth();
     /** The registry of live scroll regions. The shell registers its own content
@@ -549,29 +607,46 @@ class FoldAppShellComponent {
     /** The inner content scroll box (`scroll` mode) / stage (`stage` mode). */
     scrollBox = viewChild("scrollBox", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scrollBox" }] : /* istanbul ignore next */ []));
-    /** Whether the shell is narrow enough to collapse — tracked from its **own**
-     *  width, not the viewport, so the drawer engages in step with the CSS
-     *  collapse whether that fires on `@media` (the shell fills the viewport) or
-     *  `@container` (an embedded preview). `0` (unmeasured / SSR) reads as wide —
-     *  the SSR-safe first paint. */
-    isNarrow = computed(() => {
+    /**
+     * Is the shell in its mobile layout? True when `mobileQuery` matches, or when
+     * the shell's own width is ≤768px. Drives the host's `.is-mobile` class /
+     * `data-mobile` attribute (the stylesheet keys the collapse on it) and the
+     * drawer. Public, via `#shell="foldAppShell"`, so the app shows its hamburger
+     * exactly when the drawer can open: `@if (shell.isMobile()) { … }`. `false`
+     * on the server.
+     */
+    isMobile = computed(() => {
         const w = this.width();
-        return w > 0 && w <= MOBILE_BREAKPOINT;
+        return this.queryMatches() || (w > 0 && w <= MOBILE_BREAKPOINT);
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isNarrow" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
     /** The drawer is live only in `drawer` mode, when the shell is narrow **and**
      *  open — so the focus-trap and scrim never engage over a full-width rail, nor
      *  when a `none`-mode shell defers the mobile nav to a launcher. */
-    drawerOpen = computed(() => this.mobileNav() === "drawer" && this.isNarrow() && this.mobileNavOpen(), /* @ts-ignore */
+    drawerOpen = computed(() => this.mobileNav() === "drawer" && this.isMobile() && this.mobileNavOpen(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "drawerOpen" }] : /* istanbul ignore next */ []));
     constructor() {
         // Widening past the breakpoint closes the drawer so it can't linger as a
         // stuck off-canvas panel once the rails are back in view.
         effect(() => {
-            if (!this.isNarrow() && this.mobileNavOpen()) {
+            if (!this.isMobile() && this.mobileNavOpen()) {
                 this.mobileNavOpen.set(false);
             }
         });
+        // Follow `mobileQuery` live; a new query swaps the listener (onCleanup).
+        // No `matchMedia` (SSR, old test DOM) → stays `false`, the wide first paint.
+        const view = this.document.defaultView;
+        effect((onCleanup) => {
+            const query = resolveFoldMobileQuery(this.mobileQuery());
+            if (!view || typeof view.matchMedia !== "function") {
+                return;
+            }
+            const mql = view.matchMedia(query);
+            this.queryMatches.set(mql.matches);
+            const onChange = (e) => this.queryMatches.set(e.matches);
+            mql.addEventListener("change", onChange);
+            onCleanup(() => mql.removeEventListener("change", onChange));
+        });
         // Register the content scroll box so overlays can freeze it. Client-only
         // (afterNextRender) — SSR has no live scroll to coordinate, and the view
         // child is resolved by then.
@@ -621,7 +696,7 @@ class FoldAppShellComponent {
     subheaderHeightMobileVar = computed(() => pxVar(this.subheaderHeightMobile()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "subheaderHeightMobileVar" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAppShellComponent, isStandalone: true, selector: "fold-app-shell", inputs: { railWidth: { classPropertyName: "railWidth", publicName: "railWidth", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, headerHeightMobile: { classPropertyName: "headerHeightMobile", publicName: "headerHeightMobile", isSignal: true, isRequired: false, transformFunction: null }, subheaderHeight: { classPropertyName: "subheaderHeight", publicName: "subheaderHeight", isSignal: true, isRequired: false, transformFunction: null }, subheaderHeightMobile: { classPropertyName: "subheaderHeightMobile", publicName: "subheaderHeightMobile", isSignal: true, isRequired: false, transformFunction: null }, headerLayout: { classPropertyName: "headerLayout", publicName: "headerLayout", isSignal: true, isRequired: false, transformFunction: null }, subheaderLayout: { classPropertyName: "subheaderLayout", publicName: "subheaderLayout", isSignal: true, isRequired: false, transformFunction: null }, footerLayout: { classPropertyName: "footerLayout", publicName: "footerLayout", isSignal: true, isRequired: false, transformFunction: null }, footerBehavior: { classPropertyName: "footerBehavior", publicName: "footerBehavior", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, drawerLabel: { classPropertyName: "drawerLabel", publicName: "drawerLabel", isSignal: true, isRequired: false, transformFunction: null }, mobileNav: { classPropertyName: "mobileNav", publicName: "mobileNav", isSignal: true, isRequired: false, transformFunction: null }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mobileNavOpen: "mobileNavOpenChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "style.--fold-shell-rail-width": "railWidthVar()", "style.--fold-shell-header-height": "headerHeightVar()", "style.--fold-shell-header-height-mobile": "headerHeightMobileVar()", "style.--fold-shell-subheader-height": "subheaderHeightVar()", "style.--fold-shell-subheader-height-mobile": "subheaderHeightMobileVar()", "class.header-full": "headerLayout() === \"full\"", "class.subheader-full": "subheaderLayout() === \"full\"", "class.footer-full": "footerLayout() === \"full\"", "class.footer-scroll": "footerBehavior() === \"scroll\"", "class.mobile-drawer": "mobileNav() === \"drawer\"", "class.mobile-nav-open": "drawerOpen()", "attr.data-scroll": "scroll()" } }, viewQueries: [{ propertyName: "scrollBox", first: true, predicate: ["scrollBox"], descendants: true, isSignal: true }], exportAs: ["foldAppShell"], ngImport: i0, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n     keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n  skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n     (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n     same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n  class=\"rail-primary\"\n  [id]=\"drawerId\"\n  foldSurface=\"chrome\"\n  [foldFocusTrap]=\"drawerOpen()\"\n  [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n  [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n  [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n  tabindex=\"-1\"\n>\n  <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n  class=\"rail-secondary\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n     shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n     click; Escape and widening close it too. aria-hidden: the focus-trapped\n     drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n  <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n  class=\"header\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[header]\" />\n</header>\n\n<!-- The band under the header: a nav sub-bar, a filter strip, a context ribbon.\n     A plain <div> on purpose \u2014 <header> is taken, and the band's own semantics\n     (a <nav>, a toolbar) belong to what the app projects into it. Like the\n     footer, it claims a grid row only when something is actually projected. -->\n<div\n  class=\"subheader\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[subheader]\" />\n</div>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n     sight) or inside the content scroll (revealed on the way down). A single\n     <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n  <footer\n    class=\"footer\"\n    [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n    foldSurface=\"chrome\"\n    [attr.inert]=\"drawerOpen() ? '' : null\"\n  >\n    <ng-content select=\"[footer]\" />\n  </footer>\n</ng-template>\n\n<!-- The content region is the fixed, positioned FRAME \u2014 never scrolls, so a\n     docked overlay (the panel host) anchored to it stays put. The scroll lives on\n     the inner `.content-scroll` box; because its containing block is this frame\n     (above the scroll box), an absolutely-positioned panel dock escapes the\n     scroll and floats over the frame. `.content-flow` grows to fill, so a short\n     page still pushes a trailing `scroll` footer to the true bottom. -->\n<main\n  class=\"content\"\n  foldSurface=\"page\"\n  [id]=\"contentId\"\n  tabindex=\"-1\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <div class=\"content-scroll fold-shell-scroll\" #scrollBox>\n    <div class=\"content-flow\"><ng-content /></div>\n    @if (footerBehavior() === \"scroll\") {\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    }\n  </div>\n</main>\n@if (footerBehavior() !== \"scroll\") {\n  <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr)}:host{--fold-shell-chrome-offset: var(--fold-shell-header-height-mobile, 52px)}:host(:has([subheader])){--fold-shell-chrome-offset: calc( var(--fold-shell-header-height-mobile, 52px) + var(--fold-shell-subheader-height-mobile, 48px) )}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:var(--fold-weight-semibold);text-decoration:none;transform:translateY(-150%);transition:transform .12s ease}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}.rail-primary{grid-area:rail-primary;min-height:0;background:var(--fold-color-bg-rail-primary)}.rail-secondary{grid-area:rail-secondary;min-height:0;background:var(--fold-color-bg-rail-secondary)}.header{grid-area:header;min-width:0;background:var(--fold-color-bg-header)}.subheader{grid-area:subheader;min-width:0;background:var(--fold-color-bg-header)}.footer{grid-area:footer;min-width:0;min-height:0;background:var(--fold-color-bg-header)}.content{grid-area:content;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.content:focus{outline:none}.content-scroll{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;scrollbar-width:thin;scrollbar-color:var(--fold-scrollbar-thumb, color-mix(in srgb, currentColor 24%, transparent)) var(--fold-scrollbar-track, transparent);overflow-anchor:auto}:host([data-scroll=scroll]) .content-scroll,:host(.footer-scroll) .content-scroll{overflow-y:auto}.content-flow{flex:1 0 auto;min-width:0;min-height:0;display:flex;flex-direction:column}.footer-inflow{flex:none}.rail-primary:has([data-elevated]),.rail-secondary:has([data-elevated]),.header:has([data-elevated]),.subheader:has([data-elevated]),.footer:has([data-elevated]),.content:has([data-elevated]){padding:var(--fold-surface-inset, var(--fold-space-md))}@media(max-width:768px){:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@container (max-width: 1024px){.rail-secondary{display:none}}@container (max-width: 768px){:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@keyframes fold-shell-scrim-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.rail-primary,.mobile-scrim{transition:none;animation:none}}\n"], dependencies: [{ kind: "directive", type: FoldSurfaceDirective, selector: "[foldSurface]", inputs: ["foldSurface"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAppShellComponent, isStandalone: true, selector: "fold-app-shell", inputs: { railWidth: { classPropertyName: "railWidth", publicName: "railWidth", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, headerHeightMobile: { classPropertyName: "headerHeightMobile", publicName: "headerHeightMobile", isSignal: true, isRequired: false, transformFunction: null }, subheaderHeight: { classPropertyName: "subheaderHeight", publicName: "subheaderHeight", isSignal: true, isRequired: false, transformFunction: null }, subheaderHeightMobile: { classPropertyName: "subheaderHeightMobile", publicName: "subheaderHeightMobile", isSignal: true, isRequired: false, transformFunction: null }, headerLayout: { classPropertyName: "headerLayout", publicName: "headerLayout", isSignal: true, isRequired: false, transformFunction: null }, subheaderLayout: { classPropertyName: "subheaderLayout", publicName: "subheaderLayout", isSignal: true, isRequired: false, transformFunction: null }, footerLayout: { classPropertyName: "footerLayout", publicName: "footerLayout", isSignal: true, isRequired: false, transformFunction: null }, footerBehavior: { classPropertyName: "footerBehavior", publicName: "footerBehavior", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, drawerLabel: { classPropertyName: "drawerLabel", publicName: "drawerLabel", isSignal: true, isRequired: false, transformFunction: null }, mobileNav: { classPropertyName: "mobileNav", publicName: "mobileNav", isSignal: true, isRequired: false, transformFunction: null }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: true, isRequired: false, transformFunction: null }, mobileQuery: { classPropertyName: "mobileQuery", publicName: "mobileQuery", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mobileNavOpen: "mobileNavOpenChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "style.--fold-shell-rail-width": "railWidthVar()", "style.--fold-shell-header-height": "headerHeightVar()", "style.--fold-shell-header-height-mobile": "headerHeightMobileVar()", "style.--fold-shell-subheader-height": "subheaderHeightVar()", "style.--fold-shell-subheader-height-mobile": "subheaderHeightMobileVar()", "class.header-full": "headerLayout() === \"full\"", "class.subheader-full": "subheaderLayout() === \"full\"", "class.footer-full": "footerLayout() === \"full\"", "class.footer-scroll": "footerBehavior() === \"scroll\"", "class.mobile-drawer": "mobileNav() === \"drawer\"", "class.mobile-nav-open": "drawerOpen()", "class.is-mobile": "isMobile()", "attr.data-mobile": "isMobile() ? \"\" : null", "attr.data-scroll": "scroll()" } }, viewQueries: [{ propertyName: "scrollBox", first: true, predicate: ["scrollBox"], descendants: true, isSignal: true }], exportAs: ["foldAppShell"], ngImport: i0, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n     keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n  skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n     (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n     same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n  class=\"rail-primary\"\n  [id]=\"drawerId\"\n  foldSurface=\"chrome\"\n  [foldFocusTrap]=\"drawerOpen()\"\n  [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n  [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n  [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n  tabindex=\"-1\"\n>\n  <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n  class=\"rail-secondary\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n     shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n     click; Escape and widening close it too. aria-hidden: the focus-trapped\n     drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n  <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n  class=\"header\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[header]\" />\n</header>\n\n<!-- The band under the header: a nav sub-bar, a filter strip, a context ribbon.\n     A plain <div> on purpose \u2014 <header> is taken, and the band's own semantics\n     (a <nav>, a toolbar) belong to what the app projects into it. Like the\n     footer, it claims a grid row only when something is actually projected. -->\n<div\n  class=\"subheader\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[subheader]\" />\n</div>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n     sight) or inside the content scroll (revealed on the way down). A single\n     <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n  <footer\n    class=\"footer\"\n    [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n    foldSurface=\"chrome\"\n    [attr.inert]=\"drawerOpen() ? '' : null\"\n  >\n    <ng-content select=\"[footer]\" />\n  </footer>\n</ng-template>\n\n<!-- The content region is the fixed, positioned FRAME \u2014 never scrolls, so a\n     docked overlay (the panel host) anchored to it stays put. The scroll lives on\n     the inner `.content-scroll` box; because its containing block is this frame\n     (above the scroll box), an absolutely-positioned panel dock escapes the\n     scroll and floats over the frame. `.content-flow` grows to fill, so a short\n     page still pushes a trailing `scroll` footer to the true bottom. -->\n<main\n  class=\"content\"\n  foldSurface=\"page\"\n  [id]=\"contentId\"\n  tabindex=\"-1\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <div class=\"content-scroll fold-shell-scroll\" #scrollBox>\n    <div class=\"content-flow\"><ng-content /></div>\n    @if (footerBehavior() === \"scroll\") {\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    }\n  </div>\n</main>\n@if (footerBehavior() !== \"scroll\") {\n  <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr)}:host{--fold-shell-chrome-offset: var(--fold-shell-header-height-mobile, 52px)}:host(:has([subheader])){--fold-shell-chrome-offset: calc( var(--fold-shell-header-height-mobile, 52px) + var(--fold-shell-subheader-height-mobile, 48px) )}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:var(--fold-weight-semibold);text-decoration:none;transform:translateY(-150%);transition:transform .12s ease}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}.rail-primary{grid-area:rail-primary;min-height:0;background:var(--fold-color-bg-rail-primary)}.rail-secondary{grid-area:rail-secondary;min-height:0;background:var(--fold-color-bg-rail-secondary)}.header{grid-area:header;min-width:0;background:var(--fold-color-bg-header)}.subheader{grid-area:subheader;min-width:0;background:var(--fold-color-bg-header)}.footer{grid-area:footer;min-width:0;min-height:0;background:var(--fold-color-bg-header)}.content{grid-area:content;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.content:focus{outline:none}.content-scroll{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;scrollbar-width:thin;scrollbar-color:var(--fold-scrollbar-thumb, color-mix(in srgb, currentColor 24%, transparent)) var(--fold-scrollbar-track, transparent);overflow-anchor:auto}:host([data-scroll=scroll]) .content-scroll,:host(.footer-scroll) .content-scroll{overflow-y:auto}.content-flow{flex:1 0 auto;min-width:0;min-height:0;display:flex;flex-direction:column}.footer-inflow{flex:none}.rail-primary:has([data-elevated]),.rail-secondary:has([data-elevated]),.header:has([data-elevated]),.subheader:has([data-elevated]),.footer:has([data-elevated]),.content:has([data-elevated]){padding:var(--fold-surface-inset, var(--fold-space-md))}:host(.is-mobile:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.is-mobile:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.is-mobile:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.is-mobile:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.is-mobile:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.is-mobile.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.is-mobile.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.is-mobile.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.is-mobile.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile) .rail-primary,:host(.is-mobile) .rail-secondary{display:none}:host(.is-mobile.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.is-mobile.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}:host(.is-mobile) .mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.is-mobile.mobile-nav-open) .content-scroll{overflow:hidden}@container (max-width: 1024px){.rail-secondary{display:none}}@container (max-width: 768px){:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host .rail-primary,:host .rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}:host .mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@keyframes fold-shell-scrim-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.rail-primary,.mobile-scrim{transition:none;animation:none}}\n"], dependencies: [{ kind: "directive", type: FoldSurfaceDirective, selector: "[foldSurface]", inputs: ["foldSurface"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAppShellComponent, decorators: [{
             type: Component,
@@ -637,9 +712,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         "[class.footer-scroll]": 'footerBehavior() === "scroll"',
                         "[class.mobile-drawer]": 'mobileNav() === "drawer"',
                         "[class.mobile-nav-open]": "drawerOpen()",
+                        "[class.is-mobile]": "isMobile()",
+                        "[attr.data-mobile]": 'isMobile() ? "" : null',
                         "[attr.data-scroll]": "scroll()",
-                    }, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n     keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n  skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n     (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n     same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n  class=\"rail-primary\"\n  [id]=\"drawerId\"\n  foldSurface=\"chrome\"\n  [foldFocusTrap]=\"drawerOpen()\"\n  [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n  [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n  [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n  tabindex=\"-1\"\n>\n  <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n  class=\"rail-secondary\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n     shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n     click; Escape and widening close it too. aria-hidden: the focus-trapped\n     drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n  <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n  class=\"header\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[header]\" />\n</header>\n\n<!-- The band under the header: a nav sub-bar, a filter strip, a context ribbon.\n     A plain <div> on purpose \u2014 <header> is taken, and the band's own semantics\n     (a <nav>, a toolbar) belong to what the app projects into it. Like the\n     footer, it claims a grid row only when something is actually projected. -->\n<div\n  class=\"subheader\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[subheader]\" />\n</div>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n     sight) or inside the content scroll (revealed on the way down). A single\n     <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n  <footer\n    class=\"footer\"\n    [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n    foldSurface=\"chrome\"\n    [attr.inert]=\"drawerOpen() ? '' : null\"\n  >\n    <ng-content select=\"[footer]\" />\n  </footer>\n</ng-template>\n\n<!-- The content region is the fixed, positioned FRAME \u2014 never scrolls, so a\n     docked overlay (the panel host) anchored to it stays put. The scroll lives on\n     the inner `.content-scroll` box; because its containing block is this frame\n     (above the scroll box), an absolutely-positioned panel dock escapes the\n     scroll and floats over the frame. `.content-flow` grows to fill, so a short\n     page still pushes a trailing `scroll` footer to the true bottom. -->\n<main\n  class=\"content\"\n  foldSurface=\"page\"\n  [id]=\"contentId\"\n  tabindex=\"-1\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <div class=\"content-scroll fold-shell-scroll\" #scrollBox>\n    <div class=\"content-flow\"><ng-content /></div>\n    @if (footerBehavior() === \"scroll\") {\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    }\n  </div>\n</main>\n@if (footerBehavior() !== \"scroll\") {\n  <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr)}:host{--fold-shell-chrome-offset: var(--fold-shell-header-height-mobile, 52px)}:host(:has([subheader])){--fold-shell-chrome-offset: calc( var(--fold-shell-header-height-mobile, 52px) + var(--fold-shell-subheader-height-mobile, 48px) )}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:var(--fold-weight-semibold);text-decoration:none;transform:translateY(-150%);transition:transform .12s ease}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}.rail-primary{grid-area:rail-primary;min-height:0;background:var(--fold-color-bg-rail-primary)}.rail-secondary{grid-area:rail-secondary;min-height:0;background:var(--fold-color-bg-rail-secondary)}.header{grid-area:header;min-width:0;background:var(--fold-color-bg-header)}.subheader{grid-area:subheader;min-width:0;background:var(--fold-color-bg-header)}.footer{grid-area:footer;min-width:0;min-height:0;background:var(--fold-color-bg-header)}.content{grid-area:content;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.content:focus{outline:none}.content-scroll{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;scrollbar-width:thin;scrollbar-color:var(--fold-scrollbar-thumb, color-mix(in srgb, currentColor 24%, transparent)) var(--fold-scrollbar-track, transparent);overflow-anchor:auto}:host([data-scroll=scroll]) .content-scroll,:host(.footer-scroll) .content-scroll{overflow-y:auto}.content-flow{flex:1 0 auto;min-width:0;min-height:0;display:flex;flex-direction:column}.footer-inflow{flex:none}.rail-primary:has([data-elevated]),.rail-secondary:has([data-elevated]),.header:has([data-elevated]),.subheader:has([data-elevated]),.footer:has([data-elevated]),.content:has([data-elevated]){padding:var(--fold-surface-inset, var(--fold-space-md))}@media(max-width:768px){:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@container (max-width: 1024px){.rail-secondary{display:none}}@container (max-width: 768px){:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@keyframes fold-shell-scrim-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.rail-primary,.mobile-scrim{transition:none;animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { railWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "railWidth", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], headerHeightMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeightMobile", required: false }] }], subheaderHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheaderHeight", required: false }] }], subheaderHeightMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheaderHeightMobile", required: false }] }], headerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerLayout", required: false }] }], subheaderLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheaderLayout", required: false }] }], footerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLayout", required: false }] }], footerBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerBehavior", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }], drawerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerLabel", required: false }] }], mobileNav: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileNav", required: false }] }], mobileNavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileNavOpen", required: false }] }, { type: i0.Output, args: ["mobileNavOpenChange"] }], scrollBox: [{ type: i0.ViewChild, args: ["scrollBox", { isSignal: true }] }], onEscape: [{
+                    }, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n     keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n  skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n     (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n     same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n  class=\"rail-primary\"\n  [id]=\"drawerId\"\n  foldSurface=\"chrome\"\n  [foldFocusTrap]=\"drawerOpen()\"\n  [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n  [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n  [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n  tabindex=\"-1\"\n>\n  <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n  class=\"rail-secondary\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n     shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n     click; Escape and widening close it too. aria-hidden: the focus-trapped\n     drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n  <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n  class=\"header\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[header]\" />\n</header>\n\n<!-- The band under the header: a nav sub-bar, a filter strip, a context ribbon.\n     A plain <div> on purpose \u2014 <header> is taken, and the band's own semantics\n     (a <nav>, a toolbar) belong to what the app projects into it. Like the\n     footer, it claims a grid row only when something is actually projected. -->\n<div\n  class=\"subheader\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[subheader]\" />\n</div>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n     sight) or inside the content scroll (revealed on the way down). A single\n     <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n  <footer\n    class=\"footer\"\n    [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n    foldSurface=\"chrome\"\n    [attr.inert]=\"drawerOpen() ? '' : null\"\n  >\n    <ng-content select=\"[footer]\" />\n  </footer>\n</ng-template>\n\n<!-- The content region is the fixed, positioned FRAME \u2014 never scrolls, so a\n     docked overlay (the panel host) anchored to it stays put. The scroll lives on\n     the inner `.content-scroll` box; because its containing block is this frame\n     (above the scroll box), an absolutely-positioned panel dock escapes the\n     scroll and floats over the frame. `.content-flow` grows to fill, so a short\n     page still pushes a trailing `scroll` footer to the true bottom. -->\n<main\n  class=\"content\"\n  foldSurface=\"page\"\n  [id]=\"contentId\"\n  tabindex=\"-1\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <div class=\"content-scroll fold-shell-scroll\" #scrollBox>\n    <div class=\"content-flow\"><ng-content /></div>\n    @if (footerBehavior() === \"scroll\") {\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    }\n  </div>\n</main>\n@if (footerBehavior() !== \"scroll\") {\n  <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr)}:host{--fold-shell-chrome-offset: var(--fold-shell-header-height-mobile, 52px)}:host(:has([subheader])){--fold-shell-chrome-offset: calc( var(--fold-shell-header-height-mobile, 52px) + var(--fold-shell-subheader-height-mobile, 48px) )}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:var(--fold-weight-semibold);text-decoration:none;transform:translateY(-150%);transition:transform .12s ease}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}.rail-primary{grid-area:rail-primary;min-height:0;background:var(--fold-color-bg-rail-primary)}.rail-secondary{grid-area:rail-secondary;min-height:0;background:var(--fold-color-bg-rail-secondary)}.header{grid-area:header;min-width:0;background:var(--fold-color-bg-header)}.subheader{grid-area:subheader;min-width:0;background:var(--fold-color-bg-header)}.footer{grid-area:footer;min-width:0;min-height:0;background:var(--fold-color-bg-header)}.content{grid-area:content;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.content:focus{outline:none}.content-scroll{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;scrollbar-width:thin;scrollbar-color:var(--fold-scrollbar-thumb, color-mix(in srgb, currentColor 24%, transparent)) var(--fold-scrollbar-track, transparent);overflow-anchor:auto}:host([data-scroll=scroll]) .content-scroll,:host(.footer-scroll) .content-scroll{overflow-y:auto}.content-flow{flex:1 0 auto;min-width:0;min-height:0;display:flex;flex-direction:column}.footer-inflow{flex:none}.rail-primary:has([data-elevated]),.rail-secondary:has([data-elevated]),.header:has([data-elevated]),.subheader:has([data-elevated]),.footer:has([data-elevated]),.content:has([data-elevated]){padding:var(--fold-surface-inset, var(--fold-space-md))}:host(.is-mobile:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.is-mobile:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.is-mobile:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.is-mobile:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.is-mobile:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.is-mobile.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.is-mobile.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.is-mobile.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.is-mobile.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.is-mobile.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.is-mobile) .rail-primary,:host(.is-mobile) .rail-secondary{display:none}:host(.is-mobile.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.is-mobile.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}:host(.is-mobile) .mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.is-mobile.mobile-nav-open) .content-scroll{overflow:hidden}@container (max-width: 1024px){.rail-secondary{display:none}}@container (max-width: 768px){:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host .rail-primary,:host .rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}:host .mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@keyframes fold-shell-scrim-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.rail-primary,.mobile-scrim{transition:none;animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { railWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "railWidth", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], headerHeightMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeightMobile", required: false }] }], subheaderHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheaderHeight", required: false }] }], subheaderHeightMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheaderHeightMobile", required: false }] }], headerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerLayout", required: false }] }], subheaderLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheaderLayout", required: false }] }], footerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLayout", required: false }] }], footerBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerBehavior", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }], drawerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerLabel", required: false }] }], mobileNav: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileNav", required: false }] }], mobileNavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileNavOpen", required: false }] }, { type: i0.Output, args: ["mobileNavOpenChange"] }], mobileQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileQuery", required: false }] }], scrollBox: [{ type: i0.ViewChild, args: ["scrollBox", { isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ["document:keydown.escape"]
             }] } });
@@ -4853,6 +4930,8 @@ const DRILL_MS = 260;
 const BACK_MS = 200;
 /** When the entrance cascade is over and `:active` gets the transform back (ms). */
 const SETTLE_MS = 760;
+/** Up to this many level-1 items, `"auto"` lays out large tiles. */
+const FEW_ITEMS = 4;
 /** Horizontal travel that counts as a "swipe right" (px). */
 const SWIPE_PX = 56;
 /**
@@ -4922,8 +5001,14 @@ class FoldNavLauncherComponent {
      */
     glass = input(false, { ...(ngDevMode ? { debugName: "glass" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * Grid column count. `"auto"` (default) scales to the number of level-1
-     * items: ≤4 → 2 columns, more → 3.
+     * Grid column count. `"auto"` (default) lets the WIDTH decide: tiles fill the
+     * row at a minimum size, so a phone keeps 2 (≤4 items) or 3 columns while a
+     * tablet gets more, smaller columns instead of four 370 px squares. The
+     * minimum depends on the item count — few items, large tiles.
+     *
+     * A number pins the count. Either way the grid never grows past
+     * `--fold-nav-launcher-max-width` (default `720px`), centred, so a pinned
+     * count cannot blow tiles up on a wide screen either.
      */
     columns = input("auto", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
@@ -4955,15 +5040,25 @@ class FoldNavLauncherComponent {
     /** The group whose tile is the anchor: the open one, or the one being opened. */
     anchor = computed(() => this.openGroup() ?? this.pending(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
-    /** The resolved column count (always a number for the grid var). */
-    resolvedCols = computed(() => {
+    /** The pinned column count, or `null` when the width decides (`"auto"`). */
+    fixedCols = computed(() => {
         const cols = this.columns();
-        if (cols !== "auto") {
-            return cols;
+        return cols === "auto" ? null : cols;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fixedCols" }] : /* istanbul ignore next */ []));
+    /**
+     * Tile density in `"auto"` mode — picks the tile's minimum width in CSS:
+     * `few` (≤4 items) → large tiles, `many` → compact ones. `null` when pinned.
+     */
+    density = computed(() => {
+        if (this.fixedCols() !== null) {
+            return null;
         }
-        return this.tiles().length + this.groups().length <= 4 ? 2 : 3;
+        return this.tiles().length + this.groups().length <= FEW_ITEMS
+            ? "few"
+            : "many";
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedCols" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
     /** The sheet's subtitle — derived from the group's own children, never passed. */
     entryCountText = computed(() => {
         const group = this.openGroup();
@@ -5146,13 +5241,13 @@ class FoldNavLauncherComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavLauncherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldNavLauncherComponent, isStandalone: true, selector: "fold-nav-launcher", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, glass: { classPropertyName: "glass", publicName: "glass", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, providers: [
             { provide: FOLD_NAV_LAUNCHER, useExisting: FoldNavLauncherComponent },
-        ], queries: [{ propertyName: "tiles", predicate: FoldNavTileComponent, isSignal: true }, { propertyName: "groups", predicate: FoldNavGroupComponent, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div class=\"nl-scrim\" aria-hidden=\"true\"></div>\n  <!-- Le gestionnaire de renvoi vit sur le DIALOGUE, pas sur le voile : le\n       dialogue est `position: fixed; inset: 0` par-dessus, donc un clic\n       n'atteignait jamais le voile. Le clavier sort par `Escape`. -->\n  <!-- Une SURFACE DE CHROME, et pas seulement un fond sombre : sans cette\n       d\u00E9claration le lanceur peignait le sol du rail tout en lisant l'encre de\n       la PAGE \u2014 texte sombre sur sombre, et des tuiles claires au milieu d'un\n       panneau noir, sous tout th\u00E8me mixte (navi). Peindre le sol d'une famille\n       sans en rejoindre la polarit\u00E9, c'est en revendiquer la moiti\u00E9. -->\n  <div\n    class=\"nl-dialog\"\n    foldSurface=\"chrome\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"label()\"\n    [attr.data-level]=\"level()\"\n    [attr.data-glass]=\"glass() ? '' : null\"\n    [foldFocusTrap]=\"open()\"\n    tabindex=\"-1\"\n    (click)=\"onSurfaceClick($event)\"\n  >\n    <!-- Le voile de l'option verre. Sans lui, le flou n'a rien \u00E0 flouter et on\n         n'obtient que des panneaux plus sombres. -->\n    <div class=\"nl-veil\" aria-hidden=\"true\"></div>\n\n    <header class=\"nl-head\">\n      @if (anchor(); as group) {\n        <button\n          type=\"button\"\n          class=\"nl-back\"\n          [attr.aria-label]=\"backLabel()\"\n          (click)=\"back()\"\n        >\n          <fold-icon name=\"chevron-left\" size=\"sm\" />\n        </button>\n        <!-- L'ANCRE. La tuile touch\u00E9e ne dispara\u00EEt pas : elle remonte ici, \u00E0\n             sa taille de pastille. Cliquable, parce que l'\u00E9l\u00E9ment qui a servi\n             de porte doit aussi servir de sortie. -->\n        <button\n          type=\"button\"\n          class=\"nl-anchor\"\n          [attr.aria-label]=\"backLabel()\"\n          (click)=\"back()\"\n        >\n          @if (group.icon(); as name) {\n            <fold-icon [name]=\"name\" size=\"sm\" />\n          } @else {\n            <span aria-hidden=\"true\">{{ group.label().charAt(0) }}</span>\n          }\n        </button>\n        <span class=\"nl-titles\">\n          <span class=\"nl-title\">{{ group.label() }}</span>\n          <span class=\"nl-sub\">{{ entryCountText() }}</span>\n        </span>\n      } @else {\n        <span class=\"nl-titles\">\n          @if (eyebrow(); as e) {\n            <span class=\"nl-eyebrow\">{{ e }}</span>\n          }\n          @if (heading(); as h) {\n            <span class=\"nl-heading\">{{ h }}</span>\n          }\n        </span>\n      }\n\n      <button\n        type=\"button\"\n        class=\"nl-close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"close()\"\n      >\n        <fold-icon name=\"close\" size=\"md\" />\n      </button>\n    </header>\n\n    <div\n      class=\"nl-body\"\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n    >\n      <!-- La grille porte les DEUX niveaux : un groupe ouvert sort de la\n           grille et couvre ce corps, sans que rien ne bouge dans le DOM. -->\n      <div class=\"nl-grid\" [style.--nav-cols]=\"resolvedCols()\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"nl-foot\">\n      <ng-content select=\"[footer]\" />\n    </div>\n\n    <!-- Les deux crans de profondeur. `aria-hidden` : la r\u00E9gion vive dit la\n         m\u00EAme chose en mots, et un lecteur d'\u00E9cran n'a que faire de deux\n         pastilles. -->\n    <div class=\"nl-dots\" aria-hidden=\"true\">\n      <span class=\"nl-dot\" [class.is-on]=\"level() === 1\"></span>\n      <span class=\"nl-dot\" [class.is-on]=\"level() === 2\"></span>\n    </div>\n\n    <!-- La descente est MUETTE sans ceci : l'animation ne compense rien. -->\n    <p class=\"nl-live\" aria-live=\"polite\">{{ announcement() }}</p>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.nl-scrim{position:fixed;inset:0;z-index:200;background:var(--fold-color-scrim);backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass));animation:fold-nl-fade .2s ease}.nl-dialog{--fold-nl-gutter: var(--fold-space-xl);--fold-nl-ease-in: cubic-bezier(.22, 1, .36, 1);--fold-nl-tile-bg: var(--fold-color-surface-raised);--fold-nl-accent-bg: var(--fold-color-primary-surface);--fold-nl-sheet-bg: var(--fold-color-bg-rail-secondary);--fold-nl-row-bg: var(--fold-color-surface-card);--fold-nl-backdrop: none;--fold-nl-sheet-backdrop: none;position:fixed;inset:0;z-index:201;display:flex;flex-direction:column;padding:var(--fold-space-3xl) var(--fold-nl-gutter) var(--fold-space-xl);background:var(--fold-color-bg-rail-primary);color:var(--fold-color-text)}.nl-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-md);min-height:44px;margin-bottom:var(--fold-space-xl)}.nl-titles{display:flex;min-width:0;flex-direction:column}.nl-eyebrow{font-family:var(--fold-font-mono);font-size:var(--fold-text-xs);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}.nl-heading{font-size:var(--fold-text-xl);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-tighter);color:var(--fold-color-text)}.nl-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-lg);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-tighter);color:var(--fold-color-text);animation:fold-nl-crumb .32s var(--fold-nl-ease-in) both;animation-delay:40ms}.nl-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted);animation:fold-nl-crumb .32s var(--fold-nl-ease-in) both;animation-delay:40ms}.nl-back,.nl-close,.nl-anchor{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised);border:1px solid var(--fold-color-border);color:var(--fold-color-text-secondary);cursor:pointer;transition:background .14s ease,color .14s ease}.nl-back:hover,.nl-close:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.nl-anchor{background:var(--fold-color-primary);border-color:transparent;color:var(--fold-color-on-primary);animation:fold-nl-anchor-in .3s var(--fold-nl-ease-in) both}.nl-close{margin-inline-start:auto}.nl-body{position:relative;flex:1 1 auto;min-height:0;margin-inline:calc(-1 * var(--fold-nl-gutter));overflow:hidden}.nl-grid{padding-inline:var(--fold-nl-gutter);display:grid;grid-template-columns:repeat(var(--nav-cols, 3),1fr);gap:var(--fold-space-sm)}@media(max-width:360px){.nl-grid{grid-template-columns:repeat(2,1fr)}}.nl-dialog[data-level=\"2\"] .nl-grid{visibility:hidden}.nl-foot:not(:empty){flex:none;margin-top:auto;padding-top:var(--fold-space-md);border-top:1px solid var(--fold-color-border-subtle)}.nl-dots{flex:none;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-xs);margin-top:var(--fold-space-md)}.nl-dot{width:22px;height:3px;border-radius:var(--fold-radius-pill);background:var(--fold-color-border);transition:background .28s ease}.nl-dot.is-on{background:var(--fold-color-primary)}.nl-live{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.nl-veil{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s ease;background:radial-gradient(120% 70% at 12% 4%,color-mix(in srgb,var(--fold-color-primary) 34%,transparent),transparent 58%),radial-gradient(90% 60% at 88% 22%,color-mix(in srgb,var(--fold-color-primary-strong) 30%,transparent),transparent 60%),radial-gradient(80% 55% at 70% 96%,color-mix(in srgb,var(--fold-color-warning) 16%,transparent),transparent 62%)}.nl-dialog[data-glass]{--fold-nl-tile-bg: color-mix( in srgb, var(--fold-color-bg-rail-secondary) 52%, transparent );--fold-nl-accent-bg: color-mix( in srgb, var(--fold-color-primary) 14%, transparent );--fold-nl-sheet-bg: color-mix( in srgb, var(--fold-color-bg-rail-secondary) 60%, transparent );--fold-nl-row-bg: color-mix( in srgb, var(--fold-color-surface-card) 50%, transparent );--fold-nl-backdrop: blur(20px) saturate(150%);--fold-nl-sheet-backdrop: blur(26px) saturate(150%);background:var(--fold-color-bg-header)}.nl-dialog[data-glass] .nl-veil{opacity:1}@keyframes fold-nl-fade{0%{opacity:0}to{opacity:1}}@keyframes fold-nl-crumb{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:none}}@keyframes fold-nl-anchor-in{0%{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.nl-scrim,.nl-title,.nl-sub,.nl-anchor{animation:none}}\n"], dependencies: [{ kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "directive", type: FoldSurfaceDirective, selector: "[foldSurface]", inputs: ["foldSurface"] }] });
+        ], queries: [{ propertyName: "tiles", predicate: FoldNavTileComponent, isSignal: true }, { propertyName: "groups", predicate: FoldNavGroupComponent, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div class=\"nl-scrim\" aria-hidden=\"true\"></div>\n  <!-- Le gestionnaire de renvoi vit sur le DIALOGUE, pas sur le voile : le\n       dialogue est `position: fixed; inset: 0` par-dessus, donc un clic\n       n'atteignait jamais le voile. Le clavier sort par `Escape`. -->\n  <!-- Une SURFACE DE CHROME, et pas seulement un fond sombre : sans cette\n       d\u00E9claration le lanceur peignait le sol du rail tout en lisant l'encre de\n       la PAGE \u2014 texte sombre sur sombre, et des tuiles claires au milieu d'un\n       panneau noir, sous tout th\u00E8me mixte (navi). Peindre le sol d'une famille\n       sans en rejoindre la polarit\u00E9, c'est en revendiquer la moiti\u00E9. -->\n  <div\n    class=\"nl-dialog\"\n    foldSurface=\"chrome\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"label()\"\n    [attr.data-level]=\"level()\"\n    [attr.data-glass]=\"glass() ? '' : null\"\n    [foldFocusTrap]=\"open()\"\n    tabindex=\"-1\"\n    (click)=\"onSurfaceClick($event)\"\n  >\n    <!-- Le voile de l'option verre. Sans lui, le flou n'a rien \u00E0 flouter et on\n         n'obtient que des panneaux plus sombres. -->\n    <div class=\"nl-veil\" aria-hidden=\"true\"></div>\n\n    <header class=\"nl-head\">\n      @if (anchor(); as group) {\n        <button\n          type=\"button\"\n          class=\"nl-back\"\n          [attr.aria-label]=\"backLabel()\"\n          (click)=\"back()\"\n        >\n          <fold-icon name=\"chevron-left\" size=\"sm\" />\n        </button>\n        <!-- L'ANCRE. La tuile touch\u00E9e ne dispara\u00EEt pas : elle remonte ici, \u00E0\n             sa taille de pastille. Cliquable, parce que l'\u00E9l\u00E9ment qui a servi\n             de porte doit aussi servir de sortie. -->\n        <button\n          type=\"button\"\n          class=\"nl-anchor\"\n          [attr.aria-label]=\"backLabel()\"\n          (click)=\"back()\"\n        >\n          @if (group.icon(); as name) {\n            <fold-icon [name]=\"name\" size=\"sm\" />\n          } @else {\n            <span aria-hidden=\"true\">{{ group.label().charAt(0) }}</span>\n          }\n        </button>\n        <span class=\"nl-titles\">\n          <span class=\"nl-title\">{{ group.label() }}</span>\n          <span class=\"nl-sub\">{{ entryCountText() }}</span>\n        </span>\n      } @else {\n        <span class=\"nl-titles\">\n          @if (eyebrow(); as e) {\n            <span class=\"nl-eyebrow\">{{ e }}</span>\n          }\n          @if (heading(); as h) {\n            <span class=\"nl-heading\">{{ h }}</span>\n          }\n        </span>\n      }\n\n      <button\n        type=\"button\"\n        class=\"nl-close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"close()\"\n      >\n        <fold-icon name=\"close\" size=\"md\" />\n      </button>\n    </header>\n\n    <div\n      class=\"nl-body\"\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n    >\n      <!-- La grille porte les DEUX niveaux : un groupe ouvert sort de la\n           grille et couvre ce corps, sans que rien ne bouge dans le DOM. -->\n      <div\n        class=\"nl-grid\"\n        [style.--nav-cols]=\"fixedCols()\"\n        [attr.data-cols]=\"fixedCols() === null ? null : ''\"\n        [attr.data-density]=\"density()\"\n      >\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"nl-foot\">\n      <ng-content select=\"[footer]\" />\n    </div>\n\n    <!-- Les deux crans de profondeur. `aria-hidden` : la r\u00E9gion vive dit la\n         m\u00EAme chose en mots, et un lecteur d'\u00E9cran n'a que faire de deux\n         pastilles. -->\n    <div class=\"nl-dots\" aria-hidden=\"true\">\n      <span class=\"nl-dot\" [class.is-on]=\"level() === 1\"></span>\n      <span class=\"nl-dot\" [class.is-on]=\"level() === 2\"></span>\n    </div>\n\n    <!-- La descente est MUETTE sans ceci : l'animation ne compense rien. -->\n    <p class=\"nl-live\" aria-live=\"polite\">{{ announcement() }}</p>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.nl-scrim{position:fixed;inset:0;z-index:200;background:var(--fold-color-scrim);backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass));animation:fold-nl-fade .2s ease}.nl-dialog{--fold-nl-gutter: var(--fold-space-xl);--fold-nav-launcher-max-width: 720px;--fold-nl-ease-in: cubic-bezier(.22, 1, .36, 1);--fold-nl-tile-bg: var(--fold-color-surface-raised);--fold-nl-accent-bg: var(--fold-color-primary-surface);--fold-nl-sheet-bg: var(--fold-color-bg-rail-secondary);--fold-nl-row-bg: var(--fold-color-surface-card);--fold-nl-backdrop: none;--fold-nl-sheet-backdrop: none;position:fixed;inset:0;z-index:201;display:flex;flex-direction:column;padding:var(--fold-space-3xl) var(--fold-nl-gutter) var(--fold-space-xl);background:var(--fold-color-bg-rail-primary);color:var(--fold-color-text)}.nl-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-md);min-height:44px;margin-bottom:var(--fold-space-xl)}.nl-titles{display:flex;min-width:0;flex-direction:column}.nl-eyebrow{font-family:var(--fold-font-mono);font-size:var(--fold-text-xs);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}.nl-heading{font-size:var(--fold-text-xl);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-tighter);color:var(--fold-color-text)}.nl-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-lg);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-tighter);color:var(--fold-color-text);animation:fold-nl-crumb .32s var(--fold-nl-ease-in) both;animation-delay:40ms}.nl-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted);animation:fold-nl-crumb .32s var(--fold-nl-ease-in) both;animation-delay:40ms}.nl-back,.nl-close,.nl-anchor{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised);border:1px solid var(--fold-color-border);color:var(--fold-color-text-secondary);cursor:pointer;transition:background .14s ease,color .14s ease}.nl-back:hover,.nl-close:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.nl-anchor{background:var(--fold-color-primary);border-color:transparent;color:var(--fold-color-on-primary);animation:fold-nl-anchor-in .3s var(--fold-nl-ease-in) both}.nl-close{margin-inline-start:auto}.nl-body{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-inline:calc(-1 * var(--fold-nl-gutter));overflow:hidden}.nl-grid{--nav-tile-min: 96px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-inline:max(var(--fold-nl-gutter),(100% - var(--fold-nav-launcher-max-width)) / 2);padding-block-end:var(--fold-space-sm);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--nav-tile-min)),1fr));grid-auto-rows:max-content;align-content:start;gap:var(--fold-space-sm)}.nl-grid[data-density=few]{--nav-tile-min: 144px}.nl-grid[data-cols]{grid-template-columns:repeat(var(--nav-cols),minmax(0,1fr))}@media(max-width:360px){.nl-grid,.nl-grid[data-cols]{grid-template-columns:repeat(2,minmax(0,1fr))}}.nl-dialog[data-level=\"2\"] .nl-grid{visibility:hidden}.nl-foot:not(:empty){flex:none;margin-top:auto;padding-top:var(--fold-space-md);border-top:1px solid var(--fold-color-border-subtle)}.nl-dots{flex:none;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-xs);margin-top:var(--fold-space-md)}.nl-dot{width:22px;height:3px;border-radius:var(--fold-radius-pill);background:var(--fold-color-border);transition:background .28s ease}.nl-dot.is-on{background:var(--fold-color-primary)}.nl-live{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.nl-veil{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s ease;background:radial-gradient(120% 70% at 12% 4%,color-mix(in srgb,var(--fold-color-primary) 34%,transparent),transparent 58%),radial-gradient(90% 60% at 88% 22%,color-mix(in srgb,var(--fold-color-primary-strong) 30%,transparent),transparent 60%),radial-gradient(80% 55% at 70% 96%,color-mix(in srgb,var(--fold-color-warning) 16%,transparent),transparent 62%)}.nl-dialog[data-glass]{--fold-nl-tile-bg: color-mix( in srgb, var(--fold-color-bg-rail-secondary) 52%, transparent );--fold-nl-accent-bg: color-mix( in srgb, var(--fold-color-primary) 14%, transparent );--fold-nl-sheet-bg: color-mix( in srgb, var(--fold-color-bg-rail-secondary) 60%, transparent );--fold-nl-row-bg: color-mix( in srgb, var(--fold-color-surface-card) 50%, transparent );--fold-nl-backdrop: blur(20px) saturate(150%);--fold-nl-sheet-backdrop: blur(26px) saturate(150%);background:var(--fold-color-bg-header)}.nl-dialog[data-glass] .nl-veil{opacity:1}@keyframes fold-nl-fade{0%{opacity:0}to{opacity:1}}@keyframes fold-nl-crumb{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:none}}@keyframes fold-nl-anchor-in{0%{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.nl-scrim,.nl-title,.nl-sub,.nl-anchor{animation:none}}\n"], dependencies: [{ kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "directive", type: FoldSurfaceDirective, selector: "[foldSurface]", inputs: ["foldSurface"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavLauncherComponent, decorators: [{
             type: Component,
             args: [{ selector: "fold-nav-launcher", standalone: true, imports: [FocusTrapDirective, FoldIconComponent, FoldSurfaceDirective], providers: [
                         { provide: FOLD_NAV_LAUNCHER, useExisting: FoldNavLauncherComponent },
-                    ], template: "@if (open()) {\n  <div class=\"nl-scrim\" aria-hidden=\"true\"></div>\n  <!-- Le gestionnaire de renvoi vit sur le DIALOGUE, pas sur le voile : le\n       dialogue est `position: fixed; inset: 0` par-dessus, donc un clic\n       n'atteignait jamais le voile. Le clavier sort par `Escape`. -->\n  <!-- Une SURFACE DE CHROME, et pas seulement un fond sombre : sans cette\n       d\u00E9claration le lanceur peignait le sol du rail tout en lisant l'encre de\n       la PAGE \u2014 texte sombre sur sombre, et des tuiles claires au milieu d'un\n       panneau noir, sous tout th\u00E8me mixte (navi). Peindre le sol d'une famille\n       sans en rejoindre la polarit\u00E9, c'est en revendiquer la moiti\u00E9. -->\n  <div\n    class=\"nl-dialog\"\n    foldSurface=\"chrome\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"label()\"\n    [attr.data-level]=\"level()\"\n    [attr.data-glass]=\"glass() ? '' : null\"\n    [foldFocusTrap]=\"open()\"\n    tabindex=\"-1\"\n    (click)=\"onSurfaceClick($event)\"\n  >\n    <!-- Le voile de l'option verre. Sans lui, le flou n'a rien \u00E0 flouter et on\n         n'obtient que des panneaux plus sombres. -->\n    <div class=\"nl-veil\" aria-hidden=\"true\"></div>\n\n    <header class=\"nl-head\">\n      @if (anchor(); as group) {\n        <button\n          type=\"button\"\n          class=\"nl-back\"\n          [attr.aria-label]=\"backLabel()\"\n          (click)=\"back()\"\n        >\n          <fold-icon name=\"chevron-left\" size=\"sm\" />\n        </button>\n        <!-- L'ANCRE. La tuile touch\u00E9e ne dispara\u00EEt pas : elle remonte ici, \u00E0\n             sa taille de pastille. Cliquable, parce que l'\u00E9l\u00E9ment qui a servi\n             de porte doit aussi servir de sortie. -->\n        <button\n          type=\"button\"\n          class=\"nl-anchor\"\n          [attr.aria-label]=\"backLabel()\"\n          (click)=\"back()\"\n        >\n          @if (group.icon(); as name) {\n            <fold-icon [name]=\"name\" size=\"sm\" />\n          } @else {\n            <span aria-hidden=\"true\">{{ group.label().charAt(0) }}</span>\n          }\n        </button>\n        <span class=\"nl-titles\">\n          <span class=\"nl-title\">{{ group.label() }}</span>\n          <span class=\"nl-sub\">{{ entryCountText() }}</span>\n        </span>\n      } @else {\n        <span class=\"nl-titles\">\n          @if (eyebrow(); as e) {\n            <span class=\"nl-eyebrow\">{{ e }}</span>\n          }\n          @if (heading(); as h) {\n            <span class=\"nl-heading\">{{ h }}</span>\n          }\n        </span>\n      }\n\n      <button\n        type=\"button\"\n        class=\"nl-close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"close()\"\n      >\n        <fold-icon name=\"close\" size=\"md\" />\n      </button>\n    </header>\n\n    <div\n      class=\"nl-body\"\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n    >\n      <!-- La grille porte les DEUX niveaux : un groupe ouvert sort de la\n           grille et couvre ce corps, sans que rien ne bouge dans le DOM. -->\n      <div class=\"nl-grid\" [style.--nav-cols]=\"resolvedCols()\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"nl-foot\">\n      <ng-content select=\"[footer]\" />\n    </div>\n\n    <!-- Les deux crans de profondeur. `aria-hidden` : la r\u00E9gion vive dit la\n         m\u00EAme chose en mots, et un lecteur d'\u00E9cran n'a que faire de deux\n         pastilles. -->\n    <div class=\"nl-dots\" aria-hidden=\"true\">\n      <span class=\"nl-dot\" [class.is-on]=\"level() === 1\"></span>\n      <span class=\"nl-dot\" [class.is-on]=\"level() === 2\"></span>\n    </div>\n\n    <!-- La descente est MUETTE sans ceci : l'animation ne compense rien. -->\n    <p class=\"nl-live\" aria-live=\"polite\">{{ announcement() }}</p>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.nl-scrim{position:fixed;inset:0;z-index:200;background:var(--fold-color-scrim);backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass));animation:fold-nl-fade .2s ease}.nl-dialog{--fold-nl-gutter: var(--fold-space-xl);--fold-nl-ease-in: cubic-bezier(.22, 1, .36, 1);--fold-nl-tile-bg: var(--fold-color-surface-raised);--fold-nl-accent-bg: var(--fold-color-primary-surface);--fold-nl-sheet-bg: var(--fold-color-bg-rail-secondary);--fold-nl-row-bg: var(--fold-color-surface-card);--fold-nl-backdrop: none;--fold-nl-sheet-backdrop: none;position:fixed;inset:0;z-index:201;display:flex;flex-direction:column;padding:var(--fold-space-3xl) var(--fold-nl-gutter) var(--fold-space-xl);background:var(--fold-color-bg-rail-primary);color:var(--fold-color-text)}.nl-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-md);min-height:44px;margin-bottom:var(--fold-space-xl)}.nl-titles{display:flex;min-width:0;flex-direction:column}.nl-eyebrow{font-family:var(--fold-font-mono);font-size:var(--fold-text-xs);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}.nl-heading{font-size:var(--fold-text-xl);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-tighter);color:var(--fold-color-text)}.nl-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-lg);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-tighter);color:var(--fold-color-text);animation:fold-nl-crumb .32s var(--fold-nl-ease-in) both;animation-delay:40ms}.nl-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted);animation:fold-nl-crumb .32s var(--fold-nl-ease-in) both;animation-delay:40ms}.nl-back,.nl-close,.nl-anchor{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised);border:1px solid var(--fold-color-border);color:var(--fold-color-text-secondary);cursor:pointer;transition:background .14s ease,color .14s ease}.nl-back:hover,.nl-close:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.nl-anchor{background:var(--fold-color-primary);border-color:transparent;color:var(--fold-color-on-primary);animation:fold-nl-anchor-in .3s var(--fold-nl-ease-in) both}.nl-close{margin-inline-start:auto}.nl-body{position:relative;flex:1 1 auto;min-height:0;margin-inline:calc(-1 * var(--fold-nl-gutter));overflow:hidden}.nl-grid{padding-inline:var(--fold-nl-gutter);display:grid;grid-template-columns:repeat(var(--nav-cols, 3),1fr);gap:var(--fold-space-sm)}@media(max-width:360px){.nl-grid{grid-template-columns:repeat(2,1fr)}}.nl-dialog[data-level=\"2\"] .nl-grid{visibility:hidden}.nl-foot:not(:empty){flex:none;margin-top:auto;padding-top:var(--fold-space-md);border-top:1px solid var(--fold-color-border-subtle)}.nl-dots{flex:none;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-xs);margin-top:var(--fold-space-md)}.nl-dot{width:22px;height:3px;border-radius:var(--fold-radius-pill);background:var(--fold-color-border);transition:background .28s ease}.nl-dot.is-on{background:var(--fold-color-primary)}.nl-live{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.nl-veil{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s ease;background:radial-gradient(120% 70% at 12% 4%,color-mix(in srgb,var(--fold-color-primary) 34%,transparent),transparent 58%),radial-gradient(90% 60% at 88% 22%,color-mix(in srgb,var(--fold-color-primary-strong) 30%,transparent),transparent 60%),radial-gradient(80% 55% at 70% 96%,color-mix(in srgb,var(--fold-color-warning) 16%,transparent),transparent 62%)}.nl-dialog[data-glass]{--fold-nl-tile-bg: color-mix( in srgb, var(--fold-color-bg-rail-secondary) 52%, transparent );--fold-nl-accent-bg: color-mix( in srgb, var(--fold-color-primary) 14%, transparent );--fold-nl-sheet-bg: color-mix( in srgb, var(--fold-color-bg-rail-secondary) 60%, transparent );--fold-nl-row-bg: color-mix( in srgb, var(--fold-color-surface-card) 50%, transparent );--fold-nl-backdrop: blur(20px) saturate(150%);--fold-nl-sheet-backdrop: blur(26px) saturate(150%);background:var(--fold-color-bg-header)}.nl-dialog[data-glass] .nl-veil{opacity:1}@keyframes fold-nl-fade{0%{opacity:0}to{opacity:1}}@keyframes fold-nl-crumb{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:none}}@keyframes fold-nl-anchor-in{0%{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.nl-scrim,.nl-title,.nl-sub,.nl-anchor{animation:none}}\n"] }]
+                    ], template: "@if (open()) {\n  <div class=\"nl-scrim\" aria-hidden=\"true\"></div>\n  <!-- Le gestionnaire de renvoi vit sur le DIALOGUE, pas sur le voile : le\n       dialogue est `position: fixed; inset: 0` par-dessus, donc un clic\n       n'atteignait jamais le voile. Le clavier sort par `Escape`. -->\n  <!-- Une SURFACE DE CHROME, et pas seulement un fond sombre : sans cette\n       d\u00E9claration le lanceur peignait le sol du rail tout en lisant l'encre de\n       la PAGE \u2014 texte sombre sur sombre, et des tuiles claires au milieu d'un\n       panneau noir, sous tout th\u00E8me mixte (navi). Peindre le sol d'une famille\n       sans en rejoindre la polarit\u00E9, c'est en revendiquer la moiti\u00E9. -->\n  <div\n    class=\"nl-dialog\"\n    foldSurface=\"chrome\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"label()\"\n    [attr.data-level]=\"level()\"\n    [attr.data-glass]=\"glass() ? '' : null\"\n    [foldFocusTrap]=\"open()\"\n    tabindex=\"-1\"\n    (click)=\"onSurfaceClick($event)\"\n  >\n    <!-- Le voile de l'option verre. Sans lui, le flou n'a rien \u00E0 flouter et on\n         n'obtient que des panneaux plus sombres. -->\n    <div class=\"nl-veil\" aria-hidden=\"true\"></div>\n\n    <header class=\"nl-head\">\n      @if (anchor(); as group) {\n        <button\n          type=\"button\"\n          class=\"nl-back\"\n          [attr.aria-label]=\"backLabel()\"\n          (click)=\"back()\"\n        >\n          <fold-icon name=\"chevron-left\" size=\"sm\" />\n        </button>\n        <!-- L'ANCRE. La tuile touch\u00E9e ne dispara\u00EEt pas : elle remonte ici, \u00E0\n             sa taille de pastille. Cliquable, parce que l'\u00E9l\u00E9ment qui a servi\n             de porte doit aussi servir de sortie. -->\n        <button\n          type=\"button\"\n          class=\"nl-anchor\"\n          [attr.aria-label]=\"backLabel()\"\n          (click)=\"back()\"\n        >\n          @if (group.icon(); as name) {\n            <fold-icon [name]=\"name\" size=\"sm\" />\n          } @else {\n            <span aria-hidden=\"true\">{{ group.label().charAt(0) }}</span>\n          }\n        </button>\n        <span class=\"nl-titles\">\n          <span class=\"nl-title\">{{ group.label() }}</span>\n          <span class=\"nl-sub\">{{ entryCountText() }}</span>\n        </span>\n      } @else {\n        <span class=\"nl-titles\">\n          @if (eyebrow(); as e) {\n            <span class=\"nl-eyebrow\">{{ e }}</span>\n          }\n          @if (heading(); as h) {\n            <span class=\"nl-heading\">{{ h }}</span>\n          }\n        </span>\n      }\n\n      <button\n        type=\"button\"\n        class=\"nl-close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"close()\"\n      >\n        <fold-icon name=\"close\" size=\"md\" />\n      </button>\n    </header>\n\n    <div\n      class=\"nl-body\"\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n    >\n      <!-- La grille porte les DEUX niveaux : un groupe ouvert sort de la\n           grille et couvre ce corps, sans que rien ne bouge dans le DOM. -->\n      <div\n        class=\"nl-grid\"\n        [style.--nav-cols]=\"fixedCols()\"\n        [attr.data-cols]=\"fixedCols() === null ? null : ''\"\n        [attr.data-density]=\"density()\"\n      >\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"nl-foot\">\n      <ng-content select=\"[footer]\" />\n    </div>\n\n    <!-- Les deux crans de profondeur. `aria-hidden` : la r\u00E9gion vive dit la\n         m\u00EAme chose en mots, et un lecteur d'\u00E9cran n'a que faire de deux\n         pastilles. -->\n    <div class=\"nl-dots\" aria-hidden=\"true\">\n      <span class=\"nl-dot\" [class.is-on]=\"level() === 1\"></span>\n      <span class=\"nl-dot\" [class.is-on]=\"level() === 2\"></span>\n    </div>\n\n    <!-- La descente est MUETTE sans ceci : l'animation ne compense rien. -->\n    <p class=\"nl-live\" aria-live=\"polite\">{{ announcement() }}</p>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.nl-scrim{position:fixed;inset:0;z-index:200;background:var(--fold-color-scrim);backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass));animation:fold-nl-fade .2s ease}.nl-dialog{--fold-nl-gutter: var(--fold-space-xl);--fold-nav-launcher-max-width: 720px;--fold-nl-ease-in: cubic-bezier(.22, 1, .36, 1);--fold-nl-tile-bg: var(--fold-color-surface-raised);--fold-nl-accent-bg: var(--fold-color-primary-surface);--fold-nl-sheet-bg: var(--fold-color-bg-rail-secondary);--fold-nl-row-bg: var(--fold-color-surface-card);--fold-nl-backdrop: none;--fold-nl-sheet-backdrop: none;position:fixed;inset:0;z-index:201;display:flex;flex-direction:column;padding:var(--fold-space-3xl) var(--fold-nl-gutter) var(--fold-space-xl);background:var(--fold-color-bg-rail-primary);color:var(--fold-color-text)}.nl-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-md);min-height:44px;margin-bottom:var(--fold-space-xl)}.nl-titles{display:flex;min-width:0;flex-direction:column}.nl-eyebrow{font-family:var(--fold-font-mono);font-size:var(--fold-text-xs);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}.nl-heading{font-size:var(--fold-text-xl);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-tighter);color:var(--fold-color-text)}.nl-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-lg);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-tighter);color:var(--fold-color-text);animation:fold-nl-crumb .32s var(--fold-nl-ease-in) both;animation-delay:40ms}.nl-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted);animation:fold-nl-crumb .32s var(--fold-nl-ease-in) both;animation-delay:40ms}.nl-back,.nl-close,.nl-anchor{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised);border:1px solid var(--fold-color-border);color:var(--fold-color-text-secondary);cursor:pointer;transition:background .14s ease,color .14s ease}.nl-back:hover,.nl-close:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.nl-anchor{background:var(--fold-color-primary);border-color:transparent;color:var(--fold-color-on-primary);animation:fold-nl-anchor-in .3s var(--fold-nl-ease-in) both}.nl-close{margin-inline-start:auto}.nl-body{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-inline:calc(-1 * var(--fold-nl-gutter));overflow:hidden}.nl-grid{--nav-tile-min: 96px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-inline:max(var(--fold-nl-gutter),(100% - var(--fold-nav-launcher-max-width)) / 2);padding-block-end:var(--fold-space-sm);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--nav-tile-min)),1fr));grid-auto-rows:max-content;align-content:start;gap:var(--fold-space-sm)}.nl-grid[data-density=few]{--nav-tile-min: 144px}.nl-grid[data-cols]{grid-template-columns:repeat(var(--nav-cols),minmax(0,1fr))}@media(max-width:360px){.nl-grid,.nl-grid[data-cols]{grid-template-columns:repeat(2,minmax(0,1fr))}}.nl-dialog[data-level=\"2\"] .nl-grid{visibility:hidden}.nl-foot:not(:empty){flex:none;margin-top:auto;padding-top:var(--fold-space-md);border-top:1px solid var(--fold-color-border-subtle)}.nl-dots{flex:none;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-xs);margin-top:var(--fold-space-md)}.nl-dot{width:22px;height:3px;border-radius:var(--fold-radius-pill);background:var(--fold-color-border);transition:background .28s ease}.nl-dot.is-on{background:var(--fold-color-primary)}.nl-live{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.nl-veil{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s ease;background:radial-gradient(120% 70% at 12% 4%,color-mix(in srgb,var(--fold-color-primary) 34%,transparent),transparent 58%),radial-gradient(90% 60% at 88% 22%,color-mix(in srgb,var(--fold-color-primary-strong) 30%,transparent),transparent 60%),radial-gradient(80% 55% at 70% 96%,color-mix(in srgb,var(--fold-color-warning) 16%,transparent),transparent 62%)}.nl-dialog[data-glass]{--fold-nl-tile-bg: color-mix( in srgb, var(--fold-color-bg-rail-secondary) 52%, transparent );--fold-nl-accent-bg: color-mix( in srgb, var(--fold-color-primary) 14%, transparent );--fold-nl-sheet-bg: color-mix( in srgb, var(--fold-color-bg-rail-secondary) 60%, transparent );--fold-nl-row-bg: color-mix( in srgb, var(--fold-color-surface-card) 50%, transparent );--fold-nl-backdrop: blur(20px) saturate(150%);--fold-nl-sheet-backdrop: blur(26px) saturate(150%);background:var(--fold-color-bg-header)}.nl-dialog[data-glass] .nl-veil{opacity:1}@keyframes fold-nl-fade{0%{opacity:0}to{opacity:1}}@keyframes fold-nl-crumb{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:none}}@keyframes fold-nl-anchor-in{0%{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.nl-scrim,.nl-title,.nl-sub,.nl-anchor{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], glass: [{ type: i0.Input, args: [{ isSignal: true, alias: "glass", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], tiles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FoldNavTileComponent), { isSignal: true }] }], groups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FoldNavGroupComponent), { isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ["document:keydown.escape"]
@@ -15074,5 +15169,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_BUILTIN_ICON_CATEGORIES, FOLD_CALENDAR_DEFAULT_LABELS, FOLD_CALENDAR_FORMATS, FOLD_CALENDAR_LABELS, FOLD_COMMON_DEFAULT_LABELS, FOLD_COMMON_LABELS, FOLD_DATA_TABLE_DEFAULT_LABELS, FOLD_DATA_TABLE_LABELS, FOLD_DEFAULT_WEEKEND_DAYS, FOLD_FALLBACK_WEEK_INFO, FOLD_FONT_TOKENS, FOLD_INLINE_CONFIRM_DEFAULT_LABELS, FOLD_INLINE_CONFIRM_LABELS, FOLD_LEADING_TOKENS, FOLD_MINUTES_PER_DAY, FOLD_MOTION_TOKENS, FOLD_PAGINATOR_DEFAULT_LABELS, FOLD_PAGINATOR_LABELS, FOLD_PALETTE_DEFAULT, FOLD_PANEL_CLOSE_LABEL, FOLD_PANEL_DEFAULTS, FOLD_RADIUS_TOKENS, FOLD_SEMANTIC_COLOR_TOKENS, FOLD_SHADOW_TOKENS, FOLD_SPACE_TOKENS, FOLD_TEXT_TOKENS, FOLD_TOAST_CONFIG, FOLD_TRACKING_TOKENS, FOLD_WEIGHT_TOKENS, FoldAppShellComponent, FoldAsideLayoutComponent, FoldAvatarComponent, FoldAvatarDetailComponent, FoldAvatarListComponent, FoldBackLinkComponent, FoldBadgeComponent, FoldBreadcrumbComponent, FoldButtonComponent, FoldButtonIconComponent, FoldCalendarAgendaComponent, FoldCalendarChromeDirective, FoldCalendarDayComponent, FoldCalendarDayDirective, FoldCalendarEventDirective, FoldCalendarHeadingDirective, FoldCalendarListComponent, FoldCalendarMonthComponent, FoldCalendarOverflowDirective, FoldCalendarSourceFilterComponent, FoldCalendarTimegridComponent, FoldCalendarTitleDirective, FoldCalendarToolbarComponent, FoldCalendarWeekComponent, FoldCalloutComponent, FoldCardComponent, FoldCheckboxComponent, FoldChecklistComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDangerZoneComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDataTableRowCardDirective, FoldDataTableRowDetailDirective, FoldDataTableRowNoteDirective, FoldDateComponent, FoldDisclosureComponent, FoldDropdownComponent, FoldDropdownItemComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFieldsetComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInfoComponent, FoldInlineConfirmComponent, FoldInputComponent, FoldLinkComponent, FoldListboxComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldMeterComponent, FoldMultiselectComponent, FoldNavGroupComponent, FoldNavLauncherComponent, FoldNavLayoutComponent, FoldNavTileComponent, FoldNumberInputComponent, FoldOptgroupComponent, FoldOptionComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPageTitleDirective, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelBodyComponent, FoldPanelComponentOutletDirective, FoldPanelFooterComponent, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldPasswordFieldComponent, FoldPopoverComponent, FoldPopoverTriggerDirective, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldScrollRegionDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabPanelComponent, FoldTabsComponent, FoldTextareaComponent, FoldTimeComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, FoldViewNavComponent, FoldViewToggleComponent, ScrollRegionRegistry, autoUpdate, computePlacement, foldAddDays, foldAddMinutes, foldAddMonths, foldBlurVar, foldBuildAgenda, foldBuildDay, foldBuildMonthGrid, foldBuildTimeGrid, foldBuildWeek, foldCalendarNextFocus, foldCardBandChrome, foldColorProperty, foldColorVar, foldCountActionable, foldDaysBetween, foldDefaultPasswordRules, foldEndOfMonth, foldEventsInRange, foldEventsOnDay, foldFilterBySource, foldFontVar, foldFromMinutes, foldFromNativeDate, foldFromTemporal, foldHashSeed, foldIsActionable, foldIsCalendarDate, foldIsCalendarTime, foldIsTimed, foldIsWeekend, foldIsoWeek, foldIsoWeekYear, foldLayOutOverlaps, foldLeadingVar, foldLocaleWeekInfo, foldMotionVar, foldRadiusVar, foldRangeForView, foldRegexRule, foldResolvePalette, foldShadowVar, foldShiftDate, foldSpaceVar, foldStartOfMonth, foldStartOfWeek, foldTextVar, foldToMinutes, foldToNativeDate, foldToday, foldTrackingVar, foldViewTitle, foldWeekdayIndex, foldWeekdayOf, foldWeightVar, isFoldSelectOptionGroup, observeElementWidth, provideFoldCalendarLabels, provideFoldCommonLabels, provideFoldDataTableLabels, provideFoldIcons, provideFoldInlineConfirmLabels, provideFoldPaginatorLabels, provideFoldPalette, provideFoldPanelDefaults, provideFoldPanelLabels, provideFoldToasts };
+export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_BUILTIN_ICON_CATEGORIES, FOLD_CALENDAR_DEFAULT_LABELS, FOLD_CALENDAR_FORMATS, FOLD_CALENDAR_LABELS, FOLD_COMMON_DEFAULT_LABELS, FOLD_COMMON_LABELS, FOLD_DATA_TABLE_DEFAULT_LABELS, FOLD_DATA_TABLE_LABELS, FOLD_DEFAULT_WEEKEND_DAYS, FOLD_FALLBACK_WEEK_INFO, FOLD_FONT_TOKENS, FOLD_INLINE_CONFIRM_DEFAULT_LABELS, FOLD_INLINE_CONFIRM_LABELS, FOLD_LEADING_TOKENS, FOLD_MINUTES_PER_DAY, FOLD_MOBILE_QUERIES, FOLD_MOTION_TOKENS, FOLD_PAGINATOR_DEFAULT_LABELS, FOLD_PAGINATOR_LABELS, FOLD_PALETTE_DEFAULT, FOLD_PANEL_CLOSE_LABEL, FOLD_PANEL_DEFAULTS, FOLD_RADIUS_TOKENS, FOLD_SEMANTIC_COLOR_TOKENS, FOLD_SHADOW_TOKENS, FOLD_SPACE_TOKENS, FOLD_TEXT_TOKENS, FOLD_TOAST_CONFIG, FOLD_TRACKING_TOKENS, FOLD_WEIGHT_TOKENS, FoldAppShellComponent, FoldAsideLayoutComponent, FoldAvatarComponent, FoldAvatarDetailComponent, FoldAvatarListComponent, FoldBackLinkComponent, FoldBadgeComponent, FoldBreadcrumbComponent, FoldButtonComponent, FoldButtonIconComponent, FoldCalendarAgendaComponent, FoldCalendarChromeDirective, FoldCalendarDayComponent, FoldCalendarDayDirective, FoldCalendarEventDirective, FoldCalendarHeadingDirective, FoldCalendarListComponent, FoldCalendarMonthComponent, FoldCalendarOverflowDirective, FoldCalendarSourceFilterComponent, FoldCalendarTimegridComponent, FoldCalendarTitleDirective, FoldCalendarToolbarComponent, FoldCalendarWeekComponent, FoldCalloutComponent, FoldCardComponent, FoldCheckboxComponent, FoldChecklistComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDangerZoneComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDataTableRowCardDirective, FoldDataTableRowDetailDirective, FoldDataTableRowNoteDirective, FoldDateComponent, FoldDisclosureComponent, FoldDropdownComponent, FoldDropdownItemComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFieldsetComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInfoComponent, FoldInlineConfirmComponent, FoldInputComponent, FoldLinkComponent, FoldListboxComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldMeterComponent, FoldMultiselectComponent, FoldNavGroupComponent, FoldNavLauncherComponent, FoldNavLayoutComponent, FoldNavTileComponent, FoldNumberInputComponent, FoldOptgroupComponent, FoldOptionComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPageTitleDirective, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelBodyComponent, FoldPanelComponentOutletDirective, FoldPanelFooterComponent, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldPasswordFieldComponent, FoldPopoverComponent, FoldPopoverTriggerDirective, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldScrollRegionDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabPanelComponent, FoldTabsComponent, FoldTextareaComponent, FoldTimeComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, FoldViewNavComponent, FoldViewToggleComponent, ScrollRegionRegistry, autoUpdate, computePlacement, foldAddDays, foldAddMinutes, foldAddMonths, foldBlurVar, foldBuildAgenda, foldBuildDay, foldBuildMonthGrid, foldBuildTimeGrid, foldBuildWeek, foldCalendarNextFocus, foldCardBandChrome, foldColorProperty, foldColorVar, foldCountActionable, foldDaysBetween, foldDefaultPasswordRules, foldEndOfMonth, foldEventsInRange, foldEventsOnDay, foldFilterBySource, foldFontVar, foldFromMinutes, foldFromNativeDate, foldFromTemporal, foldHashSeed, foldIsActionable, foldIsCalendarDate, foldIsCalendarTime, foldIsTimed, foldIsWeekend, foldIsoWeek, foldIsoWeekYear, foldLayOutOverlaps, foldLeadingVar, foldLocaleWeekInfo, foldMediaQuery, foldMotionVar, foldRadiusVar, foldRangeForView, foldRegexRule, foldResolvePalette, foldShadowVar, foldShiftDate, foldSpaceVar, foldStartOfMonth, foldStartOfWeek, foldTextVar, foldToMinutes, foldToNativeDate, foldToday, foldTrackingVar, foldViewTitle, foldWeekdayIndex, foldWeekdayOf, foldWeightVar, isFoldSelectOptionGroup, observeElementWidth, provideFoldCalendarLabels, provideFoldCommonLabels, provideFoldDataTableLabels, provideFoldIcons, provideFoldInlineConfirmLabels, provideFoldPaginatorLabels, provideFoldPalette, provideFoldPanelDefaults, provideFoldPanelLabels, provideFoldToasts, resolveFoldMobileQuery };
 //# sourceMappingURL=fold-ng.mjs.map