/* ============================================================================
   SITE MENU - the left sidebar in the style of seekingalpha.com
   Markup: themes/public/active/sitenav.theme.php ($Sidebar_Nav_On in
   global.inc.php). Behaviour: sitenav.js. Loaded only while the switch is on.

   From 1024px: a fixed 240px near-black sidebar, logo on top. Its square
   button collapses it to a 64px rail of icons (html.fs-sb-rail, kept per
   visitor); pointing at the rail opens the whole sidebar over the page
   (html.fs-sb-peek). Below 1024px: a bar with the hamburger beside the logo
   in the header; the hamburger slides the sidebar in over everything, logo
   at its top (html.fs-sb-open).

   html.fs-sb-on is set by the inline script that moves the sidebar to the
   start of <body>; body:where(:has(#fs-sb)) repeats the layout without it.

   Colours: hybrid is the base (near-black, the owner's pick), light restates
   them for a pale chrome, dark keeps the base. Every colour is a token below.
   ============================================================================ */

:root{
  --fs-sb-w:240px;
  --fs-sb-rail:64px;
  --fs-sb-bar-h:56px;
  --fs-sb-z:1090;

  --fs-sb-bg:#05080b;
  --fs-sb-ink:#eef2f7;
  --fs-sb-ink-2:rgba(238,242,247,.56);
  --fs-sb-ico:rgba(238,242,247,.80);
  --fs-sb-line:rgba(255,255,255,.16);
  --fs-sb-hover:rgba(255,255,255,.08);
  --fs-sb-active:rgba(255,255,255,.12);
  --fs-sb-btn:#50565c;
  --fs-sb-btn-ink:#ffffff;
  --fs-sb-accent:#3d8bfd;
  --fs-sb-edge:1px 0 0 rgba(255,255,255,.06);
  --fs-sb-thumb:rgba(255,255,255,.26);
  --fs-sb-focus:#52f2c4;
}
html[data-fs-theme="light"]{
  --fs-sb-bg:var(--search-bg);
  --fs-sb-ink:#17202c;
  --fs-sb-ink-2:#5d6878;
  --fs-sb-ico:#46536a;
  --fs-sb-line:rgba(15,23,42,.11);
  --fs-sb-hover:rgba(15,23,42,.06);
  --fs-sb-active:rgba(15,23,42,.08);
  --fs-sb-btn:rgba(15,23,42,.10);
  --fs-sb-btn-ink:#17202c;
  --fs-sb-accent:#0d6efd;
  --fs-sb-edge:1px 0 0 rgba(15,23,42,.10);
  --fs-sb-thumb:rgba(15,23,42,.28);
  --fs-sb-focus:#0f8f77;
}
/* Dark keeps the base near-black: it already sits under the dark content. */

/* ------------------------------------------------------------- sidebar */
#fs-sb{
  position:fixed; top:0; bottom:0; left:0; z-index:var(--fs-sb-z);
  width:var(--fs-sb-w);
  display:flex; flex-direction:column;
  background:var(--fs-sb-bg); color:var(--fs-sb-ink);
  box-shadow:var(--fs-sb-edge);
  font-family:var(--font-sans); font-size:14px; line-height:1.3;
  transition:transform .22s ease, width .18s ease, visibility 0s;
}
#fs-sb *{ box-sizing:border-box; }
#fs-sb a{ text-decoration:none !important; }
#fs-sb :focus-visible{ outline:2px solid var(--fs-sb-focus); outline-offset:-2px; }

.fs-sb-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  height:50px; margin-bottom:12px; padding:18px 0 0 14px;
}
.fs-sb-logo{ display:flex; align-items:center; flex:1 1 auto; height:32px; min-width:0; }
/* Height and width are both caps, never set: a long logo scales down whole
   instead of being squeezed sideways. */
.fs-sb-logo img{ display:block; width:auto; height:auto; max-height:27px; max-width:100%; object-fit:contain; }
.fs-sb-mark{ display:none; }
.fs-sb-mark img{ display:block; width:34px; height:34px; border-radius:9px; }
.fs-sb-chev{
  flex:0 0 auto; width:24px; height:24px; padding:0; border:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--fs-sb-btn); color:var(--fs-sb-btn-ink); cursor:pointer;
}
.fs-sb-chev .ico{ width:18px; height:18px; }
.fs-sb-chev .fs-sb-r{ display:none; }

.fs-sb-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:0 0 14px;
  scrollbar-width:thin; scrollbar-color:var(--fs-sb-thumb) transparent;
  overscroll-behavior:contain;
}
.fs-sb-scroll::-webkit-scrollbar{ width:6px; }
.fs-sb-scroll::-webkit-scrollbar-thumb{ background:var(--fs-sb-thumb); border-radius:3px; }

.fs-sb-sep{ height:1px; margin:9px 12px; background:var(--fs-sb-line); }

.fs-sb-item,
.fs-sb-kit .dropdown-item{
  position:relative;
  display:flex; align-items:center; gap:10px;
  width:100%; height:32px; margin:0; padding:0 12px 0 14px;
  border:0; border-radius:0; background:transparent; text-align:left; cursor:pointer;
  color:var(--fs-sb-ink) !important; font:400 14px/1.3 var(--font-sans); white-space:nowrap;
  transition:background .12s ease;
}
.fs-sb-item .ico,
.fs-sb-kit .dropdown-item svg{ flex:0 0 16px; width:16px; height:16px; margin:0 !important; color:var(--fs-sb-ico); }
.fs-sb-item:hover,
.fs-sb-kit .dropdown-item:hover,
.fs-sb-kit .dropdown-item:focus{ background:var(--fs-sb-hover); }
.fs-sb-item.is-on{ background:var(--fs-sb-active); font-weight:600; }
.fs-sb-item.is-on::before{
  content:""; position:absolute; left:0; top:5px; bottom:5px; width:3px;
  border-radius:0 3px 3px 0; background:var(--fs-sb-accent);
}
.fs-sb-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.fs-sb-kit{ list-style:none; margin:0; padding:0; }
.fs-sb-kit li:has(> hr), .fs-sb-kit hr{ display:none; }

[data-fs-sb-railonly]{ display:none !important; }

.fs-sb-heading{
  display:flex; align-items:center; gap:10px;
  height:30px; padding:0 12px 0 14px;
  color:var(--fs-sb-ink-2); font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
.fs-sb-heading .ico{ flex:0 0 16px; width:16px; height:16px; }

.fs-sb-legal{ margin:0; padding:8px 14px 0; font-size:11.5px; line-height:1.7; color:var(--fs-sb-ink-2); }
.fs-sb-legal a{ color:var(--fs-sb-ink-2) !important; }
.fs-sb-legal a:hover{ color:var(--fs-sb-ink) !important; text-decoration:underline !important; }

.fs-sb-foot{ flex:0 0 auto; padding:10px 12px 12px; border-top:1px solid var(--fs-sb-line); }
.fs-sb-seg{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:2px;
  border-radius:8px; background:var(--fs-sb-hover);
}
.fs-sb-seg button{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  height:28px; padding:0; border:0; border-radius:6px; background:transparent;
  color:var(--fs-sb-ink-2); font:500 12px/1 var(--font-sans); cursor:pointer;
}
.fs-sb-seg button svg{ width:14px; height:14px; }
.fs-sb-seg button[aria-checked="true"]{ background:var(--fs-sb-active); color:var(--fs-sb-ink); box-shadow:inset 0 0 0 1px var(--fs-sb-line); }
.fs-sb-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:0; border-radius:8px;
  background:transparent; color:var(--fs-sb-ink); cursor:pointer;
}
.fs-sb-iconbtn .fs-theme-ico svg{ width:21px; height:21px; }
.fs-sb-foot .fs-sb-one{ display:none; }

/* Topic tree (sidebar.theme.php), restyled to the menu's rows ------------ */
#fs-sb .sn-sidebar{
  position:static !important; inset:auto !important; transform:none !important;
  width:auto !important; max-width:none !important;
  height:auto !important; max-height:none !important; overflow:visible !important;
  background:transparent !important; box-shadow:none !important; z-index:auto !important;
  visibility:visible !important;
}
#fs-sb .sn-caption,
#fs-sb .sn-oc-header,
#fs-sb .sn-sort-label{ display:none !important; }
/* the page's own sort buttons, at the top of the list */
#fs-sb .sn-sort{
  display:flex !important; flex-wrap:nowrap; align-items:center; gap:4px;
  margin:0 !important; padding:2px 8px 10px 14px !important; border:0 !important;
  background:transparent !important;
}
#fs-sb .sn-sort-btn{ font-size:11.5px !important; padding:3px 7px !important; line-height:1.3 !important; white-space:nowrap; }
#fs-sb .sn-sidebar li{ border:0 !important; }
#fs-sb .sn-sidebar .sn-menu-item{
  position:relative; margin:0 !important; border-radius:0 !important;
  min-height:32px; padding:0 4px 0 calc(14px + var(--sn-depth, 0) * 14px) !important;
  background:transparent !important;
}
#fs-sb .sn-sidebar .sn-menu-item:hover{ background:var(--fs-sb-hover) !important; }
#fs-sb .sn-sidebar .sn-link{ padding:0 !important; }
#fs-sb .sn-sidebar .sn-icon.ico{
  width:16px !important; height:16px !important; margin-right:10px !important;
  opacity:1 !important; color:var(--fs-sb-ico) !important;
}
#fs-sb .sn-sidebar .sn-text,
#fs-sb .sn-sidebar .sn-submenu a .sn-text{
  font-size:14px !important; font-weight:400 !important; letter-spacing:0 !important;
  color:var(--fs-sb-ink) !important;
}
#fs-sb .sn-sidebar .sn-submenu .sn-text{ color:var(--fs-sb-ink-2) !important; }
#fs-sb .sn-sidebar .sn-link:hover .sn-text{ color:var(--fs-sb-ink) !important; text-decoration:underline; }
#fs-sb .sn-sidebar .icon-arrow-down,
#fs-sb .sn-sidebar .icon-arrow-up{ width:22px !important; height:22px !important; opacity:.5; }
#fs-sb .sn-sidebar .sn-submenu-icon{ color:var(--fs-sb-ink) !important; }
#fs-sb .sn-sidebar .sn-submenu,
#fs-sb .sn-sidebar .sn-submenu li a{ background:transparent !important; }
#fs-sb .sn-sidebar li.active-row > .sn-menu-item{ background:var(--fs-sb-active) !important; }
#fs-sb .sn-sidebar li.active-row > .sn-menu-item::before{
  content:""; position:absolute; left:0; top:5px; bottom:5px; width:3px;
  border-radius:0 3px 3px 0; background:var(--fs-sb-accent);
}
#fs-sb .sn-sidebar li.active-row > .sn-menu-item .sn-text{ font-weight:600 !important; }
#fs-sb .sn-sidebar li.active-row > .sn-menu-item .sn-icon,
#fs-sb .sn-sidebar li.active-row > .sn-menu-item .sn-submenu-icon{ color:var(--fs-sb-ink) !important; }

/* ----------------------------------------------- bar (below 1024px) */
#fs-sb-bar{
  display:none; position:relative; z-index:3;
  align-items:center; gap:4px;
  height:var(--fs-sb-bar-h); padding:0 6px 0 4px;
  color:var(--fs-sb-ink); font-family:var(--font-sans);
}
/* it sits in the header and takes the header's own paint */
#search-header #fs-sb-bar{ color:#eef2f7; }
html[data-fs-theme="light"] #search-header #fs-sb-bar{ color:var(--fs-chrome-ink, #17202c); }
.fs-sb-burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:0; border-radius:8px;
  background:transparent; color:inherit; cursor:pointer;
}
.fs-sb-burger .ico{ width:26px; height:26px; }
.fs-sb-bar-logo{ display:flex; align-items:center; flex:0 1 auto; height:44px; min-width:0; }
.fs-sb-bar-logo img{ display:block; width:auto; height:auto; max-height:21px; max-width:min(200px, 100%); object-fit:contain; }
.fs-sb-bar-theme{ margin-left:auto; color:inherit; }
#fs-sb-bar :focus-visible{ outline:2px solid var(--fs-sb-focus); outline-offset:-2px; }

/* white logos, drawn for a dark band: darkened in light mode as the header does */
html[data-fs-theme="light"] .fs-sb-logo img,
html[data-fs-theme="light"] .fs-sb-bar-logo img{ filter:invert(1) hue-rotate(180deg); }

#fs-sb-backdrop{
  position:fixed; inset:0; z-index:calc(var(--fs-sb-z) - 1);
  background:rgba(4,8,14,.52);
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility 0s linear .22s;
}

/* ------------------------------------------------- the page underneath */
html.fs-sb-on [data-sn-oc-toggle]{ display:none !important; }
html.fs-sb-on .fp-tabs.d-md-none:has(> .fp-tab-topics:only-child){ display:none !important; }
html.fs-sb-on main .row > .custom-sidebar-menu,
body:where(:has(#fs-sb)) main .row > .custom-sidebar-menu{ display:none !important; }
html.fs-sb-on main .row > .custom-sidebar-menu + div,
body:where(:has(#fs-sb)) main .row > .custom-sidebar-menu + div{
  flex:1 1 0% !important; width:auto !important; max-width:none !important; min-width:0;
}
html.fs-sb-on #fs-privacy-choices-button{ z-index:calc(var(--fs-sb-z) - 2) !important; }
/* The Menu button and its dropdown (nav.menu.theme.php), top right of the
   header. Headers that are not sticky become the box it is placed in. */
html.fs-sb-on #search-header:not(.sticky-top){ position:relative; }
.fs-sb-menu{
  position:absolute; top:6px; right:10px; z-index:calc(var(--sn-oc-z, 1075) - 10);
}
.fs-sb-menu .dropdown-menu{ z-index:calc(var(--sn-oc-z, 1075) - 9); }
/* a header with nothing else in it (About, Contact, ...) keeps a slim band for it */
html.fs-sb-on #search-header:not(:has(.container-lg)){ min-height:52px; }
.fs-sb-herogap{ height:22px; }
.fs-sb-topgap{ height:12px; }

/* ================================================== 1024px and wider */
@media (min-width:1024px){
  html.fs-sb-on body,
  body:where(:has(#fs-sb)){ padding-left:var(--fs-sb-w); }
  html.fs-sb-on #fs-privacy-choices-button{ left:calc(var(--fs-sb-w) + 16px) !important; }
  /* results pages: the search box stops short of the Menu button */
  html.fs-sb-on #search-header.fs-header-compact > .container-lg{ padding-right:112px; }

  /* the rail */
  html.fs-sb-on.fs-sb-rail body{ padding-left:var(--fs-sb-rail); }
  html.fs-sb-on.fs-sb-rail #fs-privacy-choices-button{ left:calc(var(--fs-sb-rail) + 16px) !important; }
  html.fs-sb-rail:not(.fs-sb-peek) #fs-sb{ width:var(--fs-sb-rail); }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-head{
    flex-direction:column; justify-content:flex-start; gap:12px;
    height:auto; margin-bottom:10px; padding:14px 0 0;
  }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-logo{ display:none; }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-mark{ display:block; }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-chev .fs-sb-l{ display:none; }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-chev .fs-sb-r{ display:block; }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-item,
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-kit .dropdown-item{ justify-content:center; height:36px; padding:0; }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-item .ico,
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-kit .dropdown-item svg{ flex-basis:20px; width:20px; height:20px; }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-label,
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-topics,
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-legal,
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-seg{ display:none; }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-kit .dropdown-item{ font-size:0; }
  html.fs-sb-rail:not(.fs-sb-peek) [data-fs-sb-railonly]{ display:flex !important; }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-foot{ display:flex; padding:6px 0 10px; }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-foot .fs-sb-one{ display:inline-flex; width:40px; height:40px; margin:0 auto; }
  html.fs-sb-rail:not(.fs-sb-peek) .fs-sb-scroll{ scrollbar-width:none; }

  /* pointing at the rail opens the whole sidebar over the page */
  html.fs-sb-rail.fs-sb-peek #fs-sb{ box-shadow:12px 0 36px rgba(0,0,0,.42); }
  html.fs-sb-rail.fs-sb-peek #fs-sb-backdrop{ opacity:.55; visibility:visible; transition:opacity .22s ease, visibility 0s; }
}

/* ================================================ narrower than 1024px */
@media (max-width:1023.98px){
  #fs-sb-bar{ display:flex; }
  /* in the bar, beside the theme switch */
  .fs-sb-menu{ top:8px; right:4px; }
  #fs-sb-bar{ padding-right:100px; }
  .fs-sb-topgap{ height:0; }
  .fs-sb-herogap{ height:2px; }
  #fs-sb{
    width:min(300px, 86vw);
    transform:translateX(-102%); visibility:hidden;
    box-shadow:none;
    transition:transform .22s ease, visibility 0s linear .22s;
  }
  html.fs-sb-open #fs-sb{
    transform:none; visibility:visible; box-shadow:10px 0 34px rgba(0,0,0,.34);
    transition:transform .22s ease, visibility 0s;
  }
  html.fs-sb-open #fs-sb-backdrop{ opacity:1; visibility:visible; transition:opacity .22s ease, visibility 0s; }
  html.fs-sb-open body{ overflow:hidden; }
  .fs-sb-head{ height:var(--fs-sb-bar-h); margin-bottom:8px; padding:0 12px 0 16px; }
  .fs-sb-chev{ width:30px; height:30px; }
  .fs-sb-chev .ico{ width:20px; height:20px; }
  .fs-sb-item, .fs-sb-kit .dropdown-item, .fs-sb-heading{ padding-left:16px; }
  .fs-sb-item, .fs-sb-kit .dropdown-item{ height:38px; font-size:15px; }
  .fs-sb-item .ico{ flex-basis:18px; width:18px; height:18px; }
  #fs-sb .sn-sidebar .sn-menu-item{ min-height:38px; padding-left:calc(16px + var(--sn-depth, 0) * 14px) !important; }
  #fs-sb .sn-sidebar .sn-text{ font-size:15px !important; }
  #fs-sb .sn-sort{ padding-left:16px !important; }
}

@media (prefers-reduced-motion:reduce){
  #fs-sb, #fs-sb-backdrop{ transition:none !important; }
}