/* ===========================================================================
   THE RAIL — desktop shell for the 2026-08-23 redesign.

   Appears only at >=1080px. Below that it is display:none and the existing
   .topbar four-group nav carries navigation unchanged — that nav exists
   BECAUSE most visitors are on a phone, and replacing it with a drawer would
   trade a proven pattern for a hamburger. Nothing here touches the phone.

   At >=1080px the topbar keeps only the search field: the rail owns the brand
   and the links, and two stacked navigations would be clutter. Search stays
   because losing it on desktop would be a regression, not a redesign.
   =========================================================================== */
.bs-side { display: none; }

@media (min-width: 1080px) {
  .bs-side {
    display: flex; flex-direction: column; gap: 24px;
    position: fixed; inset: 0 auto 0 0; width: 178px; z-index: 30;
    padding: 22px 0 18px;
    background: #080b11; border-right: 1px solid #16202b;
    overflow-y: auto; overscroll-behavior: contain;
  }
  body:has(.bs-side) { padding-left: 178px; }

  .bs-side-brand { display: flex; align-items: center; gap: 9px;
                   padding: 0 16px; color: inherit; text-decoration: none; }
  .bs-side-brand img { width: 26px; height: 26px; flex: 0 0 26px; display: block; }
  .bs-side-wm { font-size: 13px; }

  .bs-side-nav { display: flex; flex-direction: column; }
  .bs-side-h { font: 500 10px var(--mono); letter-spacing: .16em;
               text-transform: uppercase; color: #8b98a6;
               padding: 18px 18px 7px; }
  .bs-side-h:first-child { padding-top: 0; }
  .bs-side-nav a { padding: 7px 18px; font-size: 14px; color: #9aa7b4;
                   border-left: 2px solid transparent; text-decoration: none; }
  .bs-side-nav a:hover { color: var(--text); background: #0d1520; }
  .bs-side-nav a.on { color: var(--text); background: #0d1520;
                      border-left-color: var(--accent); }
  .bs-side-nav a:focus-visible { outline: 2px solid var(--accent);
                                 outline-offset: -2px; }

  .bs-side-foot { margin-top: auto; padding: 0 18px;
                  font: 500 9px/1.7 var(--mono); letter-spacing: .1em;
                  color: #6f7d8b; }

  /* The topbar sheds brand + nav and keeps only search — but ONLY once the
     rail is actually in the DOM. Static files go live the moment they land on
     the server, while templates stay cached until the service restarts, so
     between those two moments prod serves OLD markup with THIS stylesheet.
     Without the :has() guard that window would leave desktop visitors with no
     navigation at all. With it, old markup is untouched. */
  body:has(.bs-side) .topbar > .brand,
  body:has(.bs-side) .topbar > .mainnav { display: none; }
  body:has(.bs-side) .topbar { justify-content: flex-end;
                               border-bottom: 1px solid #16202b; }
}

/* honour a reduced-motion preference for the rail's hover transitions */
@media (prefers-reduced-motion: reduce) { .bs-side * { transition: none !important; } }