/* The grouped left menu (nav.js), on every page. Base .sidenav / .navbtn
   rules stay in shell.css and index.html; this adds groups and the icon strip. */
.navtree { display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.navtree .navbtn { text-align:left; }
.navtree .navbtn .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.navtree .navbtn .n { min-width:22px; padding:0 7px; border-radius:99px; background:var(--line); color:var(--ink2);
  font-size:12px; line-height:21px; text-align:center; font-variant-numeric:tabular-nums; }
.navtree .navbtn .n:empty { display:none; }
.navtree .navbtn.on .n { background:var(--accent); color:var(--accent-ink, #fff); }
.navtree a[data-alert] .n:not(:empty), .navtree .gn { background:var(--warn-bg, var(--line)); color:var(--warn, var(--ink2)); }
.navhide { color:var(--dim); font-weight:500; min-height:36px; margin-bottom:4px; }
.navsep { border-top:1px solid var(--line); margin:10px 4px 6px; }

.grp .ghd .chev { width:8px; height:8px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg); margin:0 4px 3px 2px; opacity:.6; transition:transform .15s ease; flex:none; }
.grp.open .ghd .chev { transform:rotate(-135deg); margin-bottom:-3px; }
.grp.cur > .ghd { color:var(--ink); }
.grp.open .gn { display:none; }
.grp .sub { display:none; flex-direction:column; gap:2px; margin:2px 0 6px; }
.grp.open .sub { display:flex; }
.grp .sub .navbtn { padding-left:40px; min-height:36px; font-weight:500; }
.grp .sub .navbtn .t { white-space:normal; }
.grp .subhd { display:none; }

/* Icon strip (desktop only; on a phone the menu is a drawer). */
@media (min-width:901px) {
  body.nav-mini { --side:68px; }
  body.nav-mini .sidenav { padding-left:10px; padding-right:10px; overflow-x:hidden; }
  body.nav-mini .sidenav .brand { font-size:0; gap:0; justify-content:center; padding:0; }
  body.nav-mini .sidenav .brand .logo { font-size:14px; }
  body.nav-mini .sidenav #modePill, body.nav-mini .sidenav .navlbl, body.nav-mini .sidenav .who { display:none; }
  body.nav-mini .sidenav .navbtn { justify-content:center; padding:9px 0; gap:0; position:relative; }
  body.nav-mini .sidenav .navbtn .t, body.nav-mini .sidenav .chev { display:none; }
  body.nav-mini .sidenav .navbtn > .n { position:absolute; top:3px; right:3px; min-width:17px; padding:0 4px; font-size:10.5px; line-height:17px; }
  body.nav-mini .sidenav .navbtn > .n:not(.gn) { display:none; }
  body.nav-mini .grp.open .gn:not(:empty) { display:block; }
  body.nav-mini .grp .sub, body.nav-mini .grp.open .sub { display:none; }
  body.nav-mini .navhide svg { transform:scaleX(-1); }
  body.nav-mini .grp.cur > .ghd { background:color-mix(in srgb, var(--accent) 11%, transparent); color:var(--accent); }
  body.nav-mini .grp.fly .sub { display:flex; position:fixed; left:calc(var(--side) - 8px); z-index:40; min-width:220px; margin:0;
    background:var(--card); border:1px solid var(--line2); border-radius:12px; padding:6px; box-shadow:0 10px 30px rgba(16,24,40,.18); }
  body.nav-mini .grp.fly .subhd { display:block; color:var(--dim); font-size:12.5px; font-weight:500; padding:6px 12px 4px; }
  body.nav-mini .grp.fly .sub .navbtn { justify-content:flex-start; padding:8px 12px; gap:10px; }
  body.nav-mini .grp.fly .sub .navbtn .t { display:block; }
  body.nav-mini .grp.fly .sub .navbtn > .n:not(:empty) { display:block; position:static; }
}
@media (max-width:900px) { .navhide { display:none; } }