/*
 * site-rail.css — SM-770: the ONE place for the admin sidebar's appearance.
 *
 * These rules used to be hand-copied into every page's stylesheet. They are now here once and linked by
 * every admin page BEFORE its own stylesheet, so each page's own responsive rule (the .shell collapse +
 * .rail{display:none} inside each page's media query, whose breakpoint differs per page) still wins by
 * source order. The colours come from each page's own design tokens (--hair, --panel, --muted, --ink,
 * --ink-2, --panel-2, --sel, --sel-ink), which resolve at computed-value time, so light/dark is handled
 * by the page's own :root and prefers-color-scheme rules with nothing duplicated here.
 *
 * .shell stays in each page's CSS: it is the page layout (it reserves the 208px rail column, which is
 * what keeps the rail from flashing/shifting on load) and its collapse is coupled to the page's own
 * responsive breakpoints.
 */
.rail{border-right:1px solid var(--hair);background:var(--panel);padding-block:18px;padding-inline:12px;display:flex;flex-direction:column;gap:2px}
.rail-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 10px 6px}
.rail a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:6px;color:var(--ink-2);text-decoration:none;font-size:14px}
.rail a:hover{background:var(--panel-2);color:var(--ink)}
.rail a[aria-current="page"]{background:var(--sel);color:var(--sel-ink);font-weight:600}