/* ===========================================================================
   THE RAIL + TOP BAR — desktop shell.

   2026-11-03 — rebuilt on the Gemini mock the owner picked ("I want this new
   look"): a full-width top bar carrying the logo, a wide search with a ⌘K
   hint and a Bout Simulator button, and under it a rail of icon links in
   four groups with a cyan active state.

   CYAN (--cy) IS CHROME, NEVER A NUMBER. Green (--accent) still only ever
   means Bout Scout's own number; the mock's cyan buttons, active rail item
   and chips are UI colour, so they get a colour of their own rather than
   borrowing green.

   Appears only at >=1080px. Below that the rail is display:none and the
   existing .topbar four-group nav carries navigation unchanged — that nav
   exists BECAUSE most visitors are on a phone. Nothing here changes the phone.
   =========================================================================== */
:root { --cy: #22d3ee; --cy-ink: #031418; --cy-dim: rgba(34, 211, 238, .12);
        --cy-line: rgba(34, 211, 238, .38); --shell-h: 68px; --rail-w: 232px; }

.bs-side { display: none; }
.ico { width: 16px; height: 16px; flex: 0 0 16px; display: inline-block; }
.brand-sub, .navsearch-k, .ico.navsearch-ico, .bs-simbtn { display: none; }

@media (min-width: 1080px) {
  /* ---- the top bar: full width, over the rail ---- */
  body:has(.bs-side) { padding-left: var(--rail-w); }
  body:has(.bs-side) .topbar {
    margin-left: calc(-1 * var(--rail-w));
    height: var(--shell-h); padding: 0 26px; flex-wrap: nowrap; gap: 22px;
    background: #070b12f2; border-bottom: 1px solid #172131;
  }
  body:has(.bs-side) .topbar > .mainnav { display: none; }
  .topbar .brand { display: inline-flex; flex-direction: column;
                   align-items: flex-start; gap: 6px; line-height: 1;
                   width: calc(var(--rail-w) - 26px); flex: 0 0 auto; }
  .topbar .brand-logo { height: 22px; }
  .brand-sub { display: block; font: 500 10.5px/1 var(--disp, inherit);
               letter-spacing: .04em; color: #8696a8; white-space: nowrap; }

  .topbar .navsearch { position: relative; flex: 1 1 auto; max-width: 600px;
                       margin-left: 0; }
  .navsearch-ico { display: block; position: absolute; left: 14px; top: 50%;
                   transform: translateY(-50%); color: #6f7f92;
                   pointer-events: none; }
  .topbar .navsearch input[type="search"] {
    height: 42px; padding: 0 56px 0 40px; border-radius: 10px;
    background: #0c1421; border: 1px solid #1c283a;
    font: 400 14px var(--disp, inherit); color: #e6edf5;
  }
  .topbar .navsearch input[type="search"]:focus {
    border-color: var(--cy-line); box-shadow: 0 0 0 3px var(--cy-dim);
  }
  .navsearch-k { display: block; position: absolute; right: 10px; top: 50%;
                 transform: translateY(-50%); pointer-events: none;
                 font: 600 10px/1 var(--mono); color: #7d8da0;
                 border: 1px solid #263346; border-radius: 6px; padding: 5px 6px;
                 background: #0f1828; }

  .bs-simbtn { display: inline-flex; align-items: center; gap: 9px;
               margin-left: auto; flex: 0 0 auto; height: 42px; padding: 0 18px;
               border-radius: 10px; background: var(--cy); color: var(--cy-ink);
               font: 800 12.5px/1 var(--mono); letter-spacing: .1em;
               text-transform: uppercase; text-decoration: none;
               box-shadow: 0 0 24px rgba(34, 211, 238, .28); }
  .bs-simbtn:hover { background: #67e8f9; color: var(--cy-ink); }
  .bs-simbtn .ico { width: 17px; height: 17px; }

  /* ---- the rail: under the bar, full height below it ---- */
  .bs-side {
    display: flex; flex-direction: column; gap: 20px;
    position: fixed; top: var(--shell-h); bottom: 0; left: 0;
    width: var(--rail-w); z-index: 30;
    padding: 20px 14px 18px;
    background: #070b12; border-right: 1px solid #172131;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .bs-side-nav { display: flex; flex-direction: column; gap: 2px; }
  .bs-side-h { font: 700 10.5px var(--mono); letter-spacing: .2em;
               text-transform: uppercase; color: #7a889a;
               padding: 20px 10px 8px; }
  .bs-side-h:first-child { padding-top: 0; }
  .bs-side-nav a { display: flex; align-items: center; gap: 12px;
                   padding: 10px 10px; border-radius: 10px;
                   font: 500 14.5px/1.2 var(--disp, inherit); color: #a9b6c4;
                   border: 1px solid transparent; text-decoration: none; }
  .bs-side-nav a .ico { color: #7d8b9c; width: 17px; height: 17px; }
  .bs-side-nav a span { flex: 1 1 auto; min-width: 0; }
  .bs-side-nav a:hover { color: #eef3f8; background: #0d1522; }
  .bs-side-nav a:hover .ico { color: #c5d0dc; }
  .bs-side-nav a.on { color: var(--cy); background: var(--cy-dim);
                      border-color: var(--cy-line); font-weight: 600;
                      box-shadow: inset 2px 0 0 var(--cy); }
  .bs-side-nav a.on .ico { color: var(--cy); }
  .bs-side-nav a:focus-visible { outline: 2px solid var(--cy);
                                 outline-offset: -2px; }

  .bs-badge { font: 700 10px/1 var(--mono); letter-spacing: .08em;
              font-style: normal; white-space: nowrap; }
  .bs-badge.live { color: var(--cy); background: rgba(34, 211, 238, .14);
                   border: 1px solid var(--cy-line); border-radius: 5px;
                   padding: 4px 6px; }
  /* the record is OUR result, so a gain wears our green */
  .bs-badge.up { color: var(--accent); }
  .bs-badge.dn { color: var(--red, #ff5a6e); }

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

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