/* ═══════════════════════════════════════════════════════════════════════════
   shop.css — /store/, the skin shop, in the haven look.

   Structure comes from dominion.css (.shell .page-head .panel .readout .btn
   .chip .input .select .empty .tag), the look from haven.css (tokens only —
   never a raw hex for ink). Everything page-specific lives under the sh-
   prefix: a short generic class name is not a namespace, and this tree has
   already paid for `.dc` colliding with page chrome once.

   ★ RED/GOLD IS LIGHT, NEVER INK. The paint tokens (--ember, --ember-deep,
     --ember-char, --violet*) appear below only as backgrounds, borders and
     glows. The two ink-grade golds (--ember-core 12.7:1, --ember-ink 10.9:1)
     carry numbers and hot links, which is their documented use.

   ★ `[hidden]` IS RE-ASSERTED. .facts, .chips and the grids set display:flex/
     grid, and a class display out-ranks the UA's [hidden] rule — the exact
     defect market.css and live.css already document. One scoped rule keeps
     every JS-toggled host honest.
   ═══════════════════════════════════════════════════════════════════════════ */

.sh-page [hidden] { display: none !important; }

/* ── the head: wallet facts + the sign-in CTA ────────────────────────────── */
/* ★ haven.css loads AFTER this sheet on purpose (DESIGN.md §2), so a page
   override of a theme rule must win on SPECIFICITY, never on order: the
   first cut of these three rules tied haven's `.page-head .facts > div` and
   `.btn { white-space:nowrap }` and lost silently — the 430px frame clipped
   both wallet lines with a clean console and a passing build. */
.sh-wallet { max-width: 560px; }
.page-head .facts.sh-wallet > div { min-width: 0; }
.sh-wallet-slots { display: grid; gap: 6px; justify-items: center; }
.sh-slots { font-size: 12px; letter-spacing: .08em; color: var(--t-sec); }
.sh-slots.full { color: var(--ember-core); }
/* the shared .btn is nowrap; this label is a sentence ("+2 slots for 25,000
   points") and at 430px it widened its cell past the strip's overflow:hidden
   and clipped both lines. It wraps, and the two cells stack under 640px. */
.sh-wallet .btn.sh-slots-btn { margin-top: 2px; white-space: normal; height: auto; line-height: 1.35; padding: 6px 12px; max-width: 100%; }
@media (max-width: 640px) {
  .page-head .facts.sh-wallet > div { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .page-head .facts.sh-wallet > div:last-child { border-bottom: 0; }
}
.sh-cta { margin-top: 20px; }
/* the two inline text links (lede, ledger hint) are real targets: an inline
   box is only the glyph height (17-21px), under the 22px floor eyeball.py
   refuses. Padding grows the box; the negative margin keeps the line exactly
   where it was. A hot link reads as one — ember-ink is ink-grade (10.9:1). */
.sh-page .lede a, .sh-hint a {
  display: inline-block; padding: 4px 2px; margin: -4px -2px;
  color: var(--ember-ink); text-decoration: underline; text-underline-offset: 3px;
}
.sh-page .lede a:hover, .sh-hint a:hover { color: var(--ember-core); }

/* ── the section tabs (rendered by shop.js) ──────────────────────────────── */
.sh-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.stab {
  min-height: 36px; padding: 9px 18px; cursor: pointer;
  border: 1px solid var(--line-up); border-radius: var(--r-pill);
  background: rgba(12,9,10,.62); color: var(--t-sec);
  font: 600 11px/1 var(--data); letter-spacing: .14em; text-transform: uppercase;
  transition: color var(--quick), border-color var(--quick), background var(--quick);
}
.stab:hover { color: var(--t-hi); border-color: var(--line-hot); }
.stab.active {
  color: #fff; border-color: rgba(255,198,77,.55);
  background: linear-gradient(180deg, var(--ember), var(--ember-deep));
  box-shadow: var(--glow-2);
}
.stab-points { margin-left: auto; }
@media (max-width: 640px) { .stab-points { margin-left: 0; } }

/* ── featured and limited ────────────────────────────────────────────────── */
.sh-highlight {
  border: 1px solid var(--line-up); border-radius: var(--r);
  padding: 18px 18px 20px;
  background: linear-gradient(180deg, rgba(255,176,32,.05), rgba(0,0,0,0)), rgba(8,6,7,.6);
}
.sh-highlight .sec-h { margin-bottom: 8px; }
.sh-blurb { margin: 0 0 16px; color: var(--t-sec); font-size: 13px; line-height: 1.5; max-width: 74ch; }

/* ── toolbar (static markup; never rebuilt) ──────────────────────────────── */
.sh-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.sh-search { flex: 1 1 220px; min-width: 0; width: auto; height: 44px; }
.sh-sort { width: auto; min-width: 178px; height: 44px;
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px; }
.sh-toolbar .chip { min-height: 30px; }
.sh-count { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-dim); }

/* chips: shop.js renders the live page's `.active` state; the aria-pressed
   fill below matches dominion's own pressed vocabulary so both signals agree */
.sh-chips { margin: 0 0 18px; }
.sh-page .chip.active { color: var(--void); background: var(--blown); border-color: var(--blown); font-weight: 700; }
.sh-page .chip { border-radius: var(--r-pill); }

/* ── the catalogue grid ──────────────────────────────────────────────────── */
.sh-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sh-grid-highlight { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sh-groups .sh-group { margin: 0 0 28px; }
.sh-group-head {
  margin: 0 0 12px; font: 700 15px/1.2 var(--display);
  letter-spacing: .04em; text-transform: uppercase; color: var(--t-body);
}

.sh-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(21,15,16,.94), rgba(8,6,7,.97));
  box-shadow: var(--lit-edge), var(--crush);
  transition: border-color var(--quick), transform var(--quick);
}
.sh-card:hover { border-color: var(--line-hot); transform: translateY(-2px); }
.sh-card.sh-hi { border-color: rgba(255,198,77,.34); }
.sh-card.sh-hi:hover { border-color: rgba(255,198,77,.6); }
.sh-card.is-limited { box-shadow: var(--lit-edge), 0 12px 30px -18px rgba(232,144,26,.55); }

.sh-visual {
  position: relative; aspect-ratio: 5 / 4; cursor: pointer; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(232,144,26,.09) 0%, rgba(4,2,7,.92) 72%);
}
.sh-visual:focus-visible { outline: 2px solid var(--ember-core); outline-offset: -2px; }
.sh-shot { width: 100%; height: 100%; object-fit: cover; }
.sh-swatches {
  display: flex; width: 78%; height: 40%; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--line-up);
}
.sh-swatches i { flex: 1; }

.sh-badge-row {
  position: absolute; top: 10px; left: 10px; right: 52px;
  display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none;
}
.sh-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  border: 1px solid var(--line-up); border-radius: var(--r-pill);
  background: rgba(4,2,7,.78); color: var(--t-sec);
  font: 700 9px/1 var(--data); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.sh-badge-featured { border-color: rgba(255,198,77,.55); color: var(--ember-core); }
.sh-badge-limited  { border-color: rgba(255,176,32,.45); color: var(--ember-core); }
.sh-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ember-core);
  box-shadow: 0 0 8px 1px rgba(232,144,26,.8);
  animation: sh-pulse 1.6s ease-in-out infinite;
}
/* danger is HATCHING plus the word — never a red ink */
.sh-badge-soldout  { border-color: var(--t-ter); background-image: var(--hatch); color: var(--t-hi); }
.sh-badge-stock    { border-color: rgba(255,198,77,.4); color: var(--ember-core); }
.sh-badge-category { color: var(--t-body); }
@keyframes sh-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.72); } }

.sh-owned {
  position: absolute; top: 10px; right: 10px; padding: 4px 9px;
  border: 1px solid rgba(255,198,77,.55); border-radius: var(--r-pill);
  background: rgba(4,2,7,.78); color: var(--ember-core);
  font: 700 9px/1 var(--data); letter-spacing: .12em; text-transform: uppercase;
}

.sh-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.sh-name {
  font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.18;
  letter-spacing: .02em; color: var(--t-hi); overflow-wrap: anywhere;
}
.sh-species { font: 600 9.5px/1.3 var(--data); letter-spacing: .14em; text-transform: uppercase; color: var(--t-dim); }
.sh-subtitle { color: var(--t-sec); font-size: 12.5px; line-height: 1.45; }
.sh-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.sh-price { font: 600 12px/1.3 var(--data); letter-spacing: .04em; color: var(--ember-core); white-space: nowrap; }
.sh-page .btn.owned { border-color: rgba(255,198,77,.35); color: var(--ember-ink); }

/* ── the two empty states ────────────────────────────────────────────────── */
.sh-empty { border-radius: var(--r); }
.sh-empty-h { margin: 0 0 8px; font: 700 14px/1.3 var(--data); letter-spacing: .16em; text-transform: uppercase; color: var(--t-sec); }

/* ── the points ledger ───────────────────────────────────────────────────── */
.sh-ledger { margin-top: 2px; }
.sh-sub { margin-left: auto; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--t-dim); }
.sh-hint { margin: 0; color: var(--t-sec); font-size: 13px; line-height: 1.55; }
.sh-ledger-table { min-width: 560px; }
.sh-ledger-table .sh-when { color: var(--t-dim); font-family: var(--data); font-size: 11px; white-space: nowrap; }
.sh-delta-pos { color: var(--ember-core); }
.sh-delta-neg { color: var(--t-hi); }
.sh-ledger-empty { color: var(--t-ter); text-align: center; padding: 26px var(--s4); }

/* ── the modal ───────────────────────────────────────────────────────────── */
.sh-modal {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: 20px; background: rgba(2,1,3,.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sh-modal-card {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  width: min(920px, 100%); max-height: min(640px, 92vh); overflow: hidden;
}
.sh-modal-close {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-up); background: rgba(4,2,7,.6); color: var(--t-hi);
  font-size: 18px; line-height: 1;
}
.sh-modal-close:hover { border-color: var(--line-hot); }
.sh-stage {
  position: relative; min-height: 340px;
  background: radial-gradient(ellipse at 50% 35%, rgba(232,144,26,.10) 0%, rgba(2,1,3,.95) 75%);
}
.sh-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sh-stage-spinner { position: absolute; inset: 0; display: grid; place-items: center; }
.sh-spinner {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line-up); border-top-color: var(--ember-core);
  animation: sh-spin .9s linear infinite;
}
@keyframes sh-spin { to { transform: rotate(360deg); } }
.sh-stage-note {
  position: absolute; left: 12px; right: 12px; bottom: 8px; margin: 0;
  text-align: center; pointer-events: none;
  color: var(--t-sec); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.sh-modal-body { padding: 26px 24px; overflow-y: auto; min-width: 0; }
.sh-m-name { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 6px; overflow-wrap: anywhere; }
.sh-m-sub { margin: 0 0 14px; color: var(--t-sec); font-size: 13px; line-height: 1.5; }
.sh-m-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sh-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sh-badges .sh-badge { position: static; }
.sh-m-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.sh-m-swatches i { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-up); }
.sh-m-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sh-m-note { color: var(--t-dim); font: 600 9.5px/1.5 var(--data); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 760px) {
  .sh-modal-card { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .sh-stage { min-height: 250px; }
}

/* ── the toast — 4,200 ms, .err carries the light as BORDER + GLOW, never ink */
.sh-toast {
  position: fixed; left: 50%; bottom: 64px; transform: translate(-50%, 16px);
  z-index: 140; max-width: min(480px, calc(100vw - 32px)); padding: 12px 18px;
  border: 1px solid var(--line-hot); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(21,15,16,.97), rgba(8,6,7,.98));
  color: var(--t-hi); font: 500 13px/1.4 var(--ui);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--quick), transform .25s var(--quick);
}
.sh-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sh-toast.err { border-color: var(--ember-ink); box-shadow: 0 0 26px -8px rgba(255,176,32,.55); }

/* ── quiet on request ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sh-badge-dot, .sh-spinner { animation: none; }
  .sh-card:hover { transform: none; }
  .sh-toast { transition: none; }
}