/* The menu: the burger, the drawer and what is in it, on every page.

   On the chart and the timeline it is a drawer at every width, so they keep
   their full width. The Practice page's own stylesheet, app.css, turns the
   same drawer into a permanent rail above 62rem. */

:root{--railpad:1rem}                  /* where control boxes start */

.burger{
  flex:0 0 auto; width:2.75rem; height:2.75rem; margin:-.35rem 0 -.35rem -.5rem;
  background:transparent; border:0; border-radius:9px; cursor:pointer;
  display:grid; place-content:center; gap:4px; padding:0;
}
.burger span{display:block; width:19px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s}
.burger:hover{background:var(--soft)}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ------------------------------------------------ the drawer */
.scrim{position:fixed; inset:0; z-index:44; background:rgba(10,18,20,.42); border:0; padding:0;
       appearance:none; -webkit-appearance:none; cursor:pointer}
.scrim[hidden]{display:none}

.nav{
  position:fixed; z-index:45; top:0; bottom:0; left:0;
  width:min(20rem,86vw); background:var(--card); border-right:1px solid var(--rule);
  display:flex; flex-direction:column;
  transform:translateX(-101%); transition:transform .26s cubic-bezier(.22,.61,.36,1);
  padding-left:env(safe-area-inset-left,0px);
}
body.nav-open .nav{transform:translateX(0)}
.nav-head{
  flex:0 0 auto; display:flex; align-items:center; gap:.6rem;
  padding:calc(.8rem + env(safe-area-inset-top,0px)) var(--railpad) .8rem var(--railpad);
  border-bottom:1px solid var(--soft);
}
.nav-title{padding-left:13px; font-weight:700; letter-spacing:-.022em; font-size:1.02rem}
.navclose{margin-left:auto; width:2.5rem; height:2.5rem; border:0; background:transparent; border-radius:8px; cursor:pointer; color:var(--muted); font-size:1rem}
.navclose:hover{background:var(--sunk); color:var(--ink)}
.nav-body{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:.4rem var(--railpad) calc(1.4rem + env(safe-area-inset-bottom,0px))}
.nav-sec{padding:.7rem 0; border-bottom:1px solid var(--soft)}
.nav-sec:last-of-type{border-bottom:0}
.nav-sec h3{margin:0 0 .5rem; padding-left:13px; font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

.modes{display:flex; border:1px solid var(--edge); border-radius:9px; overflow:hidden; background:var(--card)}
.modes button, .modes a{flex:1 1 0; border:0; background:transparent; padding:.62rem 12px; cursor:pointer; font-size:.9rem; font-weight:500; color:var(--muted); border-right:1px solid var(--soft)}
.modes a{text-align:center; text-decoration:none}   /* on the other pages, links into the app */
.modes a:hover{color:var(--ink)}
.modes > :last-child{border-right:0}
.modes button[aria-pressed=true]{background:var(--ink); color:var(--paper)}

.bigbtn{
  width:100%; margin-top:.55rem; text-align:left; cursor:pointer;
  background:var(--ink); color:var(--paper); border:0; border-radius:9px;
  padding:.68rem 13px; font-size:.94rem; font-weight:600;
}
a.bigbtn{display:block; text-decoration:none}
.bigbtn em{display:block; font-style:normal; font-size:.76rem; font-weight:400; opacity:.72; margin-top:.12rem}

.rowbtn{
  width:100%; text-align:left; cursor:pointer; background:var(--card);
  border:1px solid var(--edge); border-radius:8px; padding:.6rem 12px; font-size:.92rem; font-weight:500;
}
.rowbtn em{display:block; font-style:normal; font-size:.76rem; font-weight:400; color:var(--muted); margin-top:.1rem}
.rowbtn:hover{border-color:var(--muted)}
a.rowbtn{display:block; color:inherit; text-decoration:none}
.rowbtn + .rowbtn{margin-top:.45rem}
/* the page you are on: marked, and not offered as somewhere to go */
.rowbtn[aria-current=page]{border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); cursor:default}

/* ------------------------------------------------ settings, folded
   One heading that opens on everything you set once and leave. */
.nav-fold{border-top:1px solid var(--soft)}
.nav-fold > summary{list-style:none; display:flex; align-items:center; gap:.55rem; margin:.35rem 0; padding:.6rem 0 .6rem 13px;
  border-radius:8px; cursor:pointer; font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.nav-fold > summary::-webkit-details-marker{display:none}
.nav-fold > summary::before{content:''; width:.4rem; height:.4rem; margin-top:-.15rem;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(-45deg); transition:transform .2s}
.nav-fold[open] > summary::before{transform:rotate(45deg)}
.nav-fold > summary:hover{color:var(--ink); background:var(--sunk)}
.nav-fold > .nav-sec:first-of-type{padding-top:.2rem}
@media (prefers-reduced-motion:reduce){ .nav-fold > summary::before{transition:none} }