/* Site nav styling (markup injected by nav.js). Terminal theme:
   fixed LEFT SIDEBAR — white background, dark-red right border separating it
   from the content, monospace. Brand reads like a shell prompt, links are
   lowercase commands, the active page is marked with [brackets]. Brackets are
   rendered transparent on inactive links so activating one shifts no layout.
   body padding (not margin) offsets the pages: every page sets `margin:0` in
   its own later <style>, which would clobber a margin-left set here.
   Colours are hard-coded so the bar looks identical across pages regardless
   of each page's own theme. On narrow screens it falls back to a top bar. */
body { padding-left:210px; }
.navbar { position:fixed; left:0; top:0; bottom:0; width:210px; box-sizing:border-box;
  z-index:50; display:flex; flex-direction:column; align-items:stretch; gap:2px;
  padding:18px 16px; overflow-y:auto;
  background:#ffffff; border-right:2px solid #8f1d1d;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.navbar .brand { font-weight:700; color:#8f1d1d; text-decoration:none;
  font-size:13px; margin-bottom:16px; line-height:1.4; }
.navbar .brand .prompt { color:#1c1c1c; font-weight:400; }
.navbar a.nav { color:#6b6b6b; text-decoration:none; font-size:12px;
  padding:5px 0; }
.navbar a.nav::before { content:"["; opacity:0; }
.navbar a.nav::after { content:"]"; opacity:0; }
.navbar a.nav:hover { color:#1c1c1c; }
.navbar a.nav:hover::before, .navbar a.nav:hover::after { opacity:.45; }
.navbar a.nav.active { color:#8f1d1d; font-weight:700; }
.navbar a.nav.active::before, .navbar a.nav.active::after { opacity:1; }
.navbar a.nav.navsub { padding-left:22px; }
/* Top class: overview / gpt-vs-claude / open-source model elo. A dark-red
   section header (a link when it has a landing page, a plain span otherwise). */
.navbar a.nav.navtop, .navbar .navtop { color:#8f1d1d; font-weight:700;
  font-size:12px; margin-top:12px; padding:4px 0 2px; }
.navbar a.nav.navtop:hover { color:#1c1c1c; }
.navbar .navclust { font-size:12px; color:#b0a99c; margin-top:6px; padding:2px 0 2px 10px; }
/* The compact 4-column mobile bar lives in the markup at all times but is only
   shown under the breakpoint below; on desktop the full sidebar list is used. */
/* Desktop: the full link list is the sidebar column; the ☰ toggle is hidden. */
.navlinks { display:flex; flex-direction:column; gap:2px; }
.navtoggle { display:none; }

@media (max-width:760px) {
  /* Mobile: the sidebar becomes a sticky top bar (brand + ☰); the link list
     collapses into a dropdown panel revealed when .navbar gets .open. */
  body { padding-left:0; }
  .navbar { position:sticky; top:0; bottom:auto; left:0; width:auto; display:block;
    padding:0; overflow:visible;
    border-right:none; border-bottom:2px solid #8f1d1d; }
  .navhead { display:flex; align-items:center; justify-content:space-between;
    padding:9px 16px; }
  .navbar .brand { margin-bottom:0; }
  .navtoggle { display:inline-block; background:none; border:none; cursor:pointer;
    color:#8f1d1d; font-size:22px; line-height:1; padding:2px 6px; font-family:inherit; }
  .navlinks { display:none; gap:0; background:#ffffff;
    border-top:1px solid #ddd8cf; padding:4px 0 10px;
    max-height:75vh; overflow-y:auto; }
  .navbar.open .navlinks { display:flex; }
  .navbar a.nav { padding:9px 18px; font-size:13px; }
  .navbar a.nav.navsub { padding-left:30px; }
  .navbar a.nav.navtop { margin-top:4px; padding:9px 18px; }
  .navbar .navclust { margin-top:6px; padding:4px 18px; }
}