/* Section bar: the items, the menus under them, the "…" menu, the finder
   dialog and the "coming soon" page. Loaded on every page after style.css.
   pages.css sets the bar's height; other pages' sticky offsets depend on it,
   so nothing here may change --sitenav-height. */

.sitenav .nav-main{gap:0}
.sitenav .nav-main li{display:flex;align-items:center;flex:none}
.sitenav .nav-main .nav-link{padding:10px 10px;font-size:13.5px}
.sitenav .nav-main .has-menu .nav-link{padding-inline-end:1px}
.nav-tag{margin-inline-start:6px;padding:0 6px;border-radius:999px;background:var(--up-bg);color:var(--up);font-size:10px;font-weight:650;line-height:1.7}
.nav-tag.soon{background:var(--flat-bg);color:var(--muted)}
.nav-caret{flex:none;display:grid;place-items:center;width:18px;height:34px;border-radius:6px;color:var(--faint)}
.nav-caret svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.nav-caret:hover,.nav-caret[aria-expanded=true]{color:var(--ink)}
.nav-caret[aria-expanded=true] svg{transform:rotate(180deg)}

.nav-tools{display:flex;align-items:center;gap:2px;flex:none}
.sitenav .nav-tools a{min-height:50px;padding:10px 9px;font-size:13.5px;border-bottom:2px solid transparent}
.sitenav .nav-more{font-size:19px;letter-spacing:1px;line-height:1;padding-bottom:14px}
.sitenav .nav-more[aria-expanded=true],.sitenav .nav-more[aria-current=page]{color:var(--ink)}
.sitenav .nav-watch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;margin-inline-end:6px}
.sitenav .nav-tools .finder-btn{min-height:34px;margin-inline-start:6px;padding:0 14px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:650}
.sitenav .nav-tools .finder-btn:hover{color:var(--bg);opacity:.88}
.finder-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;margin-inline-end:7px}

/* the menu panel: one element, filled from <template>s, placed by nav.js */
.navpanel{position:fixed;z-index:60;max-width:calc(100vw - 16px);max-height:min(480px,var(--nav-available-height,70dvh));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) var(--surface);padding:12px;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 18px 50px rgba(8,20,14,.16)}
.navpanel ul{list-style:none;margin:0;padding:0}
.navpanel .menu-groups{display:flex;gap:22px;align-items:flex-start}
.navpanel .menu-groups section{min-width:190px}
.navpanel .menu-col{display:flex;flex-direction:column;gap:20px}
.navpanel h3{margin:0 0 7px;padding:8px 10px;border-inline-start:3px solid var(--brand);border-radius:8px;background:var(--surface-2);font-size:12.5px;line-height:1.7;font-weight:800;color:var(--ink)}
.navpanel a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--text);white-space:nowrap}
.navpanel a:hover,.navpanel a:focus-visible{background:var(--surface-2);color:var(--ink)}
.navpanel a[aria-current=page]{color:var(--ink);font-weight:650}
.navpanel .menu-list{min-width:224px}

/* the finder */
.finder{width:min(92vw,720px);max-height:min(82vh,660px);padding:0;overflow:hidden;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:0 24px 70px rgba(8,20,14,.3)}
.finder[open]{display:flex;flex-direction:column}
.finder::backdrop{background:rgba(10,20,15,.46);backdrop-filter:blur(3px)}
.finder-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 6px}
.finder-head h2{font-size:17px;font-weight:800;color:var(--ink)}
.finder-search{display:flex;align-items:center;gap:8px;margin:8px 18px 6px;height:38px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--faint)}
.finder-search:focus-within{border-color:var(--brand);color:var(--muted)}
.finder-search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.finder-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:14px;color:var(--ink)}
.finder-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 8px;margin:0;padding:8px 14px 10px;list-style:none;overflow:auto}
.finder-list a{display:block;padding:9px 11px;border-radius:10px;font-size:13.5px;color:var(--text)}
.finder-list a:hover,.finder-list a:focus-visible{background:var(--surface-2);color:var(--ink)}
.finder-empty,.finder-foot{margin:0;padding:6px 20px 16px;font-size:12.5px;color:var(--muted)}
.finder-foot{border-top:1px solid var(--line);padding-top:12px}
.finder-empty a,.finder-foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* the "coming soon" page */
.soon-box{max-width:620px;margin:6px 0 48px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.soon-box h2{margin:0 0 6px;font-size:17px;font-weight:800;color:var(--ink)}
.soon-box p{margin:0 0 12px;color:var(--muted);font-size:14px}
.soon-box ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.soon-box a{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--text)}
.soon-box a:hover{border-color:var(--line-strong);color:var(--ink)}

@media (max-width:1100px){
  .sitenav .nav-tools .nav-watch span{display:none}
  .sitenav .nav-tools .nav-watch svg{margin:0}
}
@media (max-width:820px){
  .finder-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .navpanel .menu-groups{flex-direction:column;gap:10px}
  .navpanel .menu-groups section{min-width:0}
  .navpanel .menu-col{gap:18px}
  .navpanel{left:8px!important;right:8px!important;width:auto}
}
@media (max-width:620px){
  .sitenav .nav-tools .finder-btn{padding:0 11px}
  .sitenav .nav-tools .finder-btn span{display:none}
  .sitenav .nav-tools .finder-btn svg{margin:0}
  .finder-list{grid-template-columns:1fr}
}

/* Full header taxonomies stay within the viewport and scroll vertically. */
.navpanel .menu-groups{display:grid;grid-template-columns:repeat(4,minmax(0,220px));gap:22px}
.navpanel .menu-columns-1{grid-template-columns:minmax(190px,240px)}
.navpanel .menu-columns-2{grid-template-columns:repeat(2,minmax(190px,240px))}
.navpanel .menu-columns-3{grid-template-columns:repeat(3,minmax(0,220px))}
.navpanel .menu-groups section,.navpanel .menu-col{min-width:0}
.navpanel a{white-space:normal;line-height:1.7;overflow-wrap:anywhere}
@media(max-width:1000px){.navpanel .menu-groups{grid-template-columns:repeat(2,minmax(0,240px))}.navpanel .menu-columns-1{grid-template-columns:minmax(0,240px)}}
@media(max-width:600px){.navpanel .menu-groups{grid-template-columns:minmax(0,1fr)}}