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

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

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

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

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--nav-gap, var(--nav-gap-default));
    padding: var(--nav-py, var(--nav-py-default)) var(--nav-px, var(--nav-px-default));
    background: var(--nav-bg, var(--nav-bg-default));
    font-size: var(--nav-font-size, var(--nav-font-size-default));
    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, var(--nav-width-default));
    transition: width var(--nav-duration, var(--nav-duration-default)) var(--nav-easing, var(--nav-easing-default));
  }

  :scope:not([variant="section"])[collapsed] {
    width: var(--nav-width-collapsed, var(--nav-width-collapsed-default));
    --nav-px-default: 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-default: 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-py-default)) var(--nav-label-px, var(--nav-label-px-default));
    font-size: var(--nav-label-font-size, var(--nav-label-font-size-default));
    font-weight: var(--nav-label-weight, var(--nav-label-weight-default));
    color: var(--nav-label-fg, var(--nav-label-fg-default));
    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, var(--nav-divider-bg-default));
    margin: var(--nav-divider-my, var(--nav-divider-my-default)) 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, var(--nav-divider-bg-default));
    margin-top: var(--nav-divider-my, var(--nav-divider-my-default));
    padding-top: var(--nav-divider-my, var(--nav-divider-my-default));
  }

  /* 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-default: 0;
    --nav-py-default: 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-py-default)) var(--nav-label-px, var(--nav-label-px-default));
    font-size: var(--nav-label-font-size, var(--nav-label-font-size-default));
    font-weight: var(--nav-label-weight, var(--nav-label-weight-default));
    color: var(--nav-label-fg, var(--nav-label-fg-default));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
  }
}
