/* Shared layout for every page: the header across the top, a left menu in the page's empty left margin,
   the content beside it. Linked AFTER each page's own <style>, so these rules win.
   The menu sits on the page background (no panel) - only the current page is lifted, with the card colour
   and an accent bar, so it reads as part of the page rather than a second column of chrome. */
/* desktop: the menu hugs the window's left edge (the logo sits above it), the content is centred in the rest */
.top .wrap{max-width:none;padding:0 24px}
.shell{display:flex;gap:28px;padding:0 24px;align-items:flex-start}
.shell > main.wrap{flex:1 1 auto;min-width:0;max-width:1180px;margin:0 auto;padding:0}
.side{position:sticky;top:20px;flex:0 0 190px;display:flex;flex-direction:column;gap:2px}
.side .grp{font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--muted);opacity:.75;margin:18px 12px 6px}
.side .grp:first-child{margin-top:2px}
.side a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:0 8px 8px 0;
  border-left:3px solid transparent;color:var(--muted);text-decoration:none;font:600 13.5px/1.2 var(--sans)}
.side a svg{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.side a:hover{color:var(--text);background:var(--rowa)}
.side a[aria-current=page]{color:var(--text);background:var(--card);border-left-color:var(--accent)}
.side a[aria-current=page] svg{opacity:1;color:var(--accent)}
.side a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.side a[hidden]{display:none}
@media(max-width:900px){
  .top .wrap{padding:0 14px}
  .shell{display:block;padding:0}
  /* the links fill the width, wrapping to a second row when there are too many - never sideways scrolling */
  .side{position:static;flex-direction:row;flex-wrap:wrap;gap:5px;padding:0 14px 14px}   /* a 2nd row only if it must */
  .side .grp{display:none}
  .side a{flex:1 1 auto;justify-content:center;white-space:nowrap;border:1px solid var(--rowbd);border-radius:999px;
    padding:7px 4px;font-size:clamp(10px,2.9vw,12.5px);letter-spacing:0}
  .side a svg{display:none}
  .side a[aria-current=page]{border-color:var(--accent);background:var(--card)}
  .shell > main.wrap{padding:0 14px}
}