/* The left navigation rail, shared by every console page.
   ---------------------------------------------------------------------------
   One stylesheet and one script rather than the same markup pasted into four
   pages: a nav item added in one place would otherwise go missing from the
   others, and a page whose nav disagrees with its neighbours is worse than no
   nav at all.

   Every class here carries a `rail-` prefix, and every rule is scoped under
   #rail. Not decoration: each console ships its own full stylesheet with plain
   names — `.foot`, `.dot`, `.brand`, `.item` — and an unprefixed rail class
   inherits whatever that page happens to mean by it. `.dot` on the B2B console
   is a step marker with its own `display`, which beat `[hidden]` and printed a
   grey blob beside every nav item until these names were made unshareable.

   Colours reuse each page's variables with the shipped values as fallbacks, so
   this stays correct if a page is themed and still renders if one is not. */

:root{ --rail-w:238px }

body{ padding-left:var(--rail-w) }

/* --------------------------------------------------------------------- rail */
#rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail-w); z-index:60;
  display:flex; flex-direction:column;
  background:var(--navy,#0b2440); color:#cfe0ef;
  font:14px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* A page's own rules cannot reach in here, but its `display` could still revive
   something this script has hidden. It stays hidden. */
#rail [hidden]{ display:none !important }

#rail .rail-brand{
  display:flex; align-items:center; gap:10px; padding:15px 16px;
  border-bottom:1px solid #1c3a56; color:#fff; text-decoration:none;
}
#rail .rail-mark{
  width:30px; height:30px; border-radius:9px; background:#12b76a; color:#062b18;
  display:grid; place-items:center; font-size:12.5px; font-weight:800; flex:0 0 auto;
}
#rail .rail-nm{ display:block; font-weight:800; font-size:14px; letter-spacing:-.01em; line-height:1.25 }
#rail .rail-sub{ display:block; font-weight:500; font-size:11.5px; color:#8fb0cc; letter-spacing:0 }

#rail nav{ flex:1; overflow-y:auto; padding:14px 10px 10px }
#rail .rail-grp{ display:block; margin:0 0 18px }
#rail .rail-grp > p{
  margin:0 0 7px; padding:0 8px; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:#6f92b2;
}
#rail ul{ display:block; list-style:none; margin:0; padding:0 }
#rail li{ display:block; margin:1px 0; padding:0; border:0 }

#rail a.rail-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  color:#cfe0ef; text-decoration:none; font-size:13.5px; font-weight:500;
  transition:background .12s, color .12s;
}
#rail a.rail-item:hover{ background:#14304c; color:#fff }
#rail a.rail-item.rail-on{ background:#1a3e60; color:#fff; font-weight:700 }
#rail a.rail-item svg{ width:16px; height:16px; flex:0 0 auto; stroke:currentColor; fill:none;
                       stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.9 }
#rail a.rail-item.rail-on svg{ opacity:1 }
#rail .rail-lb{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* A segment that cannot quote says so in the nav, not only once you open it. */
#rail .rail-dot{
  display:inline-block; flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; padding:2px 6px; border-radius:5px;
  background:#4a3a1c; color:#f0c674;
}

/* ------------------------------------------------------------------- footer */
#rail .rail-foot{ display:block; border-top:1px solid #1c3a56; padding:12px 14px;
                  font-size:11.5px; color:#8fb0cc; margin:0; max-width:none }
#rail .rail-st{ display:flex; align-items:center; gap:7px; line-height:1.5 }
#rail .rail-led{ width:7px; height:7px; border-radius:50%; background:#6f92b2; flex:0 0 auto }
#rail .rail-led.rail-ok{ background:#12b76a }
#rail .rail-led.rail-bad{ background:#f97066 }
#rail .rail-ver{ display:block; margin-top:4px;
                 font:10.5px/1.6 var(--mono,ui-monospace,Consolas,monospace); color:#6f92b2 }

/* ------------------------------------------------------- narrow: off-canvas */
#railBtn{ display:none }
#railScrim{ display:none }

@media(max-width:900px){
  body{ padding-left:0 }
  #rail{ transform:translateX(-100%); transition:transform .18s ease;
         box-shadow:0 0 40px rgba(0,0,0,.4) }
  body.rail-open #rail{ transform:none }

  #railBtn{
    display:grid; place-items:center; position:fixed; top:10px; left:10px; z-index:70;
    width:38px; height:38px; border:0; border-radius:10px; cursor:pointer;
    background:#14304c; color:#fff;
  }
  #railBtn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9;
                stroke-linecap:round }
  /* Once the rail is over the page the button would sit on top of its own brand.
     The scrim and Escape close it, which is what a reader reaches for anyway. */
  body.rail-open #railBtn{ display:none }
  /* the page header starts after the button rather than under it */
  .top{ padding-left:60px !important }

  body.rail-open #railScrim{
    display:block; position:fixed; inset:0; z-index:55; background:rgba(4,15,26,.5);
  }
}

@media print{ #rail, #railBtn, #railScrim{ display:none } body{ padding-left:0 } }