/* BL Guide: the nav rail, on its own.
   Extracted from home.css on 4 November 2026 so the pages still in the dossier layout can carry the same rail
   without inheriting the HUD palette: home.css redefines --ground, --ink, --mark and the rest, which would have
   repainted those pages. Every value here is explicit for that reason. Loaded after style.css by the generated
   pages; the HUD pages keep getting it from home.css, which is identical.
   The markup comes from index.html, copied at build time (see scripts/hud.mjs). */
.rail { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 17rem; background: oklch(0.135 0.005 250); border-right: 1px solid oklch(1 0 0 / .09); display: flex; flex-direction: column; }
.page { margin-left: 17rem; min-width: 0; }
.rail__scroll { overflow-y: auto; padding-bottom: 0.75rem; flex: 1; }
/* a 4 px dark scrollbar: Chromium ignores ::-webkit-scrollbar as soon as scrollbar-width is set, so the
   standard properties only go to browsers without the webkit pseudo elements (Firefox) */
.rail__scroll::-webkit-scrollbar { width: 4px; }
.rail__scroll::-webkit-scrollbar-track { background: transparent; }
.rail__scroll::-webkit-scrollbar-thumb { background: oklch(1 0 0 / .14); }
.rail__scroll:hover::-webkit-scrollbar-thumb { background: oklch(1 0 0 / .28); }
.rail__scroll::-webkit-scrollbar-button { display: none; height: 0; }
@supports not selector(::-webkit-scrollbar) { .rail__scroll { scrollbar-width: thin; scrollbar-color: oklch(1 0 0 / .2) transparent; } }

.scrim { display: none; position: fixed; inset: 0; z-index: 40; background: oklch(0.08 0.008 250 / 0.6); }
@media (max-width: 64rem) {
  .rail { transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.16,1,0.3,1); z-index: 41; }
  body.nav-open .rail { transform: none; }
  body.nav-open .scrim { display: block; }
  .page { margin-left: 0; }
}

.rl-head { display: flex; align-items: center; gap: .7rem; padding: 1rem 1rem .9rem; border-bottom: 1px solid oklch(1 0 0 / .09); }
.rl-home { display: flex; align-items: center; gap: .7rem; }
.rl-home img { width: 2.3rem; height: auto; }
.rl-home b { font-family: 'Archivo Black', system-ui, sans-serif; font-weight: 400; font-size: .95rem; color: oklch(0.975 0.004 250); text-transform: uppercase; letter-spacing: -0.01em; }
.rl-close { margin-left: auto; display: none; color: oklch(0.815 0.006 250); }
.gi { width: 1.25rem; height: 1.25rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rl-grp { padding: .85rem .6rem .3rem; }
.rl-grp + .rl-grp { border-top: 1px solid oklch(1 0 0 / .09); }
.rl-lab { padding: 0 .5rem .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: oklch(0.6 0 0); }
.rl-it { position: relative; overflow: hidden; display: flex; align-items: center; gap: .75rem; padding: .42rem .5rem; font-size: .9375rem; font-weight: 500; line-height: 1.35; color: oklch(0.78 0 0); text-decoration: none; }
.rl-it .gi { color: oklch(0.6 0 0); transition: color 450ms ease; }
.rl-beast .gi { color: oklch(0.68 0.18 28); }            /* anomalies: the one red thing, as danger is red in the game */
a.rl-it:hover { background: oklch(0.205 0.006 250); color: oklch(0.975 0.004 250); }
a.rl-it:hover .gi { color: oklch(0.82 0.12 210); transition-delay: 120ms; }
.rl-it[aria-current], a.rl-it[aria-current]:hover { background: oklch(0.975 0.004 250); color: oklch(0.12 0 0); font-weight: 600; }
.rl-it[aria-current] .gi, a.rl-it[aria-current]:hover .gi { color: oklch(0.12 0 0); }
.rl-later { color: oklch(0.5 0 0); }
.rl-later .gi { color: oklch(0.42 0 0); }
.rl-tag { margin-left: auto; font-size: .6875rem; font-weight: 600; color: oklch(0.5 0 0); white-space: nowrap; }
.rl-foot { display: flex; flex-wrap: wrap; gap: .45rem; padding: .85rem 1rem 1rem; border-top: 1px solid oklch(1 0 0 / .09); }
.rl-btn { position: relative; overflow: hidden; flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem .5rem; border: 1px solid oklch(1 0 0 / .2); font-size: .8125rem; font-weight: 600; color: oklch(0.78 0 0); text-decoration: none; }
.rl-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; flex: none; }
.rl-btn:hover { color: oklch(0.975 0.004 250); border-color: oklch(0.78 0 0); }
.rl-steam:hover { background: oklch(0.25 0.04 250); }
.rl-discord:hover { background: oklch(0.36 0.12 275); border-color: oklch(0.55 0.15 275); }
.rl-u { flex-basis: 100%; margin-top: .2rem; text-align: center; font-size: .75rem; color: oklch(0.6 0 0); }
/* hover: one slow scan sweeps the row, like the PDA reading a target. A single pass that fades in and out */
a.rl-it::after, .rl-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none; opacity: 0; translate: -100% 0;
  background: linear-gradient(90deg, transparent 0, oklch(0.82 0.12 210 / .06) 55%, oklch(0.82 0.12 210 / .22) 92%, oklch(0.88 0.09 210 / .55) 100%); }
a.rl-it:hover::after, .rl-btn:hover::after, a.rl-it:focus-visible::after { animation: rl-scan 950ms cubic-bezier(.45, 0, .2, 1); }
@keyframes rl-scan { 0% { translate: -100% 0; opacity: 0; } 18% { opacity: 1; } 80% { opacity: 1; } 100% { translate: 170% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { a.rl-it::after, .rl-btn::after { display: none; } }
@media (max-width: 64rem) { .rl-close { display: block; } }

/* the phone bar that opens the drawer, for pages that have no top bar of their own */
.railbar { display: none; position: sticky; top: 0; z-index: 35; align-items: center; gap: .75rem; padding: .55rem 1rem; background: oklch(0.11 0.004 250 / .92); backdrop-filter: blur(10px); border-bottom: 1px solid oklch(1 0 0 / .09); }
.railbar img { width: 1.9rem; height: auto; }
.railbar button { display: inline-flex; padding: .2rem; border: 0; background: none; color: oklch(0.975 0.004 250); cursor: pointer; }
.railbar span { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: oklch(0.6 0 0); }
@media (max-width: 64rem) { .railbar { display: flex; } }