/* The left rail, the same on every page (drawn by ui/nav.js). Fixed, so it never scrolls away. */
.side.rail { position: fixed; left: 0; top: 0; bottom: 0; width: 72px; height: auto; z-index: 40; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 112px 0 24px; overflow-y: auto;
  border-right: 1px solid var(--glass-line, rgba(46, 36, 110, .12)); background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: var(--glass-blur, blur(14px)); backdrop-filter: var(--glass-blur, blur(14px));
  box-shadow: 1px 0 0 var(--glass-rule, transparent), 10px 0 32px -22px rgba(46, 36, 110, 0.22); }
.side.rail .side-btn { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md, 12px);
  color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: none; }
.side.rail .side-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side.rail .side-btn:hover { background: var(--glass-strong, #fff); color: var(--primary); }
.side.rail .side-btn.active { background: color-mix(in srgb, var(--primary) 11%, transparent); color: var(--primary); box-shadow: inset 0 0 0 1px var(--glass-rule, rgba(76, 61, 168, .15)); }
.side.rail .side-btn.bottom { margin-top: auto; }
.shell:has(> .side.rail) { display: block; padding-left: 72px; }
body.rail-added { padding-left: 72px; }

@media (max-width: 700px) {
  .side.rail { top: auto; right: 0; width: auto; flex-direction: row; justify-content: space-around; gap: 0; padding: 6px 8px;
    border-right: 0; border-top: 1px solid var(--glass-line, rgba(46, 36, 110, .12)); background: rgba(255, 255, 255, 0.92); overflow: visible; }
  .side.rail .side-btn { width: 40px; height: 40px; }
  .side.rail .side-btn.bottom { margin-top: 0; }
  .shell:has(> .side.rail), body.rail-added { padding-left: 0; padding-bottom: 60px; }
}
@media print { .side.rail { display: none; } .shell:has(> .side.rail), body.rail-added { padding: 0; } }
.sessionbar { position: relative; z-index: 41; }   /* the website's session bar stays above the rail */
.side.rail .side-btn.bottom ~ .side-btn.bottom { margin-top: 0; }   /* restart + voice sit together at the bottom */