@scope (nav-group-ui) {
  :where(:scope) {
    --nav-group-row-height:    var(--a-size);
    --nav-group-row-height-sm: var(--a-size-sm);
    --nav-group-row-height-lg: var(--a-size-lg);
    --nav-group-row-px:        var(--a-ui-px);
    --nav-group-row-gap:       var(--a-space-1);
    --nav-group-row-radius:    var(--a-radius-md);
    --nav-group-font-size:     var(--a-ui-size);
    --nav-group-font-size-sm:  var(--a-ui-sm);
    --nav-group-font-size-lg:  var(--a-ui-lg);
    --nav-group-font-weight:   var(--a-weight-normal);
    --nav-group-fg:            var(--a-fg);
    --nav-group-fg-hover:      var(--a-fg-strong);
    --nav-group-fg-muted:      var(--a-fg-muted);
    --nav-group-fg-selected:   var(--a-fg-strong);
    --nav-group-bg-hover:      var(--a-bg-muted);
    --nav-group-icon-size:     calc(var(--nav-group-row-height) - var(--a-space-2));
    --nav-group-badge-size:    var(--a-ui-sm);

    --nav-item-child-height:    var(--a-size-sm);
    --nav-item-child-font:      var(--nav-group-font-size);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Fallback to --nav-gap (cascaded from the ancestor nav-ui
       where it's defined) so child nav-items get the spec spacing even
       when the override token --nav-gap isn't explicitly set. Without
       the fallback `var(--nav-gap)` resolved to empty → invalid gap →
       items packed at 0 px stride. Reported 2026-05-25; latent since
       Apr-20 snapshot. */
    gap: var(--nav-gap, var(--a-space-1));
    position: relative;
    font-weight: var(--nav-group-text-weight);
  }

  /* Continuous indent rail */
  :scope[open]::after {
    content: '';
    position: absolute;
    left: calc(var(--nav-group-row-px) + var(--nav-group-icon-size) / 2);
    transform: translateX(-50%);
    top: var(--nav-group-row-height);
    bottom: calc(var(--nav-group-row-height) / 2);
    width: 1px;
    background: var(--nav-group-indent-rail-bg);
    pointer-events: none;
  }
  :scope[open] > [slot="header"],
 :scope[open] > [slot="header"] [slot="icon"] {
    color: var(--nav-group-fg-selected);
  }

  /* Header row */
  [slot="header"] {
    display: flex;
    align-items: center;
    gap: var(--nav-group-row-gap);
    height: var(--nav-group-row-height);
    padding: 0 var(--nav-group-row-px);
    border-radius: var(--nav-group-row-radius);
    font-size: var(--nav-group-font-size);
    color: var(--nav-group-fg);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition:
      background var(--nav-duration-fast) var(--nav-easing),
      color var(--nav-duration-fast) var(--nav-easing);
    outline: none;
  }

  [slot="header"]:hover {
    background: var(--nav-group-bg-hover);
    color: var(--nav-group-fg-hover);
  }

  [slot="header"]:hover [slot="icon"] {
    color: var(--nav-group-fg-hover);
  }

  [slot="header"]:focus-visible {
    background: var(--nav-group-bg-hover);
    color: var(--nav-group-fg-hover);
    outline: none;
  }

  [slot="header"] [slot="icon"] {
    width: var(--nav-group-icon-size);
    height: var(--nav-group-icon-size);
    flex-shrink: 0;
    color: var(--nav-group-fg-muted);
    transition: color var(--nav-duration-fast) var(--nav-easing);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [slot="header"] [slot="icon"] icon-ui {
    --a-icon-size: calc(var(--nav-group-icon-font-size) + 2px);
  }

  [slot="header"] [slot="text"] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--nav-group-text-weight);
  }

  [slot="header"] [slot="badge"] {
    font-size: var(--nav-group-badge-size);
    color: var(--nav-group-fg-muted);
    background: var(--nav-group-badge-bg);
    padding: 1px var(--nav-group-badge-px);
    border-radius: var(--nav-group-badge-radius);
    line-height: 1.4;
  }

  [slot="header"] [slot="caret"] {
    /*--a-icon-size: 0.5rem;*/
    color: var(--nav-group-fg-muted);
    transition:
      transform var(--nav-duration-fast) var(--nav-easing),
      color var(--nav-duration-fast) var(--nav-easing);
    transform: rotate(90deg);
    flex-shrink: 0;

    --a-icon-size: var(--a-caret-size);
  }

  [slot="header"]:hover [slot="caret"] {
    color: var(--nav-group-fg-hover);
  }

  :scope:not([open]) > [slot="header"] [slot="caret"] {
    transform: rotate(0deg);
  }

  /* Children — hidden when collapsed */
  :scope:not([open]) > nav-item-ui {
    display: none;
  }

  /* Child items default to sm for visual hierarchy */
  :scope > nav-item-ui:not([size]) {
    height: var(--nav-item-child-height);
    font-size: var(--nav-item-child-font);
  }

  /* ── Collapsed nav: hide text, badge, caret ── */
  nav-ui[collapsed] & [slot="text"],
  nav-ui[collapsed] & [slot="badge"],
  nav-ui[collapsed] & [slot="caret"] {
    display: none;
  }

  nav-ui[collapsed] & [slot="header"] {
    justify-content: center;
    padding: 0;
  }

  nav-ui[collapsed] & {
    align-self: stretch;
  }

  nav-ui[collapsed] &::after {
    display: none;
  }

  @container sidebar (max-width: 96px) {
    [slot="text"], [slot="badge"], [slot="caret"] {
      display: none !important;
    }
    nav-item-ui {
      display: none !important;
    }
    [slot="header"] {
      justify-content: center;
      padding: 0;
    }
    [slot="icon"] icon-ui {
      --a-icon-size: --a-icon-size;
    }
    [slot="caret"] icon-ui {
      --a-icon-size: --a-caret-size;
    }
    :scope {
      align-self: stretch;
    }
    :scope::after {
      display: none;
    }
  }

  /* ── Size variants ── */
  :scope[size="sm"] {
    --nav-group-row-height: var(--nav-group-row-height-sm);
    --nav-group-font-size:  var(--nav-group-font-size-sm);
  }

  :scope[size="lg"] {
    --nav-group-row-height: var(--nav-group-row-height-lg);
    --nav-group-font-size:  var(--nav-group-font-size-lg);
  }
}

/* Nav-group popover (outside @scope — lives in top layer)
   Popovers are promoted to the top layer and cannot inherit
   pattern-level custom properties, so raw --a-* tokens are
   used intentionally here. */
nav-group-ui [slot="popover"] {
  margin: 0;
  padding: var(--a-space-1);
  border: 1px solid var(--a-border-subtle);
  border-radius: var(--a-radius);
  background: var(--a-bg-subtle);
  box-shadow: var(--a-shadow-lg);
  min-width: 160px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  font-size: var(--a-ui-size);
}

nav-group-ui [slot="popover-label"] {
  padding: var(--a-space-1) var(--a-space-2);
  font-weight: var(--a-weight-medium);
  color: var(--nav-group-fg-muted);
  font-size: var(--a-ui-tiny);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

nav-group-ui [slot="popover"] [role="option"] {
  padding: var(--a-space-1) var(--a-space-2);
  border-radius: var(--a-radius);
  color: var(--nav-group-fg-muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--a-duration-fast) var(--a-easing),
    color var(--a-duration-fast) var(--a-easing);
}

nav-group-ui [slot="popover"] [role="option"]:hover {
  background: var(--nav-group-bg-hover);
  color: var(--nav-group-fg-hover);
}

/* Selected / current option — mirrors the main rail's nav-item selection:
   muted fill + leading 2px accent bar. */
nav-group-ui [slot="popover"] [role="option"][aria-current="page"],
nav-group-ui [slot="popover"] [role="option"][aria-selected="true"] {
  position: relative;
  background: var(--nav-group-bg-hover);
  color: var(--nav-group-fg-selected);
  font-weight: var(--a-weight-medium);
}

nav-group-ui [slot="popover"] [role="option"][aria-current="page"]::before,
nav-group-ui [slot="popover"] [role="option"][aria-selected="true"]::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--a-space-2) * -0.5);
  inset-block: 25%;
  width: 2px;
  border-radius: 1px;
  background: var(--a-accent);
}

/* ── Section variant — groups render as kicker labels ──
   Primary variant defaults to collapsible:true (caret-toggleable).
   Section variant flips to collapsible:false-shape — header is a
   static kicker label, children always visible — so subnav rails
   show their full structure without requiring an explicit [open]
   toggle.

   Two ways to enable: either
     (a) `<nav-group-ui variant="section">` directly, or
     (b) `<nav-ui variant="section"> > nav-group-ui`  (cascade from parent).
   Both selectors apply the same kicker styles. */

nav-group-ui[variant="section"] > [slot="header"],
nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"] {
  height: auto;
  padding: var(--a-space-3) var(--a-space-2) var(--a-space-1);
  font-size: var(--a-kicker-sm, var(--a-ui-tiny));
  font-weight: var(--a-weight-medium);
  color: var(--nav-group-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: default;
  border-radius: 0;
}

nav-group-ui[variant="section"] > [slot="header"]:hover,
nav-group-ui[variant="section"] > [slot="header"]:focus-visible,
nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"]:hover,
nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"]:focus-visible {
  background: transparent;
  color: var(--nav-group-fg-muted);
}

nav-group-ui[variant="section"] > [slot="header"] [slot="caret"],
nav-group-ui[variant="section"] > [slot="header"] [slot="icon"]:empty,
nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"] [slot="caret"],
nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"] [slot="icon"]:empty {
  display: none;
}

/* Children always visible in section variant (override the
   :scope:not([open]) > nav-item-ui hide rule from inside @scope). */
nav-group-ui[variant="section"]:not([open]) > nav-item-ui,
nav-ui[variant="section"] > nav-group-ui:not([variant]):not([open]) > nav-item-ui {
  display: flex;
}

/* No indent rail in section variant — kicker layout doesn't carry it. */
nav-group-ui[variant="section"]::after,
nav-ui[variant="section"] > nav-group-ui:not([variant])::after {
  display: none;
}
