/* ALiVE site header (staging, 8 Nov 2026). Sits on top of alive3-nav.css and uses its colours. */
html.a3h-wait #a3n{visibility:hidden}
html.a3h-on{scroll-padding-top:118px}
html.a3h-on .a3n ~ * h2[id]{scroll-margin-top:80px}

/* row 1 */
html.a3h-on .a3n-bar{gap:12px}
html.a3h-on .a3n-home, html.a3h-on .a3n-wr{display:none}
html.a3h-on .a3n-brand{display:inline-flex; align-items:center; color:var(--a3n-text); flex:none}
.a3h-b{height:28px; width:auto; display:block}
.a3h-b-short{display:none}
.a3h-areas{display:flex; gap:2px; flex:none}
.a3h-area{display:inline-flex; align-items:center; height:34px; padding:0 11px; border-radius:6px; color:var(--a3n-muted); font:600 14px var(--a3n-ui); text-decoration:none; cursor:pointer; white-space:nowrap; list-style:none}
.a3h-area::-webkit-details-marker{display:none}
.a3h-area:hover, .a3h-area:focus-visible{color:var(--a3n-text); background:var(--a3n-surface-2)}
.a3h-area.on, .a3h-tools.on > .a3h-area{color:var(--a3n-text); box-shadow:inset 0 -2px 0 var(--a3n-accent)}
.a3h-tools{position:relative; flex:none}
.a3h-tools > summary::after{content:"\25BE"; margin-left:5px; font-size:11px; color:var(--a3n-muted)}
.a3h-tools[open] > summary{background:var(--a3n-surface-2); color:var(--a3n-text)}
.a3h-sp{flex:1 1 auto; min-width:0}
.a3h-dc{display:inline-flex; align-items:center; color:var(--a3n-muted); padding:6px; border-radius:6px; flex:none}
.a3h-dc:hover{color:var(--a3n-text)}
.a3h-dc svg{height:18px; width:auto; display:block}
/* 350 px so "Search documentation, tools and pages" fits whole on a wide screen (narrower below 1280 px) */
html.a3h-on .a3n-search{flex:0 1 350px; min-width:150px; max-width:350px}
/* the docs' Menu is the phone menu now */
@media (min-width:768px){html.a3h-on .a3n-menu{display:none}}

/* dropdowns (fixed, placed by the script) */
.a3h-pop{position:fixed; z-index:60; background:var(--a3n-surface); border:1px solid var(--a3n-border); border-radius:10px; box-shadow:var(--a3n-shadow); padding:6px; max-height:calc(100vh - 140px); overflow:auto}
.a3h-tools-pop{width:320px}
/* each tool: its badge on a line of its own, then the name and the line about it, all left-aligned (Jman 8 Nov) */
.a3h-tool{display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:9px 10px; border-radius:7px; color:var(--a3n-text); text-decoration:none}
.a3h-tool:hover, .a3h-tool:focus-visible{background:var(--a3n-surface-2)}
.a3h-tool.cur{box-shadow:inset 2px 0 0 var(--a3n-accent)}
.a3h-tool-b{flex:none; color:var(--a3n-text)}
/* the pill alone, no ALiVE wordmark (Jman 8 Nov); same pill size as the 20 px badge it replaces */
.a3h-bs{height:14px; width:auto; display:block}
.a3h-tool-w b{display:block; font:600 14px var(--a3n-ui)}
.a3h-tool-w small{display:block; color:var(--a3n-muted); font-size:12px; line-height:1.3}
.a3h-g-pop{min-width:240px}
.a3h-g-pop ul{list-style:none; margin:0; padding:0}
.a3h-g-pop li a{display:block; padding:7px 10px; border-radius:6px; color:var(--a3n-text); text-decoration:none; font:14px var(--a3n-ui)}
.a3h-g-pop li a:hover{background:var(--a3n-surface-2)}
.a3h-g-pop li a[aria-current]{color:var(--a3n-accent); box-shadow:inset 2px 0 0 var(--a3n-accent)}
.a3h-g-pop li.a3h-gh{padding:6px 10px 4px; font:500 11px var(--a3n-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--a3n-accent); white-space:nowrap}
.a3h-g-pop li.a3h-gsep{border-top:1px solid var(--a3n-border); margin:4px 6px}

/* the site-wide search's tools and pages block, above the docs results */
.a3h-quick{border-bottom:1px solid var(--a3n-border); padding:4px 4px 8px; margin-bottom:6px}
.a3h-quick-h{font:600 11px var(--a3n-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--a3n-muted); padding:4px 8px}
.a3h-quick-a{display:flex; gap:10px; align-items:baseline; padding:7px 8px; border-radius:6px; color:var(--a3n-text); text-decoration:none}
.a3h-quick-a:hover, .a3h-quick-a:focus-visible{background:var(--a3n-surface-2)}
.a3h-quick-a span{color:var(--a3n-muted); font-size:12px}

/* row 2 */
.a3h-r2{display:flex; align-items:center; gap:8px; height:44px; padding:0 var(--a3n-pad,22px); border-top:1px solid var(--a3n-border); max-width:var(--a3n-w,1480px); margin:0 auto}
.a3h-r2-in{display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none}
.a3h-r2-in::-webkit-scrollbar{display:none}
.a3h-r2-end{display:flex; align-items:center; gap:8px; flex:none}
/* row 2: one style for every area's items, links and dropdowns alike. Scoped under .a3n so a page's own link
   colours (".a3n a" in the docs bar, a page's "a") can't win over it (Jman 8 Nov: home's row looked different) */
.a3n .a3h-r2 .a3h-j{display:inline-flex; align-items:center; height:32px; padding:0 10px; border-radius:6px; color:var(--a3n-muted); font:600 13px/1 var(--a3n-ui); letter-spacing:normal; text-transform:none; text-decoration:none; white-space:nowrap; cursor:pointer; list-style:none}
.a3h-j::-webkit-details-marker{display:none}
.a3n .a3h-r2 .a3h-j:hover, .a3n .a3h-r2 .a3h-j:focus-visible{color:var(--a3n-text); background:var(--a3n-surface-2)}
.a3n .a3h-r2 .a3h-j.cur, .a3n .a3h-r2 .a3h-g.cur > .a3h-j{color:var(--a3n-accent)}
.a3h-g{flex:none}
.a3h-g > summary::after{content:"\25BE"; margin-left:5px; font-size:11px; color:var(--a3n-muted)}
.a3h-g[open] > summary{background:var(--a3n-surface-2); color:var(--a3n-text)}
.a3h-note{color:var(--a3n-muted); font-size:12px}
html.a3h-on .a3h-r2 .a3n-donate{display:inline-flex}

/* the phone Menu's extra block */
.a3h-mhead{display:none}

/* iPad landscape */
@media (max-width:1279px){
  html.a3h-on .a3n-ix .a3n-ix-text{display:none}
  html.a3h-on .a3n-auth .a3n-who{display:none}
  html.a3h-on .a3n-search{flex-basis:200px}
  .a3h-b{height:24px}
}
/* iPad portrait */
@media (max-width:1023px){
  html.a3h-on .a3n-auth .a3n-role{display:none}
  html.a3h-on .a3n-search{flex-basis:150px; min-width:120px}
  .a3h-area{padding:0 8px}
  .a3h-note{display:none}
}
/* phone: short badge, New, account and Menu; the rest is in the Menu */
@media (max-width:767px){
  .a3h-b-full{display:none} .a3h-b-short{display:block; height:22px}
  .a3h-areas, .a3h-tools, .a3h-dc, html.a3h-on .a3n-ix{display:none}
  html.a3h-on .a3n-menu{display:block}
  .a3h-mhead{display:block; padding:4px 0 8px; border-bottom:1px solid var(--a3n-border); margin-bottom:6px}
  .a3h-m-areas{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0}
  .a3h-m-a{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--a3n-border); border-radius:8px; color:var(--a3n-text); text-decoration:none; font-weight:600}
  .a3n-panel > .a3n-search{display:flex; margin:6px 0 8px; width:100%}
  .a3h-r2{padding:0 10px}
  html.a3h-on .a3h-r2 .a3n-donate{display:none}
}

/* ---- home page and War Room: the same bar, drawn inside the page's own header ---- */
html.a3h-wait header.bar > .wrap{visibility:hidden}
header.a3h-host{padding:0 !important; border:0 !important; background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; height:auto !important; box-shadow:none !important}
html.a3h-on header.a3h-host > :not(#a3n){display:none !important}
.a3h-own{position:relative; top:auto}
.a3h-acct{flex:none; display:flex; align-items:center}
.a3h-res .a3h-quick{border-bottom:0; margin:0; padding-bottom:4px}
.a3h-docs-go b{color:var(--a3n-accent)}
@media (max-width:767px){ .a3h-own .a3n-panel > .a3n-search{display:flex} }
.a3n .a3h-r2 .a3h-ph{display:none}
@media (max-width:767px){ .a3n .a3h-r2 .a3h-ph{display:inline-flex} .a3n .a3h-r2 .a3h-r2-end .a3h-j{display:none} }

.a3n .a3h-r2 .a3h-j[aria-disabled="true"]{opacity:.45; cursor:default}
.a3n .a3h-r2 .a3h-j[aria-disabled="true"]:hover{background:none; color:var(--a3n-muted)}
/* row 1: the Indexer status, New and the search box are one height (Page Audit, 8 Nov) */
@media (min-width:768px){ html.a3h-on .a3n-bar .a3n-news-btn, html.a3h-on .a3n-bar .a3n-search input{height:40px} }
/* both rows run edge to edge with a small gutter (Jman 8 Nov); the page below keeps its own width */
html.a3h-on .a3n-bar, html.a3h-on .a3h-r2{max-width:none; padding-left:20px; padding-right:20px}
@media (max-width:767px){ html.a3h-on .a3n-bar, html.a3h-on .a3h-r2{padding-left:10px; padding-right:10px} }
/* the badge's wordmark starts on the gutter, in line with the page below (the link keeps its 4 px padding for
   the focus ring; Jman 8 Nov) */
html.a3h-on .a3n-bar > .a3n-brand{margin-left:-4px}

/* the language switch (languages plan, phase 1, Jman 8 Nov): a globe and the short code, the list in each language's
   own script; on phones it is a row in the Menu */
.a3h-lang{position:relative; flex:none}
.a3h-lang > summary{display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 8px; border-radius:6px; color:var(--a3n-muted); font:600 13px var(--a3n-ui); cursor:pointer; list-style:none; white-space:nowrap}
.a3h-lang > summary::-webkit-details-marker{display:none}
.a3h-lang > summary:hover, .a3h-lang > summary:focus-visible, .a3h-lang[open] > summary{color:var(--a3n-text); background:var(--a3n-surface-2)}
.a3h-lang > summary svg{width:17px; height:17px; display:block}
.a3h-lang-pop{min-width:210px}
.a3h-lang-o{display:block; width:100%; text-align:left; padding:7px 10px; border:0; border-radius:6px; background:none; color:var(--a3n-text); font:14px var(--a3n-ui); cursor:pointer}
.a3h-lang-o:hover, .a3h-lang-o:focus-visible{background:var(--a3n-surface-2)}
.a3h-lang-o.cur{color:var(--a3n-accent); box-shadow:inset 2px 0 0 var(--a3n-accent)}
.a3h-lang-note{padding:7px 10px 4px; margin-top:4px; border-top:1px solid var(--a3n-border); color:var(--a3n-muted); font-size:12px; line-height:1.35; max-width:210px}
.a3h-m-lang{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:8px 0}
.a3h-m-lang-h{width:100%; color:var(--a3n-muted); font:600 11px var(--a3n-mono); letter-spacing:.08em; text-transform:uppercase}
.a3h-m-lang .a3h-lang-o{display:inline-flex; width:auto; align-items:center; min-height:40px; padding:0 12px; border:1px solid var(--a3n-border); border-radius:8px}
@media (max-width:767px){ .a3h-lang{display:none} }
/* the War Room's Live Map and How it works pills at the right end of row 2 (Jman 8 Nov), the Donate pill's look */
html.a3h-on .a3h-r2 .a3h-pill[aria-disabled="true"]{opacity:.45; cursor:default}
/* iPad widths, where row 1 is tight (more so in longer languages): the switch is the globe alone; below 1200 px the
   Steam icon and Discord go (both stay in the docs footer and the phone Menu) */
@media (max-width:1023px){
  .a3h-lang-c{display:none}
  .a3h-lang > summary{padding:0 7px}
}
@media (max-width:1199px){ html.a3h-on .a3n-bar .a3h-steam, html.a3h-on .a3n-bar .a3h-dc{display:none} }
@media (min-width:768px) and (max-width:899px){ html.a3h-on .a3n-bar .a3n-search{min-width:100px; flex-basis:100px} }
@media (max-width:899px){
  html.a3h-on .a3n-bar .a3h-dc{display:none}
  html.a3h-on .a3n-bar{gap:8px}
  .a3h-area{padding:0 6px}
}
@media (max-width:899px){ .a3h-tools > summary::after{display:none} }
/* below 1200 px New shows its count alone (its label stays for screen readers) */
@media (min-width:768px) and (max-width:1199px){ html.a3h-on .a3n-bar .a3n-news-word{display:none} }
/* the home page's and the War Room's own account chip shrinks as the docs one does (Page Audit 8 Nov: signed in, row 1
   ran off the side from 800 to 1100 px): the avatar alone below 1280 px, as their wider badges leave less room */
@media (max-width:1279px){ .a3h-acct summary > .who, .a3h-acct summary > .nm, .a3h-acct summary > .role{display:none} }
@media (min-width:768px) and (max-width:1023px){ html.a3h-on .a3h-own .a3n-bar{gap:6px} }