/* THE MENU, drawn in the page's own tokens (nav.mjs says what it is).
   A site sets --nv-bar and --nv-bar-ink for its bar; everything in the
   drawer reads the page's --card, --ink, --dim, --faint, --line and --ice2,
   so it follows the page's ground, light, dark or black, with no rules of
   its own for them. */

.nv-bar{
  --nv-h:56px;
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; gap:6px;
  min-height:var(--nv-h);
  padding:env(safe-area-inset-top,0px) clamp(8px,2.4vw,24px) 0 clamp(6px,1.6vw,16px);
  background:var(--nv-bar,#0a1425); color:var(--nv-bar-ink,#ffffff);
  border-bottom:1px solid var(--nv-bar-edge,rgba(0,0,0,.35));
  font-family:var(--sans,-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif);
}
/* THREE LINES, NO BACKGROUND (owner, Sep 24). The press area is 44 px for a
   thumb; nothing is painted until the pointer is on it. */
.nv-open{ width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto;
  background:none; border:0; border-radius:10px; color:inherit; cursor:pointer; padding:0; }
.nv-open svg{ width:24px; height:24px; }
.nv-open:hover{ background:rgba(255,255,255,.08); }
.nv-open:focus-visible, .nv-close:focus-visible{ outline:2px solid var(--nv-focus,#66a7f1); outline-offset:2px; }
.nv-brand{ display:flex; align-items:center; gap:9px; color:inherit; text-decoration:none; min-width:0; }
.nv-brand svg{ width:26px; height:26px; flex:0 0 26px; display:block; }
.nv-brand span{ font-weight:700; font-size:16px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-brand b{ color:var(--nv-bar-lit,#66a7f1); font-weight:700; margin-left:3px; }
.nv-brand:focus-visible{ outline:2px solid var(--nv-focus,#66a7f1); outline-offset:3px; border-radius:4px; }

/* ── THE DRAWER ─────────────────────────────────────────────────────────── */
.nv-scrim{ position:fixed; inset:0; z-index:950; background:rgba(8,12,18,.42);
  opacity:0; transition:opacity .22s ease; }
.nv-scrim.on{ opacity:1; }
.nv-drawer{
  position:fixed; top:0; bottom:0; left:0; z-index:960;
  width:min(86vw,340px);
  display:flex; flex-direction:column;
  background:var(--card,#ffffff); color:var(--ink,#17222f);
  border-right:1px solid var(--line,#e3e9f1);
  box-shadow:0 0 40px -12px rgba(0,0,0,.45);
  transform:translateX(-102%); visibility:hidden;
  transition:transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s;
  font-family:var(--sans,-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif);
  font-size:15px; line-height:1.25; outline:none;
  padding-top:env(safe-area-inset-top,0px);
}
.nv-drawer.on{ transform:none; visibility:visible; transition:transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s; }
html.nv-lock, html.nv-lock body{ overflow:hidden; }

.nv-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 10px 10px 16px; border-bottom:1px solid var(--line,#e3e9f1); min-height:56px; }
.nv-brand-d{ color:var(--ink,#17222f); }
.nv-brand-d b{ color:var(--ice,#1478c9); }
.nv-close{ width:40px; height:40px; display:grid; place-items:center; background:none; border:0; border-radius:10px;
  color:var(--dim,#5d6c7e); cursor:pointer; padding:0; }
.nv-close svg{ width:20px; height:20px; }
.nv-close:hover{ background:var(--ice2,#e8f3fd); color:var(--ink,#17222f); }

.nv-scroll{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:12px 10px 24px; }

.nv-find{ display:flex; align-items:center; gap:8px; margin:0 2px 12px; padding:0 10px;
  border:1px solid var(--line,#e3e9f1); border-radius:10px; background:var(--card,#fff); }
.nv-find:focus-within{ border-color:var(--ice,#1478c9); box-shadow:0 0 0 3px var(--ice2,#e8f3fd); }
.nv-find-i{ width:18px; height:18px; color:var(--faint,#6c7682); flex:0 0 auto; }
.nv-find input{ flex:1; min-width:0; border:0; outline:none; background:none; color:var(--ink,#17222f);
  font:inherit; font-size:16px; padding:10px 0; }
.nv-find input::placeholder{ color:var(--faint,#6c7682); }
.nv-kbd{ font-family:var(--mono,ui-monospace,monospace); font-size:11px; color:var(--faint,#6c7682);
  border:0; background:none; white-space:nowrap; }
@media (hover:none){ .nv-kbd{ display:none; } }

.nv-list{ list-style:none; margin:0; padding:0; }
.nv-sec{ margin-top:14px; }
.nv-lab{ margin:0 0 4px; padding:0 12px; font-size:12.5px; color:var(--faint,#6c7682); font-weight:500; }

.nv-row{ width:100%; display:flex; align-items:center; gap:12px; min-height:42px; padding:8px 10px 8px 12px;
  border-radius:9px; border:0; background:none; color:var(--ink,#17222f); text-decoration:none; text-align:left;
  font:inherit; font-size:15px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .12s ease; }
.nv-row:hover{ background:color-mix(in srgb, var(--ink,#17222f) 5%, transparent); }
.nv-row:active{ background:var(--ice2,#e8f3fd); }
.nv-row:focus-visible{ outline:2px solid var(--ice,#1478c9); outline-offset:-2px; }
.nv-ic{ width:20px; height:20px; flex:0 0 20px; color:var(--dim,#5d6c7e); }
.nv-t{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.nv-note{ font-size:12px; color:var(--faint,#6c7682); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nv-chev{ width:16px; height:16px; flex:0 0 16px; color:var(--faint,#6c7682); transition:transform .2s ease; }
.nv-out{ width:14px; height:14px; flex:0 0 14px; color:var(--faint,#6c7682); }
.nv-grp[aria-expanded="true"] .nv-chev{ transform:rotate(180deg); }

/* THE CHILDREN, INDENTED ALONG A THIN GUIDE LINE, as the example draws them:
   the line stands under the parent's icon, and each child sits to its right. */
.nv-sub{ list-style:none; margin:2px 0 6px 21px; padding:0 0 0 8px; border-left:1px solid var(--line,#e3e9f1); }
.nv-sub[hidden]{ display:none; }
.nv-leaf{ min-height:38px; font-size:14.5px; padding:7px 10px; }
.nv-sub .nv-sub{ margin-left:10px; }

/* THE PAGE THE READER IS ON keeps a soft pill. */
.nv-row[aria-current="page"]{ background:color-mix(in srgb, var(--ink,#17222f) 7%, transparent); font-weight:600; }

/* A RECENT: its name, its section under it, and a pin at the right. */
.nv-rec{ display:flex; align-items:center; gap:4px; }
.nv-rec .nv-row{ flex:1 1 auto; min-width:0; }
.nv-pin{ width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border:0; background:none;
  color:var(--faint,#6c7682); border-radius:8px; cursor:pointer; opacity:.7; }
.nv-pin svg{ width:15px; height:15px; }
.nv-pin:hover{ opacity:1; background:color-mix(in srgb, var(--ink,#17222f) 5%, transparent); }
.nv-pin[aria-pressed="true"]{ color:var(--ice,#1478c9); opacity:1; }
.nv-pin[aria-pressed="true"] svg path{ fill:currentColor; }

.nv-foot{ margin-top:18px; padding-top:10px; border-top:1px solid var(--line,#e3e9f1); }
.nv-ground{ display:flex; margin:12px 4px 0; border:1px solid var(--line,#e3e9f1); border-radius:9px; overflow:hidden; width:max-content; }
.nv-ground button{ font:inherit; font-size:13.5px; color:var(--dim,#5d6c7e); background:none; border:0; padding:8px 13px; cursor:pointer; }
.nv-ground button + button{ border-left:1px solid var(--line,#e3e9f1); }
.nv-ground button[aria-pressed="true"]{ color:var(--ink,#17222f); background:var(--ice2,#e8f3fd); }

@media (min-width:900px){
  .nv-drawer{ width:320px; }
}
@media (prefers-reduced-motion:reduce){
  .nv-drawer, .nv-drawer.on, .nv-scrim, .nv-chev, .nv-row{ transition:none; }
}