/* ============================================================
   nav-shell.css — section headings that open into a mini menu,
   the welcome page, and the mobile drawer. Goes with nav-shell.js.
   Loaded after brand.css so it wins where they overlap.
   Roll back by removing its link tag and nav-shell.js from index.html.
   ============================================================ */

/* ---------- Section headings: rows you click, not quiet labels ---------- */
#sideNav .navgroup{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 14px; margin:0; cursor:pointer; position:relative;
  font-family:var(--display); font-weight:600; font-size:13px;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--black);
  transition:background .12s var(--snap);
}
#sideNav .nav .navgroup:first-child{ padding-top:13px; }
#sideNav .navgroup:hover{ background:rgba(0,0,0,.10); }
#sideNav .navgroup:focus-visible{ outline:2px solid var(--black); outline-offset:-2px; }
#sideNav .navgroup::after{
  content:""; flex:0 0 auto; width:7px; height:7px; margin-left:10px;
  border-right:2px solid var(--black); border-bottom:2px solid var(--black);
  transform:rotate(-45deg); transition:transform .15s var(--snap);
}
#sideNav .navgroup.ns-open{ background:rgba(0,0,0,.10); }
#sideNav .navgroup.ns-open::after{ transform:rotate(45deg) translate(-2px,-2px); }
/* The section you are in, while it is folded away: a small marker so you never lose your place. */
#sideNav .navgroup.ns-current:not(.ns-open){ box-shadow:inset 4px 0 0 var(--black); }

/* Shown or hidden by what the person can see inside, whatever a room set on the heading itself. */
#sideNav .navgroup.ns-show{ display:flex !important; }
#sideNav .navgroup.ns-empty{ display:none !important; }

/* ---------- The mini menu under an open heading ---------- */
#sideNav .navbtn.sub[data-ns-grp]{
  margin-left:14px; width:calc(100% - 14px);
  padding:10px 14px 10px 16px; font-size:12px;
  border-left:2px solid rgba(0,0,0,.25);
}
#sideNav .navbtn.sub[data-ns-grp].on{ border-left-color:var(--black); }
#sideNav .navbtn.sub[data-ns-grp].ns-last{ margin-bottom:6px; }
#sideNav .navbtn.ns-closed{ display:none !important; }

/* ---------- Home ---------- */
body.ns-booting main.wrap{ visibility:hidden; }
body.ns-at-home main.wrap{ background:#fff; max-width:none; }
body.ns-at-home .shell{ background:#fff; }
#viewHome .ns-home{
  min-height:calc(100vh - 140px);
  display:flex; align-items:center; justify-content:center;
  background:#fff;
}
#viewHome .ns-logo{ display:flex; align-items:center; gap:18px; }
#viewHome .ns-mark{ width:84px; height:84px; display:block; }
#viewHome .ns-word{
  font-family:var(--display); font-weight:700; font-size:44px; line-height:1;
  letter-spacing:1px; color:var(--black);
}
#viewHome .ns-word small{
  display:block; margin-top:10px; font-size:13px; font-weight:600;
  letter-spacing:4px; text-transform:uppercase;
}

/* ---------- The mobile bar (hidden on desktop) ---------- */
.ns-bar, .ns-scrim{ display:none; }

@media (max-width:940px){
  .ns-bar{
    display:flex; align-items:center; gap:12px;
    position:sticky; top:0; z-index:900;
    height:56px; padding:0 12px 0 0;
    background:var(--yellow); border-bottom:3px solid var(--black);
  }
  .ns-burger{
    flex:0 0 56px; height:56px; border:none; cursor:pointer;
    background:var(--black); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px;
  }
  .ns-burger span{ display:block; width:22px; height:3px; background:var(--yellow); }
  .ns-where{
    flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-family:var(--display); font-weight:700; font-size:13px;
    letter-spacing:1.4px; text-transform:uppercase; color:var(--black);
  }
  .ns-bar-wm{
    flex:0 0 auto; font-family:var(--display); font-weight:700;
    font-size:14px; letter-spacing:.5px; color:var(--black);
  }

  /* The rail becomes a drawer from the left. These undo brand.css's "top strip". */
  .shell{ display:block; }
  #sideNav.side{
    position:fixed; top:0; left:0; bottom:0; z-index:1000;
    width:300px; max-width:86vw; height:100vh; height:100dvh;
    flex-direction:column; align-items:stretch;
    border-right:3px solid var(--black); border-bottom:none;
    overflow:hidden; transform:translateX(-105%);
    transition:transform .2s var(--snap);
    box-shadow:6px 0 0 rgba(0,0,0,.18);
  }
  body.ns-drawer #sideNav.side{ transform:none; }
  #sideNav .side-head{ padding:20px 18px 16px; }
  #sideNav .nav{
    flex-direction:column; gap:2px; padding:8px 10px 18px;
    overflow-x:hidden; overflow-y:auto; flex:1 1 auto;
  }
  #sideNav .navgroup{ display:flex; }
  #sideNav .navbtn, #sideNav .navbtn.sub{ white-space:normal; padding:13px 14px; font-size:13px; }
  #sideNav .navbtn.sub[data-ns-grp]{ padding:12px 14px 12px 16px; }
  #sideNav .navbtn.on::after{ display:block; }
  #sideNav .side-foot{ display:block; }

  .ns-scrim{
    display:block; position:fixed; inset:0; z-index:999;
    background:rgba(0,0,0,.45); opacity:0; pointer-events:none;
    transition:opacity .2s var(--snap);
  }
  body.ns-drawer .ns-scrim{ opacity:1; pointer-events:auto; }
  body.ns-drawer{ overflow:hidden; }

  #viewHome .ns-home{ min-height:calc(100vh - 110px); }
  #viewHome .ns-mark{ width:56px; height:56px; }
  #viewHome .ns-word{ font-size:30px; }
}

@media (prefers-reduced-motion: reduce){
  #sideNav.side, .ns-scrim, #sideNav .navgroup::after{ transition:none; }
}

/* ---------- Wide tables scroll inside their card (see guardTables in nav-shell.js) ---------- */
.ns-tscroll{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }