/* The slider: a panel from the right, over a soft shade. Shared by summaries and departments. */
html.slid { overflow: hidden; }
.slider-shade { position: fixed; inset: 0; z-index: 30; background: rgba(10, 21, 48, .45); opacity: 0; transition: opacity .25s; }
.slider-shade.in { opacity: 1; }
.slider { position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; width: min(600px, 100vw); display: flex; flex-direction: column; background: var(--page); color: var(--ink); box-shadow: -30px 0 60px -30px rgba(10, 21, 48, .6); transform: translateX(100%); transition: transform .26s cubic-bezier(.3, .7, .2, 1); outline: none; }
.slider.in { transform: none; }
.slider-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--line); }
.slider-label { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slider-btn { min-width: 44px; height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: 14px; }
.slider-btn:hover { border-color: var(--gold); color: var(--ink); }
.slider-btn.x { padding: 0; font-size: 24px; line-height: 1; }
.slider-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 28px 24px 40px; }
@media (max-width: 760px) {
  .slider-body { padding: 22px 16px 32px; }
}