/* why: wide panel, tree left + description pane right (desktop)
   mobile = full-screen list -> detail slide */
/* trap: .mast z50 is a stacking context; fixed mobile overlay still covers the page */
.nav-toggle{display:inline-flex;align-items:center;gap:var(--s-8);cursor:pointer}
.nav-toggle svg{display:block;width:16px;height:16px}
.mega{display:none;background:var(--bg)}
.mega.is-open{display:block}
.mega-bar{display:none}
.mega-view{margin:0}
.mega ul{list-style:none;margin:0;padding:0}
.mega a{text-decoration:none}
.mega-item{display:block;padding:var(--s-8) var(--s-12);border-radius:var(--r-control);color:var(--ink);font-size:var(--t-16);line-height:1.35}
.mega-group>.mega-item{font-weight:600;margin-bottom:var(--s-4)}
.mega-item:hover,.mega-item.is-active{background:var(--tint);color:var(--accent-ink)}
.mega-pane__t{font-size:var(--t-28);margin:0 0 var(--s-16)}
.mega-pane__d{font-size:var(--t-18);line-height:1.5;color:var(--ink-2);margin:0 0 var(--s-24);max-width:30rem}
.mega-pane__d:empty{display:none}
.mega-pane__go{height:40px}

@media(min-width:1024px){
.mega{position:absolute;top:100%;left:0;right:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);animation:mega-in var(--panel) var(--ease)}
.mega-body{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-64);max-width:var(--page);margin:0 auto;padding:var(--s-32) var(--s-48) var(--s-48)}
.mega-list{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr;column-gap:var(--s-32);align-content:start}
.mega-list>.mega-group:has(+.mega-group){grid-column:1;grid-row:1/span 4}
.mega-list>.mega-group+.mega-group{grid-column:2;grid-row:1}
.mega-list>.mega-leaf{grid-column:2;order:2}
.mega-list>.mega-leaf:first-child{order:3}
.mega-list>.mega-group{margin-bottom:var(--s-24)}
.mega-list>.mega-leaf>.mega-item{font-weight:600}
.mega-pane{border-left:1px solid var(--line);padding:var(--s-8) 0 var(--s-8) var(--s-48);align-self:start;position:sticky;top:calc(var(--mast-h) + var(--s-32))}
.mega-pane__t{font-size:var(--t-28)}
}
@keyframes mega-in{from{opacity:0}to{opacity:1}}

@media(max-width:1023px){
.mega{position:fixed;inset:0;z-index:100}
.mega.is-open{display:flex;flex-direction:column}
.mega-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;flex:none;height:64px;padding:0 var(--s-8);border-bottom:1px solid var(--line)}
.mega-bar__t{grid-column:2;font-weight:600;font-size:var(--t-16)}
.mega-bar button{display:inline-flex;align-items:center;gap:var(--s-4);min-width:44px;height:44px;padding:0 var(--s-8);background:none;border:0;color:var(--ink);font:500 var(--t-16)/1 var(--sans);cursor:pointer}
.mega-bar button[hidden]{display:none}
.mega-bar svg{width:24px;height:24px}
.mega-back{justify-self:start}
.mega-close{justify-self:end;justify-content:center}
.mega-body{position:relative;flex:1;overflow:hidden}
.mega-view{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s-16);background:var(--bg);transition:transform var(--panel) var(--ease),visibility 0s linear 0s}
.mega-view--detail{transform:translateX(100%);visibility:hidden;padding:var(--s-32) var(--s-24)}
.mega.is-detail .mega-view--list{transform:translateX(-25%);visibility:hidden}
.mega.is-detail .mega-view--detail{transform:none;visibility:visible}
.mega-item{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);min-height:48px;padding:var(--s-12) var(--s-8);border-radius:0;border-bottom:1px solid var(--line)}
.mega-item::after{content:"";flex:none;width:8px;height:8px;border:solid var(--ink-3);border-width:2px 2px 0 0;transform:rotate(45deg)}
.mega-item.is-active{background:none;color:var(--ink)}
.mega-group>.mega-item{margin-bottom:0;font-size:var(--t-18)}
.mega-sub .mega-item{padding-left:var(--s-24);font-size:var(--t-16)}
.mega-group{margin-bottom:var(--s-16)}
.mega-pane__t{font-size:var(--t-28)}
.mega-pane__go{width:100%;height:48px}
html.mega-lock{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
.mega,.mega-view{animation:none;transition:none}
}