/* ---- the navigation bar: section links in a capsule, with a pill that glides to the current section and a fainter
   one that follows the pointer (js/nav.js); the header tightens once you scroll; the Tools menu eases open ---- */
:root{--navease:cubic-bezier(.22,1,.36,1)}
header.top{transition:background-color .35s ease,box-shadow .4s var(--navease)}
/* once scrolled the header only gains a soft shadow: its height never changes, so nothing below it shifts */
header.top.scrolled{box-shadow:0 10px 30px -14px rgba(0,0,0,.5),0 1px 0 var(--glow)}

.tlg{position:relative;display:flex;align-items:center;gap:2px;padding:3px;margin:0 6px;border:1px solid var(--line);border-radius:999px;
  background:color-mix(in srgb,var(--card) 72%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent);isolation:isolate;flex:none}
.tlg .tl{position:relative;z-index:1;border-radius:999px;padding:6px 13px;background:transparent!important;box-shadow:none!important;color:var(--muted);
  transition:color .3s var(--navease),transform .3s var(--navease)}
.tlg .tl:hover,.tlg .tl:focus-visible{color:var(--ink)}
.tlg .tl.on{color:var(--sage-d)}
.tlg .tl:focus-visible{outline:2px solid var(--sage);outline-offset:1px}
/* the pills */
.tl-ind{position:absolute;z-index:0;top:3px;left:0;height:calc(100% - 6px);width:0;border-radius:999px;pointer-events:none;opacity:0;
  transition:transform .5s var(--navease),width .5s var(--navease),opacity .25s ease}
.tl-ind.show{opacity:1}
.tl-ind.cur{background:var(--sage-l);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sage) 45%,transparent),0 0 18px -6px var(--glow)}
.tl-ind.cur::after{content:"";position:absolute;left:32%;right:32%;bottom:-4px;height:2px;border-radius:2px;background:var(--sage);box-shadow:0 0 8px var(--sage)}
.tl-ind.hov{background:color-mix(in srgb,var(--ink) 7%,transparent);transition:transform .35s var(--navease),width .35s var(--navease),opacity .2s ease}
/* thin dividers between the groups: work (To do, Builds) · toolkit (Tools, Library) · learning (Revise) */
.tl-sep{flex:none;width:1px;height:18px;margin:0 4px;background:var(--line);position:relative;z-index:1}
/* the Library menu: three wider entries with a line of description */
.lmenu{columns:auto;padding:8px}
.lmenu a{align-items:flex-start;gap:12px;padding:10px 10px}
.lmenu .mi{margin-top:2px}
.lm-t{display:flex;flex-direction:column;gap:2px;min-width:0}.lm-t b{font-size:.95rem}.lm-t small{color:var(--muted);font-weight:400;font-size:.8rem;line-height:1.35}
.lmenu a.on{background:var(--sage-l)}.lmenu a.on b{color:var(--sage-d)}
/* search and theme buttons line up with the capsule */
.ckbtn{border-radius:999px!important}
/* narrower windows: tighter links so the capsule still fits */
.topin{scrollbar-width:none}.topin::-webkit-scrollbar{display:none}
@media (max-width:1100px){.tlg .tl{padding:5px 9px}}
@media (max-width:1000px){.ckbtn .ckword{display:none}.tlg{margin:0 4px}.tlg .tl{padding:5px 7px;font-size:.82rem;letter-spacing:.03em}}
@media (max-width:840px){.tlg .tl{padding:4px 6px;font-size:.76rem;letter-spacing:.02em}.logo{margin-right:2px}}
@media (max-width:699px){.tlg{display:none}}

/* Tools menu: a soft slide and fade, its categories cascading in; closing is quick and doesn't wait for them */
.tbtn .car{transition:transform .4s var(--navease)}
.tmenu{transform:translateY(-6px) scale(.985);transition:opacity .22s ease,transform .4s var(--navease)}
.tmenu.open{transform:none}
.tmenu .mcat,.tmenu .mall{opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .3s var(--navease)}
.tmenu.open .mcat,.tmenu.open .mall{opacity:1;transform:none;transition:opacity .35s ease,transform .45s var(--navease)}
.tmenu.open .mcat:nth-child(2){transition-delay:.03s}.tmenu.open .mcat:nth-child(3){transition-delay:.06s}.tmenu.open .mcat:nth-child(4){transition-delay:.09s}
.tmenu.open .mcat:nth-child(5){transition-delay:.12s}.tmenu.open .mcat:nth-child(n+6),.tmenu.open .mall{transition-delay:.14s}
.lmenu>a{opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .3s var(--navease),background-color .2s ease}
.lmenu.open>a{opacity:1;transform:none;transition:opacity .3s ease,transform .4s var(--navease),background-color .2s ease}
.lmenu.open>a:nth-child(2){transition-delay:.04s,.04s,0s}.lmenu.open>a:nth-child(3){transition-delay:.08s,.08s,0s}
.tmenu a{transition:background-color .2s ease,color .2s ease,transform .3s var(--navease)}

@media (prefers-reduced-motion:reduce){.tl-ind,header.top,.tmenu,.tmenu .mcat,.tmenu .mall,.tbtn .car{transition:none!important}}