/* Left icon rail (preview, 2026-10-09 — Willis picked option A: "side bar that you click and opens narrow").
   Turns the existing .nav-row2 tab row into a fixed 72 px icon rail on screens wider than 1000 px; ☰ expands it to 220 px
   over the page. Same <nav class="lkdock"> links as every page, so the header gate stays green. Loaded only by pages that opt in
   (body.has-rail is added by rail.js). Under 1000 px the old phone menu is used, as before. */
.rail-toggle, .rail-scrim { display: none; }   /* phones and narrow windows: the old ☰ phone menu runs, the rail adds nothing */
:root { --rail-w: 72px; --rail-open-w: 300px; --rail-bg: #1c2533; --rail-ink: #e6e9f7; --rail-gold: #ffc800; }
@media (min-width: 1001px) {
  body.has-rail { padding-left: var(--rail-w); }
  body.has-rail .nav-row2 { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); z-index: 60; background: var(--rail-bg);
    border-top: 0; border-right: 1px solid rgba(255,255,255,.10); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
    transition: width .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; scrollbar-width: thin; }
  body.has-rail .nav-row2-in { display: block; max-width: none; padding: 0; margin: 0; min-height: 0; width: 100%; }
  body.has-rail .nav-row2 .lkdock { display: block; }
  body.has-rail .nav-row2 .lkdock .bar { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 0 16px; }
  body.has-rail .nav-row2 .lkdock a { flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 10px 2px 9px;
    font-size: 10.5px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--rail-ink); border-bottom: 0; border-left: 3px solid transparent;
    white-space: normal; overflow-wrap: anywhere; }
  body.has-rail .nav-row2 .lkdock a .ic .icn { width: 22px; height: 22px; }
  body.has-rail .nav-row2 .lkdock a:hover { background: rgba(255,255,255,.07); border-bottom-color: transparent; border-left-color: rgba(255,200,0,.55); color: #fff; }
  /* styles.css forces a 3 px gold UNDERLINE on the current tab with !important (line ~2344); the rail marks it on the LEFT instead */
  body.has-rail .nav-row2 .lkdock a.here { color: var(--rail-gold); background: rgba(255,200,0,.08); border: 0 !important; border-left: 3px solid var(--rail-gold) !important; }
  body.has-rail .nav-row2 .lkdock a:focus-visible { outline: 3px solid var(--rail-gold); outline-offset: -3px; }
  /* long tab names ("Arcade Redemption Center") show only the key word in the narrow rail, the full name when opened */
  body.has-rail:not(.rail-open) .nav-row2 .lkdock .rl-x { display: none; }
  body.has-rail .nav-row2 .nav-note, body.has-rail .nav-row2 .nav-cta { display: none; }
  /* dropdowns (Tools, About): fly out to the right of the rail */
  body.has-rail .nav-row2 .lkdock .dd { position: static; display: block; }
  body.has-rail .nav-row2 .lkdock .dd > a::after { display: none; }
  body.has-rail .nav-row2 .lkdock .dd-menu { position: fixed; left: calc(var(--rail-w) + 4px); top: 8px; transform: none; margin-top: 0; min-width: 230px; max-height: calc(100vh - 16px); overflow-y: auto; }   /* rail.js sets top beside the tab */
  body.has-rail .nav-row2 .lkdock .dd-menu a { flex-direction: row; justify-content: flex-start; text-align: left; font-size: 13.5px; padding: 9px 12px; border-left: 0; }
  /* the ☰ toggle at the top of the rail */
  body.has-rail .rail-toggle { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 14px 0 10px; background: none; border: 0;
    border-bottom: 1px solid rgba(255,255,255,.10); color: #fff; font: 600 10.5px/1 var(--font, Inter, system-ui, sans-serif); cursor: pointer; }
  body.has-rail .rail-toggle span { font-size: 22px; line-height: 1; }
  body.has-rail .rail-toggle:hover { background: rgba(255,255,255,.07); }
  body.has-rail .rail-toggle:focus-visible { outline: 3px solid var(--rail-gold); outline-offset: -3px; }
  /* expanded: 228 px with labels in a row, sliding OVER the page (content does not move) */
  body.has-rail.rail-open .nav-row2 { width: var(--rail-open-w); box-shadow: 8px 0 30px rgba(0,0,0,.35); }
  body.has-rail.rail-open .rail-toggle { flex-direction: row; justify-content: flex-start; gap: 12px; padding-left: 22px; font-size: 14px; }
  body.has-rail.rail-open .nav-row2 .lkdock a { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 11px 18px; font-size: 14px; text-align: left; white-space: nowrap; }
  body.has-rail.rail-open .nav-row2 .lkdock .dd-menu { position: static; display: block; opacity: 1; visibility: visible; pointer-events: auto; margin: 0 0 4px 30px; min-width: 0;
    background: none; border: 0; box-shadow: none; padding: 0; }
  body.has-rail.rail-open .nav-row2 .lkdock .dd-menu a { font-size: 13px; padding: 7px 12px; color: #c9cfe6; white-space: normal; }
  .rail-scrim { display: none; }
  body.has-rail.rail-open .rail-scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(5,10,30,.35); }
}
/* Arcade (Willis 2026-10-10: "we have two left bars, how can we fix this for arcade?" — picked "top row of tabs"):
   with the site rail on the left, the Arcade's own category list becomes one row of icon tabs across the top (as on phones). */
@media (min-width: 1001px) {
  body.has-rail .ar-wrap { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  body.has-rail .ar-rail { position: static; max-height: none; padding: 6px 0 2px; overflow: visible; }
  body.has-rail .ar-rail nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  body.has-rail .ar-rail-group { display: flex; flex-wrap: wrap; gap: 6px; }
  body.has-rail .ar-rail-sep { width: 1px; height: 26px; margin: 0 4px; }
  body.has-rail .ar-rail-item { gap: 8px; padding: 8px 13px; font-size: 13.5px; white-space: nowrap; border-radius: 999px; background: #10131c; border: 1px solid #262a3a; }
  body.has-rail .ar-rail-item:hover { border-color: #4a4f6a; }
  body.has-rail .ar-rail-item.on { border-color: #8055ff; }
  body.has-rail .ar-rail-item.on::before { display: none; }
  body.has-rail .ar-rail-item .ar-ic { width: 18px; height: 18px; }
}
@media (min-width: 1001px) and (prefers-reduced-motion: reduce) { body.has-rail .nav-row2 { transition: none; } }