/* AVAIO Core site chrome: header and footer only.
 * Loaded on every page, including the Atlas, so every rule here is namespaced .ac-*
 * and uses only --av-* tokens. Nothing in this file may style bare elements. */

.ac-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--av-surface);color:var(--av-ink);
  padding:8px 14px;border-radius:var(--av-r-pill);font:500 14px/1 var(--av-sans)}
.ac-skip:focus{left:12px}

/* Height of the site header: 12px top padding + 60px bar + 2px border. Pages that stick
 * something under the header use these (never a hard-coded number): see .ac-subbar below. */
:root{--ac-head-h:74px;--ac-sub-gap:8px}

.ac-wide{--av-page:1328px;--av-gutter:16px}
.ac-header{position:sticky;top:0;z-index:50;padding:12px var(--av-gutter) 0;pointer-events:none}
/* Once the page scrolls, content fades out under the header instead of showing through the
 * gutters around the floating bar (the header script sets .ac-scrolled on <html>). */
.ac-header::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + var(--ac-sub-gap));z-index:-1;
  pointer-events:none;opacity:0;transition:opacity .15s;
  background:linear-gradient(to bottom,var(--av-bg) 0,var(--av-bg) calc(var(--ac-head-h) - 6px),transparent 100%)}
.ac-scrolled .ac-header::before{opacity:1}
.ac-bar{pointer-events:auto;max-width:var(--av-page);margin:0 auto;display:flex;align-items:center;gap:14px;
  min-height:60px;padding:8px 10px 8px 18px;border:1px solid var(--av-rule);border-radius:var(--av-r-lg);
  background:var(--av-header-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:var(--av-shadow);font-family:var(--av-sans);color:var(--av-ink)}
.ac-bar *,.ac-foot *{box-sizing:border-box}
.ac-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:none}
.ac-brand img{display:block;height:24px;width:auto}
.ac-brand .ac-logo-dark{display:none}
.ac-brand .ac-core{font:500 12px/1 var(--av-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--av-ink-2);
  padding-left:12px;border-left:1px solid var(--av-rule-2)}

.ac-nav{display:flex;align-items:center;gap:2px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.ac-nav>li{position:relative}
.ac-nav-a,.ac-sec>summary{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:var(--av-r-pill);
  font:500 14px/1 var(--av-sans);color:var(--av-ink-2);text-decoration:none;white-space:nowrap;cursor:pointer}
.ac-nav-a:hover,.ac-sec>summary:hover,.ac-sec[open]>summary{color:var(--av-ink);background:var(--av-accent-soft)}
.ac-nav-a[aria-current="page"],.ac-sec.is-current>summary{color:var(--av-ink);background:var(--av-sunk)}
.ac-sec>summary{list-style:none}
.ac-sec>summary::-webkit-details-marker{display:none}
.ac-chev{width:12px;height:12px;opacity:.7;transition:transform .15s}
.ac-sec[open] .ac-chev{transform:rotate(180deg)}
/* section menu: the pages of one section, with their one-line summaries */
.ac-drop{position:absolute;left:0;top:calc(100% + 12px);width:340px;padding:8px;border-radius:var(--av-r-md);
  background:var(--av-surface);border:1px solid var(--av-rule);box-shadow:var(--av-shadow);z-index:60}
.ac-nav>li:nth-last-child(-n+2) .ac-drop{left:auto;right:0}
.ac-drop-h{margin:0;padding:8px 12px 10px;font:400 12.5px/1.4 var(--av-sans);color:var(--av-ink-3);
  border-bottom:1px solid var(--av-rule);margin-bottom:4px}
.ac-drop a{display:block;padding:10px 12px;border-radius:var(--av-r-sm);text-decoration:none;color:var(--av-ink)}
.ac-drop a:hover{background:var(--av-accent-soft)}
.ac-drop a[aria-current="page"]{background:var(--av-sunk)}
.ac-drop-t{display:flex;align-items:center;gap:8px;font:500 14px/1.25 var(--av-sans)}
.ac-drop-s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;
  font:400 12.5px/1.4 var(--av-sans);color:var(--av-ink-2)}
.ac-soon{font:600 9.5px/1 var(--av-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--av-bronze-ink);
  border:1px solid currentColor;border-radius:var(--av-r-pill);padding:3px 6px 2px;opacity:.9}

.ac-tools{display:flex;align-items:center;gap:6px;flex:none}
.ac-icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--av-rule-2);
  background:transparent;color:var(--av-ink);cursor:pointer;padding:0}
.ac-icon:hover{background:var(--av-accent-soft)}
.ac-icon svg{width:18px;height:18px}
.ac-theme .ac-sun{display:none}

.ac-acct{position:relative}
.ac-acct>summary{list-style:none;cursor:pointer;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--av-dark-purple);color:var(--av-gold);font:600 13px/1 var(--av-sans);letter-spacing:.04em;border:1px solid var(--av-dark-purple)}
.ac-acct>summary::-webkit-details-marker{display:none}
.ac-pop{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;padding:8px;border-radius:var(--av-r-md);
  background:var(--av-surface);border:1px solid var(--av-rule);box-shadow:var(--av-shadow);z-index:60}
.ac-pop .ac-who{padding:10px 12px 12px;border-bottom:1px solid var(--av-rule);margin-bottom:6px}
.ac-pop .ac-who b{display:block;font:500 14px/1.3 var(--av-sans);color:var(--av-ink)}
.ac-pop .ac-who span{display:block;font:400 12.5px/1.3 var(--av-sans);color:var(--av-ink-3);word-break:break-all}
.ac-pop a{display:block;padding:10px 12px;border-radius:var(--av-r-sm);font:500 14px/1 var(--av-sans);color:var(--av-ink);text-decoration:none}
.ac-pop a:hover{background:var(--av-accent-soft)}

.ac-menu{display:none}
.ac-menu>summary{list-style:none}
.ac-menu>summary::-webkit-details-marker{display:none}
.ac-sheet{position:absolute;left:var(--av-gutter);right:var(--av-gutter);top:calc(100% + 8px);padding:10px;border-radius:var(--av-r-lg);
  background:var(--av-surface);border:1px solid var(--av-rule);box-shadow:var(--av-shadow)}
.ac-sheet a{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border-radius:var(--av-r-md);
  font:500 15px/1.2 var(--av-sans);color:var(--av-ink);text-decoration:none}
.ac-sheet a[aria-current="page"]{background:var(--av-sunk)}
.ac-sheet-h{margin:10px 14px 2px;padding-top:10px;border-top:1px solid var(--av-rule);
  font:600 11px/1 var(--av-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--av-ink-3)}

.ac-bar :focus-visible,.ac-foot :focus-visible{outline:2px solid var(--av-focus);outline-offset:2px}

@media (max-width:960px){
  .ac-nav{display:none}
  .ac-menu{display:block}
  .ac-tools{margin-left:auto}
}
@media (max-width:520px){
  .ac-brand .ac-core{display:none}
  .ac-bar{padding-left:14px}
}

/* dark theme: swap to the gold-and-white logotype, show the sun */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ac-brand .ac-logo-light{display:none}
  :root:not([data-theme="light"]) .ac-brand .ac-logo-dark{display:block}
  :root:not([data-theme="light"]) .ac-theme .ac-moon{display:none}
  :root:not([data-theme="light"]) .ac-theme .ac-sun{display:block}
  :root:not([data-theme="light"]) .ac-acct>summary{background:var(--av-gold);color:var(--av-dark-purple);border-color:var(--av-gold)}
}
:root[data-theme="dark"] .ac-brand .ac-logo-light{display:none}
:root[data-theme="dark"] .ac-brand .ac-logo-dark{display:block}
:root[data-theme="dark"] .ac-theme .ac-moon{display:none}
:root[data-theme="dark"] .ac-theme .ac-sun{display:block}
:root[data-theme="dark"] .ac-acct>summary{background:var(--av-gold);color:var(--av-dark-purple);border-color:var(--av-gold)}

/* ---- page sub-bar ----
 * The page's own controls (tabs, section anchors, search) as a second floating card under
 * the site header: same radius, border, blur and shadow, an 8px gap, and an opaque backdrop
 * so content never shows through around it. Add class "ac-subbar" to the bar; the page
 * keeps its own layout inside it. ::before is the backdrop (full width, clipped to the bar's
 * height plus the gap), ::after is the card, so the element itself has no background. */
.ac-subbar{position:sticky;top:calc(var(--ac-head-h) + var(--ac-sub-gap));z-index:40;isolation:isolate;
  border-radius:var(--av-r-lg)}
.ac-subbar::before{content:"";position:absolute;z-index:-2;left:0;right:0;top:calc(-1 * var(--ac-sub-gap) - 1px);bottom:-10px;
  background:var(--av-bg);box-shadow:0 0 0 100vmax var(--av-bg);clip-path:inset(0 -100vmax);pointer-events:none}
.ac-subbar::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;border:1px solid var(--av-rule);
  background:var(--av-header-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:var(--av-shadow);pointer-events:none}
@media print{.ac-subbar{position:static}.ac-subbar::before,.ac-subbar::after{display:none}}

/* ---- footer ---- */
.ac-foot{margin-top:72px;border-top:1px solid var(--av-rule);font-family:var(--av-sans);color:var(--av-ink-3)}
.ac-foot-in{max-width:var(--av-page);margin:0 auto;padding:28px var(--av-gutter) 36px;display:flex;flex-wrap:wrap;
  gap:14px 28px;align-items:center;justify-content:space-between;font-size:13px;line-height:1.5}
.ac-foot-l{display:flex;align-items:center;gap:12px}
.ac-foot-l img{width:28px;height:28px;display:block;border-radius:50%}
:root[data-theme="dark"] .ac-foot-icon{box-shadow:0 0 0 1px var(--av-rule-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ac-foot-icon{box-shadow:0 0 0 1px var(--av-rule-2)}}
.ac-foot a{color:var(--av-ink-2);text-decoration:none;border-bottom:1px solid var(--av-rule-2)}
.ac-foot a:hover{color:var(--av-ink);border-bottom-color:var(--av-ink)}
