/*!
 * brandkit.abl.css — Layer 2 brand kit: Acuity Brands Lighting
 * Beam Design System — Acuity Experience Design (AXD)
 * version 0.1.0 · generated 2026-11-06T09:38:51.955Z · source sha256:8dcb01076f81
 * GENERATED FILE — do not edit. Source of truth: tokens/beam.tokens.json
 * requires beam.css · applies to :root when no [data-brand] is set, and to [data-brand="abl"] · gray=Slate accent=ABL density=Comfortable typeface=Inter shape=Smooth depth=Soft
 */
@layer beam.tokens, beam.kit, beam.foundations, beam.compositions, beam.utilities, beam.blocks;
@layer beam.kit {
  /* Selection — the six modes this kit uses, copied from core so the kit resolves on its own.
     Each mode block steps aside when its data-* attribute is set on the same element, so an explicit
     data-density / data-gray / … override still wins (beam.kit is a later layer than beam.tokens). */
  /* gray = Slate */
  :root:not([data-brand]):not([data-gray]), [data-brand="abl"]:not([data-gray]) {
    --beam-neutral-1: var(--beam-slate-1);
    --beam-neutral-2: var(--beam-slate-2);
    --beam-neutral-3: var(--beam-slate-3);
    --beam-neutral-4: var(--beam-slate-4);
    --beam-neutral-5: var(--beam-slate-5);
    --beam-neutral-6: var(--beam-slate-6);
    --beam-neutral-7: var(--beam-slate-7);
    --beam-neutral-8: var(--beam-slate-8);
    --beam-neutral-9: var(--beam-slate-9);
    --beam-neutral-10: var(--beam-slate-10);
    --beam-neutral-11: var(--beam-slate-11);
    --beam-neutral-12: var(--beam-slate-12);
    --beam-neutral-alpha-a1: var(--beam-slate-alpha-a1);
    --beam-neutral-alpha-a2: var(--beam-slate-alpha-a2);
    --beam-neutral-alpha-a3: var(--beam-slate-alpha-a3);
    --beam-neutral-alpha-a4: var(--beam-slate-alpha-a4);
    --beam-neutral-alpha-a5: var(--beam-slate-alpha-a5);
    --beam-neutral-alpha-a6: var(--beam-slate-alpha-a6);
    --beam-neutral-alpha-a7: var(--beam-slate-alpha-a7);
    --beam-neutral-alpha-a8: var(--beam-slate-alpha-a8);
    --beam-neutral-alpha-a9: var(--beam-slate-alpha-a9);
    --beam-neutral-alpha-a10: var(--beam-slate-alpha-a10);
    --beam-neutral-alpha-a11: var(--beam-slate-alpha-a11);
    --beam-neutral-alpha-a12: var(--beam-slate-alpha-a12);
    --beam-neutral-dark-1: var(--beam-slate-dark-1);
    --beam-neutral-dark-2: var(--beam-slate-dark-2);
    --beam-neutral-dark-3: var(--beam-slate-dark-3);
    --beam-neutral-dark-4: var(--beam-slate-dark-4);
    --beam-neutral-dark-5: var(--beam-slate-dark-5);
    --beam-neutral-dark-6: var(--beam-slate-dark-6);
    --beam-neutral-dark-7: var(--beam-slate-dark-7);
    --beam-neutral-dark-8: var(--beam-slate-dark-8);
    --beam-neutral-dark-9: var(--beam-slate-dark-9);
    --beam-neutral-dark-10: var(--beam-slate-dark-10);
    --beam-neutral-dark-11: var(--beam-slate-dark-11);
    --beam-neutral-dark-12: var(--beam-slate-dark-12);
    --beam-neutral-dark-alpha-a1: var(--beam-slate-dark-alpha-a1);
    --beam-neutral-dark-alpha-a2: var(--beam-slate-dark-alpha-a2);
    --beam-neutral-dark-alpha-a3: var(--beam-slate-dark-alpha-a3);
    --beam-neutral-dark-alpha-a4: var(--beam-slate-dark-alpha-a4);
    --beam-neutral-dark-alpha-a5: var(--beam-slate-dark-alpha-a5);
    --beam-neutral-dark-alpha-a6: var(--beam-slate-dark-alpha-a6);
    --beam-neutral-dark-alpha-a7: var(--beam-slate-dark-alpha-a7);
    --beam-neutral-dark-alpha-a8: var(--beam-slate-dark-alpha-a8);
    --beam-neutral-dark-alpha-a9: var(--beam-slate-dark-alpha-a9);
    --beam-neutral-dark-alpha-a10: var(--beam-slate-dark-alpha-a10);
    --beam-neutral-dark-alpha-a11: var(--beam-slate-dark-alpha-a11);
    --beam-neutral-dark-alpha-a12: var(--beam-slate-dark-alpha-a12);
  }

  /* accent = ABL */
  :root:not([data-brand]):not([data-accent]), [data-brand="abl"]:not([data-accent]) {
    --beam-accent-1: var(--beam-abl-1);
    --beam-accent-2: var(--beam-abl-2);
    --beam-accent-3: var(--beam-abl-3);
    --beam-accent-4: var(--beam-abl-4);
    --beam-accent-5: var(--beam-abl-5);
    --beam-accent-6: var(--beam-abl-6);
    --beam-accent-7: var(--beam-abl-7);
    --beam-accent-8: var(--beam-abl-8);
    --beam-accent-9: var(--beam-abl-9);
    --beam-accent-10: var(--beam-abl-10);
    --beam-accent-11: var(--beam-abl-11);
    --beam-accent-12: var(--beam-abl-12);
    --beam-accent-alpha-a1: var(--beam-abl-alpha-a1);
    --beam-accent-alpha-a2: var(--beam-abl-alpha-a2);
    --beam-accent-alpha-a3: var(--beam-abl-alpha-a3);
    --beam-accent-alpha-a4: var(--beam-abl-alpha-a4);
    --beam-accent-alpha-a5: var(--beam-abl-alpha-a5);
    --beam-accent-alpha-a6: var(--beam-abl-alpha-a6);
    --beam-accent-alpha-a7: var(--beam-abl-alpha-a7);
    --beam-accent-alpha-a8: var(--beam-abl-alpha-a8);
    --beam-accent-alpha-a9: var(--beam-abl-alpha-a9);
    --beam-accent-alpha-a10: var(--beam-abl-alpha-a10);
    --beam-accent-alpha-a11: var(--beam-abl-alpha-a11);
    --beam-accent-alpha-a12: var(--beam-abl-alpha-a12);
    --beam-accent-dark-1: var(--beam-abl-dark-1);
    --beam-accent-dark-2: var(--beam-abl-dark-2);
    --beam-accent-dark-3: var(--beam-abl-dark-3);
    --beam-accent-dark-4: var(--beam-abl-dark-4);
    --beam-accent-dark-5: var(--beam-abl-dark-5);
    --beam-accent-dark-6: var(--beam-abl-dark-6);
    --beam-accent-dark-7: var(--beam-abl-dark-7);
    --beam-accent-dark-8: var(--beam-abl-dark-8);
    --beam-accent-dark-9: var(--beam-abl-dark-9);
    --beam-accent-dark-10: var(--beam-abl-dark-10);
    --beam-accent-dark-11: var(--beam-abl-dark-11);
    --beam-accent-dark-12: var(--beam-abl-dark-12);
    --beam-accent-dark-alpha-a1: var(--beam-abl-dark-alpha-a1);
    --beam-accent-dark-alpha-a2: var(--beam-abl-dark-alpha-a2);
    --beam-accent-dark-alpha-a3: var(--beam-abl-dark-alpha-a3);
    --beam-accent-dark-alpha-a4: var(--beam-abl-dark-alpha-a4);
    --beam-accent-dark-alpha-a5: var(--beam-abl-dark-alpha-a5);
    --beam-accent-dark-alpha-a6: var(--beam-abl-dark-alpha-a6);
    --beam-accent-dark-alpha-a7: var(--beam-abl-dark-alpha-a7);
    --beam-accent-dark-alpha-a8: var(--beam-abl-dark-alpha-a8);
    --beam-accent-dark-alpha-a9: var(--beam-abl-dark-alpha-a9);
    --beam-accent-dark-alpha-a10: var(--beam-abl-dark-alpha-a10);
    --beam-accent-dark-alpha-a11: var(--beam-abl-dark-alpha-a11);
    --beam-accent-dark-alpha-a12: var(--beam-abl-dark-alpha-a12);
    --beam-accent-contrast: #ffffff;
    --beam-accent-text: var(--beam-abl-11);
  }

  /* density = Comfortable */
  :root:not([data-brand]):not([data-density]), [data-brand="abl"]:not([data-density]) {
    --beam-scale-base: 16;
    --beam-scale-ratio: 1.25;
    --beam-ms-0: 16px;
    --beam-ms--1: 13px;
    --beam-ms--2: 10px;
    --beam-ms--3: 8px;
    --beam-ms-1: 20px;
    --beam-ms-2: 25px;
    --beam-ms-3: 31px;
    --beam-ms-4: 39px;
    --beam-ms-5: 49px;
    --beam-ms-6: 61px;
    --beam-ms-7: 76px;
    --beam-ms-8: 95px;
    --beam-spacing-none: 0;
    --beam-spacing-xxs: 2px;
    --beam-spacing-xs: 4px;
    --beam-spacing-sm: 6px;
    --beam-spacing-md: 8px;
    --beam-spacing-lg: 12px;
    --beam-spacing-xl: 16px;
    --beam-spacing-2xl: 20px;
    --beam-spacing-3xl: 24px;
    --beam-spacing-4xl: 32px;
    --beam-spacing-5xl: 40px;
    --beam-spacing-6xl: 48px;
    --beam-spacing-7xl: 64px;
    --beam-spacing-8xl: 80px;
    --beam-spacing-9xl: 96px;
    --beam-spacing-10xl: 128px;
    --beam-spacing-11xl: 160px;
    --beam-container-padding: 24px;
    --beam-stack-xs: var(--beam-spacing-xs);
    --beam-stack-sm: var(--beam-spacing-md);
    --beam-stack-md: var(--beam-spacing-xl);
    --beam-stack-lg: var(--beam-spacing-3xl);
    --beam-stack-xl: var(--beam-spacing-4xl);
    --beam-stack-2xl: var(--beam-spacing-6xl);
    --beam-inline-xs: var(--beam-spacing-xxs);
    --beam-inline-sm: var(--beam-spacing-xs);
    --beam-inline-md: var(--beam-spacing-md);
    --beam-inline-lg: var(--beam-spacing-xl);
    --beam-gutter-sm: var(--beam-spacing-3xl);
    --beam-gutter-md: var(--beam-spacing-4xl);
    --beam-gutter-lg: var(--beam-spacing-6xl);
    --beam-inset-none: var(--beam-spacing-none);
    --beam-inset-xs: var(--beam-spacing-xs);
    --beam-inset-sm: var(--beam-spacing-md);
    --beam-inset-md: var(--beam-spacing-xl);
    --beam-inset-lg: var(--beam-spacing-3xl);
    --beam-inset-xl: var(--beam-spacing-4xl);
    --beam-region-xs: var(--beam-spacing-4xl);
    --beam-region-sm: var(--beam-spacing-6xl);
    --beam-region-md: var(--beam-spacing-7xl);
    --beam-region-lg: var(--beam-spacing-8xl);
    --beam-region-xl: var(--beam-spacing-9xl);
    --beam-threshold: var(--beam-width-xl);
  }

  /* typeface = Inter */
  :root:not([data-brand]):not([data-typeface]), [data-brand="abl"]:not([data-typeface]) {
    --beam-font-family-primary: Inter, sans-serif;
    --beam-font-family-secondary: "Playfair Display", serif;
    --beam-font-family-mono: "JetBrains Mono", monospace;
  }

  /* shape = Smooth */
  :root:not([data-brand]):not([data-shape]), [data-brand="abl"]:not([data-shape]) {
    --beam-radius-none: 0;
    --beam-radius-sharp: 4.5px;
    --beam-radius-crisp: 6px;
    --beam-radius-soft: 9px;
    --beam-radius-pill: 9999px;
    --beam-radius-rounded: 12px;
    --beam-radius-smooth: 18px;
    --beam-radius-plush: 24px;
    --beam-radius-outer-spacing: 20px;
    --beam-radius-outer-sharp: 24.5px;
    --beam-radius-outer-crisp: 26px;
    --beam-radius-outer-soft: 29px;
    --beam-radius-outer-rounded: 32px;
    --beam-radius-outer-smooth: 38px;
    --beam-radius-outer-plush: 44px;
  }

  /* depth = Soft */
  :root:not([data-brand]):not([data-depth]), [data-brand="abl"]:not([data-depth]) {
    --beam-shadow-o1-color: var(--beam-effect-depth-soft);
    --beam-shadow-o2-color: var(--beam-effect-depth-soft);
    --beam-shadow-o3-color: var(--beam-effect-depth-soft);
    --beam-shadow-o4-color: var(--beam-effect-depth-soft);
    --beam-shadow-o5-color: var(--beam-effect-depth-soft);
    --beam-shadow-o6-color: var(--beam-effect-depth-soft);
    --beam-shadow-ring-color: var(--beam-effect-depth-ring);
  }

  /* Overrides — kit-only tokens and re-pointed core tokens */
  :root:not([data-brand]), [data-brand="abl"] {
    --beam-effect-depth-soft: var(--beam-gray-alpha-a2);
    --beam-effect-depth-dramatic: var(--beam-gray-alpha-a3);
    --beam-effect-depth-ring: var(--beam-gray-alpha-a3);
    --beam-brand-logo: url("/beam/brand/acuity-inc/acuity-inc-logo.svg");
    --beam-brand-symbol: url("/beam/brand/acuity-inc/acuity-symbol.svg");
  }

}

@layer beam.blocks {
  /* ABL brand blocks — built into brandkit.abl.css inside @layer beam.blocks (kits/abl.kit.json → "blocks").
     The ABL app shells (Figma: Beam › App shells). Contract: --beam-* tokens only; the generator validates every reference.
     Markup: CUBE brackets — class="[ b-shell-contained ]".
     Collapse: no JavaScript. A visually hidden checkbox (.b-shell-toggle, first child of the shell) holds the state and
     the collapse button is its <label>; products that own the state can set data-collapsed instead.
     Motion: CSS transitions on --beam-duration-* / --beam-ease-* (the Reduced motion mode shortens them). The width
     animates where the browser supports interpolate-size (Chromium); elsewhere it switches instantly. */

  /* ── ABL app shells (Figma: Beam › App shells) ────────────────────────────────────────────
   Contained is drawn at Compact density in Figma (body 14, caption 10, spacing-lg 8); its preview
   starts in Compact. Standalone is drawn at Comfortable sizes (16px body).
   GAPS (no token — flagged, not invented):
   - Contained sidebar is a fixed 300px in Figma → sized to its content, min --beam-width-3xs.
   - Logos are 40px tall in Figma; no size token for 40 → icon-size-5 × 1.25. No reversed (dark) logo file yet.
   - Standalone app-bar rule and current-tab underline are 3px → --beam-border-width-5 (2px), coloured
     background-brand-solid because border-brand resolves to a lighter step than Figma's #007239.
   - AI button gradient has no token → composed from accent-alpha + status-info-alpha steps.
   - Contained panel binds border-radius/2xl (16px), a private foundation radius → --beam-radius-rounded (12px at Smooth).
   - Contained header binds border/radius/smooth; not applied (it sits clipped inside the panel).
   - Contained frame uses the Geist typeface; no Geist font files are shipped yet, so it falls back to the system sans.
   - Icons: Font Awesome Free; Figma uses Pro Light/Duotone (thinner strokes, two-tone). */
  [data-shell] ul, [data-shell] ol { list-style: none; margin: 0; padding: 0; }
  :where([data-shell]) i[class*="fa-"] { font-size: var(--beam-icon-size-1); line-height: 1; }
  :where([data-shell]) button { font: inherit; }

  /* Logo slots read the kit's assets: --beam-brand-logo (full logo, 76×40) and --beam-brand-symbol (63×67).
     Logos don't scale with density: 40px = icon-size-5 × 1.25. Full colour in light; in dark there is no
     reversed artwork yet, so the logo is drawn single-colour in text-neutral-primary via a mask. */
  .b-brand-logo {
    display: inline-grid; place-items: center; flex: none; block-size: calc(var(--beam-icon-size-5) * 1.25); aspect-ratio: 76 / 40;
    border: var(--beam-border-width-2) dashed var(--beam-border-neutral-primary); border-radius: var(--beam-radius-crisp);
    color: var(--beam-text-neutral-tertiary); font: var(--beam-type-caption);
    --logo: var(--beam-brand-logo);
  }
  .b-brand-logo[data-mark] { aspect-ratio: 63 / 67; --logo: var(--beam-brand-symbol); }
  .b-brand-logo::after { content: "Logo"; }
  [data-has-logo] .b-brand-logo { border: 0; border-radius: 0; background: var(--logo) left center / contain no-repeat; }
  [data-has-logo] .b-brand-logo::after { content: none; }
  [data-has-logo][data-theme="dark"] .b-brand-logo {
    background: var(--beam-text-neutral-primary);
    -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat;
  }
  @media (prefers-color-scheme: dark) {
    [data-has-logo]:not([data-theme="light"]) .b-brand-logo {
      background: var(--beam-text-neutral-primary);
      -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat;
    }
  }

  /* Shared header pieces */
  .b-shell-icon-box { display: inline-grid; place-items: center; flex: none; inline-size: var(--beam-icon-size-3); block-size: var(--beam-icon-size-3); padding: 0; border: 0; background: none; color: var(--beam-text-neutral-primary); cursor: pointer; }
  .b-shell-global { display: flex; align-items: center; justify-content: flex-end; gap: var(--beam-spacing-lg); }
  .b-shell-menu-item { display: inline-flex; align-items: center; gap: var(--beam-spacing-xs); color: var(--beam-text-neutral-primary); text-decoration: none; font: var(--beam-type-body-sm); }
  .b-shell-badge { display: inline-flex; align-items: center; gap: calc(var(--beam-icon-size-1) * 0.375); padding: var(--beam-spacing-xxs) calc(var(--beam-icon-size-1) / 2); border-radius: var(--beam-radius-pill); font: var(--beam-type-caption); letter-spacing: var(--beam-tracking-wide); }
  .b-shell-badge[data-dot] { padding-inline-start: calc(var(--beam-icon-size-1) * 0.375); }
  .b-shell-badge[data-dot]::before { content: ""; inline-size: calc(var(--beam-icon-size-1) / 2); block-size: calc(var(--beam-icon-size-1) / 2); border-radius: var(--beam-radius-pill); background: var(--beam-fg-error-primary); }
  .b-shell-badge[data-tone="violet"] { background: var(--beam-decorative-violet-bg); color: var(--beam-decorative-violet-text); }
  .b-shell-badge[data-tone="error"] { background: var(--beam-background-error-primary); color: var(--beam-text-error); }
  .b-shell-badge[data-tone="brand"] { background: var(--beam-background-brand-primary); color: var(--beam-text-brand); font: var(--beam-type-body-sm); }
  .b-shell-user { display: inline-flex; align-items: center; gap: var(--beam-spacing-xs); padding: 0; border: 0; background: none; color: var(--beam-text-neutral-primary); font: var(--beam-type-body-sm); cursor: pointer; }
  .b-shell-avatar { display: inline-grid; place-items: center; inline-size: var(--beam-icon-size-3); block-size: var(--beam-icon-size-3); border-radius: var(--beam-radius-pill); background: var(--beam-background-brand-solid); color: var(--beam-text-on-accent); font: var(--beam-type-body-sm); }
  .b-shell-chevron i[class*="fa-"] { font-size: calc(var(--beam-icon-size-1) * 0.6875); }

  /* ── Contained ─────────────────────────────────────────────────────────── */
  .b-shell-contained {
    --nav-width: auto;
    interpolate-size: allow-keywords;
    background: var(--beam-background-neutral-secondary);
    padding-block: var(--beam-spacing-lg); padding-inline-end: var(--beam-spacing-lg);
    block-size: 100dvh; min-block-size: 0;
  }
  .b-shell-sidebar {
    display: flex; flex-direction: column; gap: var(--beam-spacing-3xl); padding-inline: var(--beam-spacing-4xl); min-block-size: 0; overflow-y: auto; overflow-x: clip;
    inline-size: max-content; min-inline-size: var(--beam-width-3xs);
    transition: inline-size var(--beam-duration-slow-1) var(--beam-ease-standard), min-inline-size var(--beam-duration-slow-1) var(--beam-ease-standard), padding-inline var(--beam-duration-slow-1) var(--beam-ease-standard);
  }
  .b-shell-contained:is([data-collapsed], :has(> .b-shell-toggle:checked)) .b-shell-sidebar { padding-inline: var(--beam-spacing-2xl); inline-size: calc(var(--beam-icon-size-6) + 2 * var(--beam-spacing-2xl)); min-inline-size: 0; }
  .b-shell-brand-row { display: flex; align-items: center; gap: var(--beam-spacing-3xl); }
  .b-shell-brand { flex: 1; display: flex; align-items: center; gap: var(--beam-spacing-xs); }
  .b-shell-subbrand { font: var(--beam-type-h5); font-weight: var(--beam-font-weight-regular); letter-spacing: var(--beam-tracking-tight); text-transform: uppercase; color: var(--beam-text-brand-secondary); border-inline-start: var(--beam-border-width-2) solid var(--beam-text-brand-secondary); padding-inline-start: var(--beam-spacing-xs); white-space: nowrap; line-height: var(--beam-leading-tight); }
  .b-shell-icon-btn { display: inline-grid; place-items: center; flex: none; inline-size: calc(var(--beam-icon-size-4) + var(--beam-spacing-xs)); block-size: calc(var(--beam-icon-size-4) + var(--beam-spacing-xs)); padding: 0; border: 0; background: none; color: var(--beam-text-neutral-primary); cursor: pointer; border-radius: var(--beam-radius-crisp); }
  .b-shell-icon-btn i[class*="fa-"] { font-size: var(--beam-icon-size-2); }
  .b-shell-icon-btn:hover { background: var(--beam-background-neutral-primary_hover); }

  .b-shell-nav { flex: 1; display: flex; flex-direction: column; gap: var(--beam-spacing-lg); }
  .b-shell-nav-group {
    --_item: calc(var(--beam-icon-size-3) + 2 * var(--beam-spacing-md)); /* nav item height (border-box) */
    --_pad: 0;
    position: relative; isolation: isolate; display: flex; flex-direction: column;
  }
  .b-shell-nav-group > li + li { padding-block-start: var(--beam-spacing-md); } /* spacing lives on the item, so there is no un-hovered gap */
  .b-shell-nav-group + .b-shell-nav-group { --_pad: var(--beam-spacing-lg); border-block-start: var(--beam-border-width-2) solid var(--beam-border-neutral-separator); padding-block-start: var(--beam-spacing-lg); }
  .b-shell-nav-item {
    position: relative; display: flex; align-items: center; gap: var(--beam-spacing-md);
    block-size: var(--_item); margin-inline: var(--beam-spacing-xs); padding: var(--beam-spacing-md);
    font: var(--beam-type-body); line-height: var(--beam-leading-normal); color: var(--beam-text-neutral-secondary); text-decoration: none;
    border: var(--beam-border-width-1) solid transparent; border-radius: var(--beam-radius-crisp);
  }
  .b-shell-nav-item > i[class*="fa-"] { inline-size: var(--beam-icon-size-2); text-align: center; color: var(--beam-fg-neutral-secondary); }
  .b-shell-nav-item:is(:hover, :focus-visible) { color: var(--beam-text-neutral-primary); }

  /* Hover indicator — adapted from CSS-Tricks "Creating an Animated Menu Indicator with CSS Selectors":
     one highlight per nav group slides to the hovered (or keyboard-focused) item instead of each item painting its
     own background. :has() + :nth-child() replace the article's last-child host and ~ selectors, so no !important.
     Items in a group share one height (--_item) and gap (spacing-md), so the offset is index × (height + gap).
     Covers groups of up to 10 items. Item spacing is padding on the <li> so the pointer never falls into a gap
     (which would reset the highlight mid-move). On leave it fades out in place and keeps its position.
     Moving between groups fades one highlight out and the next in. */
  .b-shell-nav-group::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset-inline: var(--beam-spacing-xs); inset-block-start: var(--_pad); block-size: var(--_item);
    border-radius: var(--beam-radius-crisp); background: var(--beam-background-neutral-secondary_hover); /* sidebar is background-neutral-secondary */
    opacity: 0; translate: 0 calc(var(--_i, 0) * (var(--_item) + var(--beam-spacing-md)));
    transition: translate var(--beam-duration-base) var(--beam-ease-standard), opacity var(--beam-duration-fast-2) var(--beam-ease-standard);
    transition-delay: 9999s, 0s; /* hold position after the pointer leaves; only the fade runs */
  }
  .b-shell-nav-group:has(> li:hover, > li > .b-shell-nav-item:focus-visible)::before { opacity: 1; transition-delay: 0s, 0s; }
  .b-shell-nav-group:has(> li:nth-child(2):hover, > li:nth-child(2) > .b-shell-nav-item:focus-visible) { --_i: 1; }
  .b-shell-nav-group:has(> li:nth-child(3):hover, > li:nth-child(3) > .b-shell-nav-item:focus-visible) { --_i: 2; }
  .b-shell-nav-group:has(> li:nth-child(4):hover, > li:nth-child(4) > .b-shell-nav-item:focus-visible) { --_i: 3; }
  .b-shell-nav-group:has(> li:nth-child(5):hover, > li:nth-child(5) > .b-shell-nav-item:focus-visible) { --_i: 4; }
  .b-shell-nav-group:has(> li:nth-child(6):hover, > li:nth-child(6) > .b-shell-nav-item:focus-visible) { --_i: 5; }
  .b-shell-nav-group:has(> li:nth-child(7):hover, > li:nth-child(7) > .b-shell-nav-item:focus-visible) { --_i: 6; }
  .b-shell-nav-group:has(> li:nth-child(8):hover, > li:nth-child(8) > .b-shell-nav-item:focus-visible) { --_i: 7; }
  .b-shell-nav-group:has(> li:nth-child(9):hover, > li:nth-child(9) > .b-shell-nav-item:focus-visible) { --_i: 8; }
  .b-shell-nav-group:has(> li:nth-child(10):hover, > li:nth-child(10) > .b-shell-nav-item:focus-visible) { --_i: 9; }
  .b-shell-nav-item[aria-current="page"] { margin-inline: 0; padding-inline: calc(var(--beam-spacing-md) + var(--beam-spacing-xs)); background: var(--beam-surface-default); border-color: var(--beam-border-neutral-separator); box-shadow: var(--beam-depth-low); color: var(--beam-text-brand-secondary); }
  .b-shell-nav-item[aria-current="page"] > i[class*="fa-"] { color: var(--beam-fg-brand-secondary); }
  .b-shell-nav-item[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: calc(-1 * (var(--beam-spacing-xs) + var(--beam-border-width-1))); inset-block: calc(var(--beam-spacing-lg) + var(--beam-spacing-xxs)); inline-size: var(--beam-spacing-sm); border-radius: var(--beam-radius-pill); background: var(--beam-fg-brand-secondary); }

  .b-shell-appearance { position: relative; display: inline-flex; align-self: flex-start; gap: var(--beam-spacing-xs); padding: var(--beam-spacing-xs); background: var(--beam-background-neutral-tertiary); border: var(--beam-border-width-2) solid var(--beam-border-neutral-secondary); border-radius: var(--beam-radius-pill); }
  .b-shell-appearance > button { display: inline-flex; align-items: center; gap: var(--beam-spacing-md); min-block-size: var(--beam-icon-size-3); padding: 0 var(--beam-spacing-lg); border: 0; border-radius: var(--beam-radius-pill); background: transparent; font: var(--beam-type-label-sm); font-weight: var(--beam-font-weight-regular); color: var(--beam-text-neutral-secondary); cursor: pointer; }
  .b-shell-appearance > button > i[class*="fa-"] { color: var(--beam-fg-neutral-secondary); }
  .b-shell-appearance > button[aria-pressed="true"] { background: var(--beam-background-neutral-primary); color: var(--beam-text-neutral-primary); font-weight: var(--beam-font-weight-semibold); }
  .b-shell-sun i[class*="fa-"] { color: var(--beam-decorative-orange-solid); }

  /* Toggle: the checkbox is visually hidden; its focus ring is drawn on the label */
  .b-shell-toggle { position: absolute; inline-size: var(--beam-border-width-2); block-size: var(--beam-border-width-2); margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
  .b-shell-contained:has(> .b-shell-toggle:focus-visible) .b-shell-collapse { outline: var(--beam-border-width-3) solid var(--beam-border-focus-ring); outline-offset: var(--beam-border-width-2); }
  :is(.b-shell-subbrand, .b-shell-label) { display: inline-block; overflow: hidden; white-space: nowrap; transition: opacity var(--beam-duration-fast-2) var(--beam-ease-standard), inline-size var(--beam-duration-slow-1) var(--beam-ease-standard); }
  .b-shell-nav-item, .b-shell-collapse { transition: gap var(--beam-duration-slow-1) var(--beam-ease-standard), inline-size var(--beam-duration-slow-1) var(--beam-ease-standard), background-color var(--beam-duration-fast-1) var(--beam-ease-standard); }

  /* Collapsed: icon rail (Figma Variant2 — 80px rail, 48px items, logo mark over the toggle) */
  .b-shell-contained:is([data-collapsed], :has(> .b-shell-toggle:checked)) .b-shell-brand-row { flex-direction: column; gap: 0; }
  .b-shell-contained:is([data-collapsed], :has(> .b-shell-toggle:checked)) .b-shell-brand .b-brand-logo { aspect-ratio: 63 / 67; --logo: var(--beam-brand-symbol); }
  .b-shell-contained:is([data-collapsed], :has(> .b-shell-toggle:checked)) .b-shell-collapse { inline-size: var(--beam-icon-size-6); }
  .b-shell-contained:is([data-collapsed], :has(> .b-shell-toggle:checked)) :is(.b-shell-subbrand, .b-shell-label) { opacity: 0; inline-size: 0; padding-inline-start: 0; border-inline-start-width: 0; }
  .b-shell-contained:is([data-collapsed], :has(> .b-shell-toggle:checked)) .b-shell-nav-item { justify-content: center; gap: 0; }
  .b-shell-contained:is([data-collapsed], :has(> .b-shell-toggle:checked)) .b-shell-appearance > button { padding-inline: var(--beam-spacing-xs); }

  /* Panel + header */
  .b-shell-panel { display: flex; flex-direction: column; min-block-size: 0; overflow: hidden; background: var(--beam-background-neutral-primary); border: var(--beam-border-width-1) solid var(--beam-border-neutral-tertiary); border-radius: var(--beam-radius-rounded); box-shadow: var(--beam-depth-high-around); }
  .b-shell-header { display: flex; align-items: center; gap: var(--beam-spacing-lg); padding: var(--beam-spacing-xl) var(--beam-spacing-3xl); background: var(--beam-surface-default); border-block-end: var(--beam-border-width-2) solid var(--beam-border-neutral-secondary); }
  .b-shell-header > * { flex: 1 1 0; min-inline-size: 0; }
  .b-shell-header-title { display: flex; align-items: center; gap: var(--beam-spacing-lg); }
  .b-shell-header-title h1 { font-weight: var(--beam-font-weight-bold); white-space: nowrap; }
  .b-shell-title-icon { display: inline-grid; place-items: center; flex: none; inline-size: var(--beam-icon-size-5); block-size: var(--beam-icon-size-5); background: var(--beam-surface-default); border: var(--beam-border-width-1) solid var(--beam-border-neutral-separator); border-radius: var(--beam-radius-crisp); box-shadow: var(--beam-depth-low); color: var(--beam-fg-brand-secondary); }
  .b-shell-title-icon i[class*="fa-"] { font-size: var(--beam-icon-size-2); }
  .b-shell-search { display: flex; align-items: center; gap: 0; padding: var(--beam-spacing-sm); background: var(--beam-background-neutral-quaternary); border-radius: var(--beam-radius-crisp); }
  .b-shell-search > input { flex: 1; min-inline-size: 0; border: 0; background: transparent; font: var(--beam-type-body-sm); color: var(--beam-text-neutral-primary); }
  .b-shell-search > input::placeholder { color: var(--beam-text-neutral-placeholder); }
  .b-shell-search > input:focus-visible { box-shadow: none; }
  .b-shell-search:focus-within { box-shadow: var(--beam-ring-brand); }
  .b-shell-search-tools { display: flex; align-items: center; gap: var(--beam-spacing-md); }
  .b-shell-kbd { display: inline-flex; align-items: center; gap: var(--beam-spacing-md); block-size: calc(var(--beam-icon-size-4)); padding: var(--beam-spacing-sm) var(--beam-spacing-lg); font: var(--beam-type-body-sm); font-family: inherit; color: var(--beam-text-neutral-primary); background: var(--beam-surface-primary); border: var(--beam-border-width-2) solid var(--beam-border-neutral-primary); border-radius: var(--beam-radius-crisp); box-shadow: var(--beam-depth-low); }
  .b-shell-ai { display: inline-grid; place-items: center; inline-size: calc(var(--beam-icon-size-3) + var(--beam-spacing-sm)); block-size: calc(var(--beam-icon-size-3) + var(--beam-spacing-sm)); padding: 0; border: 0; border-radius: var(--beam-radius-crisp); color: var(--beam-text-white); cursor: pointer; box-shadow: var(--beam-depth-low);
    background: linear-gradient(-57deg, transparent 10%, var(--beam-accent-alpha-a11) 82%), var(--beam-status-info-alpha-a6); }
  .b-shell-header-end { display: flex; align-items: center; justify-content: space-between; gap: var(--beam-spacing-lg); }
  .b-shell-branch { flex: none; display: inline-flex; gap: var(--beam-spacing-xs); padding: var(--beam-spacing-xs) var(--beam-spacing-lg); background: var(--beam-background-neutral-primary); border: var(--beam-border-width-2) solid var(--beam-border-neutral-tertiary); border-radius: var(--beam-radius-pill); font: var(--beam-type-body-sm); color: var(--beam-text-neutral-secondary); white-space: nowrap; }
  .b-shell-branch strong { font-weight: var(--beam-font-weight-semibold); color: var(--beam-text-brand-primary); }
  .b-shell-slot { flex: 1; overflow-y: auto; background: var(--beam-background-neutral-primary); }

  /* ── Standalone ────────────────────────────────────────────────────────── */
  .b-shell-standalone { display: flex; flex-direction: column; min-block-size: 100dvh; background: var(--beam-background-neutral-secondary); }
  .b-shell-appbar { display: flex; align-items: center; justify-content: space-between; gap: var(--beam-spacing-lg); padding: var(--beam-spacing-md) var(--beam-spacing-2xl); background: var(--beam-surface-default); border-block-end: var(--beam-border-width-5) solid var(--beam-background-brand-solid); box-shadow: var(--beam-depth-high); position: relative; z-index: var(--beam-z-index-raised); }
  .b-shell-app-logo { display: inline-flex; align-items: center; gap: var(--beam-spacing-md); color: var(--beam-text-neutral-primary); text-decoration: none; }
  .b-shell-app-name { font: var(--beam-type-h5); font-weight: var(--beam-font-weight-bold); letter-spacing: var(--beam-tracking-tight); text-transform: uppercase; line-height: var(--beam-leading-tight); }
  .b-shell-standalone .b-shell-global { gap: var(--beam-spacing-md); }

  .b-shell-subbar { display: grid; grid-template-columns: 1fr minmax(0, var(--beam-width-lg)) 1fr; align-items: center; gap: var(--beam-spacing-3xl); padding-inline: var(--beam-spacing-4xl); background: var(--beam-surface-raised); border-block-end: var(--beam-border-width-2) solid var(--beam-border-neutral-separator); }
  .b-shell-tabs { display: flex; align-items: stretch; gap: var(--beam-spacing-3xl); }
  .b-shell-tabs > a { display: flex; align-items: center; padding-block: var(--beam-spacing-2xl); font: var(--beam-type-body); line-height: var(--beam-leading-tight); color: var(--beam-text-neutral-primary); text-decoration: none; border-block-end: var(--beam-border-width-5) solid transparent; }
  .b-shell-tabs > a[aria-current="page"] { font-weight: var(--beam-font-weight-bold); border-block-end-color: var(--beam-background-brand-solid); }
  .b-shell-product-search { display: flex; gap: var(--beam-spacing-lg); }
  .b-shell-search-input { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--beam-spacing-lg); padding: var(--beam-spacing-md) var(--beam-spacing-lg); background: var(--beam-surface-default); border: var(--beam-border-width-2) solid var(--beam-border-neutral-primary); border-radius: var(--beam-radius-sharp); color: var(--beam-fg-neutral-tertiary); }
  .b-shell-search-input > input { flex: 1; min-inline-size: 0; border: 0; background: transparent; font: var(--beam-type-body); color: var(--beam-text-neutral-primary); }
  .b-shell-search-input > input:focus-visible { box-shadow: none; }
  .b-shell-search-input:focus-within { box-shadow: var(--beam-ring-brand); }
  .b-shell-go { flex: none; padding: 0 var(--beam-spacing-2xl); border: 0; border-radius: var(--beam-radius-crisp); background: var(--beam-background-brand-solid); color: var(--beam-text-on-accent); font: var(--beam-type-body); box-shadow: var(--beam-depth-low); cursor: pointer; }
  .b-shell-go:hover { background: var(--beam-background-brand-solid_hover); }
  .b-shell-subbar-end { display: flex; justify-content: flex-end; gap: var(--beam-spacing-3xl); }
  .b-shell-util { inline-size: calc(var(--beam-icon-size-3) + var(--beam-spacing-xs)); block-size: var(--beam-icon-size-3); background: var(--beam-background-neutral-tertiary); }

  .b-shell-content { flex: 1; padding: var(--beam-spacing-3xl) var(--beam-spacing-4xl) 0; }
  .b-shell-breadcrumb { display: flex; align-items: center; gap: var(--beam-spacing-md); font: var(--beam-type-body-sm); color: var(--beam-text-neutral-tertiary); }
  .b-shell-breadcrumb a { color: var(--beam-text-brand); text-decoration: none; }
  .b-shell-breadcrumb [aria-current] { color: var(--beam-text-neutral-secondary); }
  .b-shell-intro { display: flex; flex-direction: column; gap: var(--beam-spacing-md); padding-block: var(--beam-spacing-2xl) var(--beam-spacing-xl); }
  .b-shell-intro h1 { font: var(--beam-type-h3); font-weight: var(--beam-font-weight-bold); }
  .b-shell-intro p { color: var(--beam-text-neutral-secondary); }
  .b-shell-divider { border-block-start-color: var(--beam-border-neutral-primary); }

  .b-shell-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--beam-spacing-3xl); padding: var(--beam-spacing-xl) var(--beam-spacing-4xl); background: var(--beam-surface-raised); border-block-start: var(--beam-border-width-2) solid var(--beam-border-neutral-primary); font: var(--beam-type-body-sm); color: var(--beam-text-neutral-primary); }
  .b-shell-legal a { color: inherit; text-decoration: none; }
  .b-shell-legal a:hover { text-decoration: underline; }
  .b-shell-legal-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--beam-spacing-2xl); }
  .b-shell-legal-links { display: flex; flex-wrap: wrap; gap: var(--beam-spacing-xl); }
  .b-shell-legal-end { display: flex; align-items: center; gap: var(--beam-spacing-2xl); }
  .b-shell-site-links { display: inline-flex; align-items: center; gap: var(--beam-spacing-sm); font: var(--beam-type-body); }
  .b-shell-legal .b-shell-site-links { color: var(--beam-text-brand); }
  .b-shell-site-links i[class*="fa-"] { font-size: var(--beam-type-body-sm-size, var(--beam-ms--1)); }
  .b-shell-vdivider { inline-size: var(--beam-border-width-2); block-size: calc(var(--beam-icon-size-5) + var(--beam-spacing-sm)); background: var(--beam-border-neutral-separator); }
  .b-shell-social { display: flex; align-items: center; gap: var(--beam-spacing-xl); }

  /* Below the md breakpoint (768px is filled in by the generator). */
  @media (width < 768px) {
    .b-shell-contained { padding: 0; }
    .b-shell-contained > [data-area="nav"] { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: var(--beam-width-3xs); z-index: var(--beam-z-index-overlay); background: var(--beam-background-neutral-secondary); padding-block: var(--beam-spacing-xl); box-shadow: var(--beam-depth-high-end); }
    .b-shell-contained[data-nav-open] > [data-area="nav"] { display: flex; }
    .b-shell-contained .b-shell-panel { border: 0; border-radius: 0; }
    .b-shell-search, .b-shell-branch, .b-shell-user, .b-shell-apps, .b-shell-subbar-end, .b-shell-vdivider { display: none; }
    .b-shell-header > .b-shell-header-end { flex: none; }
    .b-shell-subbar { grid-template-columns: 1fr; gap: 0; padding-inline: var(--beam-container-padding); padding-block-end: var(--beam-spacing-lg); }
    .b-shell-content, .b-shell-legal { padding-inline: var(--beam-container-padding); }
  }
}