/* ═══════════════════════════════════════════
   nav-ui — Consolidated navigation rail
   Variants: primary (default, app sidebar) / section (subnav rail)
   ═══════════════════════════════════════════ */

@scope (nav-ui) {
  :where(:scope) {
    /* Shared */
    --nav-gap:       var(--a-space-1);
    --nav-px:        var(--a-space-2);
    --nav-py:        var(--a-space-2);
    --nav-font-size: var(--a-ui-size);
    --nav-bg:        transparent;
    --nav-divider-bg: var(--a-border-subtle);
    --nav-divider-my: var(--a-space-1);

    /* Primary-variant collapse */
    --nav-width:           auto;
    --nav-width-collapsed: 48px;
    --nav-duration: var(--a-duration);  /* §230-bundle (v0.5.9): canonical mid-tier duration (250ms). Was orphaned --a-duration-base. */
    --nav-easing:   var(--a-easing, ease);

    /* Group-heading kicker */
    --nav-label-fg:        var(--a-fg-muted);
    --nav-label-font-size: var(--a-kicker-sm);
    --nav-label-weight:    var(--a-weight-medium);
    --nav-label-px:        var(--a-space-2);
    --nav-label-py:        var(--a-space-3) var(--a-space-1);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--nav-gap);
    padding: var(--nav-py) var(--nav-px);
    background: var(--nav-bg);
    font-size: var(--nav-font-size);
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  :scope::-webkit-scrollbar { display: none; }

  /* ── Primary variant (default) ── */

  :scope:not([variant="section"]) {
    width: var(--nav-width);
    transition: width var(--nav-duration) var(--nav-easing);
  }

  :scope:not([variant="section"])[collapsed] {
    width: var(--nav-width-collapsed);
    --nav-px: var(--a-space-1);
  }

  /* Container-query collapse — when nav lives in a sidebar that goes
     narrow, behave as if [collapsed] regardless of attribute. */
  @container sidebar (max-width: 96px) {
    :scope:not([variant="section"]) {
      --nav-px: var(--a-space-1);
    }
  }

  /* Group label kicker (group header text inside nav-group) */
  [data-nav-label] {
    display: block;
    padding: var(--nav-label-py) var(--nav-label-px);
    font-size: var(--nav-label-font-size);
    font-weight: var(--nav-label-weight);
    color: var(--nav-label-fg);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Hand-placed dividers */
  [data-nav-divider] {
    border: none;
    height: 1px;
    background: var(--nav-divider-bg);
    margin: var(--nav-divider-my) 0;
  }

  /* Auto-dividers between groups when [divider] set */
  :scope[divider] > nav-group-ui + nav-group-ui,
  :scope[divider] > nav-item-ui + nav-group-ui,
  :scope[divider] > nav-group-ui + nav-item-ui {
    border-top: 1px solid var(--nav-divider-bg);
    margin-top: var(--nav-divider-my);
    padding-top: var(--nav-divider-my);
  }

  /* Spacer — pushes items below to bottom */
  [data-nav-spacer] { flex: 1; }

  /* Collapsed (primary): hide labels + dividers */
  :scope:not([variant="section"])[collapsed] [data-nav-label],
  :scope:not([variant="section"])[collapsed] [data-nav-divider] {
    display: none;
  }

  @container sidebar (max-width: 96px) {
    :scope:not([variant="section"]) [data-nav-label],
    :scope:not([variant="section"]) [data-nav-divider] {
      display: none;
    }
  }

  /* ── Section variant ── */

  :scope[variant="section"] {
    --nav-px: 0;
    --nav-py: 0;
  }

  /* Heading rendered from [heading] attribute on section variant. */
  :scope[variant="section"][heading]:not([heading=""])::before {
    content: attr(heading);
    display: block;
    padding: var(--nav-label-py) var(--nav-label-px);
    font-size: var(--nav-label-font-size);
    font-weight: var(--nav-label-weight);
    color: var(--nav-label-fg);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
  }
}
