/* ============================================================================
   Archive & Atlas — UNIFIED SITE HEADER  (one header, every surface)
   ----------------------------------------------------------------------------
   Brand-new namespace (.aa-*) with ZERO dependency on shell.css / shell-counter.css
   / store.css, so no legacy rule can ever fight it. Mobile-first: the right side
   is a search icon + menu button by default; the inline bar (nav · cart · account)
   appears only at >=1040px. ACCOUNT sizes to its own text with no fixed width and
   no overflow:hidden, so it can never be cropped on any display, zoom, or scaling.
   Colors come from per-surface tokens set on the header element itself (works even
   on pages with no #app wrapper). Values copied verbatim from shell.css so the
   look is unchanged. The cross-surface fade is preserved.
   ============================================================================ */

.aa-head{
  /* default = Store palette; overridden per surface below */
  --bg:oklch(0.979 0.010 85);
  --fg:oklch(0.205 0.018 62);
  --accent:oklch(0.72 0.12 82);
  --dim:color-mix(in oklab,var(--fg) 52%,transparent);
  --faint:color-mix(in oklab,var(--fg) 30%,transparent);
  --line:color-mix(in oklab,var(--fg) 14%,transparent);
  --line2:color-mix(in oklab,var(--fg) 20%,transparent);
  --card:color-mix(in oklab,var(--fg) 6%,var(--bg));
  --card2:color-mix(in oklab,var(--fg) 11%,var(--bg));

  position:sticky;top:0;z-index:120;
  background:color-mix(in oklab,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  color:var(--fg);
  font-family:'Inter',system-ui,sans-serif;
  transition:background-color .55s ease,border-color .55s ease,color .55s ease;
}
.aa-head[data-surface="library"]{
  --bg:oklch(0.974 0.006 195); --fg:oklch(0.215 0.020 220); --accent:oklch(0.50 0.06 162);
}
.aa-head[data-surface="store"]{
  --bg:oklch(0.979 0.010 85); --fg:oklch(0.205 0.018 62); --accent:oklch(0.72 0.12 82);
}
.aa-head a{color:inherit;text-decoration:none;}

/* ---- bar ---------------------------------------------------------------- */
.aa-wrap{max-width:1320px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:14px;height:58px;}
@media(min-width:760px){ .aa-wrap{height:66px;padding:0 28px;} }

.aa-brand{display:flex;align-items:baseline;gap:9px;white-space:nowrap;margin-right:auto;}
.aa-mark{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:19px;letter-spacing:-.02em;color:var(--fg);}
@media(min-width:760px){ .aa-mark{font-size:21px;} }
.aa-est{display:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);}
@media(min-width:980px){ .aa-est{display:inline;} }

/* nav — hidden on mobile (lives in the sheet); truncates before the tools do */
.aa-nav{display:none;align-items:center;gap:20px;min-width:0;overflow:hidden;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;}
.aa-nav a{position:relative;padding:6px 0;color:var(--dim);white-space:nowrap;}
.aa-nav a:hover{color:var(--fg);}
.aa-nav a.aa-on{color:var(--fg);}
.aa-nav a.aa-on::after{content:"";position:absolute;left:0;right:0;bottom:-19px;height:2px;background:var(--accent);}
@media(min-width:1040px){ .aa-nav{display:flex;} }

/* tools cluster — never shrinks, never clips */
.aa-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none;}
.aa-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;color:var(--fg);background:none;border:none;cursor:pointer;flex:none;}
.aa-icon:hover{background:var(--card2);}

.aa-cart{display:none;align-items:center;gap:5px;white-space:nowrap;flex:none;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--dim);
  border:1px solid var(--line2);border-radius:6px;padding:7px 13px;}
.aa-cart:hover{border-color:var(--fg);color:var(--fg);}
.aa-cart b{color:var(--fg);font-weight:500;}
.aa-cartcount{font-variant-numeric:tabular-nums;}
@media(min-width:760px){ .aa-cart{display:inline-flex;} }

/* ACCOUNT — content-sized, no fixed width, no overflow:hidden → cannot clip */
.aa-acct{display:none;align-items:center;height:34px;flex:none;white-space:nowrap;cursor:pointer;
  border:1px solid var(--line2);border-radius:6px;padding:0 14px;background:none;color:var(--dim);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;}
.aa-acct:hover{border-color:var(--accent);color:var(--fg);}
@media(min-width:1040px){ .aa-acct{display:inline-flex;} }

.aa-acctwrap{position:relative;flex:none;}
.aa-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--bg);
  border:1px solid var(--line2);border-radius:12px;padding:6px;z-index:130;
  box-shadow:0 24px 56px -32px color-mix(in oklab,var(--fg) 42%,transparent);}
.aa-menu[hidden]{display:none;}
.aa-menu a,.aa-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border:none;background:none;
  border-radius:8px;font-family:'Inter',sans-serif;font-size:13px;color:var(--fg);cursor:pointer;text-decoration:none;}
.aa-menu a:hover,.aa-menu button:hover{background:var(--card2);}
.aa-menu form{margin:4px 0 0;border-top:1px solid var(--line);padding-top:4px;}

/* hamburger — visible until the inline bar takes over */
.aa-burger{display:grid;}
@media(min-width:1040px){ .aa-burger{display:none;} }

/* ===== whole-archive search overlay (glass opens a top sheet) ============= */
.aa-srch{position:fixed;inset:0;z-index:500;background:color-mix(in oklab,var(--fg) 42%,transparent);
  font-family:'Inter',system-ui,sans-serif;}
.aa-srch[hidden]{display:none;}
.aa-srch-panel{position:absolute;top:0;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);
  max-height:88vh;display:flex;flex-direction:column;animation:aa-drop .2s ease;}
@keyframes aa-drop{from{transform:translateY(-10px);opacity:.5;}to{transform:translateY(0);opacity:1;}}
.aa-srch-top{display:flex;align-items:center;gap:14px;max-width:1320px;margin:0 auto;width:100%;padding:18px;}
@media(min-width:760px){ .aa-srch-top{padding:20px 28px;} }
.aa-srch-top svg{flex:none;color:var(--accent);}
.aa-srch-top input{flex:1;min-width:0;border:none;outline:none;background:none;color:var(--fg);
  font-family:'Fraunces',Georgia,serif;font-size:clamp(20px,3vw,28px);}
.aa-srch-top input::placeholder{color:var(--faint);}
.aa-srch-x{flex:none;font-size:24px;line-height:1;color:var(--dim);width:38px;height:38px;border-radius:8px;background:none;border:none;cursor:pointer;}
.aa-srch-x:hover{background:var(--card2);color:var(--fg);}
.aa-srch-results{max-width:1320px;margin:0 auto;width:100%;padding:0 18px 22px;overflow:auto;}
@media(min-width:760px){ .aa-srch-results{padding:0 28px 24px;} }
.aa-srch-grp{padding:16px 0 4px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}
.aa-srch-res{display:flex;align-items:center;gap:13px;padding:11px 0;border-top:1px solid var(--line);}
.aa-srch-res:hover .t{color:var(--accent);}
.aa-srch-res .th{width:46px;height:46px;border-radius:4px;flex:none;background:var(--card2);background-size:cover;background-position:center;}
.aa-srch-res .m{min-width:0;flex:1;}
.aa-srch-res .t{display:block;font-family:'Fraunces',Georgia,serif;font-size:17px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s;}
.aa-srch-res .s{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:2px;}
.aa-srch-res .pr{flex:none;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);white-space:nowrap;}
.aa-srch-res .tg{flex:none;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.aa-srch-empty{padding:30px 0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.aa-srch-foot{margin-top:6px;padding:14px 0 0;border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;}
.aa-srch-foot a{color:var(--accent);}

/* ===== mobile menu sheet ================================================== */
.aa-sheet{position:fixed;inset:0;z-index:400;background:color-mix(in oklab,var(--fg) 42%,transparent);font-family:'Inter',system-ui,sans-serif;}
.aa-sheet[hidden]{display:none;}
.aa-sheet-panel{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(460px,100%);background:var(--bg);display:flex;flex-direction:column;}
.aa-sheet-top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);}
.aa-sheet-ttl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
.aa-sheet-x{font-size:22px;color:var(--dim);width:36px;height:36px;border-radius:50%;background:none;border:none;cursor:pointer;}
.aa-sheet-x:hover{background:var(--card2);}
.aa-sheet-search{display:flex;align-items:center;gap:8px;margin:16px 20px;background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:11px 16px;}
.aa-sheet-search svg{flex:none;color:var(--accent);}
.aa-sheet-search input{border:none;outline:none;background:none;font-size:14px;color:var(--fg);width:100%;font-family:inherit;}
.aa-sheet-links{list-style:none;margin:0;padding:0;overflow:auto;}
.aa-sheet-links a{display:flex;align-items:baseline;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);}
.aa-sheet-links .l{font-family:'Fraunces',Georgia,serif;font-size:24px;color:var(--fg);}
.aa-sheet-links .m{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

@media(prefers-reduced-motion:reduce){ .aa-head{transition:none;} .aa-srch-panel{animation:none;} }

/* AA-BAG-V128 - bag glyph + corner count badge for the unified header.
   Appended last so it wins over the earlier .aa-cart text rules. */
.aa-cart{position:relative;display:none;align-items:center;justify-content:center;gap:0;flex:none;font-size:0;color:var(--dim);border:1px solid var(--line2);border-radius:6px;padding:7px 10px;}
.aa-cart:hover{border-color:var(--fg);color:var(--fg);}
.aa-cart::before{content:"";display:inline-block;width:20px;height:20px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z'%2F%3E%3Cpath%20d%3D'M3%206h18'%2F%3E%3Cpath%20d%3D'M16%2010a4%204%200%200%201-8%200'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z'%2F%3E%3Cpath%20d%3D'M3%206h18'%2F%3E%3Cpath%20d%3D'M16%2010a4%204%200%200%201-8%200'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.aa-cart b{font-size:0;}
.aa-cartcount{position:absolute;top:-5px;right:-5px;display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--fg);color:var(--bg);font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.aa-cartcount[hidden]{display:none;}
@media(min-width:760px){ .aa-cart{display:inline-flex;} }

/* AA-SHEET-SURFACE-V136 - the menu sheet (.aa-sheet) and the whole-archive
   search overlay (.aa-srch) render OUTSIDE .aa-head, so the per-surface tokens
   defined on .aa-head never reached them and background:var(--bg) resolved to
   nothing - a transparent, unreadable panel (worst on /library, which has no
   global fallback token). Give both overlays their own token scope, keyed off
   the data-surface shell.php now stamps on them. Values verbatim from .aa-head. */
.aa-sheet,.aa-srch{
  --bg:oklch(0.979 0.010 85);
  --fg:oklch(0.205 0.018 62);
  --accent:oklch(0.72 0.12 82);
  --dim:color-mix(in oklab,var(--fg) 52%,transparent);
  --faint:color-mix(in oklab,var(--fg) 30%,transparent);
  --line:color-mix(in oklab,var(--fg) 14%,transparent);
  --line2:color-mix(in oklab,var(--fg) 20%,transparent);
  --card:color-mix(in oklab,var(--fg) 6%,var(--bg));
  --card2:color-mix(in oklab,var(--fg) 11%,var(--bg));
}
.aa-sheet[data-surface="library"],.aa-srch[data-surface="library"]{
  --bg:oklch(0.974 0.006 195); --fg:oklch(0.215 0.020 220); --accent:oklch(0.50 0.06 162);
}
.aa-sheet[data-surface="store"],.aa-srch[data-surface="store"]{
  --bg:oklch(0.979 0.010 85); --fg:oklch(0.205 0.018 62); --accent:oklch(0.72 0.12 82);
}


/* ===== v209: archive sub-nav — self-contained (renders OUTSIDE .aa-head, on every
   archive page incl. support pages that never load library.css) ===== */
.aa-subnav{
  --sn-fg:oklch(0.215 0.020 220);
  --sn-accent:oklch(0.50 0.06 162);
  --sn-dim:color-mix(in oklab,var(--sn-fg) 55%,transparent);
  --sn-line:color-mix(in oklab,var(--sn-fg) 12%,transparent);
  --sn-band:color-mix(in oklab,var(--sn-fg) 4%,oklch(0.985 0.004 195));
  background:var(--sn-band);
  border-bottom:1px solid var(--sn-line);
  font-family:'JetBrains Mono',ui-monospace,monospace;
}
.aa-subnav-in{max-width:1320px;margin:0 auto;padding:0 18px;height:40px;display:flex;align-items:center;gap:22px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media(min-width:760px){ .aa-subnav-in{padding:0 28px;} }
.aa-subnav-lbl{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--sn-accent);white-space:nowrap;}
.aa-subnav a{position:relative;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sn-dim);white-space:nowrap;padding:4px 0;}
.aa-subnav a:hover{color:var(--sn-fg);}
.aa-subnav a.on{color:var(--sn-fg);}
.aa-subnav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--sn-accent);}
/* ===== end v209 ===== */