/* Site header and date bar, shared by every page.
 *
 * Each page used to carry its own copy of the header CSS, and the copies had
 * drifted: different inner widths (1080, 1200, 1280), paddings, date-bar
 * heights, an active tab that turned bold (so its neighbours shifted a few
 * pixels whenever you clicked a tab), and desktop sizing that nav.js only
 * applied after the page had painted. The result was a header that moved when
 * you went from one tab to another.
 *
 * This file is linked last in every page's head, so it applies from the first
 * paint. Every rule is scoped to .site-header / .site-topbar, which outranks
 * the old per-page rules without touching them. The mobile drawer (under
 * 901px) still belongs to nav.js: nothing here styles the tab list below that
 * width except hiding it until the drawer opens.
 */

/* ---- date bar ---------------------------------------------------------- */
.site-topbar.topbar{
  background:#0f172a;color:#94a3b8;font-size:12px;line-height:18px;
  height:33px;box-sizing:border-box;padding:0;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:center;
}
.site-topbar .topbar-inner{
  width:100%;max-width:1280px;margin:0 auto;padding:0 20px;box-sizing:border-box;
  display:flex;justify-content:space-between;align-items:center;gap:16px;white-space:nowrap;
}
.site-topbar .topbar-left,.site-topbar .topbar-right{display:flex;gap:14px;color:#94a3b8;overflow:hidden;}
.site-topbar a{color:#94a3b8;text-decoration:none;}
.site-topbar a:hover{color:#e2e8f0;}

/* ---- header bar -------------------------------------------------------- */
.site-header{
  background:#0f172a;border-bottom:1px solid #1e293b;position:sticky;top:0;z-index:100;
  box-shadow:0 1px 12px rgba(0,0,0,.22);display:block;padding:0;margin:0;
}
/* Three columns with the tabs in the middle one: the tab row is centred on its
   own, so it sits in exactly the same place whether the right side shows
   Login and Register, a single Account button, or Profile and Logout. */
.site-header .header-inner{
  max-width:1280px;height:66px;margin:0 auto;padding:0 24px;box-sizing:border-box;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:16px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.site-header .header-inner > .logo{justify-self:start;}
.site-header .header-inner > nav{justify-self:center;}
.site-header .header-inner > .nav-actions{justify-self:end;}
.site-header .logo{
  display:inline-flex;align-items:center;gap:10px;line-height:1;flex:0 0 auto;
  text-decoration:none;margin:0;
}
.site-header .logo img{height:38px;width:auto;display:block;flex:0 0 auto;}
.site-header .logo .logo-word{display:none;}
.site-header nav{margin:0;flex:0 1 auto;min-width:0;}

/* ---- tabs and account buttons, desktop --------------------------------- */
@media (min-width:901px){
  .site-header nav > ul{list-style:none;display:flex;align-items:center;gap:18px;margin:0;padding:0;}
  .site-header nav > ul > li{margin:0;padding:0;list-style:none;}
  .site-header nav > ul > li > a{
    display:inline-block;text-decoration:none;color:#cbd5e1;font-size:14px;line-height:20px;
    padding:4px 0;white-space:nowrap;transition:color .2s ease;
    /* Same weight in every state, so a tab never changes width when it becomes
       the active one and the tabs beside it never move. */
    font-weight:500;
  }
  .site-header nav > ul > li > a:hover,
  .site-header nav > ul > li > a.active,
  .site-header nav > ul > li > a[aria-current="page"]{color:#60a5fa;font-weight:500;}
  .site-header .burger{display:none !important;}
}

.site-header .nav-actions{display:flex;gap:10px;align-items:center;flex:0 0 auto;white-space:nowrap;}
.site-header .nav-actions > a{
  font-family:inherit;letter-spacing:0;box-sizing:border-box;height:36px;padding:0 18px;border-radius:8px;font-weight:600;font-size:13px;
  line-height:1;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  text-decoration:none;cursor:pointer;
}
.site-header .nav-actions > a.btn-outline{background:transparent;color:#f1f5f9;border:1px solid rgba(255,255,255,.22);}
.site-header .nav-actions > a.btn-outline:hover{border-color:#60a5fa;color:#60a5fa;background:rgba(96,165,250,.08);}
.site-header .nav-actions > a.btn-primary{background:#2563eb;color:#fff;border:1px solid #2563eb;}
.site-header .nav-actions > a.btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8;}
/* Signed-in state: firebase.js injects Profile and Logout with inline styles.
   They take exactly the Login and Register metrics, so signing in does not
   change the header's size or push the tabs. The username is not shown. */
.site-header #user-menu{display:flex;align-items:center;gap:10px;white-space:nowrap;}
.site-header #user-menu > span:first-child{display:none !important;}
.site-header #user-menu > a,.site-header #user-menu > button{
  box-sizing:border-box;height:36px !important;padding:0 18px !important;border-radius:8px !important;
  font-family:inherit;font-size:13px !important;font-weight:600 !important;line-height:1 !important;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
}

/* Tab size steps down with the width so the centred tab row always clears the
   logo and the account buttons, signed in or out. Measured in Chromium at
   every 20px from 901 to 1905. nav.js's own runtime values are overridden. */
@media (min-width:901px) and (max-width:1520px){
  .site-header nav > ul{gap:14px;}
  .site-header nav > ul > li > a{font-size:13px;}
  .site-header .nav-actions > a,.site-header #user-menu > a,.site-header #user-menu > button{padding:0 13px !important;}
}
@media (min-width:901px) and (max-width:1200px){
  .site-header nav > ul{gap:9px;}
  .site-header nav > ul > li > a{font-size:12px;}
  .site-header .logo img{height:30px;}
  .site-header .nav-actions,.site-header #user-menu{gap:6px;}
  .site-header .nav-actions > a,.site-header #user-menu > a,.site-header #user-menu > button{padding:0 9px !important;font-size:12px !important;height:32px !important;}
}
@media (min-width:901px) and (max-width:1020px){
  .site-header .header-inner{padding:0 16px;column-gap:10px;}
  .site-header nav > ul{gap:5px;}
  .site-header nav > ul > li > a{font-size:11px;}
  .site-header .nav-actions > a,.site-header #user-menu > a,.site-header #user-menu > button{padding:0 8px !important;}
}

/* ---- tablet and phone: the tab list becomes nav.js's drawer ------------ */
@media (max-width:900px){
  .site-header .header-inner{height:58px;}
  .site-header nav > ul:not(.fxnb-mobile){display:none;}
  .site-header .burger{display:flex !important;align-items:center;justify-content:center;}
  .site-topbar .topbar-left span:nth-child(n+2){display:none;}
}
@media (max-width:768px){
  .site-header .header-inner{padding:0 16px;}
  .site-topbar .topbar-inner{padding:0 16px;}
}
@media (max-width:640px){
  .site-header .logo img{height:30px;}
}