/* Archive & Atlas — the shared shell base. Each surface wears its own color
   register via #app[data-surface]; the Counter restyle (shell-counter.css) is
   loaded in-body by shell.php AFTER this file and supplies the resurface
   chrome on every surface, reading these same --s-* tokens so colors fade. */
:root{
  --s-gold:oklch(0.72 0.12 82);
  --s-green:oklch(0.50 0.06 162);
  --s-coral:oklch(0.575 0.12 42);
  --s-indigo:oklch(0.62 0.13 286);
  --s-bg:oklch(0.979 0.010 85);
  --s-fg:oklch(0.205 0.018 62);
  --s-accent:var(--s-gold);
}
:root,#app{
  --s-dim:color-mix(in oklab,var(--s-fg) 52%,transparent);
  --s-faint:color-mix(in oklab,var(--s-fg) 30%,transparent);
  --s-line:color-mix(in oklab,var(--s-fg) 14%,transparent);
  --s-card:color-mix(in oklab,var(--s-fg) 5%,var(--s-bg));
  --s-card2:color-mix(in oklab,var(--s-fg) 11%,var(--s-bg));
}
#app{background:var(--s-bg);color:var(--s-fg);min-height:100vh;transition:background-color .55s ease,color .55s ease;}
/* Cross-document View Transitions still fade the PAGE between surfaces; the bar
   stays put (uniform) so only the body under it cross-fades on navigation. */
@view-transition{ navigation: auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.55s; animation-timing-function:ease; }
/* ===== page color registers — drive #app body/content ONLY, not the shell ===== */
#app[data-surface="store"]{--s-bg:oklch(0.979 0.010 85);--s-fg:oklch(0.205 0.018 62);--s-accent:var(--s-gold);}
#app[data-surface="library"]{
  --s-bg:oklch(0.974 0.006 195);--s-fg:oklch(0.215 0.020 220);--s-accent:var(--s-green);
  --lib-bg:var(--s-bg);--lib-page:var(--s-bg);--lib-ink:var(--s-fg);--lib-gold:var(--s-accent);
  --lib-line:var(--s-line);--lib-line-2:color-mix(in oklab,var(--s-fg) 18%,transparent);
  --lib-panel:var(--s-card);--lib-img:var(--s-card2);--lib-band:var(--s-card);
}
#app[data-surface="library"] .lib-shell{background:transparent;border:none;max-width:1180px;}
/* ===== shell chrome base (classes .s-*, colors from the per-surface --s-* register; the Counter restyle overrides positioning/look in-body) ===== */
.shell{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--s-bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--s-line);transition:background-color .55s ease,border-color .55s ease;}
.shell a{color:inherit;text-decoration:none;}
.shell .s-wrap{max-width:1180px;margin:0 auto;padding:0 2rem;}
@media(max-width:640px){.shell .s-wrap{padding:0 1.1rem;}}
.shell .s-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.4rem;height:66px;}
.shell .s-bar>.s-brand{justify-self:start;}
.shell .s-bar>.s-nav{justify-self:center;}
.shell .s-bar>.s-right{justify-self:end;}
.shell .s-brand{display:flex;align-items:baseline;gap:.6rem;white-space:nowrap;}
.shell .s-brand .s-nm{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.4rem;letter-spacing:-.01em;}
.shell .s-brand .s-est{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.24em;color:var(--s-faint);}
@media(max-width:560px){.shell .s-brand .s-est{display:none;}}
.shell .s-nav{display:flex;align-items:center;gap:1.7rem;}
.shell .s-nav a{display:inline-flex;align-items:center;gap:.55rem;position:relative;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--s-dim);padding-bottom:3px;transition:color .25s;}
.shell .s-nav a[aria-disabled="true"]{color:var(--s-faint);cursor:default;}
.shell .s-nav a .s-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--s-faint);}
.shell .s-nav a.store .s-dot,.shell .s-nav a.valuation .s-dot{background:var(--s-gold);}
.shell .s-nav a.library .s-dot{background:var(--s-green);}
.shell .s-nav a.design .s-dot{background:var(--s-indigo);}
.shell .s-nav a.game .s-dot{background:var(--s-coral);}
.shell .s-nav a:hover:not([aria-disabled]){color:var(--s-fg);}
.shell .s-nav a.active{color:var(--s-fg);}
.shell .s-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--s-accent);}
.shell .s-right{display:flex;align-items:center;gap:.9rem;}
.shell .s-search{display:flex;align-items:center;gap:.5rem;border:1px solid var(--s-line);background:var(--s-card);border-radius:8px;padding:.42rem .5rem .42rem .7rem;transition:border-color .25s;}
.shell .s-search:focus-within{border-color:var(--s-accent);}
.shell .s-search i{font-style:normal;color:var(--s-faint);font-size:14px;}
.shell .s-search input{width:150px;background:none;border:none;outline:none;color:var(--s-fg);font-size:.82rem;font-family:inherit;}
.shell .s-search input::placeholder{color:var(--s-faint);}
.shell .s-cart{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--s-dim);}
.shell .s-cart:hover{color:var(--s-fg);}
.shell .s-cartcount{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--s-accent);color:var(--s-bg);font-size:10px;}
.shell .s-acct{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--s-line);font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--s-dim);overflow:hidden;}
.shell .s-acct img{width:100%;height:100%;object-fit:cover;}
.shell .s-acct.s-signin{width:auto;border-radius:999px;padding:0 .9rem;white-space:nowrap;font-size:10px;letter-spacing:.16em;text-transform:uppercase;}
@media(max-width:820px){
  .shell .s-search input{width:96px;}
  .shell .s-bar{grid-template-columns:1fr auto;row-gap:.5rem;height:auto;padding:.7rem 0;}
  .shell .s-bar>.s-nav{grid-column:1/-1;justify-self:stretch;overflow-x:auto;scrollbar-width:none;}
  .shell .s-bar>.s-nav::-webkit-scrollbar{display:none;}
}
.shell .s-acctwrap{position:relative;}
.shell .s-acctwrap>.s-acct{cursor:pointer;background:none;}
.shell .s-acctmenu{position:absolute;right:0;top:38px;min-width:190px;background:var(--s-bg);border:1px solid var(--s-line);border-radius:10px;padding:.4rem;box-shadow:0 14px 36px color-mix(in oklab,var(--s-fg) 16%,transparent);display:grid;gap:1px;z-index:60;}
.shell .s-acctmenu[hidden]{display:none;}
.shell .s-acctmenu a,.shell .s-acctmenu button{display:block;width:100%;text-align:left;padding:.5rem .65rem;border:none;background:none;border-radius:6px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.02rem;color:var(--s-fg);cursor:pointer;}
.shell .s-acctmenu a:hover,.shell .s-acctmenu button:hover{background:var(--s-card);}
@media(prefers-reduced-motion:reduce){
  #app,.shell{transition:none;}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important;}
}

/* AA-LIBPAGE-PAD - lift the whole library card off the page bottom. padding on
   the container can't margin-collapse (which is why the earlier margin rules did
   nothing), so this reliably puts space below the card on every library page. */
#app[data-surface="library"]{padding-bottom:4rem !important}