#wrap { display:grid; grid-template-columns:220px minmax(0,1fr) 210px; min-height:0; }
#mid { overflow:auto; min-width:0; }
#toc { display:flex; flex-direction:column; padding:var(--s3); gap:var(--s1);
       border-right:1px solid var(--line); background:var(--bg1); overflow:auto; }
#toc a { display:block; padding:var(--s2) var(--s3); border:1px solid transparent;
         border-left:2px solid transparent; text-decoration:none; }
#toc a:hover { background:var(--bg2); }
#toc a.on { background:var(--bg2); border-left-color:var(--acc); }
#toc .t { display:block; font:600 var(--fs-ui)/1.3 var(--ui); }

#toc .d { display:block; font:var(--fs-micro)/1.4 var(--ui); color:var(--faint);
          margin-top:2px; }

#doc > * { max-width:74ch; }
#doc > pre, #doc > .tablewrap { max-width:100%; }


#onpage { border-left:1px solid var(--line); padding:var(--s5) var(--s4); overflow:auto; }
#onpage .micro { display:block; margin-bottom:var(--s3); }
#opl a { display:block; padding:var(--s1) 0 var(--s1) var(--s3);
         border-left:2px solid var(--line); color:var(--muted);
         font:var(--fs-micro)/1.5 var(--ui); text-decoration:none; }
#opl a:hover { color:var(--text); border-left-color:var(--line2); }
#opl a.on { color:var(--text); border-left-color:var(--acc); }


#pager { display:flex; gap:var(--s3); padding:0 var(--s5) var(--s6);
         max-width:74ch; }
#pager a { flex:1; border:1px solid var(--line); padding:var(--s3) var(--s4);
           text-decoration:none; color:var(--text); cursor:pointer; }
#pager a:hover { border-color:var(--line2); background:var(--bg1); }
#pager a.nx { text-align:right; }
#pager .micro { display:block; color:var(--faint); }


#find kbd { font:inherit; color:var(--faint); margin-left:var(--s2); }
#sx { background:rgba(0,0,0,.6); align-items:flex-start; padding:12vh 0 0; }
#sxbox { width:min(620px,92vw); background:var(--bg1);
         border:var(--bd) solid var(--line2); box-shadow:var(--shadow); }
#sxq { width:100%; border:0; border-bottom:1px solid var(--line);
       padding:var(--s4); font:var(--fs-body) var(--ui); background:transparent; }
#sxr { max-height:56vh; overflow:auto; }
#sxr a { display:block; padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);
         cursor:pointer; text-decoration:none; }
#sxr a:hover { background:var(--bg2); }
#sxr .h { display:block; font:600 var(--fs-ui)/1.4 var(--ui); color:var(--text); }
#sxr .x { display:block; font:var(--fs-micro)/1.5 var(--ui); color:var(--muted); }


@media (max-width:1100px) { #wrap { grid-template-columns:220px minmax(0,1fr); }
                            #onpage { display:none; } }
@media (max-width:720px) {
  #wrap { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  #toc { flex-direction:row; overflow-x:auto; border-right:0;
         border-bottom:1px solid var(--line); }
  #toc a { white-space:nowrap; }
  #toc .d { display:none; }
  #pager { padding:0 var(--s4) var(--s5); }
  #find kbd { display:none; }
}

@media (pointer:coarse) {
  #toc a { min-height:44px; display:flex; align-items:center; }
  #pager a { min-height:44px; }
}