@aquera/nile-elements 2.0.9 → 2.0.11

package/dist/src/nile-app-shell/nile-app-shell.css.js

@@ -5,28 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { css } from 'lit';
-/**
- * AppShell CSS.
- *
- * One grid, two columns, one flex row. The grid owns the banner row, the
- * optional shell-wide top bar, the side-nav track and the content column. The
- * content column is a flex row holding the content container, the optional
- * aside and — when docked — the AI panel. Nothing else in an app sets these
- * boxes.
- */
+import { utilityControlStyles } from '../internal/app-shell-utility-control-styles';
+/** AppShell CSS: a grid of banner, top bar, side-nav track and content column, whose flex row holds the container, aside and docked AI panel. */
 export const styles = css `
   :host {
-    /* Geometry. Values come from design tokens wherever one exists; the bare
-       pixels are shell geometry with no matching token. */
-    --nile-app-shell-side-nav-width: 260px;
-    --nile-app-shell-side-nav-rail-width: 64px;
-    --nile-app-shell-gutter: var(--nile-spacing-md, var(--ng-spacing-md));
+    /* Geometry: design tokens where one exists, bare pixels where none does. */
+    /* The nav track mirrors nile-side-bar's own width expressions (enterprise 240/70, NxtGen 296/68); keep in step with nile-side-bar.css.ts. */
+    --nile-app-shell-side-nav-width: var(
+      --nile-width-240px,
+      var(--ng-spacing-296, 240px)
+    );
+    --nile-app-shell-side-nav-rail-width: var(
+      --nile-width-70px,
+      var(--ng-spacing-68, 70px)
+    );
+    --nile-app-shell-gutter: var(--nile-spacing-xs, var(--ng-spacing-xs));
     --nile-app-shell-content-padding: var(
       --nile-spacing-3xl,
       var(--ng-spacing-3xl)
     );
-    --nile-app-shell-top-bar-height: 56px;
-    --nile-app-shell-tabs-height: 48px;
+    --nile-app-shell-top-bar-height: 68px;
+    /* The panel header keeps its own height, distinct from the page header. */
+    --nile-app-shell-panel-header-height: 56px;
+    --nile-app-shell-tabs-height: 33px;
+    /* The leading app icon is its own 20px size, not the 32px utility box. */
+    --nile-app-shell-app-icon-size: 20px;
     --nile-app-shell-panel-width: 480px;
     --nile-app-shell-panel-min-width: 360px;
     --nile-app-shell-aside-width: 320px;
@@ -34,9 +37,10 @@ export const styles = css `
     --nile-app-shell-content-min-width: 640px;
     --nile-app-shell-min-width: 768px;
     --nile-app-shell-centered-width: 824px;
+    /* Both tokens are 32px; the literal is the floor with no theme sheet loaded. */
     --nile-app-shell-utility-size: var(
       --nile-spacing-4xl,
-      var(--ng-spacing-4xl)
+      var(--ng-spacing-4xl, 32px)
     );
     --nile-app-shell-radius: var(--nile-radius-xl, var(--ng-radius-2xl));
     --nile-app-shell-duration: var(
@@ -76,8 +80,7 @@ export const styles = css `
     height: 100dvh;
   }
 
-  /* Effective rail state, set by the component: the user's preference, or a
-     forced rail at narrow widths. */
+  /* Effective rail state: the user's preference, or a forced rail when narrow. */
   :host([rail]) {
     --_side-nav-track: var(--nile-app-shell-side-nav-rail-width);
   }
@@ -86,10 +89,19 @@ export const styles = css `
     --_side-nav-track: 0px;
   }
 
+  /* The Description axis: a present description adds the 8px its second line occupies. */
+  :host([has-description]) {
+    --nile-app-shell-top-bar-height: 76px;
+  }
+
   /* The top bar compresses before the content does. */
   @media (max-height: 600px) {
     :host {
-      --nile-app-shell-top-bar-height: 48px;
+      --nile-app-shell-top-bar-height: 56px;
+    }
+
+    :host([has-description]) {
+      --nile-app-shell-top-bar-height: 64px;
     }
   }
 
@@ -117,13 +129,12 @@ export const styles = css `
     display: none;
   }
 
-  /*
-   * The nav and the page share one surface, and the shell owns the track
-   * width, so a slotted sidebar fills the track and drops its own background
-   * and edge. Set --nile-app-shell-side-nav-bg to put a surface back.
-   */
+  /* A slotted sidebar fills the shell-owned track and drops its own surface and edge; set --nile-app-shell-side-nav-bg to restore one. */
+  /* width is deliberately not !important: the 100% lets a raw <nav> or nile-app-shell-side-nav fill the track, while a slotted
+     nile-side-bar sizes itself from the same tokens the track reads (see the :host geometry block). Tests 21/22 in
+     nile-app-shell-regions.test.ts lock the two together; change both or neither. */
   ::slotted([slot='side-nav']) {
-    width: 100% !important;
+    width: 100%;
     height: 100%;
     background: var(--nile-app-shell-side-nav-bg, transparent) !important;
     border-right: var(--nile-app-shell-side-nav-border, 0) !important;
@@ -138,19 +149,19 @@ export const styles = css `
     min-width: 0;
     gap: var(--nile-app-shell-gutter);
     padding: var(--nile-app-shell-gutter);
+    /* Flush against the nav track; the gutter insets the other three sides. */
+    padding-inline-start: 0;
     box-sizing: border-box;
   }
 
+  /* With no nav track there is nothing to sit flush against, so the start edge takes the gutter too. */
+  :host(:not([has-side-nav])) .content-section {
+    padding-inline-start: var(--nile-app-shell-gutter);
+  }
+
   .container {
     box-sizing: border-box;
-    /*
-     * The floor is the flex basis, not a min-width: a hard min-width cannot
-     * yield, so the row overflows and :host's overflow:hidden clips the
-     * regions after it. As a basis the container holds the floor while there
-     * is room and gives way when there is not. The shell keeps a docked panel
-     * off the row until it fits (see _dockRequirement), so the give-way path
-     * is the last resort, not the usual one.
-     */
+    /* The floor is the flex basis, not a min-width, so the container yields instead of overflowing the clipped row. */
     flex: 1 1 var(--nile-app-shell-content-min-width);
     display: flex;
     flex-direction: column;
@@ -158,24 +169,15 @@ export const styles = css `
     overflow: hidden;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));
     border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
-      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-app-shell-radius);
     box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));
-    /*
-     * The container — not the viewport — is the sizing context for page
-     * content. See the content-container note below for querying it.
-     */
+    /* The container, not the viewport, is the sizing context for page content. */
     container-type: inline-size;
     container-name: nile-content;
   }
 
-  /*
-   * Container queries cannot cross a shadow boundary: a rule in the page's
-   * stylesheet cannot see a container declared in here. The
-   * content-container attribute moves the context onto the slotted page root instead, so page CSS can
-   * write an @container nile-content query. It brings layout containment with
-   * it, so it is opt-in.
-   */
+  /* content-container moves the size query context onto the slotted page root so page CSS can query nile-content; opt-in as it brings containment. */
   :host([content-container]) slot:not([name])::slotted(*) {
     container-type: inline-size;
     container-name: nile-content;
@@ -199,12 +201,7 @@ export const styles = css `
     padding-inline: var(--nile-app-shell-content-padding);
   }
 
-  /* Inside the container the bar carries the rule that separates it from the
-     page body; spanning the shell it carries the container's edge instead. */
-  .container > .top-bar {
-    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
-      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
-  }
+  /* The header bar draws no bottom rule in any variant; the only divider comes from the tab rail (see .tabs). */
 
   .shell-top-bar {
     grid-area: top-bar;
@@ -228,6 +225,171 @@ export const styles = css `
     flex: 1 1 auto;
   }
 
+  /* The title block: the header's own heading, the Leading axis and the badge; renders before the top-bar slot. */
+  .title-area {
+    display: flex;
+    /* Top-aligned, not centred: the leading element belongs to the title's row, not the title-plus-description stack. */
+    align-items: flex-start;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    min-width: 0;
+  }
+
+  /* The leading line box: exactly the page title's line height, centring whatever leading control sits in it. */
+  .leading {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    min-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
+  }
+
+  .title-stack {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
+    min-width: 0;
+  }
+
+  .title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    min-width: 0;
+  }
+
+  .page-title {
+    margin: 0;
+    min-width: 0;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .description {
+    margin: 0;
+    min-width: 0;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* The badge sits on the title row and never shrinks the title away; each surface token pairs a Nile name with its NxtGen equivalent. */
+  .badge {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    padding-inline: var(--nile-spacing-md, var(--ng-spacing-md));
+    padding-block: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
+    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(
+        --nile-colors-neutral-400,
+        var(--ng-componentcolors-utility-gray-200)
+      );
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    background: var(
+      --nile-colors-neutral-100,
+      var(--ng-componentcolors-utility-gray-50)
+    );
+    color: var(
+      --nile-colors-dark-500,
+      var(--ng-componentcolors-utility-gray-700)
+    );
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    white-space: nowrap;
+  }
+
+  /* Leading=Back: drawn as a breadcrumb label; the shell owns no history, so pressing it only emits nile-header-back. */
+  .back {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+  }
+
+  .back:hover {
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+  }
+
+  .crumb-divider {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
+  }
+
+  /* Leading=AppIcon: a 20px block before the title; the page slots the mark, the shell owns the box, surface and radius. */
+  .app-icon {
+    position: relative;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--nile-app-shell-app-icon-size);
+    height: var(--nile-app-shell-app-icon-size);
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+    overflow: hidden;
+  }
+
+  /* The slotted mark fills the wrapper edge to edge, clipped to the box. */
+  .app-icon slot::slotted(*) {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+  }
+
+  /* The wrapper takes no fill; the rim is a white-12% gradient drawn as a masked ::before, with literal mask fallbacks for the nxtgen-only tokens. */
+  .app-icon::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    z-index: 1;
+    background: linear-gradient(
+      180deg,
+      rgb(255 255 255 / 12%) 0%,
+      rgb(255 255 255 / 0%) 100%
+    );
+    mask: var(
+      --ng-mask-rim,
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0)
+    );
+    mask-composite: var(--ng-mask-composite-exclude, exclude);
+    padding: 1.4px;
+  }
+
+  :host(:not([leading='app-icon'])) .app-icon,
+  :host(:not([leading='back'])) .back,
+  :host(:not([leading='back'])) .crumb-divider {
+    display: none;
+  }
+
   .top-bar-actions {
     display: flex;
     align-items: center;
@@ -235,25 +397,12 @@ export const styles = css `
     margin-inline-start: auto;
   }
 
-  /*
-   * An empty flex item still takes the row's gap before it, which pulls the
-   * bar's content 16px short of the padding edge and leaves a sliver of bare
-   * container at the end of the header. Nothing in the group, no box.
-   */
+  /* Hidden when empty, so an empty group's gap does not pull the bar's content short of the padding edge. */
   :host(:not([has-top-bar-actions]):not([has-ask])) .top-bar-actions {
     display: none;
   }
 
-  /*
-   * The Ask button. The one control in the bar the shell renders itself: it
-   * turns on the panel being mounted and it calls openPanel(), neither of
-   * which slotted markup can reach.
-   *
-   * It is a stock <nile-button variant="primary">: the shell sets no surface,
-   * radius, height or type of its own, so the button's appearance — and its
-   * focus ring, hover, disabled and loading states — stays the component's.
-   * The only rule here is the flex behaviour it needs as a top-bar item.
-   */
+  /* The Ask button: a stock <nile-button variant="primary"> the shell renders itself; the only rule here is its flex behaviour as a top-bar item. */
   .ask {
     flex: 0 0 auto;
   }
@@ -276,12 +425,9 @@ export const styles = css `
     gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
-  /*
-   * Lands the 24px glyph box, not nile-button's 38px circle, on the
-   * container's 24px origin: (38 - 24) / 2 = 7.
-   */
+  /* Lands the 20px glyph box, not the 32px utility circle, on the 24px origin: (32 - 20) / 2 = 6. */
   .nav-toggle {
-    margin-inline-start: -7px;
+    margin-inline-start: -6px;
   }
 
   .rule {
@@ -294,13 +440,14 @@ export const styles = css `
     );
   }
 
+  /* ------------------------------------------------------- utility controls */
+
+  /* The shell's own icon controls (nav toggle, panel back and close): the shared utility-control recipe. */
+  ${utilityControlStyles}
+
   /* --------------------------------------------------------------- tab strip */
 
-  /*
-   * Hoisted out of the scroller so it never scrolls away. It sits flush under
-   * the top bar — the header carries no bottom rule of its own, so the two read
-   * as one block of chrome, with the single rule living at the strip's bottom.
-   */
+  /* Hoisted out of the scroller so it never scrolls away; sits flush under the top bar and carries the header block's single bottom rule. */
   .tabs {
     box-sizing: border-box;
     flex: 0 0 auto;
@@ -308,6 +455,7 @@ export const styles = css `
     align-items: stretch;
     gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
     min-width: 0;
+    /* A floor, not a fixed box: the strip is as tall as the row it holds plus its rule. */
     min-height: var(--nile-app-shell-tabs-height);
     padding-inline: var(--nile-app-shell-content-padding);
     /* The strip carries the rule for the whole header block. */
@@ -317,14 +465,32 @@ export const styles = css `
     scrollbar-width: none;
   }
 
+  /* The header tab's 0/4/12/4 padding composes the 32px row; the 12px bottom gives the active indicator its band, set via the group's public padding hook. */
+  ::slotted([slot='tabs']) {
+    --nile-nav-tab-padding: var(--nile-spacing-none, var(--ng-spacing-none))
+      var(--nile-spacing-xs, var(--ng-spacing-xs))
+      var(--nile-spacing-lg, var(--ng-spacing-lg))
+      var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
   .tabs::-webkit-scrollbar {
     display: none;
   }
 
-  :host(:not([has-tabs])) .tabs {
+  :host(:not([has-tabs])) .tabs,
+  :host([notabs]) .tabs {
     display: none;
   }
 
+  /* A slotted nile-nav-tab-group drops its own track (--track-width:0 on the host) and is bottom-aligned so its indicator sits on the region's single rule. */
+  /* Scoped to the group, not the slot, so bare tab controls are not stretched to an equal share of the strip. */
+  ::slotted(nile-nav-tab-group[slot='tabs']) {
+    --track-width: 0px;
+    flex: 1 1 auto;
+    min-width: 0;
+    align-self: flex-end;
+  }
+
   /* ------------------------------------------------------------------- main */
 
   .main {
@@ -334,7 +500,9 @@ export const styles = css `
     flex-direction: column;
     min-height: 0;
     overflow: auto;
+    /* Top and sides only: the page runs to the container's bottom edge. */
     padding: var(--nile-app-shell-content-padding);
+    padding-block-end: 0;
   }
 
   .main:focus {
@@ -352,13 +520,7 @@ export const styles = css `
 
   /* Centred when short, scrolls from the top when tall. */
   :host([content-align='centered']) .main-inner {
-    /*
-     * width:100% + max-width leaves free space for the auto inline margins to
-     * split; dropping the width would let the auto margins cancel the flex
-     * stretch and shrink-wrap the column to its widest child. The block margins
-     * centre it while it is short and compute to 0 once it is taller, so a tall
-     * page scrolls from the top rather than clipping.
-     */
+    /* width:100% + max-width leaves space for the auto margins to centre it while short, and scroll from the top when tall. */
     width: 100%;
     max-width: var(--nile-app-shell-centered-width);
     margin: auto;
@@ -368,8 +530,7 @@ export const styles = css `
 
   .aside {
     box-sizing: border-box;
-    /* Gives before the page does, down to its own floor, for the same reason
-       the panel does: the page is the last region to be asked for room. */
+    /* Gives before the page does, down to its own floor. */
     flex: 0 1 var(--nile-app-shell-aside-width);
     min-width: var(--nile-app-shell-aside-min-width);
     display: flex;
@@ -391,13 +552,7 @@ export const styles = css `
 
   .panel {
     box-sizing: border-box;
-    /*
-     * The panel pushes the page, it never covers it, so it has to be able to
-     * give a little: full width while the row can afford it, then shrinking to
-     * its min. Here the floor can be a real min-width — the container's floor
-     * is a flex basis that yields all the way, so the row still cannot
-     * overflow into :host's clip once the panel stops giving.
-     */
+    /* The panel pushes the page rather than covering it: full width while the row affords it, shrinking to a real min-width floor. */
     flex: 0 1 var(--nile-app-shell-panel-width);
     width: var(--nile-app-shell-panel-width);
     min-width: var(--nile-app-shell-panel-min-width);
@@ -451,13 +606,28 @@ export const styles = css `
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    height: var(--nile-app-shell-top-bar-height);
-    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    height: var(--nile-app-shell-panel-header-height);
+    padding-inline: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
     border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
       var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 
+  /* The back control for a panel sub-view; stands where the brand mark does in the root view. */
+  .panel-back {
+    flex: 0 0 auto;
+    margin-inline-start: -6px;
+  }
+
+  /* Mirrors the back control's offset on the end edge: the 20px glyph, not the 32px circle, lands on the padding line. */
+  .panel-close {
+    margin-inline-end: -6px;
+  }
+
+  :host([panelback]) .panel-mark {
+    display: none;
+  }
+
   .panel-heading {
     display: flex;
     align-items: center;
@@ -504,7 +674,8 @@ export const styles = css `
     flex: 1 1 auto;
     min-height: 0;
     overflow: auto;
-    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    /* 16 under the header, 24 on the sides and bottom. */
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
     display: flex;
     flex-direction: column;
     gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
@@ -512,7 +683,7 @@ export const styles = css `
 
   .panel-footer {
     flex: 0 0 auto;
-    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
     border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid
       var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }

package/dist/src/nile-app-shell/nile-app-shell.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-app-shell.css.js","sourceRoot":"","sources":["../../../src/nile-app-shell/nile-app-shell.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyiBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * AppShell CSS.\n *\n * One grid, two columns, one flex row. The grid owns the banner row, the\n * optional shell-wide top bar, the side-nav track and the content column. The\n * content column is a flex row holding the content container, the optional\n * aside and — when docked — the AI panel. Nothing else in an app sets these\n * boxes.\n */\nexport const styles = css`\n  :host {\n    /* Geometry. Values come from design tokens wherever one exists; the bare\n       pixels are shell geometry with no matching token. */\n    --nile-app-shell-side-nav-width: 260px;\n    --nile-app-shell-side-nav-rail-width: 64px;\n    --nile-app-shell-gutter: var(--nile-spacing-md, var(--ng-spacing-md));\n    --nile-app-shell-content-padding: var(\n      --nile-spacing-3xl,\n      var(--ng-spacing-3xl)\n    );\n    --nile-app-shell-top-bar-height: 56px;\n    --nile-app-shell-tabs-height: 48px;\n    --nile-app-shell-panel-width: 480px;\n    --nile-app-shell-panel-min-width: 360px;\n    --nile-app-shell-aside-width: 320px;\n    --nile-app-shell-aside-min-width: 240px;\n    --nile-app-shell-content-min-width: 640px;\n    --nile-app-shell-min-width: 768px;\n    --nile-app-shell-centered-width: 824px;\n    --nile-app-shell-utility-size: var(\n      --nile-spacing-4xl,\n      var(--ng-spacing-4xl)\n    );\n    --nile-app-shell-radius: var(--nile-radius-xl, var(--ng-radius-2xl));\n    --nile-app-shell-duration: var(\n      --nile-transition-duration-default,\n      var(--ng-transition-duration-default)\n    );\n    /* NxtGen ships no easing tokens, so the shell names its own. */\n    --nile-app-shell-ease: cubic-bezier(0.2, 0, 0, 1);\n\n    --_side-nav-track: var(--nile-app-shell-side-nav-width);\n\n    position: relative;\n    box-sizing: border-box;\n    display: grid;\n    grid-template-areas:\n      'banner banner'\n      'top-bar top-bar'\n      'side-nav content';\n    grid-template-columns: var(--_side-nav-track) minmax(0, 1fr);\n    grid-template-rows: auto auto minmax(0, 1fr);\n    /* Below this the window scrolls rather than the shell compressing. */\n    min-width: var(--nile-app-shell-min-width);\n    height: 100%;\n    overflow: hidden;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    transition: grid-template-columns var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([full-height]) {\n    height: 100dvh;\n  }\n\n  /* Effective rail state, set by the component: the user's preference, or a\n     forced rail at narrow widths. */\n  :host([rail]) {\n    --_side-nav-track: var(--nile-app-shell-side-nav-rail-width);\n  }\n\n  :host(:not([has-side-nav])) {\n    --_side-nav-track: 0px;\n  }\n\n  /* The top bar compresses before the content does. */\n  @media (max-height: 600px) {\n    :host {\n      --nile-app-shell-top-bar-height: 48px;\n    }\n  }\n\n  /* ---------------------------------------------------------------- banner */\n\n  .banner {\n    grid-area: banner;\n    min-width: 0;\n  }\n\n  :host(:not([has-banner])) .banner {\n    display: none;\n  }\n\n  /* ------------------------------------------------------------- side nav */\n\n  .side-nav {\n    grid-area: side-nav;\n    display: flex;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  :host(:not([has-side-nav])) .side-nav {\n    display: none;\n  }\n\n  /*\n   * The nav and the page share one surface, and the shell owns the track\n   * width, so a slotted sidebar fills the track and drops its own background\n   * and edge. Set --nile-app-shell-side-nav-bg to put a surface back.\n   */\n  ::slotted([slot='side-nav']) {\n    width: 100% !important;\n    height: 100%;\n    background: var(--nile-app-shell-side-nav-bg, transparent) !important;\n    border-right: var(--nile-app-shell-side-nav-border, 0) !important;\n  }\n\n  /* -------------------------------------------------------- content column */\n\n  .content-section {\n    grid-area: content;\n    position: relative;\n    display: flex;\n    min-width: 0;\n    gap: var(--nile-app-shell-gutter);\n    padding: var(--nile-app-shell-gutter);\n    box-sizing: border-box;\n  }\n\n  .container {\n    box-sizing: border-box;\n    /*\n     * The floor is the flex basis, not a min-width: a hard min-width cannot\n     * yield, so the row overflows and :host's overflow:hidden clips the\n     * regions after it. As a basis the container holds the floor while there\n     * is room and gives way when there is not. The shell keeps a docked panel\n     * off the row until it fits (see _dockRequirement), so the give-way path\n     * is the last resort, not the usual one.\n     */\n    flex: 1 1 var(--nile-app-shell-content-min-width);\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));\n    /*\n     * The container — not the viewport — is the sizing context for page\n     * content. See the content-container note below for querying it.\n     */\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  /*\n   * Container queries cannot cross a shadow boundary: a rule in the page's\n   * stylesheet cannot see a container declared in here. The\n   * content-container attribute moves the context onto the slotted page root instead, so page CSS can\n   * write an @container nile-content query. It brings layout containment with\n   * it, so it is opt-in.\n   */\n  :host([content-container]) slot:not([name])::slotted(*) {\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  :host([flat]) .container {\n    background: transparent;\n    border-color: transparent;\n    border-radius: 0;\n  }\n\n  /* ---------------------------------------------------------------- top bar */\n\n  .top-bar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    height: var(--nile-app-shell-top-bar-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n  }\n\n  /* Inside the container the bar carries the rule that separates it from the\n     page body; spanning the shell it carries the container's edge instead. */\n  .container > .top-bar {\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .shell-top-bar {\n    grid-area: top-bar;\n    min-width: 0;\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  /* No slotted bar content and no nav toggle means no bar at all. */\n  :host(:not([has-top-bar])) .top-bar {\n    display: none;\n  }\n\n  .top-bar-content {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    min-width: 0;\n    flex: 1 1 auto;\n  }\n\n  .top-bar-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    margin-inline-start: auto;\n  }\n\n  /*\n   * An empty flex item still takes the row's gap before it, which pulls the\n   * bar's content 16px short of the padding edge and leaves a sliver of bare\n   * container at the end of the header. Nothing in the group, no box.\n   */\n  :host(:not([has-top-bar-actions]):not([has-ask])) .top-bar-actions {\n    display: none;\n  }\n\n  /*\n   * The Ask button. The one control in the bar the shell renders itself: it\n   * turns on the panel being mounted and it calls openPanel(), neither of\n   * which slotted markup can reach.\n   *\n   * It is a stock <nile-button variant=\"primary\">: the shell sets no surface,\n   * radius, height or type of its own, so the button's appearance — and its\n   * focus ring, hover, disabled and loading states — stays the component's.\n   * The only rule here is the flex behaviour it needs as a top-bar item.\n   */\n  .ask {\n    flex: 0 0 auto;\n  }\n\n  .ask-mark {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .ask-mark nile-glyph {\n    --nile-svg-fill: currentColor;\n    --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n    width: 16px;\n    height: 16px;\n  }\n\n  .nav-toggle-group {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Lands the 24px glyph box, not nile-button's 38px circle, on the\n   * container's 24px origin: (38 - 24) / 2 = 7.\n   */\n  .nav-toggle {\n    margin-inline-start: -7px;\n  }\n\n  .rule {\n    flex: 0 0 auto;\n    width: var(--nile-border-width-1, var(--ng-border-width-1));\n    height: 24px;\n    background: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-border-secondary)\n    );\n  }\n\n  /* --------------------------------------------------------------- tab strip */\n\n  /*\n   * Hoisted out of the scroller so it never scrolls away. It sits flush under\n   * the top bar — the header carries no bottom rule of its own, so the two read\n   * as one block of chrome, with the single rule living at the strip's bottom.\n   */\n  .tabs {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: stretch;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    min-width: 0;\n    min-height: var(--nile-app-shell-tabs-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n    /* The strip carries the rule for the whole header block. */\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .tabs::-webkit-scrollbar {\n    display: none;\n  }\n\n  :host(:not([has-tabs])) .tabs {\n    display: none;\n  }\n\n  /* ------------------------------------------------------------------- main */\n\n  .main {\n    box-sizing: border-box;\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-app-shell-content-padding);\n  }\n\n  .main:focus {\n    outline: none;\n  }\n\n  :host([no-padding]) .main {\n    padding: 0;\n  }\n\n  .main-inner {\n    width: 100%;\n    min-height: 0;\n  }\n\n  /* Centred when short, scrolls from the top when tall. */\n  :host([content-align='centered']) .main-inner {\n    /*\n     * width:100% + max-width leaves free space for the auto inline margins to\n     * split; dropping the width would let the auto margins cancel the flex\n     * stretch and shrink-wrap the column to its widest child. The block margins\n     * centre it while it is short and compute to 0 once it is taller, so a tall\n     * page scrolls from the top rather than clipping.\n     */\n    width: 100%;\n    max-width: var(--nile-app-shell-centered-width);\n    margin: auto;\n  }\n\n  /* ------------------------------------------------------------------ aside */\n\n  .aside {\n    box-sizing: border-box;\n    /* Gives before the page does, down to its own floor, for the same reason\n       the panel does: the page is the last region to be asked for room. */\n    flex: 0 1 var(--nile-app-shell-aside-width);\n    min-width: var(--nile-app-shell-aside-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-app-shell-content-padding);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-app-shell-radius);\n  }\n\n  :host(:not([has-aside])) .aside {\n    display: none;\n  }\n\n  /* -------------------------------------------------------------- AI panel */\n\n  .panel {\n    box-sizing: border-box;\n    /*\n     * The panel pushes the page, it never covers it, so it has to be able to\n     * give a little: full width while the row can afford it, then shrinking to\n     * its min. Here the floor can be a real min-width — the container's floor\n     * is a flex basis that yields all the way, so the row still cannot\n     * overflow into :host's clip once the panel stops giving.\n     */\n    flex: 0 1 var(--nile-app-shell-panel-width);\n    width: var(--nile-app-shell-panel-width);\n    min-width: var(--nile-app-shell-panel-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    /* The panel is elevated, so its edge sits a rung above the container's. */\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n  }\n\n  /* Docked: a flex sibling. It squeezes the content, it does not cover it. */\n  :host(:not([panel-open])) .panel {\n    display: none;\n  }\n\n  /* Overlay: contained to the content column, above it, and animated in. */\n  :host([panel-mode='overlay']) .panel {\n    position: absolute;\n    z-index: 1001;\n    inset-block: var(--nile-app-shell-gutter);\n    inset-inline-end: var(--nile-app-shell-gutter);\n    flex: none;\n    display: flex;\n    width: min(var(--nile-app-shell-panel-width), 92%);\n    visibility: hidden;\n    transform: translateX(calc(100% + var(--nile-app-shell-gutter)));\n    transition: transform var(--nile-app-shell-duration)\n        var(--nile-app-shell-ease),\n      visibility 0s linear var(--nile-app-shell-duration);\n  }\n\n  :host([panel-mode='overlay'][panel-open]) .panel {\n    visibility: visible;\n    transform: none;\n    transition: transform var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  /* An unavailable panel is unmounted in either mode. */\n  :host(:not([has-panel])) .panel {\n    display: none;\n  }\n\n  .panel-header {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-app-shell-top-bar-height);\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .panel-heading {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    min-width: 0;\n  }\n\n  .panel-mark {\n    display: inline-flex;\n    color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-fg-brand-primary-600)\n    );\n  }\n\n  .panel-mark nile-glyph {\n    --nile-svg-fill: currentColor;\n    --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n    width: 20px;\n    height: 20px;\n  }\n\n  .panel-title {\n    margin: 0;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .panel-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    margin-inline-start: auto;\n  }\n\n  .panel-body {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .panel-footer {\n    flex: 0 0 auto;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  :host(:not([has-panel-footer])) .panel-footer {\n    display: none;\n  }\n\n  /* ---------------------------------------------------------- skip link */\n\n  .skip-link {\n    position: absolute;\n    z-index: 1002;\n    inset-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    inset-block-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    display: inline-flex;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n    cursor: pointer;\n    transform: translateY(-200%);\n    transition: transform\n      var(--nile-transition-duration-short, var(--ng-transition-duration-fast))\n      var(--nile-app-shell-ease);\n  }\n\n  .skip-link:focus-visible {\n    outline: none;\n    transform: none;\n    box-shadow: 0 0 0 2px\n        var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary)),\n      0 0 0 4px\n        var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n  }\n\n  :host([no-skip-link]) .skip-link {\n    display: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host,\n    .panel,\n    .skip-link {\n      transition: none;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-app-shell.css.js","sourceRoot":"","sources":["../../../src/nile-app-shell/nile-app-shell.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AAEpF,iJAAiJ;AACjJ,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAobrB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuSvB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\nimport { utilityControlStyles } from '../internal/app-shell-utility-control-styles';\n\n/** AppShell CSS: a grid of banner, top bar, side-nav track and content column, whose flex row holds the container, aside and docked AI panel. */\nexport const styles = css`\n  :host {\n    /* Geometry: design tokens where one exists, bare pixels where none does. */\n    /* The nav track mirrors nile-side-bar's own width expressions (enterprise 240/70, NxtGen 296/68); keep in step with nile-side-bar.css.ts. */\n    --nile-app-shell-side-nav-width: var(\n      --nile-width-240px,\n      var(--ng-spacing-296, 240px)\n    );\n    --nile-app-shell-side-nav-rail-width: var(\n      --nile-width-70px,\n      var(--ng-spacing-68, 70px)\n    );\n    --nile-app-shell-gutter: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    --nile-app-shell-content-padding: var(\n      --nile-spacing-3xl,\n      var(--ng-spacing-3xl)\n    );\n    --nile-app-shell-top-bar-height: 68px;\n    /* The panel header keeps its own height, distinct from the page header. */\n    --nile-app-shell-panel-header-height: 56px;\n    --nile-app-shell-tabs-height: 33px;\n    /* The leading app icon is its own 20px size, not the 32px utility box. */\n    --nile-app-shell-app-icon-size: 20px;\n    --nile-app-shell-panel-width: 480px;\n    --nile-app-shell-panel-min-width: 360px;\n    --nile-app-shell-aside-width: 320px;\n    --nile-app-shell-aside-min-width: 240px;\n    --nile-app-shell-content-min-width: 640px;\n    --nile-app-shell-min-width: 768px;\n    --nile-app-shell-centered-width: 824px;\n    /* Both tokens are 32px; the literal is the floor with no theme sheet loaded. */\n    --nile-app-shell-utility-size: var(\n      --nile-spacing-4xl,\n      var(--ng-spacing-4xl, 32px)\n    );\n    --nile-app-shell-radius: var(--nile-radius-xl, var(--ng-radius-2xl));\n    --nile-app-shell-duration: var(\n      --nile-transition-duration-default,\n      var(--ng-transition-duration-default)\n    );\n    /* NxtGen ships no easing tokens, so the shell names its own. */\n    --nile-app-shell-ease: cubic-bezier(0.2, 0, 0, 1);\n\n    --_side-nav-track: var(--nile-app-shell-side-nav-width);\n\n    position: relative;\n    box-sizing: border-box;\n    display: grid;\n    grid-template-areas:\n      'banner banner'\n      'top-bar top-bar'\n      'side-nav content';\n    grid-template-columns: var(--_side-nav-track) minmax(0, 1fr);\n    grid-template-rows: auto auto minmax(0, 1fr);\n    /* Below this the window scrolls rather than the shell compressing. */\n    min-width: var(--nile-app-shell-min-width);\n    height: 100%;\n    overflow: hidden;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    transition: grid-template-columns var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([full-height]) {\n    height: 100dvh;\n  }\n\n  /* Effective rail state: the user's preference, or a forced rail when narrow. */\n  :host([rail]) {\n    --_side-nav-track: var(--nile-app-shell-side-nav-rail-width);\n  }\n\n  :host(:not([has-side-nav])) {\n    --_side-nav-track: 0px;\n  }\n\n  /* The Description axis: a present description adds the 8px its second line occupies. */\n  :host([has-description]) {\n    --nile-app-shell-top-bar-height: 76px;\n  }\n\n  /* The top bar compresses before the content does. */\n  @media (max-height: 600px) {\n    :host {\n      --nile-app-shell-top-bar-height: 56px;\n    }\n\n    :host([has-description]) {\n      --nile-app-shell-top-bar-height: 64px;\n    }\n  }\n\n  /* ---------------------------------------------------------------- banner */\n\n  .banner {\n    grid-area: banner;\n    min-width: 0;\n  }\n\n  :host(:not([has-banner])) .banner {\n    display: none;\n  }\n\n  /* ------------------------------------------------------------- side nav */\n\n  .side-nav {\n    grid-area: side-nav;\n    display: flex;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  :host(:not([has-side-nav])) .side-nav {\n    display: none;\n  }\n\n  /* A slotted sidebar fills the shell-owned track and drops its own surface and edge; set --nile-app-shell-side-nav-bg to restore one. */\n  /* width is deliberately not !important: the 100% lets a raw <nav> or nile-app-shell-side-nav fill the track, while a slotted\n     nile-side-bar sizes itself from the same tokens the track reads (see the :host geometry block). Tests 21/22 in\n     nile-app-shell-regions.test.ts lock the two together; change both or neither. */\n  ::slotted([slot='side-nav']) {\n    width: 100%;\n    height: 100%;\n    background: var(--nile-app-shell-side-nav-bg, transparent) !important;\n    border-right: var(--nile-app-shell-side-nav-border, 0) !important;\n  }\n\n  /* -------------------------------------------------------- content column */\n\n  .content-section {\n    grid-area: content;\n    position: relative;\n    display: flex;\n    min-width: 0;\n    gap: var(--nile-app-shell-gutter);\n    padding: var(--nile-app-shell-gutter);\n    /* Flush against the nav track; the gutter insets the other three sides. */\n    padding-inline-start: 0;\n    box-sizing: border-box;\n  }\n\n  /* With no nav track there is nothing to sit flush against, so the start edge takes the gutter too. */\n  :host(:not([has-side-nav])) .content-section {\n    padding-inline-start: var(--nile-app-shell-gutter);\n  }\n\n  .container {\n    box-sizing: border-box;\n    /* The floor is the flex basis, not a min-width, so the container yields instead of overflowing the clipped row. */\n    flex: 1 1 var(--nile-app-shell-content-min-width);\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));\n    /* The container, not the viewport, is the sizing context for page content. */\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  /* content-container moves the size query context onto the slotted page root so page CSS can query nile-content; opt-in as it brings containment. */\n  :host([content-container]) slot:not([name])::slotted(*) {\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  :host([flat]) .container {\n    background: transparent;\n    border-color: transparent;\n    border-radius: 0;\n  }\n\n  /* ---------------------------------------------------------------- top bar */\n\n  .top-bar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    height: var(--nile-app-shell-top-bar-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n  }\n\n  /* The header bar draws no bottom rule in any variant; the only divider comes from the tab rail (see .tabs). */\n\n  .shell-top-bar {\n    grid-area: top-bar;\n    min-width: 0;\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  /* No slotted bar content and no nav toggle means no bar at all. */\n  :host(:not([has-top-bar])) .top-bar {\n    display: none;\n  }\n\n  .top-bar-content {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    min-width: 0;\n    flex: 1 1 auto;\n  }\n\n  /* The title block: the header's own heading, the Leading axis and the badge; renders before the top-bar slot. */\n  .title-area {\n    display: flex;\n    /* Top-aligned, not centred: the leading element belongs to the title's row, not the title-plus-description stack. */\n    align-items: flex-start;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    min-width: 0;\n  }\n\n  /* The leading line box: exactly the page title's line height, centring whatever leading control sits in it. */\n  .leading {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    min-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n  }\n\n  .title-stack {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n    min-width: 0;\n  }\n\n  .title-row {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    min-width: 0;\n  }\n\n  .page-title {\n    margin: 0;\n    min-width: 0;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .description {\n    margin: 0;\n    min-width: 0;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* The badge sits on the title row and never shrinks the title away; each surface token pairs a Nile name with its NxtGen equivalent. */\n  .badge {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    padding-inline: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-block: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(\n        --nile-colors-neutral-400,\n        var(--ng-componentcolors-utility-gray-200)\n      );\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    background: var(\n      --nile-colors-neutral-100,\n      var(--ng-componentcolors-utility-gray-50)\n    );\n    color: var(\n      --nile-colors-dark-500,\n      var(--ng-componentcolors-utility-gray-700)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    white-space: nowrap;\n  }\n\n  /* Leading=Back: drawn as a breadcrumb label; the shell owns no history, so pressing it only emits nile-header-back. */\n  .back {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    margin: 0;\n    padding: 0;\n    border: 0;\n    background: none;\n    cursor: pointer;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .back:hover {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .crumb-divider {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n  }\n\n  /* Leading=AppIcon: a 20px block before the title; the page slots the mark, the shell owns the box, surface and radius. */\n  .app-icon {\n    position: relative;\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-app-shell-app-icon-size);\n    height: var(--nile-app-shell-app-icon-size);\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n    overflow: hidden;\n  }\n\n  /* The slotted mark fills the wrapper edge to edge, clipped to the box. */\n  .app-icon slot::slotted(*) {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n  }\n\n  /* The wrapper takes no fill; the rim is a white-12% gradient drawn as a masked ::before, with literal mask fallbacks for the nxtgen-only tokens. */\n  .app-icon::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n    z-index: 1;\n    background: linear-gradient(\n      180deg,\n      rgb(255 255 255 / 12%) 0%,\n      rgb(255 255 255 / 0%) 100%\n    );\n    mask: var(\n      --ng-mask-rim,\n      linear-gradient(#000 0 0) content-box,\n      linear-gradient(#000 0 0)\n    );\n    mask-composite: var(--ng-mask-composite-exclude, exclude);\n    padding: 1.4px;\n  }\n\n  :host(:not([leading='app-icon'])) .app-icon,\n  :host(:not([leading='back'])) .back,\n  :host(:not([leading='back'])) .crumb-divider {\n    display: none;\n  }\n\n  .top-bar-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    margin-inline-start: auto;\n  }\n\n  /* Hidden when empty, so an empty group's gap does not pull the bar's content short of the padding edge. */\n  :host(:not([has-top-bar-actions]):not([has-ask])) .top-bar-actions {\n    display: none;\n  }\n\n  /* The Ask button: a stock <nile-button variant=\"primary\"> the shell renders itself; the only rule here is its flex behaviour as a top-bar item. */\n  .ask {\n    flex: 0 0 auto;\n  }\n\n  .ask-mark {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .ask-mark nile-glyph {\n    --nile-svg-fill: currentColor;\n    --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n    width: 16px;\n    height: 16px;\n  }\n\n  .nav-toggle-group {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  /* Lands the 20px glyph box, not the 32px utility circle, on the 24px origin: (32 - 20) / 2 = 6. */\n  .nav-toggle {\n    margin-inline-start: -6px;\n  }\n\n  .rule {\n    flex: 0 0 auto;\n    width: var(--nile-border-width-1, var(--ng-border-width-1));\n    height: 24px;\n    background: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-border-secondary)\n    );\n  }\n\n  /* ------------------------------------------------------- utility controls */\n\n  /* The shell's own icon controls (nav toggle, panel back and close): the shared utility-control recipe. */\n  ${utilityControlStyles}\n\n  /* --------------------------------------------------------------- tab strip */\n\n  /* Hoisted out of the scroller so it never scrolls away; sits flush under the top bar and carries the header block's single bottom rule. */\n  .tabs {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: stretch;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    min-width: 0;\n    /* A floor, not a fixed box: the strip is as tall as the row it holds plus its rule. */\n    min-height: var(--nile-app-shell-tabs-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n    /* The strip carries the rule for the whole header block. */\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  /* The header tab's 0/4/12/4 padding composes the 32px row; the 12px bottom gives the active indicator its band, set via the group's public padding hook. */\n  ::slotted([slot='tabs']) {\n    --nile-nav-tab-padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-xs, var(--ng-spacing-xs))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tabs::-webkit-scrollbar {\n    display: none;\n  }\n\n  :host(:not([has-tabs])) .tabs,\n  :host([notabs]) .tabs {\n    display: none;\n  }\n\n  /* A slotted nile-nav-tab-group drops its own track (--track-width:0 on the host) and is bottom-aligned so its indicator sits on the region's single rule. */\n  /* Scoped to the group, not the slot, so bare tab controls are not stretched to an equal share of the strip. */\n  ::slotted(nile-nav-tab-group[slot='tabs']) {\n    --track-width: 0px;\n    flex: 1 1 auto;\n    min-width: 0;\n    align-self: flex-end;\n  }\n\n  /* ------------------------------------------------------------------- main */\n\n  .main {\n    box-sizing: border-box;\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    /* Top and sides only: the page runs to the container's bottom edge. */\n    padding: var(--nile-app-shell-content-padding);\n    padding-block-end: 0;\n  }\n\n  .main:focus {\n    outline: none;\n  }\n\n  :host([no-padding]) .main {\n    padding: 0;\n  }\n\n  .main-inner {\n    width: 100%;\n    min-height: 0;\n  }\n\n  /* Centred when short, scrolls from the top when tall. */\n  :host([content-align='centered']) .main-inner {\n    /* width:100% + max-width leaves space for the auto margins to centre it while short, and scroll from the top when tall. */\n    width: 100%;\n    max-width: var(--nile-app-shell-centered-width);\n    margin: auto;\n  }\n\n  /* ------------------------------------------------------------------ aside */\n\n  .aside {\n    box-sizing: border-box;\n    /* Gives before the page does, down to its own floor. */\n    flex: 0 1 var(--nile-app-shell-aside-width);\n    min-width: var(--nile-app-shell-aside-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-app-shell-content-padding);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-app-shell-radius);\n  }\n\n  :host(:not([has-aside])) .aside {\n    display: none;\n  }\n\n  /* -------------------------------------------------------------- AI panel */\n\n  .panel {\n    box-sizing: border-box;\n    /* The panel pushes the page rather than covering it: full width while the row affords it, shrinking to a real min-width floor. */\n    flex: 0 1 var(--nile-app-shell-panel-width);\n    width: var(--nile-app-shell-panel-width);\n    min-width: var(--nile-app-shell-panel-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    /* The panel is elevated, so its edge sits a rung above the container's. */\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n  }\n\n  /* Docked: a flex sibling. It squeezes the content, it does not cover it. */\n  :host(:not([panel-open])) .panel {\n    display: none;\n  }\n\n  /* Overlay: contained to the content column, above it, and animated in. */\n  :host([panel-mode='overlay']) .panel {\n    position: absolute;\n    z-index: 1001;\n    inset-block: var(--nile-app-shell-gutter);\n    inset-inline-end: var(--nile-app-shell-gutter);\n    flex: none;\n    display: flex;\n    width: min(var(--nile-app-shell-panel-width), 92%);\n    visibility: hidden;\n    transform: translateX(calc(100% + var(--nile-app-shell-gutter)));\n    transition: transform var(--nile-app-shell-duration)\n        var(--nile-app-shell-ease),\n      visibility 0s linear var(--nile-app-shell-duration);\n  }\n\n  :host([panel-mode='overlay'][panel-open]) .panel {\n    visibility: visible;\n    transform: none;\n    transition: transform var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  /* An unavailable panel is unmounted in either mode. */\n  :host(:not([has-panel])) .panel {\n    display: none;\n  }\n\n  .panel-header {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    height: var(--nile-app-shell-panel-header-height);\n    padding-inline: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  /* The back control for a panel sub-view; stands where the brand mark does in the root view. */\n  .panel-back {\n    flex: 0 0 auto;\n    margin-inline-start: -6px;\n  }\n\n  /* Mirrors the back control's offset on the end edge: the 20px glyph, not the 32px circle, lands on the padding line. */\n  .panel-close {\n    margin-inline-end: -6px;\n  }\n\n  :host([panelback]) .panel-mark {\n    display: none;\n  }\n\n  .panel-heading {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    min-width: 0;\n  }\n\n  .panel-mark {\n    display: inline-flex;\n    color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-fg-brand-primary-600)\n    );\n  }\n\n  .panel-mark nile-glyph {\n    --nile-svg-fill: currentColor;\n    --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n    width: 20px;\n    height: 20px;\n  }\n\n  .panel-title {\n    margin: 0;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .panel-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    margin-inline-start: auto;\n  }\n\n  .panel-body {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n    /* 16 under the header, 24 on the sides and bottom. */\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .panel-footer {\n    flex: 0 0 auto;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  :host(:not([has-panel-footer])) .panel-footer {\n    display: none;\n  }\n\n  /* ---------------------------------------------------------- skip link */\n\n  .skip-link {\n    position: absolute;\n    z-index: 1002;\n    inset-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    inset-block-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    display: inline-flex;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n    cursor: pointer;\n    transform: translateY(-200%);\n    transition: transform\n      var(--nile-transition-duration-short, var(--ng-transition-duration-fast))\n      var(--nile-app-shell-ease);\n  }\n\n  .skip-link:focus-visible {\n    outline: none;\n    transform: none;\n    box-shadow: 0 0 0 2px\n        var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary)),\n      0 0 0 4px\n        var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n  }\n\n  :host([no-skip-link]) .skip-link {\n    display: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host,\n    .panel,\n    .skip-link {\n      transition: none;\n    }\n  }\n`;\n\nexport default [styles];\n"]}