/* navigation */
.navbtn{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--md-on-surface-variant);
  flex:1;max-width:120px;padding:12px 0}
.navbtn .pill{width:64px;height:32px;border-radius:16px;display:grid;place-items:center;transition:background var(--dur-sheet) var(--ease-standard)}
.navbtn.on .pill{background:var(--md-secondary-container)}
.navbtn.on{color:var(--md-on-surface)}
.navbtn.on .pill svg{stroke:var(--md-on-secondary-container)}
.navbtn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.navbtn span{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.5px}
/* ================= drawer ================= */
#scrim{position:fixed;inset:0;z-index:55;background:color-mix(in srgb,var(--md-scrim) 55%,transparent);display:none}
#scrim.open{display:block}
#drawer{
  position:fixed;top:0;bottom:0;left:0;width:min(360px,86vw);z-index:56;
  background:var(--md-surface-container-low);padding:12px;overflow-y:auto;
  transform:translateX(-102%);transition:transform var(--dur-nav) var(--ease-nav);border-radius:0 16px 16px 0;
}
#drawer.open{transform:none}
#drawer .brand{font-size:22px;line-height:28px;font-weight:700;padding:16px 16px 18px;color:var(--md-on-surface)}
.ditem{display:flex;align-items:center;gap:12px;height:56px;padding:0 24px;border-radius:28px;width:100%;
  font-size:14px;font-weight:500;letter-spacing:.1px;color:var(--md-on-surface-variant)}
.ditem:hover{background:color-mix(in srgb,var(--md-on-surface) 7%,transparent)}
.ditem.on{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.ditem svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}