/* Vibel's page-stack control: a small reversible movement, tied to real state. */
:root { --motion-press: 100ms; --motion-control: 180ms; --motion-panel: 260ms; --motion-ease: cubic-bezier(.2,.75,.25,1); }
#railtoggle {
  position: relative; display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; flex: none; border: 1px solid var(--nav-line);
  border-radius: .875rem; color: var(--nav-ink); background: var(--nav-canvas);
  box-shadow: none; transition: color var(--motion-control), background-color var(--motion-control), border-color var(--motion-control), transform var(--motion-press);
}
#railtoggle[aria-expanded="true"] { color: var(--nav-accent); background: var(--nav-selected); border-color: color-mix(in srgb, var(--nav-accent) 42%, var(--nav-line)); }
#railtoggle:active { transform: scale(.96); }
#railtoggle:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 3px; }
.navglyph { position: relative; display: block; width: 24px; height: 24px; }
.navglyph__line { display: block; position: absolute; left: 3px; height: 2px; border-radius: 2px; background: currentColor; transform-origin: 50% 50%; transition: transform var(--motion-panel) var(--motion-ease), opacity var(--motion-control), width var(--motion-control); }
.navglyph__line--top { top: 5px; width: 18px; }
.navglyph__line--middle { top: 11px; width: 14px; }
.navglyph__line--bottom { top: 17px; width: 10px; }
.navglyph__dot { position: absolute; right: 3px; top: 16px; width: 4px; height: 4px; border-radius: 50%; background: var(--nav-accent); transition: transform var(--motion-panel), opacity var(--motion-control); }
.navglyph__spine { position: absolute; top: 3px; left: 2px; width: 2px; height: 18px; border-radius: 2px; background: currentColor; opacity: 0; transform: scaleY(.5); transition: opacity var(--motion-control), transform var(--motion-panel) var(--motion-ease); }
#railtoggle[aria-expanded="true"] .navglyph__line--top { width: 18px; transform: translateY(6px) rotate(45deg); }
#railtoggle[aria-expanded="true"] .navglyph__line--middle { opacity: 0; transform: translateX(4px) scaleX(.3); }
#railtoggle[aria-expanded="true"] .navglyph__line--bottom { width: 18px; transform: translateY(-6px) rotate(-45deg); }
#railtoggle[aria-expanded="true"] .navglyph__dot { opacity: 0; transform: scale(.3); }
@media (min-width: 941px) {
  #railtoggle[aria-expanded="true"] .navglyph__spine { opacity: 1; transform: scaleY(1); }
  #railtoggle[aria-expanded="true"] .navglyph__line--top { width: 10px; transform: translate(4px,3px) rotate(-45deg); }
  #railtoggle[aria-expanded="true"] .navglyph__line--middle { width: 12px; opacity: 1; transform: translateX(6px); }
  #railtoggle[aria-expanded="true"] .navglyph__line--bottom { width: 10px; transform: translate(4px,-3px) rotate(45deg); }
}
@media (hover:hover) { #railtoggle:hover { border-color: var(--nav-accent); } }
@media (prefers-reduced-motion: reduce) {
  #railtoggle, .navglyph * { transition: none; }
  #railtoggle:active { transform: none; }
}