/*
Copyright (c) 2026 BlueAether LLC. All rights reserved.
Confidential and proprietary.
Use, copying, modification, or distribution except under a written
BlueAether license is prohibited.
*/

/* BlueAether-NX shared application header R3 Legal Notice Ready
   Header-only. No selector in this file reaches into page content. */
:root{
  --ba-header-h:72px;
  --ba-header-bg-top:#090c12;
  --ba-header-bg-bottom:#05070b;
  --ba-header-line:#182636;
  --ba-header-text:#eef5ff;
  --ba-header-muted:#95a8c2;
  --ba-header-blue:0,152,220;
  --ba-header-gold:255,198,48;
}

header.ba-app-header{
  box-sizing:border-box!important;
  width:100%!important;
  height:72px!important;
  min-height:72px!important;
  margin:0!important;
  padding:0 14px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto auto auto!important;
  grid-template-areas:"brand nav tools actions clock"!important;
  align-items:center!important;
  align-content:center!important;
  column-gap:11px!important;
  row-gap:0!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
  position:sticky!important;
  top:0!important;
  z-index:2000!important;
  color:var(--ba-header-text)!important;
  background:linear-gradient(180deg,var(--ba-header-bg-top),var(--ba-header-bg-bottom))!important;
  border:0!important;
  border-bottom:1px solid var(--ba-header-line)!important;
  border-radius:0!important;
  box-shadow:0 10px 24px rgba(0,0,0,.38),inset 0 -1px 0 rgba(255,255,255,.04)!important;
  font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif!important;
}

.ba-app-header *{box-sizing:border-box}
.ba-app-header .ba-brand{
  grid-area:brand;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  min-width:0!important;
  text-decoration:none!important;
  flex:0 0 auto!important;
}
.ba-app-header .ba-brand .logo,
.ba-app-header img.logo{
  display:block!important;
  width:165px!important;
  height:auto!important;
  max-width:100%!important;
  max-height:46px!important;
  object-fit:contain!important;
}
/* BlueAether NX 2026 legal notice.
   Current pages use the ::after fallback. When nx-header.js later injects the
   real .ba-brand-legal element, the fallback disables itself automatically. */
.ba-app-header .ba-brand-legal,
.ba-app-header .ba-brand::after{
  color:#ffffff!important;
  font-size:8px!important;
  line-height:1!important;
  display:block!important;
  margin-top:2px!important;
  white-space:nowrap!important;
}
.ba-app-header .ba-brand-legal{
  user-select:text!important;
  -webkit-user-select:text!important;
}
.ba-app-header .ba-brand::after{
  content:"BlueAether NX™ | © 2026 BlueAether LLC";
}
/* Prevent a duplicate line after the shared header script begins creating the
   real selectable/accessibility-friendly legal element. */
.ba-app-header .ba-brand:has(.ba-brand-legal)::after{
  content:none!important;
  display:none!important;
}

.ba-app-header .ba-primary-nav{
  grid-area:nav;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:clamp(3px,.45vw,9px)!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.ba-app-header .ba-primary-nav a{
  flex:0 0 auto!important;
  min-width:0!important;
  color:#f0f5ff!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  font-weight:900!important;
  font-size:clamp(.59rem,.64vw,.80rem)!important;
  line-height:1!important;
  letter-spacing:.13px!important;
  white-space:nowrap!important;
  padding:8px clamp(6px,.55vw,12px)!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:color .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease!important;
}
.ba-app-header .ba-primary-nav a:hover{
  color:rgb(var(--ba-header-gold))!important;
  border-color:rgba(var(--ba-header-gold),.22)!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:0 0 10px rgba(var(--ba-header-gold),.12)!important;
}
.ba-app-header .ba-primary-nav a.active,
.ba-app-header .ba-primary-nav a[aria-current="page"]{
  color:#fff!important;
  border-color:rgba(var(--ba-header-blue),.58)!important;
  background:linear-gradient(180deg,#12395a,#08253d)!important;
  box-shadow:inset 0 0 0 1px rgba(83,190,255,.12),0 0 12px rgba(var(--ba-header-blue),.19)!important;
}

.ba-app-header .ba-page-tools{
  grid-area:tools;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.ba-app-header .ba-page-tools:empty{display:none!important}
.ba-app-header .ba-page-tools .densityControl,
.ba-app-header .ba-page-tools .layoutControl{
  margin:0!important;
  flex:0 1 auto!important;
  max-width:100%!important;
}

.ba-app-header .ba-header-actions,
.ba-app-header .headerActions{
  grid-area:actions;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  flex:0 0 auto!important;
}
.ba-app-header .ba-header-btn,
.ba-app-header .headerBtn,
.ba-app-header .iconBtn,
.ba-app-header .logoutBtn,
.ba-app-header .refresh-btn{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:auto!important;
  min-width:36px!important;
  max-width:none!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  color:#edf4ff!important;
  background:linear-gradient(180deg,#101820,#0a1118)!important;
  border:1px solid #2d4054!important;
  border-radius:9px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  font-family:inherit!important;
  font-size:.72rem!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.12px!important;
  text-transform:none!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  overflow:visible!important;
}
.ba-app-header .iconBtn{font-size:.95rem!important;padding:0 9px!important}
.ba-app-header .logoutBtn{text-transform:uppercase!important;padding:0 11px!important}
.ba-app-header .ba-header-btn:hover,
.ba-app-header .headerBtn:hover,
.ba-app-header .iconBtn:hover,
.ba-app-header .logoutBtn:hover,
.ba-app-header .refresh-btn:hover{
  color:#fff!important;
  border-color:#1c8cc6!important;
  background:linear-gradient(180deg,#142534,#0b1721)!important;
  box-shadow:0 0 12px rgba(var(--ba-header-blue),.18),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.ba-app-header .ba-header-btn:active,
.ba-app-header .headerBtn:active,
.ba-app-header .iconBtn:active,
.ba-app-header .logoutBtn:active,
.ba-app-header .refresh-btn:active{transform:translateY(1px)!important;filter:brightness(.88)!important}

.ba-app-header .ba-header-clock,
.ba-app-header .topClock{
  grid-area:clock;
  min-width:98px!important;
  margin:0!important;
  padding:0!important;
  color:#c8d6f5!important;
  text-align:right!important;
  font-size:.68rem!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  opacity:.96!important;
}
.ba-app-header .ba-header-clock b,
.ba-app-header .topClock b{display:block!important;color:#fff!important;font-size:.78rem!important;line-height:1.1!important;font-weight:900!important}
.ba-app-header .ba-header-clock span,
.ba-app-header .topClock span{display:block!important;margin-top:2px!important;color:#aebcd1!important}

.ba-app-header .ba-mobile-nav{
  grid-area:chooser;
  display:none!important;
  min-width:0!important;
  width:100%!important;
  align-items:center!important;
  gap:6px!important;
}
.ba-app-header .ba-mobile-nav label{
  color:#8fa2bd!important;
  font-size:.60rem!important;
  font-weight:950!important;
  letter-spacing:.35px!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.ba-app-header .ba-mobile-page-select{
  appearance:auto!important;
  min-width:0!important;
  width:100%!important;
  height:34px!important;
  margin:0!important;
  padding:0 30px 0 10px!important;
  color:#fff!important;
  background-color:#0b1722!important;
  border:1px solid #2d658a!important;
  border-radius:9px!important;
  font-family:inherit!important;
  font-size:.76rem!important;
  font-weight:900!important;
  outline:none!important;
}
.ba-app-header .ba-mobile-page-select option{background:#08121c!important;color:#fff!important}

@media (max-width:1450px), (max-height:780px){
  header.ba-app-header{
    height:auto!important;
    min-height:58px!important;
    padding:6px 10px!important;
    grid-template-columns:auto minmax(180px,1fr) auto auto!important;
    grid-template-areas:"brand chooser actions clock" "tools tools tools tools"!important;
    column-gap:8px!important;
    row-gap:5px!important;
    align-items:center!important;
  }
  .ba-app-header .ba-brand .logo,
  .ba-app-header img.logo{height:43px!important;max-width:160px!important}
  .ba-app-header .ba-primary-nav{display:none!important}
  .ba-app-header .ba-mobile-nav{display:flex!important}
  .ba-app-header .ba-page-tools{
    width:100%!important;
    justify-content:center!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    padding:0 1px 1px!important;
  }
  .ba-app-header .ba-page-tools::-webkit-scrollbar{display:none!important}
  .ba-app-header .ba-page-tools > *{flex:0 0 auto!important}
  .ba-app-header .ba-header-actions,
  .ba-app-header .headerActions{gap:5px!important}
  .ba-app-header .ba-header-btn,
  .ba-app-header .headerBtn,
  .ba-app-header .iconBtn,
  .ba-app-header .logoutBtn,
  .ba-app-header .refresh-btn{height:32px!important;min-height:32px!important;min-width:32px!important;padding:0 8px!important;font-size:.68rem!important;border-radius:8px!important}
  .ba-app-header .iconBtn{font-size:.90rem!important}
  .ba-app-header .ba-header-clock,
  .ba-app-header .topClock{min-width:86px!important;font-size:.62rem!important}
  .ba-app-header .ba-header-clock b,
  .ba-app-header .topClock b{font-size:.70rem!important}
}

@media (max-width:720px){
  header.ba-app-header{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-areas:"brand chooser actions" "tools tools tools"!important;
    padding:6px 7px!important;
    column-gap:6px!important;
  }
  .ba-app-header .ba-brand .logo,
  .ba-app-header img.logo{height:39px!important;max-width:138px!important}
  .ba-app-header .ba-mobile-nav label{display:none!important}
  .ba-app-header .ba-header-clock,
  .ba-app-header .topClock{display:none!important}
  .ba-app-header .logoutBtn{
    width:32px!important;
    max-width:32px!important;
    padding:0!important;
    font-size:0!important;
  }
  .ba-app-header .logoutBtn::before{content:"⇥";font-size:1rem!important;line-height:1!important}
  .ba-app-header .ba-page-tools{justify-content:flex-start!important}
}

@media (max-width:430px){
  header.ba-app-header{grid-template-columns:auto minmax(92px,1fr) auto!important}
  .ba-app-header .ba-brand .logo,
  .ba-app-header img.logo{height:35px!important;max-width:116px!important}
  .ba-app-header .ba-header-actions,
  .ba-app-header .headerActions{gap:4px!important}
  .ba-app-header .ba-header-btn,
  .ba-app-header .headerBtn,
  .ba-app-header .iconBtn,
  .ba-app-header .logoutBtn,
  .ba-app-header .refresh-btn{height:30px!important;min-height:30px!important;min-width:30px!important;padding:0 7px!important}
  .ba-app-header .ba-mobile-page-select{height:31px!important;font-size:.68rem!important;padding-left:7px!important}
}

/* BlueAether-NX View Profile R3: always-available AUTO | FULL | EFFICIENT control. */
.ba-app-header .ba-stream-mode-control{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  height:34px!important;
  min-width:0!important;
  margin:0!important;
  padding:0 7px!important;
  border:1px solid #2d4054!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#101820,#0a1118)!important;
  color:#edf4ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  white-space:nowrap!important;
  cursor:default!important;
}
.ba-app-header .ba-stream-mode-label{
  color:#9fb2d4!important;
  font-size:.58rem!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.35px!important;
  text-transform:uppercase!important;
}
.ba-app-header .ba-stream-mode-control select{
  appearance:auto!important;
  width:auto!important;
  min-width:86px!important;
  height:26px!important;
  margin:0!important;
  padding:0 22px 0 6px!important;
  color:#fff!important;
  background:#08121c!important;
  border:1px solid #2d658a!important;
  border-radius:7px!important;
  font-family:inherit!important;
  font-size:.66rem!important;
  line-height:1!important;
  font-weight:950!important;
  outline:none!important;
  cursor:pointer!important;
}
.ba-app-header .ba-stream-mode-control select option{background:#08121c!important;color:#fff!important}
.ba-app-header .ba-stream-effective{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:54px!important;
  height:20px!important;
  padding:0 5px!important;
  border:1px solid #425064!important;
  border-radius:999px!important;
  color:#aebbd1!important;
  background:#090e14!important;
  font-size:.52rem!important;
  font-weight:950!important;
  letter-spacing:.25px!important;
}
.ba-app-header .ba-stream-effective.remote{color:#67d6ff!important;border-color:#1d7fae!important;background:rgba(0,152,220,.13)!important;box-shadow:0 0 9px rgba(0,152,220,.13)!important}
.ba-app-header .ba-stream-effective.full{color:#88ef9b!important;border-color:#287a43!important;background:rgba(35,199,40,.10)!important}
@media (max-width:1450px), (max-height:780px){
  .ba-app-header .ba-stream-mode-control{height:31px!important;padding:0 6px!important;gap:5px!important}
  .ba-app-header .ba-stream-mode-control select{height:24px!important;min-width:84px!important;font-size:.62rem!important}
  .ba-app-header .ba-stream-effective{height:18px!important;min-width:52px!important;font-size:.49rem!important}
}
@media (max-width:520px){
  .ba-app-header .ba-stream-mode-label{display:none!important}
  .ba-app-header .ba-stream-effective{display:none!important}
  .ba-app-header .ba-stream-mode-control{padding:0 5px!important}
  .ba-app-header .ba-stream-mode-control select{min-width:88px!important}
}

/* View Profile compatibility: Programs and Side-by-Side contain older page-local
   compact-header rules that cap the header at one row. The shared compact page
   chooser plus View Profile tools need their natural second row on those pages. */
@media (max-width:1450px), (max-height:780px){
  html body[data-ba-page="index"] header.ba-app-header,
  html body[data-ba-page="superwall"] header.ba-app-header{
    display:grid!important;
    height:auto!important;
    min-height:58px!important;
    max-height:none!important;
    overflow:visible!important;
  }
}

/* The selector remains available at every viewport size. On mid-width engineering
   desktops the label and active badge collapse, but the profile selector itself
   remains present. Wide desktops show the complete View Profile control. */
@media (min-width:1451px) and (min-height:781px){
  .ba-app-header .ba-stream-mode-control{
    display:inline-flex!important;
    height:30px!important;
    padding:0 5px!important;
    gap:4px!important;
  }
  .ba-app-header .ba-stream-mode-label{font-size:.52rem!important}
  .ba-app-header .ba-stream-mode-control select{
    height:23px!important;
    min-width:84px!important;
    padding:0 20px 0 6px!important;
    font-size:.60rem!important;
  }
  .ba-app-header .ba-stream-effective{
    height:18px!important;
    min-width:52px!important;
    font-size:.47rem!important;
  }
}
@media (min-width:1451px) and (max-width:1750px){
  .ba-app-header .ba-stream-mode-label,
  .ba-app-header .ba-stream-effective{display:none!important}
  .ba-app-header .ba-stream-mode-control{padding:0 4px!important}
  .ba-app-header .ba-stream-mode-control select{min-width:88px!important}
}