/* APEX — shared navigation chrome for every authenticated page.
 *
 * One header, three zones: brand | centred section pill | live status + account.
 * Reuses theme.css tokens only; the few semantic status colours are declared
 * here. Everything is scoped under .fa-hdr / .fa-sheet / .fa-palette so it can
 * never collide with a page's own .apex-header rules (those stay in the DOM,
 * hidden, so page scripts keep working).
 *
 * Material: the bar is smoked glass over the page, the section pill is a raised
 * surface inside it, and the active tab is the one lit surface. Nothing glows;
 * light falls from above (inset top hairline) and depth comes from shadow. */

.fa-hdr{
  --fa-live:#59d09b; --fa-stale:#e0b64c; --fa-down:#e0706a;
  --fa-h:64px;
  position:sticky; top:0; z-index:60;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px;
  height:var(--fa-h); padding:0 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 60%),rgba(4,5,10,.84);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset, 0 12px 32px rgba(0,0,0,.28);
  font-family:var(--font-sans,-apple-system,"Segoe UI",system-ui,sans-serif);
}
.fa-hdr *{box-sizing:border-box}

/* ---- brand ---- */
.fa-brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; min-width:0}
.fa-brand:hover{text-decoration:none}
.fa-brand__mark{width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:8px; background:linear-gradient(180deg,rgba(134,184,222,.22),rgba(134,184,222,.06));
  border:1px solid rgba(134,184,222,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.fa-brand__mark svg{width:16px; height:16px; display:block}
.fa-brand__word{font-weight:800; font-size:15px; letter-spacing:.2em; color:var(--text-strong,#fff)}
.fa-brand__tag{font-family:var(--font-mono,ui-monospace,monospace); font-size:8.5px; letter-spacing:.24em;
  color:var(--accent,#86b8de); text-transform:uppercase; padding:2px 6px; border:1px solid rgba(134,184,222,.28);
  border-radius:999px; background:rgba(134,184,222,.08)}

/* ---- section pill ---- */
.fa-nav{
  justify-self:center; display:flex; align-items:center; gap:2px; padding:4px; min-width:0; max-width:100%;
  border-radius:16px; background:rgba(255,255,255,.028); border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.28);
}
.fa-tabwrap{position:relative; display:inline-flex; align-items:center}
.fa-tab{
  display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:12px; cursor:pointer;
  color:var(--muted,#8f98ac); background:transparent; border:1px solid transparent; white-space:nowrap; text-decoration:none;
  transition:background .18s cubic-bezier(.22,.61,.36,1), color .18s, border-color .18s, box-shadow .18s;
}
.fa-tab:hover{color:var(--text,#e9edf5); background:rgba(255,255,255,.035); text-decoration:none}
.fa-tab svg{width:16px; height:16px; stroke:currentColor; opacity:.8; flex:0 0 auto}
.fa-tab__t{display:flex; flex-direction:column; line-height:1.05; min-width:0}
.fa-tab__l{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.fa-tab__s{font-size:9px; letter-spacing:.02em; color:var(--dim,#566072); margin-top:2px; font-weight:500}
.fa-tab.is-active{
  color:var(--text-strong,#fff);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.38);
}
.fa-tab.is-active svg{opacity:1; color:var(--accent,#86b8de)}
.fa-tab.is-active .fa-tab__s{color:var(--muted,#8f98ac)}
.fa-tab:focus-visible{outline:2px solid var(--accent,#86b8de); outline-offset:2px}

/* dropdown of existing sub-pages under a tab */
.fa-caret{display:inline-flex; align-items:center; justify-content:center; width:26px; height:28px; padding:0; margin-left:-4px; margin-right:2px;
  border:0; background:transparent; color:var(--muted,#8f98ac); cursor:pointer; border-radius:6px; flex:0 0 auto}
.fa-caret svg{width:12px; height:12px; stroke:currentColor; transition:transform .15s ease}
.fa-tabwrap.is-active .fa-caret{color:var(--accent-bright,#d3e7f7)}
.fa-caret:hover{color:var(--text,#e9edf5)}
.fa-caret:focus-visible{outline:2px solid var(--accent,#86b8de); outline-offset:2px}
.fa-tabwrap:hover .fa-caret svg,.fa-tabwrap:focus-within .fa-caret svg,.fa-tabwrap.open .fa-caret svg{transform:rotate(180deg)}
.fa-drop{display:none; position:absolute; top:calc(100% + 10px); left:0; z-index:70; min-width:210px;
  background:rgba(11,14,21,.97); border:1px solid var(--border-strong,#2a3242); border-radius:12px; padding:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04)}
.fa-drop::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}
.fa-tabwrap:hover .fa-drop,.fa-tabwrap:focus-within .fa-drop,.fa-tabwrap.open .fa-drop{display:block}
.fa-drop__i{display:block; padding:9px 12px; border-radius:8px; text-decoration:none; white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--text,#e9edf5)}
.fa-drop__i:hover{background:rgba(255,255,255,.05); color:var(--text-strong,#fff); text-decoration:none}
.fa-drop__i.is-active{color:var(--accent-bright,#d3e7f7); background:var(--accent-dim,rgba(134,184,222,.13))}
.fa-drop__i:focus-visible{outline:2px solid var(--accent,#86b8de); outline-offset:-2px}

/* ---- live status + account ---- */
.fa-meta{display:flex; align-items:center; gap:8px; justify-self:end; min-width:0}
.fa-search{
  display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 10px 0 11px; border-radius:11px; cursor:pointer;
  color:var(--muted,#8f98ac); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); font-family:inherit;
  transition:color .15s, border-color .15s, background .15s;
}
.fa-search svg{width:15px; height:15px; stroke:currentColor}
.fa-search kbd{font-family:var(--font-mono,ui-monospace,monospace); font-size:10px; letter-spacing:.06em; color:var(--dim,#566072);
  border:1px solid rgba(255,255,255,.08); border-radius:5px; padding:1px 5px; background:rgba(255,255,255,.02)}
.fa-search:hover{color:var(--text,#e9edf5); border-color:rgba(134,184,222,.35); background:rgba(134,184,222,.06)}
.fa-search:focus-visible{outline:2px solid var(--accent,#86b8de); outline-offset:2px}

.fa-badge{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:11px;
  border:1px solid rgba(255,255,255,.07); font-family:var(--font-mono,ui-monospace,monospace);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted,#8f98ac); background:rgba(255,255,255,.02); white-space:nowrap;
}
.fa-badge .fa-dot{width:6px; height:6px; border-radius:50%; background:var(--muted,#8f98ac); flex:0 0 auto}
.fa-badge.is-live{color:var(--fa-live); border-color:rgba(89,208,155,.28); background:rgba(89,208,155,.09)}
.fa-badge.is-live .fa-dot{background:var(--fa-live); box-shadow:0 0 0 3px rgba(89,208,155,.16)}
.fa-badge.is-stale{color:var(--fa-stale); border-color:rgba(224,182,76,.3); background:rgba(224,182,76,.08)}
.fa-badge.is-stale .fa-dot{background:var(--fa-stale)}
.fa-badge.is-down{color:var(--fa-down); border-color:rgba(224,112,106,.3); background:rgba(224,112,106,.08)}
.fa-badge.is-down .fa-dot{background:var(--fa-down)}
.fa-badge.is-unknown{opacity:.72}

.fa-clock{font-family:var(--font-mono,ui-monospace,monospace); font-size:11px; color:var(--text,#e9edf5); font-variant-numeric:tabular-nums; white-space:nowrap; padding:0 4px}
.fa-clock small{color:var(--dim,#566072); font-size:8px; letter-spacing:.14em; margin-left:3px}

.fa-user{position:relative}
.fa-user__btn{
  display:inline-flex; align-items:center; gap:9px; height:36px; padding:0 8px 0 4px; border-radius:999px; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.1); color:var(--text,#e9edf5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:border-color .15s, background .15s;
}
.fa-user__btn:hover{border-color:rgba(134,184,222,.4)}
.fa-user__btn:focus-visible{outline:2px solid var(--accent,#86b8de); outline-offset:2px}
.fa-avatar{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:radial-gradient(circle at 30% 30%,#d3e7f7,#86b8de 60%,#4f7ea8); color:#04060a; font-weight:800; font-size:12px}
.fa-user__name{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fa-user__role{font-family:var(--font-mono,ui-monospace,monospace); font-size:8.5px; letter-spacing:.16em; color:var(--dim,#566072); text-transform:uppercase; white-space:nowrap}
.fa-user__btn svg{width:12px; height:12px; stroke:currentColor; color:var(--muted,#8f98ac)}
.fa-user__menu{display:none; position:absolute; right:0; top:calc(100% + 10px); min-width:240px; z-index:80; padding:6px;
  background:rgba(11,14,21,.97); border:1px solid var(--border-strong,#2a3242); border-radius:14px;
  box-shadow:0 22px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04)}
.fa-user__menu.open{display:block}
.fa-user__head{padding:10px 12px 12px; border-bottom:1px solid var(--border,#1a1f2b); margin-bottom:6px}
.fa-user__head b{display:block; font-size:12px; color:var(--text-strong,#fff); letter-spacing:.04em}
.fa-user__head span{display:block; font-size:11px; color:var(--dim,#566072); margin-top:2px; overflow:hidden; text-overflow:ellipsis}
.fa-user__item{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 12px; border-radius:9px; text-decoration:none;
  font-size:11.5px; font-weight:600; color:var(--text,#e9edf5); background:transparent; border:0; cursor:pointer; font-family:inherit}
.fa-user__item svg{width:15px; height:15px; stroke:currentColor; color:var(--muted,#8f98ac)}
.fa-user__item:hover{background:rgba(255,255,255,.05); color:var(--text-strong,#fff); text-decoration:none}
.fa-user__item--danger{color:var(--fa-down)}
.fa-user__item--danger svg{color:var(--fa-down)}
.fa-user__item[disabled]{opacity:.55; cursor:default}

/* ---- mobile ---- */
.fa-hamb{
  display:none; width:38px; height:34px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.03);
  cursor:pointer; align-items:center; justify-content:center; color:var(--text,#e9edf5); flex:0 0 auto;
}
.fa-hamb svg{width:18px; height:18px; stroke:currentColor}
.fa-hamb:focus-visible{outline:2px solid var(--accent,#86b8de); outline-offset:2px}
.fa-sheet{display:none; position:sticky; top:var(--fa-h,64px); z-index:59; background:rgba(7,9,16,.98); border-bottom:1px solid var(--border,#1a1f2b); padding:8px}
.fa-sheet.open{display:block}
.fa-sheet .fa-tab{display:flex; padding:12px 14px; border-radius:10px}
.fa-sheet .fa-tab svg{width:18px; height:18px}
.fa-sheet .fa-tab__t{display:flex!important}
.fa-sheet .fa-tab__l{font-size:12px}
.fa-sheet .fa-tab__s{display:block!important; font-size:10px}
.fa-msep{height:1px; background:var(--border,#1a1f2b); margin:6px 8px}
.fa-sheet .fa-signout{display:flex; align-items:center; gap:10px; width:100%; justify-content:flex-start; border:0; background:transparent; padding:12px 14px;
  color:var(--fa-down); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; cursor:pointer; font-family:inherit}
.fa-sheet .fa-signout svg{width:16px; height:16px; stroke:currentColor}
.fa-tab--sub{padding-left:44px!important}
.fa-tab--sub .fa-tab__l{font-size:11px; letter-spacing:.08em; opacity:.9}
.fa-subdot{width:5px; height:5px; border-radius:50%; background:var(--muted,#8f98ac); display:inline-block; flex:0 0 auto}

/* Old per-page nav is hidden (kept in the DOM so page scripts keep working). */
body.fa-active header.apex-header{display:none!important}
body.fa-active > header:not(.fa-hdr){display:none!important}

/* ---- command palette (⌘K) ---- */
.fa-palette{position:fixed; inset:0; z-index:200; display:none; background:rgba(1,2,4,.66);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.fa-palette.open{display:flex; align-items:flex-start; justify-content:center; padding:min(14vh,140px) 16px 16px}
.fa-palette__box{width:min(680px,100%); max-height:min(70vh,640px); display:flex; flex-direction:column; overflow:hidden;
  background:rgba(11,14,21,.97); border:1px solid var(--border-strong,#2a3242); border-radius:16px;
  box-shadow:0 34px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05)}
.fa-palette__row{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border,#1a1f2b)}
.fa-palette__row svg{width:18px; height:18px; stroke:var(--muted,#8f98ac); flex:0 0 auto}
.fa-palette__row input{flex:1 1 auto; min-width:0; background:transparent; border:0; outline:0; color:var(--text-strong,#fff);
  font-size:16px; font-family:inherit; padding:0}
.fa-palette__row input::placeholder{color:var(--dim,#566072)}
.fa-palette__row kbd{font-family:var(--font-mono,ui-monospace,monospace); font-size:10px; letter-spacing:.08em; color:var(--dim,#566072);
  border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:3px 7px}
.fa-palette__list{overflow-y:auto; padding:8px; overscroll-behavior:contain}
.fa-palette__group{padding:10px 10px 4px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim,#566072); font-weight:700}
.fa-palette__item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer; text-decoration:none; color:var(--text,#e9edf5)}
.fa-palette__item svg{width:16px; height:16px; stroke:var(--muted,#8f98ac); flex:0 0 auto}
.fa-palette__item b{font-weight:600; font-size:13.5px; letter-spacing:.01em}
.fa-palette__item span{margin-left:auto; color:var(--dim,#566072); font-size:11.5px; white-space:nowrap; display:inline-flex; align-items:center}
.fa-palette__item.is-hot,.fa-palette__item:hover{background:rgba(255,255,255,.055); color:var(--text-strong,#fff); text-decoration:none}
.fa-palette__item.is-hot svg{stroke:var(--accent,#86b8de)}
.fa-palette__item .fa-enter{display:none; margin-left:8px; width:14px; height:14px}
.fa-palette__item.is-hot .fa-enter{display:inline-block}
.fa-palette__empty{padding:22px 14px; color:var(--dim,#566072); font-size:12.5px; text-align:center}
.fa-palette__foot{display:flex; gap:14px; padding:9px 14px; border-top:1px solid var(--border,#1a1f2b); font-size:10px; color:var(--dim,#566072); letter-spacing:.06em}
.fa-palette__foot kbd{font-family:var(--font-mono,ui-monospace,monospace); border:1px solid rgba(255,255,255,.1); border-radius:4px; padding:1px 5px; margin-right:5px}

/* ---- responsive ----
   Seven tabs (FULL_ADMIN) need more room than five (USER), so the pill
   declares data-dense and sheds its sub-labels, then its labels, earlier.
   The pill itself can never overflow the bar: it clips instead. */
.fa-nav{overflow:hidden}
@media (max-width:1899px){ .fa-nav[data-dense] .fa-tab__s{display:none} .fa-nav[data-dense] .fa-tab{padding:9px 12px} }
@media (max-width:1719px){
  .fa-nav[data-dense] .fa-tab__t{display:none}
  .fa-nav[data-dense] .fa-tab{padding:9px 11px}
  .fa-nav[data-dense] .fa-tab svg{width:17px; height:17px}
  .fa-user__role{display:none}
}
@media (max-width:1680px){ .fa-hdr .fa-clock{display:none} }
@media (max-width:1599px){ .fa-tab__s{display:none} .fa-tab{padding:9px 12px} }
@media (max-width:1419px){
  .fa-tab .fa-tab__t{display:none}
  .fa-tab{padding:9px 11px}
  .fa-tab svg{width:17px; height:17px}
  .fa-user__name{display:none}
  .fa-user__btn{padding:0 6px 0 4px}
  .fa-hdr .fa-badge#faNews{display:none}
}
@media (max-width:900px){
  .fa-hdr{gap:10px; padding:0 12px}
  .fa-nav{display:none}
  .fa-hamb{display:inline-flex; justify-self:end}
  .fa-search kbd{display:none}
  .fa-hdr .fa-badge#faMarket{display:none}
  .fa-user{display:none}   /* account actions live in the sheet on phones */
}
@media (prefers-reduced-motion:reduce){ .fa-hdr *,.fa-palette *{transition:none!important} }


/* --- sub-page affordance (added 2026-09-25) ------------------------------
   A tab with children showed only a faint caret, so News Intelligence,
   Strategy Lab and the admin sub-pages read as "not there". Make the caret
   permanently visible, give it a real hit area, and keep the menu open while
   it has focus so touch/keyboard users can reach it without hover. */
.fa-tabwrap:has(.fa-drop) > .fa-caret{
  opacity:.9;
  background:rgba(255,255,255,.05);
  border-radius:6px;
}
.fa-tabwrap:has(.fa-drop) > .fa-caret:hover,
.fa-tabwrap.open > .fa-caret{
  opacity:1;
  background:rgba(134,184,222,.18);
}
/* Keep the panel reachable while the pointer travels from tab to menu. */
.fa-drop{ padding-top:8px; }
@media (hover:none){
  /* No hover on touch: only an explicit caret tap opens it, so enlarge it. */
  .fa-caret{ width:34px; height:34px; }
}