/* ALiVE 3 tester docs: the shared top bar, the site menu and keyword search.
   Injected into every page by build_nav.py. Everything is scoped under .a3n so it
   cannot restyle a page, and it carries its own palette (the site's) rather than
   borrowing the page's, so the bar looks the same on every page, the ledger included.
   The few rules that reach outside the bar are marked as such. */

.a3n{
  --a3n-h:56px;
  --a3n-bg:rgba(14,20,26,.86); --a3n-surface:#151d25; --a3n-surface-2:#1b242d;
  --a3n-border:#283641; --a3n-line:#5b6c79; --a3n-text:#e4ebf0; --a3n-muted:#8fa0ab;
  --a3n-accent:#f2a541; --a3n-accent-dim:#b9812f; --a3n-fam:#cf9338;
  --a3n-mark:rgba(242,165,65,.28);
  --a3n-shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px rgba(0,0,0,.45);
  --a3n-head:"Bahnschrift","DIN Alternate","Segoe UI Semibold",system-ui,sans-serif;
  --a3n-mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  --a3n-ui:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  position:sticky; top:0; z-index:1000;
  background:var(--a3n-bg);
  -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--a3n-border);
  color:var(--a3n-text); font:15px/1.4 var(--a3n-ui);
  text-align:left;
}
:root[data-theme="light"] .a3n{
  --a3n-bg:rgba(238,242,245,.9); --a3n-surface:#ffffff; --a3n-surface-2:#f3f6f8;
  --a3n-border:#d4dde4; --a3n-line:#8595a1; --a3n-text:#17222c; --a3n-muted:#566571;
  --a3n-accent:#b5651d; --a3n-accent-dim:#8a4e15; --a3n-fam:#8a4e15; --a3n-mark:rgba(181,101,29,.22);
  --a3n-shadow:0 1px 0 rgba(255,255,255,.6), 0 14px 32px rgba(20,40,60,.16);
}
.a3n *, .a3n *::before, .a3n *::after{box-sizing:border-box}

/* ---- outside the bar ---- */
/* Anchored headings clear the bar when a link or a search result jumps to them, with room
   for the small label above a heading ("Status" over "Where it stands"). */
html{scroll-padding-top:72px}
.a3n ~ * h2[id]{scroll-margin-top:34px}
/* The brand in the bar goes to the same place as a page's own "back to the docs" link. */
.a3n ~ * .backlink{display:none}
/* Words a search result led to, marked where they were found on the page. */
mark.a3n-found{background:rgba(242,165,65,.4); color:inherit; border-radius:3px; box-shadow:0 0 0 3px rgba(242,165,65,.4)}
/* The ledger's own sticky module list sits below the bar instead of under it. Only
   where the ledger keeps that list sticky: below 821px it lays it out flat itself. */
@media (min-width:821px){
  .a3n ~ .wrap > nav{top:calc(56px + 14px); max-height:calc(100vh - 56px - 28px); max-height:calc(100dvh - 56px - 28px)}
}
/* The ledger on a phone. It has no viewport tag of its own, so phones used to draw it at
   desktop width and its narrow layout never ran. With the bar's viewport tag it does, and
   its main column has to be told to fit the screen rather than its widest table (the
   tables scroll sideways in their own boxes). */
@media (max-width:820px){
  .a3n ~ .wrap{align-items:stretch}
  .a3n ~ .wrap > main{min-width:0; max-width:100%}
}

/* ---- the bar ---- */
/* As wide as the page's own column (build_nav.py reads it from the page), so the brand
   lines up with the page's text. */
.a3n-bar{
  max-width:var(--a3n-w, 1200px); height:var(--a3n-h); margin:0 auto; padding:0 var(--a3n-pad, 16px);
  display:flex; align-items:center; gap:10px;
}
/* A page's own link styles (the ledger underlines on hover) stay out of the bar. */
.a3n a, .a3n a:hover, .a3n a:focus{color:inherit; text-decoration:none}

/* ---- brand ---- */
.a3n-brand{display:flex; align-items:baseline; gap:8px; flex:0 0 auto; padding:6px 4px; border-radius:8px}
.a3n-brand b{font:600 18px/1 var(--a3n-head); letter-spacing:.01em; color:var(--a3n-text)}
.a3n-brand span{font:600 10.5px/1 var(--a3n-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--a3n-accent)}
.a3n-brand:hover b{color:var(--a3n-accent)}
/* Home: back to www.alivemod.com (War Room, 3 Nov). In the bar on wide screens, top of the menu on phones. */
.a3n .a3n-home{flex:none; display:inline-flex; align-items:center; height:26px; padding:0 9px; border-radius:999px; border:1px solid var(--a3n-border); color:var(--a3n-muted); font:500 11px/1 ui-monospace,Consolas,monospace; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap}
.a3n .a3n-home:hover, .a3n .a3n-home:focus-visible{color:var(--a3n-accent); border-color:var(--a3n-accent-dim)}
.a3n-home-m{display:none}
@media (max-width:820px){
  .a3n .a3n-home{display:none}
  .a3n .a3n-home-m{display:block; margin:0 0 8px; padding:10px 12px; border-radius:8px; color:var(--a3n-text); font-size:14px}
  .a3n .a3n-home-m:hover, .a3n .a3n-home-m:focus-visible{background:var(--a3n-surface-2); color:var(--a3n-accent)}
}

/* ---- the menu ---- */
.a3n-menu{position:relative; flex:0 0 auto}
.a3n-menu > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; height:36px; padding:0 13px;
  font:600 11.5px/1 var(--a3n-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--a3n-muted); background:var(--a3n-surface); border:1px solid var(--a3n-line); border-radius:8px;
}
.a3n-menu > summary::-webkit-details-marker{display:none}
.a3n-menu > summary:hover, .a3n-menu[open] > summary{color:var(--a3n-text); border-color:var(--a3n-accent-dim)}
.a3n-burger{position:relative; width:14px; height:10px; border-top:2px solid currentColor; border-bottom:2px solid currentColor}
.a3n-burger::after{content:""; position:absolute; left:0; right:0; top:2px; border-top:2px solid currentColor}
.a3n-menu[open] .a3n-burger{border-color:transparent}
.a3n-menu[open] .a3n-burger::after{top:2px; transform:rotate(45deg)}
.a3n-menu[open] .a3n-burger::before{content:""; position:absolute; left:0; right:0; top:2px; border-top:2px solid currentColor; transform:rotate(-45deg)}

.a3n-panel{
  position:absolute; top:calc(100% + 10px); left:0;
  width:min(380px, calc(100vw - 20px));
  max-height:calc(100vh - var(--a3n-h) - 24px); max-height:calc(100dvh - var(--a3n-h) - 24px);
  overflow:auto; overscroll-behavior:contain;
  background:var(--a3n-surface); border:1px solid var(--a3n-border); border-radius:12px;
  box-shadow:var(--a3n-shadow); padding:8px;
}
.a3n-panel-head{
  padding:8px 10px 10px; border-bottom:1px solid var(--a3n-border); margin-bottom:6px;
  font:600 10.5px/1.3 var(--a3n-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--a3n-muted);
}

.a3n-grp{border-radius:9px}
.a3n-grp + .a3n-grp{margin-top:2px}
.a3n-grp > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  font:600 15px/1.2 var(--a3n-head); letter-spacing:.01em; color:var(--a3n-text);
}
.a3n-grp > summary::-webkit-details-marker{display:none}
.a3n-grp > summary:hover{background:var(--a3n-surface-2)}
/* Plain numbers, not pills: on the ledger a pill reads as one of its commit counts. */
.a3n-grp > summary .a3n-count{
  margin-left:auto; font:600 11.5px/1 var(--a3n-mono); color:var(--a3n-muted); font-variant-numeric:tabular-nums;
}
.a3n-grp > summary .a3n-chev{
  width:7px; height:7px; border-right:2px solid var(--a3n-muted); border-bottom:2px solid var(--a3n-muted);
  transform:rotate(-45deg); transition:transform .12s ease; flex:0 0 auto; margin:0 2px 0 auto;
}
.a3n-grp > summary .a3n-count + .a3n-chev{margin-left:1px}
.a3n-grp[open] > summary .a3n-chev{transform:rotate(45deg)}

.a3n-list{list-style:none; margin:2px 0 8px; padding:0 0 0 10px}
.a3n-list li{margin:0}
.a3n-list a{
  display:block; padding:6px 10px; border-radius:7px; border-left:2px solid transparent;
  font-size:14px; line-height:1.3; color:var(--a3n-text);
}
.a3n-list a:hover{background:var(--a3n-surface-2); color:var(--a3n-accent)}
.a3n-list a[aria-current="page"]{color:var(--a3n-accent); border-left-color:var(--a3n-accent); background:var(--a3n-surface-2); font-weight:600}
.a3n-toc{list-style:none; margin:2px 0 6px 14px; padding:0 0 0 10px; border-left:1px solid var(--a3n-border)}
.a3n-toc a{
  display:block; padding:4px 8px; border-radius:6px;
  font-size:13px; line-height:1.3; color:var(--a3n-muted);
}
.a3n-toc a:hover{color:var(--a3n-text); background:var(--a3n-surface-2)}

/* ---- search ---- */
/* Every margin set: the ledger has no doctype, and in quirks mode a form gets 1em below it. */
.a3n-search{position:relative; flex:1 1 auto; min-width:0; max-width:460px; margin:0}
.a3n-search input{
  width:100%; height:38px; margin:0; padding:0 38px 0 36px;
  font:15px/1 var(--a3n-ui); color:var(--a3n-text);
  background:var(--a3n-surface); border:1px solid var(--a3n-line); border-radius:9px;
  -webkit-appearance:none; appearance:none;
}
.a3n-search input::placeholder{color:var(--a3n-muted); opacity:1}
.a3n-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.a3n-search input:focus{outline:none; border-color:var(--a3n-accent); box-shadow:0 0 0 3px var(--a3n-mark)}
.a3n-glass{
  position:absolute; left:12px; top:50%; width:13px; height:13px; margin-top:-8px;
  border:2px solid var(--a3n-muted); border-radius:50%; pointer-events:none;
}
.a3n-glass::after{content:""; position:absolute; width:2px; height:6px; background:var(--a3n-muted); right:-4px; bottom:-5px; transform:rotate(-45deg); border-radius:1px}
.a3n-key{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font:600 11px/1 var(--a3n-mono); color:var(--a3n-muted);
  border:1px solid var(--a3n-border); border-bottom-width:2px; border-radius:5px; padding:3px 6px; pointer-events:none;
}
.a3n-search.a3n-typing .a3n-key{display:none}

.a3n-results{
  position:absolute; top:calc(100% + 8px); right:0;
  width:max(100%, min(560px, calc(100vw - 20px)));
  max-height:min(70vh, 620px); max-height:min(70dvh, 620px);
  overflow:auto; overscroll-behavior:contain;
  background:var(--a3n-surface); border:1px solid var(--a3n-border); border-radius:12px;
  box-shadow:var(--a3n-shadow); padding:6px;
}
.a3n-results[hidden], .a3n-opts[hidden], .a3n-foot[hidden]{display:none}
.a3n-status-row{display:flex; align-items:center; gap:8px; padding:2px 2px 2px 12px}
.a3n-status{flex:1 1 auto; min-width:0; padding:8px 0 6px; font:600 10.5px/1.3 var(--a3n-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--a3n-muted)}
/* A sentence rather than a count: nothing found, still loading, or it failed. */
.a3n-status.a3n-msg{padding:8px 0; font:14px/1.45 var(--a3n-ui); letter-spacing:0; text-transform:none; color:var(--a3n-text)}
.a3n-close{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin:0; padding:0; border-radius:8px; border:1px solid transparent;
  background:transparent; color:var(--a3n-muted); font:400 22px/1 var(--a3n-ui); cursor:pointer;
}
.a3n-close:hover{color:var(--a3n-text); background:var(--a3n-surface-2); border-color:var(--a3n-border)}
.a3n-hit{
  display:block; padding:10px 12px; border-radius:9px; border:1px solid transparent; color:var(--a3n-text);
  cursor:pointer;
}
.a3n-hit + .a3n-hit{margin-top:2px}
.a3n-hit:hover, .a3n-hit.a3n-active{background:var(--a3n-surface-2); border-color:var(--a3n-border)}
.a3n-hit.a3n-active{border-color:var(--a3n-accent-dim)}
.a3n-hit-top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.a3n-hit-page{font:600 15px/1.25 var(--a3n-head); letter-spacing:.01em}
.a3n-hit-fam{font:600 10.5px/1 var(--a3n-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--a3n-fam)}
.a3n-hit-key{font:600 11.5px/1 var(--a3n-mono); color:var(--a3n-muted)}
.a3n-hit-sec{display:block; margin-top:3px; font-size:13px; color:var(--a3n-accent)}
.a3n-hit-snip{display:block; margin-top:4px; font-size:13.5px; line-height:1.45; color:var(--a3n-muted)}
.a3n-hit mark{background:var(--a3n-mark); color:var(--a3n-text); border-radius:3px; padding:0 1px}
.a3n-foot{
  display:flex; gap:14px; flex-wrap:wrap; padding:8px 12px 6px; margin-top:4px; border-top:1px solid var(--a3n-border);
  font:600 10.5px/1.3 var(--a3n-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--a3n-muted);
}

/* ---- the online indexer's state: one line, the dot alone on narrow screens so the bar never grows ---- */
.a3n-ix{
  display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 11px; flex:0 0 auto; white-space:nowrap;
  font:600 11px/1 var(--a3n-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--a3n-muted); background:var(--a3n-surface); border:1px solid var(--a3n-line); border-radius:8px;
}
.a3n-ix[hidden]{display:none}
.a3n .a3n-ix:hover{color:var(--a3n-text); border-color:var(--a3n-accent-dim)}
.a3n-ix-dot{width:8px; height:8px; border-radius:50%; background:var(--a3n-line); flex:0 0 auto}
.a3n-ix.on .a3n-ix-dot{background:#36a46f}
.a3n-ix.busy .a3n-ix-dot{background:#36a46f; animation:a3n-ix-pulse 1.6s ease-in-out infinite}
.a3n-ix.paused .a3n-ix-dot{background:#e0a53a}
@keyframes a3n-ix-pulse{50%{opacity:.35}}
@media (max-width:820px){ .a3n-ix-text{display:none} .a3n-ix{padding:0 12px} }
@media (prefers-reduced-motion:reduce){ .a3n-ix.busy .a3n-ix-dot{animation:none} }

/* ---- sign-in with Discord: added by the script once auth.php has answered ---- */
.a3n-auth{position:relative; flex:0 0 auto; display:flex; align-items:center; margin-left:auto}
.a3n-auth[hidden]{display:none}
.a3n-signin{
  display:inline-flex; align-items:center; height:40px; padding:0 13px; white-space:nowrap;
  font:600 11.5px/1 var(--a3n-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--a3n-muted); background:var(--a3n-surface); border:1px solid var(--a3n-line); border-radius:8px;
}
.a3n .a3n-signin:hover{color:var(--a3n-text); border-color:var(--a3n-accent-dim)}
.a3n-signin .a3n-short{display:none}
.a3n-acct > summary{
  list-style:none; display:flex; align-items:center; gap:8px; height:40px; padding:0 10px 0 5px; cursor:pointer;
  background:var(--a3n-surface); border:1px solid var(--a3n-line); border-radius:8px; color:var(--a3n-text);
}
.a3n-acct > summary::-webkit-details-marker{display:none}
.a3n-acct > summary:hover, .a3n-acct[open] > summary{border-color:var(--a3n-accent-dim)}
.a3n-av{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto; object-fit:cover;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--a3n-surface-2); color:var(--a3n-accent); font:600 13px/1 var(--a3n-head);
}
.a3n-who{max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px}
.a3n-role{font:600 10px/1 var(--a3n-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--a3n-accent);
  border:1px solid var(--a3n-accent-dim); border-radius:999px; padding:3px 7px}
.a3n-acct-panel{
  position:absolute; top:calc(100% + 8px); right:0; min-width:220px; max-width:calc(100vw - 16px);
  background:var(--a3n-surface); border:1px solid var(--a3n-border); border-radius:12px;
  box-shadow:var(--a3n-shadow); padding:12px;
}
.a3n-acct-panel p{margin:0 0 10px; font-size:14px; color:var(--a3n-muted); overflow-wrap:anywhere}
.a3n-acct-panel p b{color:var(--a3n-text)}
.a3n .a3n-acct-panel a{color:var(--a3n-accent)}
.a3n-out{
  font:600 11.5px/1 var(--a3n-mono); letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  color:var(--a3n-text); background:transparent; border:1px solid var(--a3n-line); border-radius:8px; padding:10px 14px;
}
.a3n-out:hover{border-color:var(--a3n-accent)}

.a3n :focus-visible{outline:2px solid var(--a3n-accent); outline-offset:2px}
.a3n-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---- phones and tablets: no keys to hint at, and controls a finger can hit ---- */
@media (hover:none), (pointer:coarse){
  .a3n-key, .a3n-foot{display:none !important}
}
@media (pointer:coarse){
  .a3n-menu > summary{height:44px; min-width:44px}
  .a3n-search input{height:44px}
  .a3n-close{width:44px; height:44px}
  .a3n-signin, .a3n-acct > summary{height:44px}
  .a3n-list a{padding:12px 10px}
  .a3n-toc a{padding:10px 8px}
}

/* ---- small screens ---- */
@media (max-width:640px){
  .a3n{--a3n-h:54px}
  .a3n-bar{padding:0 10px; gap:8px}
  .a3n-brand span{display:none}
  /* Hidden from sight but still the button's name for a screen reader. */
  .a3n-menu > summary .a3n-menu-word{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .a3n-menu > summary{padding:0 12px}
  .a3n-key{display:none}
  .a3n-search input{padding-right:12px; font-size:16px}
  /* never squeezed below the magnifier, or the input spills over its neighbours */
  .a3n-search{flex:1 1 40px; min-width:40px}
  .a3n-search input{box-sizing:border-box; padding-right:0}
  .a3n-who, .a3n-acct .a3n-role, .a3n-signin .a3n-long{display:none}
  .a3n-signin .a3n-short{display:inline}
  .a3n-acct > summary{padding:0 5px}
  .a3n-signin{padding:0 10px}
  .a3n-acct-panel{position:fixed; top:calc(var(--a3n-h) + 6px); left:auto; right:8px}
  .a3n-panel, .a3n-results{
    position:fixed; top:calc(var(--a3n-h) + 6px); left:8px; right:8px; width:auto;
    max-height:calc(100vh - var(--a3n-h) - 14px); max-height:calc(100dvh - var(--a3n-h) - 14px);
  }
}

/* narrow phones: a little less padding so the bar fits 360px signed out */
@media (max-width:400px){ .a3n-bar{gap:6px} .a3n-ix{padding:0 8px} .a3n .a3n-news-btn{padding:0 8px} }
@media (max-width:380px){ .a3n-brand{padding:6px 0} .a3n-signin{padding:0 6px} }

/* ---- Windows High Contrast and other forced colours ---- */
@media (forced-colors:active){
  .a3n-list a, .a3n-hit{border-color:Canvas}
  .a3n-list a[aria-current="page"]{border-left-color:Highlight}
  .a3n-hit.a3n-active{outline:2px solid Highlight; outline-offset:-2px}
  .a3n mark, mark.a3n-found{forced-color-adjust:none; background:Mark; color:MarkText}
}
@media (prefers-reduced-motion:reduce){.a3n *{transition:none !important}}
@media print{.a3n{display:none}}

/* waiting light on the account button: something sent in waits for an admin. The site accent, not red: red reads as an error */
.a3n-acct > summary{position:relative}
.a3n-dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--a3n-accent);box-shadow:0 0 0 2px var(--a3n-bg, #0f141a),0 0 6px var(--a3n-accent);animation:a3n-pulse 2s ease-in-out infinite}
@keyframes a3n-pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.a3n-dot{animation:none}}

/* Reaches outside the bar: a Discord name in the colour Discord shows it in, wherever a page shows one (set with
   --who from the person's highest coloured role). In the light theme it is darkened by a third so the yellow and
   green stay readable on white. */
.a3-name, .a3n .a3-name{color:var(--who)}
:root[data-theme="light"] .a3-name, :root[data-theme="light"] .a3n .a3-name{color:color-mix(in srgb, var(--who) 68%, #000)}

/* ---- what's new: the "New" button, its panel, the menu's marks and the tag on a page's rows ---- */
.a3n-news{position:relative; flex:0 0 auto}
.a3n-news-btn{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; cursor:pointer;
  font:600 11.5px/1 var(--a3n-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--a3n-muted); background:var(--a3n-surface); border:1px solid var(--a3n-line); border-radius:8px;
}
.a3n-news-btn:hover, .a3n-news-btn[aria-expanded="true"]{color:var(--a3n-text); border-color:var(--a3n-accent-dim)}
.a3n-badge{
  min-width:20px; height:20px; padding:0 6px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--a3n-accent); color:#1a1205; font:700 11px/1 var(--a3n-ui); letter-spacing:0;
}
.a3n-badge[hidden]{display:none}
.a3n-news-none .a3n-news-btn{opacity:.75}
.a3n-newsp{
  position:absolute; top:calc(100% + 10px); left:0; z-index:5;
  width:min(420px, calc(100vw - 20px));
  max-height:calc(100vh - var(--a3n-h) - 24px); max-height:calc(100dvh - var(--a3n-h) - 24px);
  overflow:auto; overscroll-behavior:contain;
  background:var(--a3n-surface); border:1px solid var(--a3n-border); border-radius:12px;
  box-shadow:var(--a3n-shadow); padding:8px;
}
.a3n-newsp[hidden]{display:none}
.a3n-news-page{padding:8px 10px; border-bottom:1px solid var(--a3n-border)}
.a3n-news-page:last-of-type{border-bottom:0}
.a3n-news-title{display:block; font:600 14px/1.3 var(--a3n-head); color:var(--a3n-text); margin-bottom:4px}
.a3n-news-title:hover{color:var(--a3n-accent)}
.a3n-news-rows{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.a3n-news-rows li{display:grid; grid-template-columns:auto 1fr; gap:8px; font-size:13px; line-height:1.4; color:var(--a3n-muted)}
.a3n-news-when{font:600 11px/1.6 var(--a3n-mono); color:var(--a3n-fam); white-space:nowrap}
.a3n-news-what{color:var(--a3n-text)}
.a3n-news-kind{display:inline-block;margin-right:6px;padding:0 5px;border:1px solid var(--a3n-fam);border-radius:4px;font:600 10px/1.5 var(--a3n-mono);color:var(--a3n-fam);vertical-align:1px}
.a3n-news-link{color:var(--a3n-text);text-decoration:underline;text-underline-offset:2px}
.a3n-news-more{display:block !important; font-style:italic}
.a3n-news-clear{
  margin:8px 10px 4px; height:32px; padding:0 12px; cursor:pointer;
  font:600 11px/1 var(--a3n-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--a3n-muted); background:var(--a3n-surface-2); border:1px solid var(--a3n-line); border-radius:8px;
}
.a3n-news-clear:hover{color:var(--a3n-text); border-color:var(--a3n-accent-dim)}
.a3n-list a.a3n-hasnew::after, .a3n-grp-new > summary > span:first-child::after{
  content:""; display:inline-block; width:7px; height:7px; margin-left:7px; border-radius:50%;
  background:var(--a3n-accent); vertical-align:middle;
}
@media (pointer:coarse){ .a3n-news-btn{height:44px} }
@media (max-width:640px){ .a3n-newsp{position:fixed; top:calc(var(--a3n-h) + 6px); left:10px; right:10px; width:auto} .a3n-news-word{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .a3n-news-btn{padding:0 10px} .a3n-news-btn::before{content:"New"} }
/* outside the bar: an unread row on the page you're reading */
.a3n-newtag{
  display:inline-block; margin-right:8px; padding:1px 7px; border-radius:9px; vertical-align:1px;
  background:rgba(242,165,65,.18); color:#f2a541; font:700 10.5px/1.5 ui-monospace,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase;
}
:root[data-theme="light"] .a3n-newtag{background:rgba(181,101,29,.14); color:#8a4e15}
/* the same dot as the menu's, beside what changed on the page you're reading */
.a3n-ondot::after{
  content:""; display:inline-block; width:7px; height:7px; margin-left:7px; border-radius:50%;
  background:#f2a541; vertical-align:middle; flex:none;
}
:root[data-theme="light"] .a3n-ondot::after{background:#b5651d}

/* Donate link in the bar (only on builds with ALIVE3_DONATE=1): small and muted, so it's there, not asking */
.a3n .a3n-donate{flex:none;display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:999px;border:1px solid var(--a3n-border);color:var(--a3n-muted);font:500 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap;opacity:.85}
.a3n .a3n-donate:hover,.a3n .a3n-donate:focus-visible{color:var(--a3n-accent);border-color:var(--a3n-accent-dim);opacity:1;text-decoration:none}
/* Phones: no room in the bar, so Donate moves to the top of the page menu (Jman 3 Nov: it sat over the search box) */
.a3n-donate-m{display:none}
@media (max-width:640px){
  .a3n .a3n-donate{display:none}
  .a3n-donate-m{display:block; margin:0 0 10px; padding:10px 12px; border:1px solid var(--a3n-border); border-radius:8px; color:var(--a3n-muted); font:500 12px/1 ui-monospace,Consolas,monospace; letter-spacing:.05em; text-transform:uppercase; text-align:center; text-decoration:none}
  .a3n-donate-m:hover, .a3n-donate-m:focus-visible{color:var(--a3n-accent); border-color:var(--a3n-accent-dim); text-decoration:none}
}

/* War Room logo in the bar, linking to /warroom/ (Jman 3 Nov 2026); phones get it in the page menu instead */
.a3n .a3n-wr{flex:none;display:inline-flex;align-items:center;padding:3px 4px;border-radius:6px;opacity:.9;text-decoration:none}
.a3n .a3n-wr:hover,.a3n .a3n-wr:focus-visible{opacity:1;background:var(--a3n-surface-2)}
.a3n .a3n-wr svg{height:20px;width:auto;display:block}
@media (max-width:640px){ .a3n .a3n-wr{display:none} }
/* the War Room logo sits at the right, beside the sign-in chip (Jman 3 Nov 2026) */
.a3n .a3n-wr{margin-left:auto}
.a3n .a3n-wr ~ .a3n-auth{margin-left:10px}
